1.1.1JavaScript概述
JavaScript是Web开发领域中的一种功能强大的编程语言,主要用于开发交互式的网页。我们在计算机、手机等设备上浏览的网页,其多数交互逻辑都可以通过JavaScript实现。
HTML、CSS和JavaScript的区别
HTML:结构 决定网页的结构和内容,相当于人的身体
CSS: 样式 决定网页呈现给用户的模样,相当于人的衣服、妆容
JavaScript:行为 实现业务逻辑和页面控制,相当于人的各种动作
1.1.2 JavaScript的组成
JavaScript是由ECMAScript、DOM、BOM这3部分组成的。
ECMAScript:规定了JavaScript的编程语法和基础核心内容,是所有浏览器厂商共同遵守的一套JavaScript语法工业标准。
DOM:文档对象模型,是W3C组织制定的用于处理HTML文档和XML文档的编程接口,它提供了对文档的结构化表述,并定义了一种方式使程序可以对该结构进行访问,从而改变文档的结构、样式和内容。
BOM:浏览器对象模型,是一套编程接口,用于对浏览器进行操作,如刷新页面、弹出警告框、控制页面跳转等
1.2.1 JavaScript初体验
JavaScript代码严格区分大小写。
1.3.2 JavaScript代码引入方式
JavaScript 代码有3种引入方式:行内式 嵌入式 外链式
行内式:行内式是将JavaScript代码作为HTML标签的属性值使用。
<a href="javascript:alert('Hello');">test</a>
行内式的缺点如下: 可读性较差,尤其是在HTML中编写大量JavaScript代码时,不方便阅读。 在遇到多层引号嵌套的情况时,引号非常容易混淆,导致代码出错。
嵌入式:也称为内嵌式,使用<script>标签包裹JavaScript代码,直接编写到HTML文件中, 通常将其放到<head>标签或<body>标签中。
<script> JavaScript代码 </script>
<script>标签的type属性用于告知浏览器脚本类型, HTML5中该属性的默认值为“text/javascript”,因此在使用HTML5时可以省略type属性。
外链式:或外部式,是将JavaScript代码写在一个单独的文件中,一般使用“.js”作为文件的扩展名,在HTML页面中使用<script>标签的src属性引入“.js”文件。
<script src="test.js"></script>
外链式适合JavaScript代码量比较多的情况。
外链式相比嵌入式,具有以下3点优势: 外链式存在于独立文件中,有利于修改和维护,而嵌入式会导致HTML与JavaScript代码混合在一起。 外链式可以利用浏览器缓存提高速度。 外链式有利于HTML页面代码结构化,把大段的JavaScript代码分离到HTML页面之外,既美观,也方便文件级别的代码复用
1.3.3 常用输入输出语句
async用于异步加载,即先下载文件,不阻塞其他代码执行,下载完成后再执行, 示例代码如下。
<script src="file.js" async></script>
defer用于延后执行,即先下载文件,直到网页加载完成后再执行, 示例代码如下。
<script src="file.js" defer></script>
document.write()的输出内容中如果含有HTML标签,会被浏览器解析。
document.write('我是document.write()语句!');
console.log()的输出结果需要在浏览器的控制台中查看。
document.write('我是document.write()语句!');
在Chrome浏览器中按F12键(或在网页空白区域右击,在弹出的菜单中选择“检查”)启动开发者工具。 切换到“Console”(控制台)面板,即可看到控制台的输出结果。
利用prompt()语句可以实现在页面中弹出一个带有提示信息的输入框。
prompt('请输入姓名:');
若输出的内容中包含JavaScript结束标签,需要使用“\”对结束标签的“/”进行转义,即“<\/script>”。
document.write('<script>alert(123);<\/script>');
1.3.4 JavaScript注释
JavaScript中注释的分类如下: 单行注释:以“//”开始,到该行结束之前的内容都是注释。 多行注释:以“/*”开始,以“*/”结束。多行注释中可以嵌套单行注释,但不能再嵌套多行注释。