1.JS简介及引入方式-JS基础

见贤思齊

发布于 2020-10-29 12:57:40

9K0

发布于 2020-10-29 12:57:40

一、JavaScript是什么?

JS，全称JavaScript，是一种嵌入到HTML页面中的编程语言，由浏览器一边解释一边执行。前端最核心的3个技术：HTML、CSS、JavaScript，HTML控制网页的结构，CSS控制网页的外观，JavaScript控制网页的行为。单纯只有HTML、CSS的页面一般只供用户浏览，而JS的出现使得用户可以与页面进行交互（如：各种鼠标效果），实现更多华丽的效果。

二、JavaScript引入方式

1.外部JavaScript

最理想的引入方式。 在实际开发中，为了提升网站的性能和可维护性，通产都是使用外部JavaScript。

（1）语法格式

<script scr="js文件路径"></script>

① 说明

使用script标签引入外部JavaScript文件，且只需要src属性。

Ⅰ.script标签位置

在之前我们引入外部CSS文件时，只能在head标签内引入。但对于JavaScript，引入外部JavaScript文件时，不仅可以在head标签内引入还可以在body标签内引入。此外，引入外部CSS文件使用的是link标签，引入外部JavaScript文件使用的是script。

2.内部JavaScript

内部JavaScript就是将HTML代码和JavaScript代码放在同一个文件中。其中，JavaScript代码写在<script></script>标签内。

（1）语法格式

语法1: 写在head标签内
<head>
    <script>...</script>
</head>

语法2: 写在body标签内
<body>
    <script type="text/javascript">...</script>
</body>

① 说明

可以看到，上面两种语法略有不同，在语法2中我加上了type="text/javascript"，其实这是旧写法，一般情况下，简写形式比较多。

3.元素属性JavaScript

元素属性JavaScript就是在元素的事件属性中直接编写JS或调用函数。

（1）在元素事件中编写JS

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>js基础</title>
    </head>
    <body>
        <input type="button" name="btn1" id="" value="按钮" onclick="alert('我对你又何止是执迷不悟,所有的纪念日记得清楚.')" />
    </body>
</html>

在元素事件中编写JS.png

（2）在元素事件中调用函数

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>js基础</title>
        <script type="text/javascript">
            function alertMessage()
            {
                alert("曾经拥有的，不要忘记；已经得到的，更要珍惜；属于自己的，不能放弃；已经失去的，留作回忆。");
            }
        </script>
    </head>
    <body>
        <input type="button" name="btn1" id="" value="按钮" onclick="alertMessage()" />
    </body>
</html>