卓音工作室2022讨论班第五期—

一、js介绍

1.js背景

js全称是javascript，是web的脚本语言。它最初由Netscape(网景公司)的Brendan Each（布兰登·艾奇，javascript之父）发明，刚开始的命名是Livescript，后来Netscape公司与Sun公司合作，为了让它看起来像Java，才改名为Javascript。因此JS与Java在语法、名称和命名规范上都有许多相似之处。

2.js特点

是一门脚本语言。
是一种轻量级的编程语言。
是可插入 HTML 页面的编程代码。
插入 HTML 页面后，可由所有的现代浏览器执行。

3.js组成

ECMAScript（一种脚本语言的标准化规范）
文档对象模型（DOM）
浏览器对象模型（BOM）

4.引入方式

行内引用：

<button type="button" onclick="console.log('我是行内引用')">行内引用</button>

内嵌（写在head或body里）：

<script>function myFunc(){console.log("我是内嵌js")}</script>

外部引用：

<script src="文件路径.js"></script>

注意：js代码以及引入最好放到底部，因为浏览器渲染网页是从上往下，如果js代码放在前面，浏览器就会优先加载js，导致html页面加载不完全，出现bug。

如果想放在前面，可以在js中使用window.onload方法。这个方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。

window.onload = function(){....}

5.输出

使用 window.alert() 弹出警告框。
使用 console.log() 写入到浏览器的控制台。
使用 confirm() 弹出确认框。
使用 prompt() 返回用户的回答
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。

注意：出现提示类窗口时，程序的执行都会暂停，等待用户动作后再继续执行

 <script>console.log("写入控制台");alert("警告框")confirm("欢迎来到我的网页")prompt('你的名字是')document.write("重写网页")bt3.innerHTML = '重写HTML'</script>

6.语法规范

// 单行注释          快捷键 control + /
/* 多行注释 */          快捷键 shift + alt + a

使用;表示结束。但只有一行内写了多个语句，才必须写分号。js有分号自动补全功能，当一行只有一条语句的时候，可以不加分号。
严格区分大小写。
忽略空白符（空格换行 tab）
注意标识符和关键字（关键字会自动高亮）

二、js基础语法

1.变量

1.变量声明
在编程语言中，变量用于存储数据值。JavaScript 使用关键字var来定义变量，使用等号来为变量赋值，变量之间可以相互操作：

var a
var b = 1
var c,d,e

2.命名规则

由字母、数字、下划线以及$组成，不能以数字开头。
不允许使用JS的关键字和保留关键字：break、case、catch、default、false、new、this、undefined……
可以采用驼峰命名法：第一个单词全小写，此后单词首字母大写。
尽量见名知意

2.数据类型

JavaScript 拥有动态类型。这意味着相同变量可用作不同类型：也就是说先声明再定义，定义值可以覆盖。

var x                 // 现在 x 是undefind
var x = 2;           // 现在 x 是数值
var x = "string";      // 现在 x 是字符串值

1.基本数据类型（值类型）：

数字（Number）：int、float、NaN （程序出现错误时出现，不是一个数，但本身是一个Number类型）、Infinity （无穷）。
字符串（String）：使用单/双引号成对括起来；字符串断行时，可使用 + 连接几个字符串；模板字符串，使用反引号。

 var name1 = 'LiLei'var name2 = 'HanMeiMei'console.log(name1 + ' ' + name2);var html = `<h3>我是模板字符串</h3><button>按钮</button>`document.getElementById('data').innerHTML = html

布尔(Boolean)：true、false，是JS中的特殊关键字，不需要加引号，加了就变成字符串。
未定义(Undefined)、空(Null)：null是一个空指针对象

var state = true;
var name;
var name
console.log(name,typeof(name)); //undefined 'undefined'
var value = null
console.log(value,typeof(value)); //null 'object'

2.引用数据类型：

对象(Object)：：{ }包裹，里面是一项项键值对。
数组(Array)：[ ]包裹，每一项可以是字符串、数字、对象等任何数据类型
函数(Function)：为了能够重复引用相同的功能，减少代码的书写和维护的方便，js提供函数功能，由关键字function引导：

// 对象
var join = {  name: "卓音工作室",part: '前端',number: 20}// 数组var arr = [2,'好好学习',join];// 函数 定义之后记得调用function myFunc(a, b) {return a + b; // 返回a+b结果}console.log(myFunc(3,5));

3.数据类型转换
typeof()可以返回变量的6种数据类型：number、string、boolean、undefined、object、function

显示类型转换：

Number()转换为数字类型
parseInt()转换为int类型
parseFloat()转换为浮点型
String()转换为字符串类型
Boolean()转换为布尔类型。0,'',NaN,null,undefined转换成布尔型都默认为false，其他的为true.
变量.toString()将变量转换为字符串类型（toString()无法转换null和undefined），对象则返回一个【表示对象】的【字符串】，数字则可返回该数字对应进制的字符串。

 var tim = 100.11console.log(typeof(tim));console.log(Number(tim));console.log(parseInt(tim));console.log(parseFloat(tim));console.log(String(tim));console.log(Boolean(tim));console.log(typeof(tim.toString()));// 返回一个【表示对象】的【字符串】//每一个对象都有一个 toString()方法。 默认的情况下，toString()方法被每一个对象继承。如果toString没有被定义的对象覆盖。toString返回 '[object type]' 其中type是对象的类型,type的值可以是Object，join.toString()console.log(join.toString());// 返回该数字对应进制的字符串。var num = 10console.log(num.toString(2)) //10专为为2进制'1010'

隐式类型转换：

isNaN()判断括号内是否为NaN，是数字返回false,不是数字返回true.
运算过程中的隐式类型转换：在出现运算符的情况下不同数据类型类型的两变量间会发生隐式转化,所谓隐式转化就是他的转化过程是我们看不见的.

 console.log(isNaN(tim));  // falseconsole.log(isNaN(join));  // true// 运算过程中的隐式类型转换var str = '12'var a = 5var b = a*strconsole.log(b)    //60

3.运算符

算数运算符 +、-、、/、%、++、- -、+=，-=，=，/=
比较运算符和C语言相比，多了=== 和 !==
逻辑运算符 &&、||、!

1 == '1',true 不同类型先做类型转换，再判断
1 === '1',false 不做任何转换，直接判断

4.条件循环语句（和C语言一样）

if( ){ }else if( ){ }else{ }、switch case
for、while、do while
break直接跳出循环、continue结束当前循环，进入下一循环

5.数组方法

.toString()，将数组转化为字符串，将数组值（用逗号分割）的字符串

var arr = [1,2,3,4,5,6];
console.log(arr.toString());

.length获取数组元素个数；不需要加（）
.pop() （也叫弹出）是将数组中最后一个数给删除掉，并将删除的数返回；
.push() （在数组结尾处）向数组添加一个新的元素，并返回新元素的下表；
.shift() 将数组中第一个元素移除数组，并返回移除的元素，并把所有其他元素“位移”到更低的索引。
.unshift() 向数组中第一个位置进行添加新的元素，会有返回值，返回值是新的数组的长度。（如果unshift()没有添加新的数值，会返回原数组的长度）。
.sort() 方法对数组进行排序
.reverse() 方法反转数组中的元素。

不改变原数组的操作

.join()，用法和toString()方法类似，将所有数组元素结合为一个字符串，只不过join可以规定分割符

console.log(arr.join());  //什么也不加结果同toString类似
console.log(arr.join(""));//这样会将逗号去掉，不以任何符号分割
console.log(arr.join("-"));

concat() 合并数组，通过合并（连接）现有数组来创建一个新数组
splice() 拼接数组，可用于向数组添加新项或删除元素，该方法有几项参数（开始拼接的位置，删除元素个数，拼接项1，拼接项2…）
slice() 裁剪数组，方法中会有一些参数（开始裁剪，结束位置），不限制剪裁位置就剪到最后。

6.对象

JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成，属性由逗号分隔。

对象的创建

var people = {  // 字面量形式创建name: 'Amy',age: 18,sex: 'girl'}
// 属性名与属性值书法方式与字面量有区别.
//对象名.属性名 = 属性值,每个属性用分号;结尾
var obj = new Object();
obj.name = 'LiMing';
obj.age = 20;
obj.sex = 'boy';

获取对象属性值：对象属性有两种寻址方式，对象.属性名、对象[“属性名”]
属性的增删：增加新属性，直接写新键值对obj.key = value，删除属性 delete obj.key
遍历对象：for...in语句对象中有几个属性，循环体就会执行几次，每次执行时，会将对象中的一个属性名赋值给变量

for(var item in people){console.log('属性名：'+ item);console.log('属性值：'+ people[item]);}

JS的常用内置对象：Math对象，Data日期对象
window时间类对象：

定时器：window.setTimeout(方法，延时)

window.setTimeout(function(){console.log("延时2秒后执行");
},2000);

计时器：window.setInterval(方法，时间间隔);

var count = ;
window.setInterval(function(){console.log(“第”+count+"次执行");count++;
},2000);

清除计时器：clearInterval(所要清除的计数器名字)

var count = 0;
var timer = setInterval(function(){count ++;if(count > 3){clearInterval(timer);}console.log(count);
},2000);

7.函数以及构造函数

1) 函数的定义和调用

function 函数名(参数 1, 参数 2, 参数 3) {//函数命名要符合驼峰命名法... //要执行的代码
}
函数名()//调用

2) 函数表达式

命名函数表达式

function fun() {console.log('命名函数')
}
fun()

匿名函数表达式

var add = function () {console.log('匿名函数')
}
add()

3) 参数和返回值

函数的形参不用指定参数的类型。
形参可以比实参多，实参也可以比形参多。
arguments是JS的一个内置的类数组对象。当不确定有多少参数传递时，需要用arguments来获取，储存了传递的所有实参，展示形式是一个伪数组，可以遍历。只能在函数体中使用。

function funArg(){console.log(arguments,arguments[2])
}
funArg(2, "11",true);

arguments 是一个类数组对象，不是一个数组，除了length属性和索引元素之外没有任何数组属性。例如，它没有 pop 方法。但是它可以被转换为一个真正的数组。

var args = [].slice.call(arguments);  // 方式一
var args = Array.prototype.slice.call(arguments); // 方式二
// 下面是 es6 提供的语法
let args = Array.from(arguments)   // 方式一
let args = [...arguments]; // 方式二

返回值：当 JavaScript 到达 return 语句，函数将停止执行。函数通常会计算出返回值，不加括号返回的是函数本身。

var x = multiply(7, 8); function multiply(a, b) {return a * b; }console.log(x);//x=56console.log(mutiply)//

4) 构造函数
所谓”构造函数”，就是专门用来生成实例对象的函数。

构造函数首字母一般大写。
构造函数返回的是一个对象。
函数体内部使用了this关键字，代表了所要生成的对象实例。
生成对象的时候，必须使用new命令
new命令的作用，就是执行构造函数，返回一个实例对象。
new 就是创造对象的过程，也叫做实例化对象的过程
new 创造出来的对象叫做构造函数的实例对象

为什么要使用构造函数？
在使用对象字面量创建一系列同一类型的对象时，这些对象可能具有一些相似的特征(属性)和行为(方法)，此时会产生很多重复的代码，而使用构造函数就可以实现代码复用。

var p1 = { name: 'zs', age: 6, gender: '男', hobby: 'basketball' };
var p2 = { name: 'ls', age: 6, gender: '女', hobby: 'dancing' };
var p3 = { name: 'ww', age: 6, gender: '女', hobby: 'singing' };
var p4 = { name: 'zl', age: 6, gender: '男', hobby: 'football' };

function Person(name, gender, hobby) {this.name = name;this.gender = gender;this.hobby = hobby;this.age = 6;
}
var p1 = new Person('zs', '男', 'basketball');
var p2 = new Person('ls', '女', 'dancing');
var p3 = new Person('ww', '女', 'singing');
var p4 = new Person('zl', '男', 'football');

5) 作用域：变量和函数生效（能被访问）的区域。

全局变量：在函数外定义的变量，可以全局使用，使用不甚容易污染window的其他属性
局部变量：在函数内部定义的变量，只能在函数内部使用

8.预编译

js代码执行分成两个阶段：先进行预编译，再按顺序逐行执行代码，预编译有以下特点。

函数声明整体提升 无论函数调用和声明的位置是前是后，系统总会把函数声明移到调用前面。
变量声明提升 无论变量调用和声明的位置是前是后，系统总会把声明移到调用前，注意仅仅只是声明，变量赋值不会提升，所以值是undefined。

console.log(a)
var a = 100;

// 上面这段代码相当于
var a;
console.log(a)  //undefined
a = 100;

三、事件

1.描述：

HTML事件是发生在HTML元素上的事情。当在 HTML 页面中使用 JS 时， JS 可以触发这些事件。事件可以是浏览器行为，也可以是用户行为。

2.事件三要素

事件源：事件被触发的对象
事件类型：事件触发机制，什么事件
事件处理程序：通过一个函数赋值的方式完成

3.常见事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

4.执行事件的三个步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（采用函数赋值形式）

5.事件作用

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作：

页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性

扩展：闭包、立即执行函数、原型、原型链、this、typescript……