什么是JavaScript？
- JavaScript简称JS，是前端开发的一门脚本语言(解释型语言)
- 解释型语言：程序执行之前，不需要编译就可以直接运行, 运行时再边解析边执行的语言
- 编译型语言：程序执行之前，需要一个专门的编译过程，把程序编译成为机器语言的文件，比如exe文件
- 解释型语言：程序执行之前，不需要编译就可以直接运行, 运行时再边解析边执行的语言
User Interface 用户界面，我们所看到的浏览器
Browser engine 浏览器引擎，用来查询和操作渲染引擎
Rendering engine 用来显示请求的内容，负责解析HTML、CSS，并把解析的内容显示出来
Networking 网络，负责发送网络请求
JavaScript Interpreter(解析者) JavaScript解析器，负责执行JavaScript的代码
UI Backend UI后端，用来绘制类似组合框和弹出窗口
Data Persistence(持久化) 数据持久化，数据存储 cookie、HTML5中的sessionStorage
JavaScript作用
- HTML 提供网页上显示的内容（结构）
- CSS 美化网页（样式）
- JavaScript 控制网页行为（行为）
JavaScript发展史
- JavaScript起源于Netscape公司的LiveScript语言
- 1994年网景公司发布历史上第一个比较成熟的浏览器(Navigator 0.9), 但是只能浏览不能交互
- 1995年为了解决表单有效性验证就要与服务器进行多次地往返交互问题，网景公司录用Brendan Eich(布兰登·艾奇)，他在 10 天内开发出 LiveScript 语言
- 在 Netscape Navigator 2.0 即将正式发布前，Netscape 将LiveScript 更名为 JavaScript， 目的是为了蹭Java的热度
- 所以Java和 JavaScript之间的关系就像老婆和老婆饼一样
JavaScript组成
- ECMAScript：JavaScript的语法标准
- ECMA是European Computer Manufacturers Association的缩写，即欧洲计算机制造商协会
- ECMAScript是ECMA制定的脚本语言的标准, 规定了一种脚本语言实现应该包含的基本内容
- JavaScript是脚本语言的一种,所以JavaScript也必须遵守ECMAScript标准,包含ECMAScript标准中规定的基本内容
- DOM(Document Object Model)：JavaScript操作网页上的元素(标签)的API
- DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
- BOM(Browser Object Model)：JavaScript操作浏览器的部分功能的API
-
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
-
JavaScript书写格式
- 和CSS书写格式一样, JavaScript也有三种书写格式, 分别是"行内式"、"内嵌式"、"外链式"
- 和CSS书写格式一样, JavaScript三种书写格式中也推荐大家使用"外链式", 遵守结构、样式、行为分离
- 行内式格式(不推荐)
<div onclick="alert('hello world');">我是div</div>
- 内嵌式格式
</body>
... ...
<script type="text/javascript">
alert("hello world");
</script>
</body>
- 内嵌式注意点
- 通常将js代码放在body的最后, 因为
HTML是从上至下加载, 而js代码通常是给标签添加交互(操作元素), 所以需要先加载HTML, 否则如果执行js代码时HTML还未被加载, 那么js代码将无法添加交互(操作元素); - HTML页面中出现<script>标签后，就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续, 所以如果把js代码写在head中, 那么js代码没有执行完毕之前后续网页无法查看
- 如果不愿意把js代码放在body的最后, 也可以放在head标签中, 但是为了保证执行js代码时HTML一定已经被加载了, 那么需要添加一些额外代码.(不推荐)
- 通常将js代码放在body的最后, 因为
<head>
<script>
window.onload = function () { // 必须添加这句
alert("hello world");
}
</script>
</head>
- 外链式格式
<script type="text/javascript" src="01-js书写格式.js"></script>
- 外链式注意点
- 外链式的script代码块中不能编写js代码, 即便写了也不会执行
<script type="text/javascript" src="01-js书写格式.js">
alert("hello world"); // 不会被执行
</script>
- 由于
每次加载外链式的js文件都会发送一次请求, 这样非常消耗性能, 所以在企业开发中推荐将多个JS文件合成为一个JS文件,以提升网页的性能和加载速度
JS中的常见输出方式
- 在浏览器弹窗中显示内容
alert("hello world");
prompt("请输入内容：");
confirm("你好吗?");
- 在页面中显示内容
document.write("hello world2");
- 在控制台中显示内容
console.log("hello world3");
console.error("错误信息");
console.warn("警告信息");
- 注意点：
- 和C语言一样, JS中严格区分大小写
alert("hello world"); // 正确
Alert("hello world"); // 错误
- 和C语言一样, 每一条JS语句以分号(;)结尾
- 如果不写分号，浏览器会自动添加，但是会消耗一些系统资源
- 并且有些时候浏览器会加错分号，所以在开发中分号必须写
- JS中会忽略多个空格和换行
alert
(
"hello world"
);
