1.概述
Javascript 是Web中一种功能强大的脚本语言,常用于给网页添加各式各样的动态功能,它不需要进行编译,直接嵌入HTML页面中就可以把静态的页面转变成支持用户交互并响应事件的动态页面。
2.Javascript 的组成
ECMAScript 、DOM、BOM 共3个部分组成的。下面对这3个组成部分进行简单介绍。
(1)ECMAScript:Javascript 的核心。ECMAScript 规定了 Javascript 的编程语法和基础核心内容,是所有浏览器厂商共同遵守的一套 Javascript 语法工业标准。
(2)DOM (Document Object Model , 文档对象模型):是W3C组织推荐的处理可扩展置标语言(Extensible Markup Language,XML)的标准编程接口,通过DOM 提供的接口, 可以对页面上的各种元素进行操作(例如修改大小、位置、颜色等)。
(3)BOM(Browser Object Model ,浏览器对象模型):它提供了独立于内容、可以与浏览器窗口进行互动的对象结构。通过BOM,可以对浏览器窗口进行擦欧总(例如弹出框、控制浏览器导航跳转等)。
3.Javascript 代码引入方式
行内式、内嵌式和外链式,下面分别进行介绍:
(1)行内式:
单行或少量的 Javascript 代码写在HTML标签的事件属性中。下面通过代码演示:行内式引入Javascript 代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>刘某人...的行内式引入JS网站</title>
</head>
<body>
<input type="button" value="点击" onclick="alert('刘某人...最帅')" />
</body>
</html>
结果如图所示:
上述代码中,第8行代码的 onclick 属性值就是Javascript 代码。alert(“行内式”)的作用就是当单击结果图中的 “ 点我 ” 按钮时,会自动弹出一个对话框。
实际开发当中,使用行内式需要注意以下4点:
① 注意单引号和双引号的使用。在HTML 中推荐使用双引号,而Javascript 推荐使用单引号
② 行内式可读性较差,尤其是在HTML 中编写大量 Javascript 代码时,不便于阅读。
③ 在遇到多层引号嵌套的情况时,非常容易混淆,导致代码出错。
④ 行内式只有在临时测试或者特殊情况下才使用,一般情况不推荐使用行内式。
(2)内嵌式:
在HTML文档中,可以通过<script>标签及其相关属性引入 Javascript 代码。当浏览器读取到<script>标签时,表示<script>标签中包含的是 Javascript 脚本。
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>刘某人...内嵌式引入JS</title>
<script type="text/javascript">
alert('内嵌式');
</script>
</head>
<body>
</body>
</html>
结果如图:
在上述代码中,第7行代码是JavaScript 代码,末尾的分号 “ ;” 表示该语句结束,后面可以编写下一条 JavaScript 语句。
(3)外链式:
外链式适合JavaScript 代码量比较多的情况。
外链式的<script>标签内不可以编写JavaScript 代码。
在HTML 文件中使用外链式引入JS 文件的方式如下:
<script type="text/javascript" src="JS文件路径"></script>
接下来先创建一个名叫jsDemo 的JS文件,代码如下:
alert('外链式')
然后创建一个HTML文件,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>刘某人...</title>
<script type="text/javascript" src="jsDemo.js"></script>
</head>
<body>
</body>
</html>
第6行代码通过外链式引入了 jsDemo.js 文件。
运行结果如图:
在实际开发中,如果页面中需要编写的JavaScript 代码很少,可以使用内嵌式;如果JavaScript 代码很多,通常使用外链式,使用外链式可以使HTML代码更见整洁。