使用javascript

1. 内联js

~ [script标签我们可以放在head里,也可以放在html标签内的其他地方,例如放在body后面](#script标签我们可以放在head里,也可以放在html标签内的其他地方,例如放在body后面)

外部JS
javascript的执行顺序

在概述里,我们说过javascript是用来让用户与HMTL界面进行交互.为了让js在html中使用,我们可以通过以下三种方式来使用js.

1. 内联js

内联js和内联css类似,它们都会被写入到html的特定属性中.

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button onclick="alert('Hello World')">点击</button>
</body>
</html>

以上示例中,我们给html的button元素的onclick属性,增加了一个js弹框的行为.当我们点击按钮的时候,就会在浏览器中出现一个弹框.

优点:
缺点:
1. js代码和html代码高度耦合,不利于后期的维护,
2. 难以编写比较复杂的js功能代码

2. 内嵌js

在html文件里,将JS代码放置到script标签之内,

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        alert("Hello javascript");
    </script>
</head>
<body>

</body>
</html>

以上示例,会在页面打开的时候,直接执行script标签内的代码.

script标签我们可以放在head里,也可以放在html标签内的其他地方,例如放在body后面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
<script>
    alert("Hello javascript");
</script>
</html>

原因: 由于用于打开页面的时候,首先需要看到的是页面内容,而不是进行交互.因此让页面快速地呈现在用户面前是最重要的.而由于js代码的加载相对耗时,会导致页面加载的延迟.为了避免这种情况,我们可以等所有HTML标签以及CSS内容全部加载完成之后,再去加载js代码.这时,代码放在body之后是比较好的.

外部JS

有时候,会出现以下两种情况

我们编写的JS功能代码,需要在其他html文件中使用
我们编写JS代码,过多.影响了html文件的简洁性

为了解决以上问题,我们可以将script标签内的代码,写到到js文件中,然后再通过script标签一如

script.js

alert("Hello Script");

在html文件中导入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
<script src="script.js"></script>
</html>

javascript的执行顺序

javascript程序默认是以从上往下的方式执行的.如果有多个script标签,则先执行之前的script标签的内容,然后再执行之后的script标签的内容

示例:

<script>
    alert(1);
    alert(2);
</script>
<script>
    alert(3);
    alert(4);
</script>

以上代码,先弹出1,2 然后弹出3,4

但是如果出现以下情况就需要注意了

在script标签内出现错误,如下

<script>
 alert(1);
 alert(2);
 alert(A);
 alert(5);
</script>
<script>
 alert(3);
 alert(4);
</script>

在上面的例子中,alert(A)会在由于A不存在,所以程序中会出现错误.程序最终的执行效果是1,2 和3,4

结论: 当在一个script标签中出现错误的时候,它会结束当前的script标签,继续执行下一个script标签的内容

在引入js文件的标签里使用js 示例 ```html <!DOCTYPE html> Document

</body>

</html>

``` 以上示例中,在script标签内的js代码是不会被运行的

02.使用javascript