3--JavaScript基础
1.概述
JavaScript，缩写为JS，是一种高级的、多范式、解释型的编程语言，是一门基于原型、函数先行的语言，它支持面向对象编程、命令式编程以及函数式编程，是目前web开发中不可缺少的脚本语言，不需要编译即可运行
JavaScript主要用来向HTML页面添加交互行为，可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离，具有跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows，Linux，Mac，Android等）
2.嵌入方法
2.1 嵌入式
理论上js可以写在任何地方，但是一般写在head标签或者body标签里
<script> alert("内嵌式"); </script>
2.2 外部式
建立一个外部js文件写入js语句，通过script标签对引入到HTML页面里
<script src="index.js"></script>
2.3 行内式
直接写在标签身上，是一个简写的事件，所有又称为事件属性
<input type="button" value="点击" onclick="alert('行内式')"> <button onclick="alert('行内式');"> 再次点击 </button>
3.语句要求
JavaScript 语句由值、运算符、表达式、关键词和注释构成
注释：
单行注释： //注释内容
多行注释： /*注释内容*/
变量：用于存储信息的容器，定义变量用var关键字
var a="lxl";
在JavaScript中，单双引号没有区别
4.保留关键字
保留关键字不可以用作变量、标签或者函数名，有些保留关键字是作为 JavaScript 以后扩展来使用
5.数据类型
数值型：number（凡是数字都是数值型，不区分整数和小数）
字符串型：string（凡是引号中的内容都是字符串型）
对象类型：object（特殊取值null）
布尔型：boolean（true、false）
未定义型：undefined
判断类型：typeof（输出要判断的数据类型）
6.运算符
算数运算符：+ - * / % ++ --
字符串拼接使用“+”
比较运算符：> < >= <= != == === !==
逻辑运算符：&& || !
赋值运算符：= += -= *= /= %=
7.条件控制语句
7.1 if语句
if(条件){ 函数体 }
7.2 if...else语句
if(条件){ 函数体1 }else{ 函数体2 }
7.3 if...else if...else语句
if(条件1){ 函数体1 }else if(条件2){ 函数体2 }else if(条件n){ 函数体n }else{ 函数体 }
7.4 switch...case语句
switch(表达式){ case 1: 代码块1; break; case n: 代码块n; break; default: 代码块; break; }
7.5 三元表达式
表达式1？表达式2：表达式3
当表达式1成立时，执行表达式2，否则执行表达式3
var max = 2>1? "true" : "false"; console.log(max);
8.循环语句
8.1 for循环
for（初始变量；条件；迭代变量）{ 循环体 }
嵌套循环：双重for循环
内外变量名不能重复，外层循环不能使用内层循环的变量
使用嵌套循环打印九九乘法表：
for (var i = 1; i <= 9; i++) { //外层循环控制行数 for (var j = 1; j <= i; j++) { //内层循环控制每一行的个数 str += j + '×' + i + '=' + i * j + '\t'; } str += '\n'; } console.log(str);
8.2 while循环
while(循环成立条件){ 循环体 }
先判断条件，当条件成立时，再执行循环体
8.3 do...while循环
do{ 循环体 } while(循环成立条件)
先执行一次循环体，再判断条件，当条件成立时，继续执行循环体
8.4 结束循环
continue : 跳出当前循环，继续下个循环
break ： 退出，结束整个循环
9.数组
概念：指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素
本质：数组是程序在内存中申请的N块连续的空间，可以用来保存一组数据
9.1 创建数组
<script>
// 1.new Array();
// 创建一个空的数组
let arr = new Array();
console.log(arr);
//2.new Array(长度)
// 创建一个有长度的空数组
let arr2 = new Array(5);
console.log(arr2);
// 3.new Array(数据1，数据2，数据3...);
let arr3 = new Array('张三', 20, '男');
console.log(arr3);
// 4.利用字面量
// 创建一个空的数组
let arr4 = [];
console.log(arr4);
// 5.利用字面量[数据]；
//创建一个有长度的空数组
let arr5 = [10];
console.log(arr5);
//6.let arr = [数据1，数据2，数据3...];
let arr6 = ['张三', 20, '男'];
console.log(arr6);
</script>
9.2 数组的赋值
<script>
// 在声明的同时赋值
let arr1 = [1,2,3,4,5,6,7];
console.log(arr1);
//在声明完之后再赋值
let arr2=[];
arr2[0]='你';
arr2[1]='是';
arr2[2]='谁';
console.log(arr2);
// 获得数组中指定下标的元素
console.log(arr2[1]);
</script>
9.3 数组的操作
<script>
// 数组的三要素：元素，下标，长度
// 获得数组的长度
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr.length);
// 改变数组的长度
arr.length = 20; //数组的长度可以变大，添加空元素
console.log(arr);
arr.length = 5;//数组的长度可以变小，数据会被删除(不可逆)
console.log(arr);
</script>
push方法：
<script> let arr4=[1,2,3,4]; for(let i=0;i<100;i++){ // 利用push方法，在数组的最后添加元素 arr4.push(i+1); } console.log(arr4); </script>
10.函数
概念：指封装了一段可被重复调用执行的代码块，通过此代码块可以实现大量代码的重复使用
function 函数名([参数1, 参数2,……]){ 语句 [return 返回值] }
参数说明：
函数名：必选，用于指定函数名。在同一个页面中，函数名必须是唯一的，并且区分大小写
参数：可选，用于指定参数列表。当使用多个参数时，参数间使用逗号进行分隔。一个函数最多可以有255个参数
语句：必选，是函数体，用于实现函数功能的语句
返回值：可选，用于返回函数值。返回值可以是任意的表达式、变量或常量
<script>
function account(price, number) { // 定义有两个参数的函数
let sum = price * number; // 计算金额
return sum; //返回计算后的金额
}
</script>
调用函数：
函数名(传递给函数的参数1, 传递给函数的参数2, ……);
eval() 函数：
将字符串当做一段JavaScript代码解释并执行
11.变量的作用域
变量的作用域是指变量在程序中的有效范围，在该范围内可以使用该变量
<script> let a = "这是全局变量"; // 该变量在函数外声明，作用于整个脚本 function func() { //定义函数 let b = "这是局部变量"; //该变量在函数内声明，只作用于该函数体 document.write(a + "<br>");//输出全局变量的值 document.write(b);//输出局部变量的值 } func();//调用函数 </script>
12.字典
字典是一种以键-值为一队存储的数据结构：key-value
在JavaScript中字典的基础是Array类，所以Array在JavaScript中既是数组也是字典
key相当于这个value在字典中的索引，所以key不允许重复，查找也会非常快（类似于哈希表）
12.1 定义字典
var dic = new Array(); //定义一个字典 // 添加字典的元素(key:value) dic['a'] = '1'; dic['b'] = '2'; dic['c'] = '3'; //也可以直接定义 dic={'a':1,'b':2,'c':3}
12.2 遍历字典
for (key in dic){ console.log(key+":"+dic[key]); } //为指定元素赋值 dict['d']=10
12.3 删除字典
//方法一 delete dic["one"]; //方法二 delete dic.one;
13.JSON格式
JSON源自于JavaScript，是一种轻量级（Light-Meight)、基于文本的(Text-Based)、可读的(Human-Readable)格式
说明如下：
JSON是独立于任何编程语言的数据格式
是一种用于存储和传输数据的轻量级格式
语法是自描述的，便于人类阅读和理解
序列化：将对象序列转化成json字符串
使用toJSONString//方法一 var last=obj.toJSONString(); 使用stringify//方法二 var last=JSON.stringify(obj);
反序列化：将json字符串转化为对象序列
JSON.parse(str, reviver)
str：要解析的 JSON字符串
reviver：可选的函数 function(key,value)
14.原型对象
14.1 原型的概念
原型是继承中的基础，JavaScript的继承就是基于原型的继承
JavaScript原型是指为其他对象提供共享属性访问的对象，在创建对象时，每个对象都包含一个隐式引用指向它的原型对象或者null
原型对象也是对象，这个对象也有自己的原型对象，称为原型对象的原型对象。这样就构成一个原型链
14.2 函数的原型对象
在创建函数的同时，浏览器会在内存中创建一个对象。这个函数中默认有一个prototype属性，指向了该对象，就是函数的原型对象，简称函数的原型
每个构造函数都有一个原型对象存在，这个原型对象通过构造函数的prototype属性来访问，原型对象默认会有一个constructor属性指向构造函数
14.3 原型的相关属性
prototype属性：
prototype属性是函数所独有的，存在于构造函数中，它是从一个函数指向一个对象
它的含义是函数的原型对象，也就是这个函数所创建的实例的原型对象
它的作用是包含可以由特定类型的所有实例共享的属性和方法
constructor属性：
constructor属性是对象所拥有的，它是从一个对象指向一个函数
__proto__ 属性：
__proto__属性是对象所独有的，它是从一个对象指向一个对象，也即指向它们的原型对象
它的作用是当访问一个对象的属性时，如果该对象内部不存在这个对象，那么就会去它的__proto__属性所指向的那个对象（即父对象）里面找，如果父对象也不存在这个属性，则继续往父对象的__proto__属性所指向的那个对象里面找，如果还没找到，就继续往上找，直到原型链顶端null
hasOwnProperty() 方法：
它的作用是判断函数的原型所在位置。一个对象本身添加的属性返回true，在原型中的属性和不存在的属性都会返回false
//创建构造函数 function Person(){} //使用Person.prototype直接访问到原型对象 // 给Person函数的原型对象中添加一个属性name，值是"小明" // Person.prototype.name = "小明"; Person.prototype = { constructor:Person, //让constructor重新指向Person函数 /*如果直接给Person的原型指定对象字面量（没有上面这一行）， 这个对象的constructor属性不再指向Person函数*/ name: "小明" }; //创建一个实例对象p1 var p1 = new Person(); //访问p1对象的属性name p1.age = 18; console.log(Person.prototype.constructor === Person); //输出结果是：true //如果在Person.prototype中没有constructor:Person这一行代码则输出flase //Person.prototype.name = "小明";这种写法输出也是true console.log(p1.__proto__ === Person.prototype); //输出结果是：true //如果在Person.prototype中没有constructor:Person这一行代码则输出flase //Person.prototype.name = "小明";这种写法输出也是true console.log(p1.name); //输出结果是：小明 /*虽然在p1对象中没有明确的添加属性name，但是仍然可以成功打印的原因是： p1的__proto__属性指向的原型中有name属性，所以可以访问到属性name值。*/ console.log(p1.hasOwnProperty("age")); //输出结果是：true //因为age属性是直接在p1属性中添加的 console.log(p1.hasOwnProperty("name")); //输出结果是：false //因为name属性是在原型中添加的 console.log(p1.hasOwnProperty("sex")); //输出结果是：false //因为sex属性不存在
15.DOM操作
DOM（Document Object Model）文档对象模型，是针对HTML和XML的一个API（应用程序接口），通过这些接口可以改变网页的内容、结构和样式
DOM描述了一个具有层次化特点的节点树，允许开发人员增删改查页面的某些部分
文档：一个页面就是一个文档，DOM 中使用 document 表示
元素：页面中的所有标签都是元素，DOM中使用 element 表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示
15.1 获取元素
通过元素 ID 获取 getElementById()
// 获取 id 为 time 的第一个元素 var timer = document.getElementById('time'); // 返回获取到的整个元素标签 console.log(timer); // 返回获取到的元素类型 console.log(typeof timer); // 在控制台中显示指定 JavaScript 对象的属性，并通过类似文件树样式的交互列表显示, 更好的查看属性和方法 console.dir(timer);
通过标签名获取 getElementByTagName()
// 获取页面中所有 li var lis = document.getElementsByTagName('li'); // 输出伪数组 console.log(lis); // 输出伪数组中的第2个对象 console.log(lis[1]); // 遍历 for (i = 0; i < lis.length; i++){ console.log(lis[i]); }
通过类名获取 getElementByClassName()
var box = document.getElementsByClassName('box'); console.log(box);
通过选择器获取 querySelector()
var box = document.querySelector('.box'); console.log(box);
通过选择器获取 querySelectorAll()
var box = document.querySelectorAll('.box'); console.log(box);
获取 body 和 html
// 获取body var body = document.body; console.log(body); console.dir(body); // 获取整个html var htmlEle = document.documentElement; console.log(htmlEle);
15.2 事件操作
网页中的每个元素都可以产生某些可以触发 JS 的事件，例如在用户点击某按钮时产生一个事件，然后去执行某些操作
事件由三部分组成：事件源、事件类型、事件处理程序
事件源：事件的触发对象
事件类型：事件如何被触发，比如鼠标点击（onclick）
事件处理程序：事件被触发要执行的操作
注册事件：
传统注册方式
// 获取按钮元素 var btn = document.querySelector('button'); // 给按钮元素添加点击事件 btn.onclick = function(){ // 事件处理程序，但被点击时执行 console.log('按钮被点击'); }
addEventListener 监听注册方式
// 给元素btn添加两个监听鼠标点击事件 btn.addEvenListener('click',function(){ alert(22); }) btn.addEvenListener('click',function(){ alert(33); })
attachEvent 监听注册方式
btn.attachEvent('onclick', function(){
alert(11)
})
15.3 操作元素
JavaScript 的 DOM 操作可以改变网页内容、结构和样式，利用 DOM 操作元素来改变元素里面的内容、属性等
改变元素内容：
innerText
var div = document.querySelector('div'); div.innerText = 'brokyz'
innerHTML
var div = document.querySelector('div'); div.innerHTML = '<strong>brokyz</strong>'
修改或添加属性内容：
// 获取a标签 var a = document.querySelector('a'); // 更改或添加a的属性 a.href = 'https://bilibili.com'; a.id = 'bilibili'; // 修改类名属性值 a.className = 'iama';
修改或添加CSS样式属性：
var div = document.querySelector('div'); this.style.backgroundColor = 'antiquewhite'; this.style.width = '400px';
对自定义属性值的操作：
获取自定义属性值 getAttribute()
var div = document.querySelector('div'); // 获取内置属性值 console.log(div.getAttribute('id')); // 获取自定义属性值 console.log(div.getAttribute('index'));
添加和修改自定义属性值 setAttribute('自定义属性','要修改的值')
var div = document.querySelector('div'); div.setAttribute('index','2'); div.setAttribute('class','box');
移除自定义属性值 removeAttribute()
div.removeAttribute('index');
15.4 总结
关于 DOM 操作，主要是针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作
创建：document.write、innerHTML、createElement
增：appendChild、insertBefore
删：removeChild
改：主要修改 DOM 元素的属性、内容、表单值等
修改元素属性：src、href、title
修改普通元素内容：innerHTML、innerText
修改表单元素：value、type、disable
修改元素样式：style、className
查：主要获取查询 DOM 元素
DOM 提供的 API 方法：getElementById、getElementByTagName 古老用法，不推荐
H5 提供的新方法：querySelector、querySelectorAll 推荐
利用节点操作获取元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling）推荐
属性操作：主要针对于自定义属性
setAttribute：设置dom的属性值
getAttribute：得到dom的属性值
removeAttribute：移除属性
事件操作：给元素注册事件，采取事件源.事件类型 = 事件处理程序
onclick：鼠标点击左键触发
onmouseover：鼠标经过触发
onmouseout：鼠标离开触发
onfocus：获得鼠标焦点触发
onblur：失去鼠标焦点触发
onmousemove：鼠标移动触发
onmouseup：鼠标弹起触发
onmousedown：鼠标按下触发
