03-07 JavaScript

JavaScript

今日目标

掌握 JavaScript 的基础语法
掌握 JavaScript 的常用对象（Array、String）
能根据需求灵活运用定时器及通过 js 代码进行页面跳转
能通过DOM 对象对标签进行常规操作
掌握常用的事件
能独立完成表单校验案例

2，JavaScript引入方式

JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种：

内部脚本：将 JS代码定义在HTML页面中
外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中

2.1 内部脚本

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间

代码如下：

alert(数据) 是 JavaScript 的一个方法，作用是将参数数据以浏览器弹框的形式输出出来。










xxxxxxxxxx





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    alert("hello js1");
</script>
</body>
</html>

效果如下：

从结果可以看到 js 代码已经执行了。

==提示：==

在 HTML 文档中可以在任意地方，放置任意数量的"script"标签。如下图










xxxxxxxxxx





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert("hello js1");
    </script>
</head>
<body>
<script>
    alert("hello js1");
</script>
</body>
</html>
<script>
    alert("hello js1");
</script>

一般把脚本置于元素的底部，可改善显示速度
因为浏览器在加载页面的时候会从上往下进行加载并解析。我们应该让用户看到页面内容，然后再展示动态的效果。

2.2 外部脚本

第一步：定义外部 js 文件。如定义名为 demo.js的文件

项目结构如下：

demo.js 文件内容如下：










xxxxxxxxxx





alert("hello js");

第二步：在页面中引入外部的js文件

在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径。










xxxxxxxxxx





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../js/demo.js"></script>
</body>
</html>

==注意：==
外部脚本不能包含 <script> 标签
在js文件中直接写 js 代码即可，不要在 js文件中写 script 标签
<script> 标签不能自闭合
在页面中引入外部js文件时，不能写成 <script src="../js/demo.js" />。