## 2. JavaScript发展历史
```js
早期浏览器的发展
1990年年底-万维网—此时的网页只能通过操作系统的终端查看
1994年—NetScape(网景公司)在第一台浏览器的基础上研发了商用浏览器—此时这个商用浏览器出现的目的是为了解决表单提交
Js的诞生
1995年 网景公司找了一个程序要 布兰登.爱奇 这个程序员借鉴了其他的脚本程序 用了10天 研发出了一个专门解决表单提交的脚本语言 这个语言叫liveScript 后改名为JavaScript
浏览器战争
在当时JavaScript很火 微软公司的在IE3的浏览器上也研发了一个jsscript 后来由于竞争 市面上出现很多JavaScript语言 对于程序员来说 编程很困难
ECMA这个机构就开始统一标准 从各个公司找来一些程序员 以网景公司的JavaScript为基础 制定标准 这个标准叫ECMAScript
ECMAScript1.0 ECMAScript5.0 ECMAScript6.0
ECMAScript和JavaScript的关系是什么?
ECMAScript 是js的语法标准
JavaScript 是ECMASCript标准的实现
```
## 3. JavaScript介绍
### 3.1 网站组成
```js
HTML 超文本标记语言 主要用户页面结构
css 层叠样式表 用于结构的布局 样式
JavaScript 脚本语法----用于网站的交互
```
### 3.2 什么是JavaScript
==基于对象和事件驱动的解释性脚本语言==
- 基于对象:JavaScript 是一种基于对象的语言,这意味着它能运用自己已经创建的对象,因此,许多功能可以来自脚本环境中对象的方法与脚本的相互作用。
- 事件驱动:JavaScript 可以直接对用户或者客户输入做出响应,无须经过 web 服务器,它对用户的响应,以事件驱动的方式进行。
- 解释性:
- 解释性:可以直接是被语言 读取一行执行一行
- 编译性:高级脚本语言 c和c++就是高级脚本语言 先编译成计算机识别的编码 然后再执行
### 3.3 ==JavaScript的特性==
```js
基于对象
事件驱动
解释性(js代码直接被浏览器解析)
跨平台
```
### 3.4 ==JavaScript的组成==
```js
ECMASCript:js的语法标准 常用的对象
DOM:Document Object Model 文档对象模型
BOM:Brower Object Model 浏览器对象模型
```
## 4.代码初识
### 4.1 JS引入方式
- 行内引入
```html
<body>
<!--
行内引入
事件类型="要做的事情"
alert(要弹的内容) 用于网页弹窗
缺点:结构不分离 不方便后期维护
-->
<button οnclick="alert(123)">按钮1</button>
</body>
```
- 内部引入
```html
<body>
<script>
alert(1)
</script>
<!--
内部引入
js代码直接写在script标签中 script标签可以放在任意的位置
建议:一般放再head或者body的末尾 最好放在body的末尾
缺点:结构不分离
-->
<button>按钮1</button>
<script>
alert(5)
</script>
</body>
```
- 外部引入
```html
<body>
<!--
外部引入
通过script标签的src属性引入外部js文件
注意:用于引入外部js文件的script标签中不要再写其他代码
-->
<script src="./outer.js"></script>
<script>
alert(11)
</script>
</body>
```
### 4.2语法规则与注释
- 语法规则
```js
js中严格区分大小写 建议使用驼峰命名 ClassId classId
每行语句后加分号;
```
- 注释
```js
单行注释 // 注释内容 ctrl+/
多行注释 /* 多行注释内容 */ ctrl+shift+/
不是所有人的快捷方式都是这个
设置-键盘快捷键方式-找块注释和行注释
```
### 4.3 JavaScript的调试语句
- 调试:在程序开发过程中检查代码的一种方法 所有的调试语句后续上线之后必须删除掉
#### 4.3.1 alert
- 语法:alert(提示信息)
- 作用:再页面弹出警告框 提示框
- 注意:这是一个阻塞性弹窗,一次只能弹一个提示信息
```js
//js脚本 js中的文字信息需要加引号(单引号或者双引号)
alert("今天周二");
```
#### 4.3.2 console
- 语法:console.log(输出信息)
- 作用:再控制台打印输出信息,多个输出之间用逗号隔开
```js
<script>
// console.log(输出信息)
console.log("今天周二", 123);
console.log(456);
</script>
```
#### 4.3.3 打断点
```js
<script>
var x = 10;
var y = 20;
/*
控制台-sources-找到运行文件-在行号前面点击一下 出现蓝色标
*/
</script>
```
### 4.4 变量
- 变量:存储数据的容器 变量名给存储区域起个名字
- 声明变量 var 变量名 = 值
- 基本用法
```js
//基础用法
//1.声明变量 什么情况下会输出undefined? 只声明变量没有赋值结果是undefined
var a;
console.log(a);//undefined
// 2.声明变量并赋值
var b = 10;//读作 将等号右边的值赋值给等号左边的b
console.log(b);//10
// 3.先声明后赋值
var x;
x = 30;
console.log(x);//30
// 4.同时声明多个变量
var x1 = 10, x2 = 20; //相当于var x1 = 10; var x2 = 20;
console.log(x1, x2);
// 5.连等的写法
var x3 = x4 = "周二";
console.log(x3, x4);
```
- ==特殊用法 不建议大家使用==
```js
// 特殊用法 不建议大家用的写法
// 注意1:xxx is not defined 没有定义变量但是你却使用了
console.log(y);// 报错 y is not defined
// 注意2:定义变量可以不用带var 不带var声明的是全局变量 不建议使用这种写法
y1 = 10;
console.log(y1);
```
- 变量的命名规则
```js
变量的命名规则
1.以数字 字母 下划线 $组成 但是不能以数字开头
2.见名知意 遵循驼峰命名 ClassId classIdStyle
3.不要使用关键字和保留字 例如 if for break int等等
4.变量重名会被覆盖
```