JavaScript集训笔记1-25

JavaScript

JS简史

计算机语言：计算机语言指用于人与计算机之间通讯的语言。计算机语言是人与计算机之间传递信息的媒介。计算机系统最大特征是指令通过一种语言传达给机器。为了使电子计算机进行各种工作，就需要一套用于编写计算机程序的数字，字符和语法规范，由这些字符和语法规则组成计算机各种指令。这些便是计算机能接受的语言。

分类：第一代计算机语言：机器语言 第二代计算机语言：汇编语言 第三代计算机语言：高级语言 C，Fortran，Basic，Pascal，C++，Java，Python，C#

JavaScript发展历史：1. 1994网景公司（Netscape）发布navigator浏览器 LiveScript-JavaScript-ECMAscript。 2. 1995SUN公司将Oak语言改名Java。 3. 34岁系统程序员Brenda Eich，1995年4月网景公司使用10天时间设计JavaScript。 4. 借鉴C语言的基本语法 借鉴Java语言的数据类型和内存管理 借鉴scheme语言将函数提升到“第一等公民”（first class）的地位 借鉴self语言，使用基于原型（prototype）的继承机制

JavaScript的组成：

浏览器	内核	JS引擎
IE	Trident内核	JScript
Firefox	Gecko内核（俗称Firefox内核）	FireFox3.0及其以下：SpideMonkey FireFox3.1及其以上：TraceMonkey
Google chrome	chrome chromium内核 Webkit内核-Blink内核	V8
Safair	Webkit内核	Safari3.1及其以下：JavaScriptCore Safari4.0：SquirrelFish
Opera	Presto内核-Webkit内核-Blink内核	opera9.5及其以上：Futhark

JavaScript的组成：ECMAScript：类型，语法，语句，关键字，保留字，操作符，对象。【核心语言功能】 文档对象（DOM）：多节点结构（删除，添加，替换，修改）【操作网页内容】 浏览器对象模型（BOM）：操作，访问浏览器窗口/框架【与浏览器交互】

ECMASCRIPT: 定义了javascript的语法规范,描述了语言的基本语法和数据类型
BOM (Browser Object Model): 浏览器对象模型 有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。比如： 弹出框、浏览器跳转、获取分辨率等
DOM (Document Object Model): 文档对象模型 有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。比如： 增加个 div，减少个 div，给 div 换个位置等
总结： JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效果

JavaScript能干什么：1. 常见的网页效果【表单验证，轮播图】 2.与H5配合实现游戏 3.实现应用级别的程序 4.实现图表统计效果 5.js可以实现人工智能【面部识别】 6.后端开发，app开发，桌面端开发…

JS之hello

<script>	
alert("hello world")	
document.write("hello world")
console.log("hello world")
</script>
//可以注释

js的书写位置

JavaScript代码的书写位置：和 css一样， js也可以有多种方式书写在页面上让其生效 js也有多种方式书写，分为行内式， 内嵌式，外链式

行内式：
<div onclick="alert"('hello world')>点我</div>
<a href="javascript:alert('hello world')">点我</a>

内嵌式：
<script type=“text/javascript”>alert('我是一个弹出层')</script>
script标签可以放在head和body里面

外链式js代码只要引入了html页面，就会在页面打开的时候直接触发
新建一个.js后缀的文件，在文件内书写js代码，把写好的js文件引入html页面
外链式（推荐）：
<script src="地址"></script>
通过 script 标签的 src 属性，把写好的 js 文件引入页面
一个页面可以引入多个 js 文件

JS的注释

学习一个语言，先学习一个语言的注释，因为注释是给自己看的，也是给开发人员看的 写好一个注释，有利于阅读代码

单行注释：一般就是用来描述下面一行代码的作用 可以直接写两个 /，也可以按 ctrl + /
多行注释：一般用来写一大段话，或者注释一段代码 可以直接写 /**/然后在两个星号中间写注释 各个编辑器的快捷键不一样，vscode 是 alt + shift + a

JS的变量

变量指的是在程序中保存数据的一个容器
变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
也就是说，向内存中存储了一个数据，然后要给这个数据起一个名字，为了是以后再次找到他
语法： var 变量名 = 值

// 定义一个变量
var num;
// 给一个变量赋值
num = 100;
// 定义一个变量的同时给其赋值
var num2 = 200;
注意：
1. 一个变量名只能存储一个值
2. 当再次给一个变量赋值的时候，前面一次的值就没有了
3. 变量名称区分大小写（JS 严格区分大小写）

变量的命名规则和命名规范：

必须遵守的，不遵守就是错：

1.一个变量名称可以由 数字、字母、英文下划线（_）、美元符号（$） 组成严格区分大小写

2.不能由数字开头

3.不能是 保留字 或者 关键字

4.不要出现空格

建议遵守的（开发者默认），不遵守不会报错：

1.变量名尽量有意义（语义化）

2.遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写

3.不要使用中文

数据类型

是指存储在内存中的数据的类型 通常分为两大类基本数据类型和复杂数据类型

基本数据类型：

数值类型（number）：一切数字都是数值类型（包括二进制，十进制，十六进制等）NaN（not a number），一个非数字

字符串类型（string）：被引号包裹的所有内容（可以是单引号也可以是双引号）

布尔类型（boolean）：只有两个（true或者 false）

null类型（null）：只有一个，就是 null，表示空的意思

undefined类型（undefined）：只有一个，就是undefined，表示没有值的意思

判断数据类型:使用 typeof关键字来进行判断

第一种使用方式
var n = 100;
console.log(typeof n);

第二种使用方式
var s = 'abcdefg';
console.log(typeof(s));

数据类型转换:
数据类型之间的转换，比如数字转成字符串，字符串转成布尔，布尔转成数字等

其他数据类型转成数值:

1.Number(变量)
可以把一个变量强制转换成数值类型
可以转换小数，会保留小数
可以转换布尔值
遇到不可转换的都会返回 NaN

2.parseInt(变量)
从第一位开始检查，是数字就转换，知道一个不是数字的内容
开头就不是数字，那么直接返回 NaN
不认识小数点，只能保留整数

3.parseFloat(变量)
从第一位开始检查，是数字就转换，知道一个不是数字的内容
开头就不是数字，那么直接返回 NaN
认识一次小数点

4.除了加法以外的数学运算
运算符两边都是可运算数字才行
如果运算符任何一遍不是一个可运算数字，那么就会返回 NaN
加法不可以用

其他数据类型转成字符串:

1.变量.toString()
有一些数据类型不能使用 toString() 方法，比如 undefined 和 null

2.String(变量)
所有数据类型都可以

3.使用加法运算
在 JS 里面，+ 由两个含义
字符串拼接： 只要 + 任意一边是字符串，就会进行字符串拼接
加法运算：只有 + 两边都是数字的时候，才会进行数学运算

其他数据类型转成布尔

1.Boolean(变量)
在 js 中，只有 ''、0、null、undefined、NaN，这些是 false
其余都是 true

运算符

运算符就是在代码里面进行运算的时候使用的符号，不光只是数学运算，在 js 里面还有很多的运算方式
数学运算符：
1.+
只有符号两边都是数字的时候才会进行加法运算
只要符号任意一边是字符串类型，就会进行字符串拼接

2.-
会执行减法运算
会自动把两边都转换成数字进行运算

3.*
会执行乘法运算
会自动把两边都转换成数字进行运算

4./
会执行除法运算
会自动把两边都转换成数字进行运算

5.%
会执行取余运算
会自动把两边都转换成数字进行运算

赋值运算符：

1.=
就是把 = 右边的赋值给等号左边的变量名
var num = 100
就是把 100 赋值给 num 变量
那么 num 变量的值就是 100

2.+=

var a = 10;
a += 10;
console.log(a); //=> 20
//a += 10 等价于 a = a + 10

3.-=

var a = 10;

a -= 10;
console.log(a); //=> 0
a -= 10等价于 a = a - 10

4.*=

var a = 10;
a *= 10;
console.log(a); //=> 100
a *= 10等价于 a = a * 10

5./+

var a = 10;
a /= 10;
console.log(a); //=> 1
a /= 10`等价于 a = a / 10

5.%=

var a = 10;
a %= 10;
console.log(a); //=> 0
a %= 10 等价于 a = a % 10

比较运算符：
1.==
比较符号两边的值是否相等，不管数据类型
1 == '1' 两个的值是一样的，所以得到 true

2.===
比较符号两边的值和数据类型是否都相等
1 === '1' 两个值虽然一样，但是因为数据类型不一样，所以得到 false

3.!=
比较符号两边的值是否不等
1 != '1' 因为两边的值是相等的，所以比较他们不等的时候得到 false

4.!==
比较符号两边的数据类型和值是否不等
1 !== '1' 因为两边的数据类型确实不一样，所以得到 true

5.>=
比较左边的值是否大于或等于右边的值
1 >= 1 结果是 true
1 >= 0 结果是 true
1 >= 2 结果是 false

6.<=
比较左边的值是否小于或等于右边的值
1 <= 2 结果是 true
1 <= 1 结果是 true
1 <= 0 结果是 false

7.>
比较左边的值是否大于右边的值
1 > 0 结果是 true
1 > 1 结果是 false
1 > 2 结果是 false

8.<
比较左边的值是否小于右边的值
1 < 2 结果是 true
1 < 1 结果是 false
1 < 0 结果是 false

逻辑运算符：

1.&&
进行 且 的运算
符号左边必须为 true 并且右边也是 true，才会返回 true
只要有一边不是 true，那么就会返回 false
true && true 结果是 true
true && false 结果是 false
false && true 结果是 false
false && false 结果是 false

2.||
进行 或 的运算
符号的左边为 true 或者右边为 true，都会返回 true
只有两边都是 false 的时候才会返回 false
true || true 结果是 true
true || false 结果是 true
false || true 结果是 true
false || false 结果是 false

特殊：1.!!a ==>转换成布尔值 2.&& || 短路 用发

3.!
进行 取反 运算
本身是 true 的，会变成 false
本身是 false 的，会变成 true
!true 结果是 false
!false 结果是 true

自增自减运算符：

1.++
进行自增运算
分成两种，前置和后置
前置++，会先把值自动 +1，在返回

var a = 10;
console.log(++a);
// 会返回 11，并且把 a 的值变成 11

//后置++，会先把值返回，在自动+1
var a = 10;
console.log(a++);
// 会返回 10，然后把 a 的值变成 11

2.--
进行自减运算
分成两种，前置–和后置–
-- + 运算符道理一样

三元运算符:
三元运算，就是用两个符号组成一个语句
语法： 条件 ? 条件为 true 的时候执行 : 条件为 false 的时候执行

var age = 18;
age >= 18 ? alert('已经成年') : alert('没有成年')

分支结构

js 代码都是顺序执行的（从上到下）

逻辑分支就是根据设定好的条件来决定要不要执行某些代码

if 语句:
通过一个 if 语句来决定代码是否执行
语法： if (条件) { 要执行的代码 }
通过 () 里面的条件是否成立来决定 {} 里面的代码是否执行

// 条件为 true 的时候执行 {} 里面的代码
if (true) {
  alert('因为条件是 true，我会执行')
}

// 条件为 false 的时候不执行 {} 里面的代码
if (false) {
	alert('因为条件是 false，我不会执行')    
}

if else 语句:
通过 if 条件来决定，执行哪一个 {} 里面的代码
语法： if (条件) { 条件为 true 的时候执行 } else { 条件为 false 的时候执行 }
两个 {} 内的代码一定有一个会执行

// 条件为 true 的时候，会执行 if 后面的 {} 
if (true) {
  alert('因为条件是 true，我会执行')
} else {
  alert('因为条件是 true，我不会执行')
}

// 条件为 false 的时候，会执行 else 后面的 {}
if (false) {
  alert('因为条件为 false，我不会执行')
} else {
  alert('因为条件为 false，我会执行')
}

if else if … 语句:

可以通过 if 和 else if 来设置多个条件进行判断
语法：if (条件1) { 条件1为 true 的时候执行 } else if (条件2) { 条件2为 true 的时候执行 }
会从头开始依次判断条件
如果第一个条件为 true 了，那么就会执行后面的 {} 里面的内容
如果第一个条件为 false，那么就会判断第二个条件，依次类推
多个 {} ，只会有一个被执行，一旦有一个条件为 true 了，后面的就不在判断了

// 第一个条件为 true，第二个条件为 false，最终会打印 “我是代码段1”
if (true) {
  	alert('我是代码段1')
} else if (false) {
	alert('我是代码段2')           
}

// 第一个条件为 true，第二个条件为 true，最终会打印 “我是代码段1”
// 因为只要前面有一个条件满足了，就不会继续判断了
if (true) {
  	alert('我是代码段1')
} else if (true) {
  	alert('我是代码段2')
}

// 第一个条件为 false，第二个条件为 true，最终会打印 “我是代码段2”
// 只有前一个条件为 false 的时候才会继续向后判断
if (false) {
  	alert('我是代码段1')
} else if (true) {
  	alert('我是代码段2')
}

// 第一个条件为 false，第二个条件为 false，最终什么也不会发生
// 因为当所有条件都为 false 的时候，两个 {} 里面的代码都不会执行
if (false) {
  	alert('我是代码段1')
} else if (false) {
  	alert('我是代码段2')
}

if else if … else 语句
和之前的 if else if ... 基本一致，只不过是在所有条件都不满足的时候，执行最后 else 后面的 {}

// 第一个条件为 false，第二个条件为 false，最终会打印 “我是代码段3”
// 只有前面所有的条件都不满足的时候会执行 else 后面的 {} 里面的代码
// 只要前面有一个条件满足了，那么后面的就都不会执行了
if (false) {
  	alert('我是代码段1')
} else if (false) {
  	alert('我是代码段2')
} else {
  	alert('我是代码段3')
}

SWITCH 条件分支结构
也是条件判断语句的一种 是对于某一个变量的判断

语法：
switch (要判断的变量) {
  case 情况1:
    情况1要执行的代码
    break
  case 情况2:
    情况2要执行的代码
    break
  case 情况3:
    情况3要执行的代码
    break
  default:
    上述情况都不满足的时候执行的代码
}

要判断某一个变量 等于 某一个值得时候使用
例子： 根据变量给出的数字显示是星期几

var week = 1
switch (week) {
  case 1:
    alert('星期一')
    break
  case 2:
    alert('星期二')
    break
  case 3:
    alert('星期三')
    break
  case 4:
    alert('星期四')
    break
  case 5:
    alert('星期五')
    break
  case 6:
    alert('星期六')
    break
  case 7:
    alert('星期日')
    break
  default:
    alert('请输入一个 1 ～ 7 之间的数字')
}

循环结构:
循环结构，就是根据某些给出的条件，重复的执行同一段代码
循环必须要有某些固定的内容组成:初始化条件判断要执行的代码自身改变

WHILE 循环:
while，中文叫 当…时，其实就是当条件满足时就执行代码，一旦不满足了就不执行了
语法 while (条件) { 满足条件就执行 }
因为满足条件就执行，所以写的时候一定要注意，就是设定一个边界值，不然就一直循环下去了

// 1. 初始化条件
var num = 0;
// 2. 条件判断
while (num < 10) {
  // 3. 要执行的代码
  console.log('当前的 num 的值是 ' + num)
  // 4. 自身改变
  num = num + 1
}

如果自身没有改变，那么就会一直循环不停了