Justin-刘清政的博客

python/前端/8-JavaScript基础

2020-11-03

1、JavaScript是什么

JavaScript(下文我们会用简称JS来代替)是脚本编程语言,JS语言开发的文件是以.js为后缀,通过在html文件中引入该js文件来控制html代码的交互功能以及前台数据处理的业务逻辑(js语言代码也可以直接写在html文件中),采用的ECMAScript语法,属于编程语言。

ECMAScript目前普遍使用的存在ES5与ES6两个版本,我们也会基于这两个版本来介绍JS这么应用的学习

2、JavaScript介绍

2-1 ECMAScript和JavaScript的关系

1996年11月,JavaScript的创造者–Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这门语言能够成为国际标准。次年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript,这个版本就是1.0版。

该标准一开始就是针对JavaScript语言制定的,但是没有称其为JavaScript,有两个方面的原因。一是商标,JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA,而不是Netscape,这样有利于保证这门语言的开发性和中立性。

因此ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。

2-2 ECMAScript的历史

年份 名称 描述
1997 ECMAScript 1 第一个版本
1998 ECMAScript 2 版本变更
1999 ECMAScript 3 添加正则表达式添加try/catch
ECMAScript 4 没有发布
2009 ECMAScript 5 添加”strict mode”严格模式添加JSON支持
2011 ECMAScript 5.1 版本变更
2015 ECMAScript 6 添加类和模块
2016 ECMAScript 7 增加指数运算符(**)增加Array.prototype.includes

注:ES6就是指ECMAScript 6。

尽管 ECMAScript 是一个重要的标准,但它并不是 JavaScript 唯一的部分,当然,也不是唯一被标准化的部分。实际上,一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:

  • 核心(ECMAScript)
  • 文档对象模型(DOM) Document object model (整合js,css,html)
  • 浏览器对象模型(BOM) Broswer object model(整合js和浏览器)

简单地说,ECMAScript 描述了JavaScript语言本身的相关内容。

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

JavaScript 很容易学习。

3、JS代码书写位置

JS属于脚本(可以以代码片段的方式内嵌到其他语言中)编程语言,可以内嵌到html代码中,但是可以根据实际情况书写在不同的位置,放在不同位置有不同的专业叫法,可以分为行间式、内联式和外联式三种。

3-1 行间式

JS代码书写在标签的事件全局属性中,采用的是JS编程语言的语法

1
2
3
<!-- 关键代码 -->
<!-- 给div标签添加点击事件的交互逻辑:弹出文本提示框 -->
<div onclick="alert('点击我完成页面交互')">点我</div>

3-2 内联式

JS代码书写在script标签中,script标签可以出现在页面中的任意位置,建议放在body标签的最后(html代码是自上而下进行解析加载,放在body标签的最下方,会保证页面所有标签都加载完毕,html再去加载js文件,那么js脚步文件就会更好的控制页面标签的人机交互了),采用的是JS编程语言的语法

1
2
3
4
5
6
7
8
9
10
<!-- 关键代码 -->
<!-- 页面被加载打开时,就会触发事件的交互逻辑:弹出文本提示框 -->
<body>
<!-- body标签中的所有子标签位置 -->

<!-- script标签出现在body标签的最下方 -->
<script>
alert('该页面被加载!')
</script>
</body>

3-3 外联式

JS代码书在外部js文件中,在html页面中用script标签引入js文件(建议在body标签最下方引入,理由同上)

  • js文件夹下的my.js
1
alert('外联式js文件弹出框')
  • 根目录下的first.html
1
2
3
4
5
6
7
8
9
10
<!-- 关键代码 -->
<!-- 页面被加载打开时,就会触发事件的交互逻辑:弹出文本提示框 -->
<body>
<!-- body标签中的所有子标签位置 -->

<!-- script标签出现在body标签的最下方 -->
<script src="js/my.js">
/* 不要在此写JS代码,原因是用来引入外部js文件的script标签,标签内部书写的JS代码不在起作用 */
</script>
</body>
  • 根目录下的second.html
1
2
3
4
5
6
7
8
9
10
<!-- 关键代码 -->
<!-- 页面被加载打开时,就会触发事件的交互逻辑:弹出文本提示框 -->
<body>
<!-- body标签中的所有子标签位置 -->

<!-- script标签出现在body标签的最下方 -->
<script src="js/my.js">
/* 不要在此写JS代码,原因是用来引入外部js文件的script标签,标签内部书写的JS代码不在起作用 */
</script>
</body>

4 JavaScript语言规范

4-1 注释(注释是代码之母)

1
2
3
4
5
6
// 这是单行注释

/*
这是
多行注释
*/

4-2 结束符

JavaScript中的语句要以分号(;)为结束符。

5、总结

行间式控制交互最直接,但是交互逻辑多了直接导致页面可读性变差,且交互逻辑相同的标签样式也需要各自设置,复用性差,不建议使用;

内联式可以同时为多个标签提供交互逻辑(课程后面会详细介绍),学习阶段代码量不大的情况下,也不需要分文件处理的,这时候建议使用内联式;

外联式是分文件管理不同的页面存在的相同与不同的数据处理的业务逻辑与人机交互,可以极大提高开发效率,项目开发时一定要采用外联式来处理JS代码。

通过上面的介绍,大家很清楚JS是一门脚本编程语言,那么我们一定先要了解一下这门编程语言的基础语法,才可以慢慢的展开学。

使用支付宝打赏
使用微信打赏

点击上方按钮,请我喝杯咖啡!

扫描二维码,分享此文章