1 JS基本概念
1.1 JS简介
-
前端三层
- HTML —— 结构层从语义的角度描述页面的结构 - CSS —— 样式层从装饰的角度描述页面的样式 - JavaScript —— 行为层从交互的角度描述页面的行为 -
JS的组成：ECMAScript + BOM + DOM
-
JavaScript 作用：数据验证、读写HTML元素、与浏览器窗口及内容交互、网页特效、WEB游戏制作、基于Node.js 技术进行服务器端编程
-
ECMAScript 版本
ECMAScript 1 (1997年06月:发布首版) ECMAScript 2 (1998年06月:版本变更) ECMAScript 3 (1999年12月:添加正则表达式、try/catch) ECMAScript 4 (放弃发布) ECMAScript 5 (2009年12月:添加严格模式、JSON支持) ECMAScript 5.1 (2011年06月:版本变更) ECMAScript 6 (2015年06月:添加类和模块) ES2015 ECMAScript 7 (2016年06月:增加指数运算符) ES2016 ECMAScript 8 (2017年06月:增新功能) ES2017 ECMAScript 9 (2018年06月:增新特性) ES2018 ECMAScript 10 (2019年06月:增新特性) ES2019 ECMAScript 11 (草案中) ES2020
1.2 JS引用
<div οnclick="alert('hello world')">点我</div> <!--内部引用-->
<body>
...... <!--html代码-->
<script>alert("hello world");</script> <!--内嵌式-->
</body>
<head>
<script src="xxxx.js"></script> <!--外联式-->
</head>
[注]
- 老版本的 script 标签中会添加 type="text/javascript" 属性，HTML5中已不必添加这一属性。
<noscript>元素：用于给早期不支持 JavaScript的浏览器作替换提示文本；若浏览器支持脚本，则会忽略注释，不会显示出 noscript 元素中的文本。
1.2.1 script元素属性
- src：表示包含要执行代码的外部文件。
- type：表示编写代码使用的脚本语言的内容类型（MIME类型），默认值为text/javascript，非必需。（已替代废弃的 language 属性）
- charset：表示通过 src 属性指定的代码的字符集。
- async：表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或 等待加载其他脚本。只对外部脚本文件有效。
- defer：表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
延迟脚本与异步脚本
- 使用defer属性用于表明脚本在执行时不会影响页面的构造，脚本会被延迟到整个页面都解析完毕后再运行，即在遇到</html>标签后再执行。
- 使用async属性是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容
1.3 标识符
- 第一个字符必须是字母、下划线（_）、美元符号（$），不能以数字开头
- 其他字符可以是字母、下划线、美元符号或数字
- 不能使用JS中的关键字和保留字
- 区分大小写
- 遵循驼峰原则
- 建议语义化命名
//正确
var abc;
var _abc;
var $abc;
var _abc1$;
function $$abc_(){}
//错误
var 1abc;
var *abc;
function #abc(){}
1.4 注释
// 单行注释
/* 多行块级注释 */
1.5 关键字和保留字
// 关键字
break do instanceof typeof default
case else new var if
catch finally return void throw
continue for switch while delete
in function this with try
debugger*
// 保留字（ver5，*为非严格模式下）
class* enum* extends* super* const* export* import*
abstract short debugger synchronized let
boolean interface static implements static
byte long protected int implements
char final native volatile protected
float package throws double yield
goto private transient public private
package public interface
1.6 输出方式
//页面直接输出
document.write("sunck is a nice man");
//控制台输出
console.log("sunck is a good man");
//提示框输出
alert("sunck is a handsome man");
//直接在HTML文档中输出内容
document.write();
