一、JavaScript简介
1.1网页分层
| 名称 | 描述 |
|---|---|
| 结构层 HTML | 负责搭建页面结构 |
| 样式层 CSS | 责页面的美观 |
| 为层 JavaScript | 负责页面的交互效果，提高用户体验 |
1.2 JavaScript诞生
JavaScript一种轻量级的脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态效果。JS在web浏览器端的地位，无人可以撼动；
【作用】：数据验证、读写HTML元素、前后台数据交互、网页交互效果、WEB游戏制作、桌面应用开发（electron）、基于Node.js技术服务器端开发。
Javscript，JScript，ActionScript等脚本语言都是基于ECMAScript标准实现的。
在JavaScript，JScript和ActionScript中声明变量，操作数组等语法完全一样，因为它们都是ECMAScript。但是在操作浏览器对象等方面又有各自独特的方法，这些都是各自语言的扩展。
JavaScript是由ECMAScript，DOM和BOM三者组成的。
ECMAScript是一种标准，描述了该语言的语法和基本对象。
文档对象模型（Document Object Model简称DOM），描述处理网页内容的方法和接口。
浏览器对象模型（Browser Object Model简称BOM），描述与浏览器进行交互的方法和接口。
简单来说ECMAScript不是一门语言，而是一个标准。ECMAScript是JavaScript的标准，现在我们学习的版本的ECMAScript4、5。
ECMAScript在2015年6月，发布了ECMAScript 6版本，语言的能力更强。但是，浏览器的厂商不能那么快的去追上这个标准。这些新的特性。
那么ECMAScript2015之前我们统称为ES5,在2016的版本我们统称为ES6
1.3 总结
学习：语言核心、DOM、BOM、页面特效
ECMAscript 是JavaScript语言的标准
基本语法、变量、常量、流程控制、对象……DOM 通过JavaScript操作网页元素
DOcument Object Model 文档对象模型，规定了HTML/XML文档的编程接口（API）BOM 通过API（应用程序接口）操作浏览器
Browser Object Model 浏览器对象模型，规定了操作浏览器中的对象的API
1.4 学习方法
● 要多去“品”程序，多去思考内在逻辑，读懂每一行代码！
● JS机械重复性的劳动几乎为0，基本都是创造性的劳动。HTML、CSS都是重复的劳动，margin、padding挤来挤去。
● 永远不要背程序，每一个程序都必须自己会写。
好学的点是什么：
- JavaScript是有界面效果：不像C语言，黑底白字，很枯燥的。
- JavaScript的语法来源于C和Java：有C和Java的经验同学好学很多。
- JavaScript是弱变量类型的语言，动态数据类型语言。
- JavaScript运行在宿主环境中，不关心内存，垃圾回收。
不好学的点是什么：
兼容性问题： IE8是个怪胎，很多东西都不一样，所以就要写兼容写法，不怕造轮子，多写几遍
花式写法很多，抽象：从简单入手，细细品味代码
二、JavaScript基本语法
2.1 JavaScript书写位置
这事儿吧，挺有意思，就是学习任何的语言，我们都喜欢在屏幕上直接输出一点什么，当做最简单、最基本的案例。输出什么大家随意，但是很多人都习惯输出“hello world”，世界你好。感觉自己很有情怀的样子。
<script>alert("hello world!");</script>
初学者在学习js时，一般将JS代码写在HTML结构中，书写位置在一对script标签内。标签书写位置可以是HTML结构中的任意位置。
2.2JavaScript的三种引入方式
行内引入
行内引入方式必须结合元素的事件来使用，但是内部js和外部js可以不结合事件<button οnclick="alert('点击了我')">点击我</button>内部引入
在head或body中，定义script标签，然后在script标签里面写js代码
<script>alert("这是js的内部引入");</script>
- 外部引入
定义外部js文件(.js结尾的文件)
<script type="text/javascript" src="demo.js"></script>
注意：script标签要单独使用，要么引入外部js，要么定义内部js，不要混搭使用,就算在外部引入标签内编写代码也不会起作用。
2.3文件的加载和执行方式
浏览器顺序读取到html中的script标签，就从服务端加载js文件，每载入一个文件就立刻执行并且不是异步的——会阻塞后面页面的后续内容，这意味着浏览器会按顺序串行的加载并执行js文件，且此时后续dom对象的创建渲染以及其他资源的下载都无法执行。如果引入的js文件试图操作后面才出现的dom元素，浏览器是找不到该元素的，于是报错。
所以，保险起见，我们可以将script放到最后引入。
- 默认同步加载
浏览器在解析HTML文档的时候，一旦遇到script标签就会中断当前页面的解析，去下载js，下载执行完代码之后，再继续解析后面的HTML代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>初始JavaScript</title><script>alert("我会停止页面加载……")</script></head><body><h1>我是一个大标题</h1></body></html>
如果将js代码放到头部，首页就会执行js代码，由于弹出了alert从而阻塞了页面的加载
关闭alert弹窗才会继续加载页面
- 使用异步加载
从图中我们可以看出，我们虽然编写了js代码，但并没有使文本变色，这是因为此时DOM结构还没有加载完成，要想正确的执行代码，我们可以将js代码放到文档的最后面就可以正常执行了。
如果又不想放在页面最后，而且能够正常执行JavaScript代码，我们可以给script标签添加defer属性，可以将一个外部的js脚本进行延迟执行（等待HTML的DOM树创建完成）
<script defer src="demo.js"></script>
当然，如果使用script标签的async属性或defer属性，那么：
- async：只关心js脚本的下载不断中断HTML的解析就行，只实现了下载js与解析HTML的同步（当页面继续进行解析时，脚本将被执行）
- defer：脚本将在页面完成解析时才执行
- 选择的依据：defer涉及到dom操作或对js的执行顺序有要求，async对脚本顺序无要求，只要求快速一点下载
- 如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本
推荐写法：统一放到body标签结束之前
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>初始JavaScript</title></head><body><h1>我是一个大标题</h1><script src="demo.js"></script></body></html>
2.4html/css/javascript注释
HTML的注释：
<!--HTML的注释-->
css的注释：
/*css注释*/
JS注释：多行注释、单行注释
单行注释：注释作用范围只有一行，如果换行了那么不能注释。
//这是单行注释
多行注释：
/*这是js的块级注释可以注释多行这些注释不会进行加载*/
注释快捷键：
Ctrl+/ 单行注释
Ctrl+Shift+/ 多行注释
2.3 console控制台
控制台是浏览器“检查”里面的功能，快捷键是F12，英文叫做“console”。JS程序员常用的调试程序错误的面板。程序的所有错误，都会在控制台中输出（显示），控制台是调试代码的一个利器。
作用1：可以显示错误个数，错误类型，错误的代码位置。
作用2：可以在控制台进行代码编辑，直接在控制台执行，也可以在控制台输出内容。
通过一条console.log()方法，可以在控制台输出自定义的内容。
console本身是js内置对象，内部有大量的方法和属性，其中有一个log()方法(函数)，可以帮我们在控制台输出一些对象，并且console.log()方法参数可以有多个。
console.log("这里的内容是打印在控制台的！");console.log(100-50);console.log(100*50);console.log("%c 大家好：2602138376@qq.com","color:red;font-size:30px;");
console的类型：
console.log()用于在console窗口输出信息console.dir()可以显示一个对象的所有属性和方法。console.table()会以表格的形式呈现打印的内容console.warn()在控制台输出一条警告信息console.error()在控制台输出一条错误消息console.info()在控制台输出一条通知信息console.assert()可用作于判断表达式正确
console.log的占位符：
%s 格式化字符串
%d 格式化整数
%i 格式化整数
%f 格式化浮点数
%o 可扩展的DOM节点格式化
%O 可扩展的JavaScript对象格式化
%c CSS格式字符串
console.log(‘%s + %s’, 1, 1, ‘= 2’);
console.log(“%d年%d月%d日”,2021,03,31);
2.4 document对象
document.write() 方法，用来向网页文档中（body）输出内容
alert()语句
实际上这条语句，在运行一个内置函数，运行函数就要加圆括号，不要纠结这个对象，学所有语言，都是从模仿开始，前期，不要纠结语法的机理是什么，只要模仿，做就行，你模仿了，就能实现效果，随着课程的深入，你将知道每一条语句的机理是什么。
alert("内容");
window.alert("hello world！");
alert()其实是window对象的一个方法，只不过window对象可以不写而已。
程序从上到下执行，从左到右顺序执行，任何程序都是这样的。
语句要遵循语法。
alert()作为一个函数，自定义的内容加引号，单双引号都可以，所有符号都必须是英文的（JS建议用单引号，HTML用双引号，这是不成文的规定）。
注意事项：分号不写就报错。
alert(“从前有坐上”)alert(“山上有座庙”)
如果正确换行不会报错。
alert(“从前有坐上”)
alert(“山上有座庙”)
alert(“庙里有个老和尚”)
原因：JS解析器在解读代码时，会去根据语境的结尾划分语句，如果有分号自动默认是语句的结束，会将后面的语句作为一条新语句解读。如果没有分号，解析器自由的解读代码结尾，默认为换行是一条语句的结尾，没有换行也没有分号导致报错。
在后期上传代码前需要压缩代码，压缩后会将所有代码的换行、空格都删除，此时JS代码变成一行，所以会报错。
prompt()对话框
prompt：提示的意思。
prompt语句也是一个JS内置的功能，可以传递两个参数，自定义参数内容。一般参数都加引号，两个参数之间用逗号隔开。
prompt("请输入年龄：","18");
以上两个参数不是必须，可以省略参数不写。
重点：带圆括号的都叫“函数”或“方法”，而且括号内肯定可以填写参数，至于有多少个参数（每个方法规定不一样）。
