JavaScript第一周学习总结

第一天

JS概述

JavaScript是运行在js解释器中的解释型、弱类型、面向对象的脚本语言

js解释器：浏览器自带；或者独立安装一个（node.js)
解释型：直接运行程序，碰到错误才会停止
弱类型：一个变量可以赋不同类型的值，由数据决定数据类型是什么
面向对象：万物皆对象；对象名.属性名;//对象名.方法名();

引入方式

在html中，直接将js代码放在script标签内
创建js文件，在html中引入外部脚本，即<script src="js文件路径"></script>

输出方式

console.log();在浏览器的控制台输出日志
document.write();在页面上输出，可输出标签；若按钮绑定点击事件，执行会覆盖原来的页面
alert();弹出警告框；会卡住页面

变量

若某个数据会被反复使用，可保存成一个变量，未来只需使用变量名就相当于在使用变量的值
var 变量名=值;一个关键字var可声明多个变量，用","分隔
变量名不以数字开头，尽量见名知意，推荐使用驼峰命名法；不使用关键字作为变量名；若使用name作为变量名，则不管保存的数据类型是什么。都会变成字符串
const 常量名=值;常量一旦创建，值不可修改

算数运算符+-*/%

%取余/取模的作用：判断某个数字的奇偶性，num%2，结果为0说明是偶数，结果为1说明是奇数；取一个数字的后n位，1234%100，则得到34
算数运算符具有隐式转换，即默认会将数据类型转为数字再运算特殊：

加法运算，若碰到字符串，则两边都会转为字符串再做拼接
对于-*/%，字符串转为数字的前提是由纯数字组成，但凡包含一个非数字字符，则结果为NaN；NaN不是数字，但仍是数字类型；NaN参与任何算数运算结果仍为NaN、参与任何比较运算结果都为false

数据类型

原始类型

String 字符串：取值无数个，必加引号
Number 数字：取值无数个，直接书写数字即可
Boolean 布尔：取值只能是true或者false
Undefined：默认值，只有一个值undefined
Null：只有一个值null，为空，用于释放内存引用类型：11个对象（属性和方法）

查看数据类型：type of()

用户输入框

prompt("提示文字","默认值");两个参数都可选写

分支结构

if(条件){操作} 一个条件一件事，满足就做，不满足就不做
if(条件){操作}else{默认操作} 一个条件两件事，满足就做第一件，不满足就做第二件
if(条件1){操作1}else if(条件2){操作2}else{默认操作} 多个条件多件事，满足谁就做谁

第二天

数据类型转换

隐式转换

算数运算符的隐式转换：布尔值true转为1，布尔值false转为0，undefined转为NaN，null转为0
问题：NaN参与任何比较运算结果都为false，因此无法判断某个数据是不是NaN
解决：!isNaN(x) 输出结果为true则x是有效数字，为false则x是NaN，可防止用户恶意输入显式/强制转换
转为字符串：x.toString() x不能是undefined或null；一般不用，因为从页面获取的数据都是字符串
转为数字
1. parseInt(x) 解析为一个整数；执行原理：从左向右依次读取每个字符，碰到非数字字符就停止，不认识小数点，如果一来就不认识则为NaN
2. parseFloat(x) 解析为一个小数；执行原理与parseInt基本一致，但认识第一个小数点；两种方法可用来去掉单位，但x只能是字符串或数字
3. Number(x) 任何数据类型都可转为数字，等效于隐式转换，还不如x-0、x*1、x/1、x%1

Function函数/方法

预定义后，再反复使用的代码段，实现了一个......的功能
创建普通函数：function 函数名(){代码段;}
调用普通函数
1. 程序员写几次就调用几次：函数名();
2. 绑定在某个页面元素上，用户触发几次就调用几次：<button onclick="函数名()"></button>
创建带参数的函数：function 函数名(形参,...){代码段;}
调用带参数的函数：函数名(实参,...);形参和实参的个数及顺序要一一对应
普通函数操作永远固定，带参数的函数根据传入的实参，执行略微不同的操作
以后何时使用函数
1. 不希望打开页面立刻执行
2. 能够反复执行
3. 本身是个独立的功能体
4. 以后每一个功能都封装成一个函数，函数是第一等公民
5. 函数调用完毕会自动释放变量

流程控制语句

顺序结构：默认代码从上到下执行
分支结构：根据条件不同，选择部分代码执行
循环结构：根据条件是否满足，考虑是否再次执行相同或相似代码

运算符

关系/比较运算符：> >= < <= == != === !== 结果一定是布尔值
逻辑运算符
1. &&：与/并且，条件全满足结果为true，只要一个不满足为false
2. ||：或，条件只要一个满足结果为true，全不满足为false
3. !：颠倒布尔值

第三天

循环结构

利用计算机运算速度快反复执行相同或相似的代码
循环三要素：循环变量、循环条件、循环体
执行原理：先判断循环条件是否满足，若为true则执行循环体一次，再次判断满足则再次执行，直到不满足为false才会退出循环
while循环的语法：var 循环变量名=循环变量初始值;//while(循环条件){循环体;循环变量的改变;}
for循环的语法：for(循环变量的创建;循环条件;循环变量的改变){循环体;}循环变量的创建和变化可写多个；语法更简洁，最好用于次数确定的循环
死循环：while(true){循环体;}//for(;;){循环体;}不确定循环次数才使用，但要搭配退出循环语句break;
函数和循环都可反复执行，区别在于：函数是程序员调用几次或用户触发几次就执行几次；循环是程序员写好的，几乎一瞬间执行完毕

数组

一个变量名就可保存所有数据
特点：数组里的元素是按线性顺序排列的，除第一个都有唯一的前驱元素，除最后一个都有唯一的后继元素；每个元素都有一个位置序号，称为【下标】，从0开始，到数组长度-1
创建数组（数组名常为arr）
1. 直接量 var arr=[元素1,元素2...];无元素则为空数组
2. 构造函数 var arr=new Array(元素1,元素2...); 不推荐
访问/获取数组中的某个元素 arr[下标]
添加/覆盖 arr[下标]=新元素;
数组的三大不限制：不限制元素类型、元素个数、下标越界；获取元素时下标越界，则返回undefined，添加时下标越界，则导致下标不连续、变成稀疏数组
数组只有一个唯一的属性length，数组名.length可用于获取数组长度，即元素个数
三个固定套路
1. 在数组末尾添加元素 arr[arr.length]=新元素;
2. 获取倒数第n个元素 arr[arr.length-n]
3. 缩容/删除末尾n个元素 arr.length-=n
遍历数组 for(var i=0;i<arr.length;i++){arr[i]执行的操作;}将数组中的每一个元素取出来执行相同或相似的操作

第四天

JS的三大组成部分

ECMAScript(3/5/6)：核心语法
DOM(Document Object Model)文档对象模型，使js能操作html文档
BOM(Browser Object Model)浏览器对象模型，操作浏览器，有兼容性问题

DOM

DOM树：DOM中将HTML文档视为倒挂的树状结构，树根是叫做document的对象
document对象：代表浏览器窗口中的文档，只要是对象就拥有自己的属性和方法，可用来访问和操作页面中的所有元素；一个页面自带一个document对象，由浏览器的js解释器自动创建

查找元素

通过id查找 var 变量名=document.getElementById("id名");
1. 唯一不重复的，不用查找就能使用；若有多个相同id，则只找到返回第一个
2. 返回结果<标签名 id="">...</标签名>整体才是一个DOM元素/节点/对象，才可用于操作
通过标签名查找 var 变量名(s)=document.getElementsByTagName("标签名");
1. 返回结果不是一个DOM元素，而是一个DOM集合/类数组；不能直接去操作，只能用下标获取某一个或者用遍历获取每一个
2. 公式中的document可替换成parent，即已经找到的某个父元素
通过class名查找 var 变量名(s)=document.getElementsByClassName("class名");特殊点同通过标签名查找
通过关系查找（前提：至少先找到一个元素）
1. 查找一个元素的父元素 elem.parentNode单个元素
2. 查找一个元素的子元素 elem.children集合
3. 第一个/最后一个儿子 elem.first/lastElementChild
4. 前一个/后一个兄弟 elem.previous/nextElementSibling
单个元素找到是单个元素，没找到返回null；多个元素找到是一个集合，没找到是空集合[]

操作元素

内容
1. innerHTML：获取或设置元素的内容部分，并且能识别里面包含的标签；获取elem.innerHTML；设置elem.innerHTML="新内容";
2. innerText：获取或设置元素的文本部分，不能识别标签；获取elem.innerText；设置elem.innerText="新文本";
3. value：获取或设置input的内容部分；获取input.value；设置input.value="新文本";
html属性
1. 获取属性值 elem.getAttribute("属性名")简化版elem.属性名
2. 设置属性值 elem.setAttribute("属性名","新属性值");简化版elem.属性名="新属性值";
3. 简化版的缺陷 class属性必须写成className；不能操作自定义属性
css样式
1. 获取elem.style.css属性名
2. 设置elem.style.css属性名="css属性值";
3. 特殊：若css属性名有横线要去掉，使用小驼峰命名法；操作内联样式，只能获取内联样式

绑定事件

单个元素 elem.onclick=function(){}this指绑定事件的这个元素
多个元素 for(var i=0;i<elems.length;i++){ elems[i].onclick=function(){} }this指当前触发事件的元素

第六天

数据类型转换的补充

转为字符串 String(x)万能，任何数据类型都可转为字符串；等效于隐式转换，还不如+""
转为布尔 Boolean(x)万能，任何数据类型都可转为布尔，还不如!!x
1. 只有6个会为false：0、""、undefined、null、NaN、false，其余都为true
2. 在分支（if）或循环（while/for）的条件中，不管写入什么，都会隐式转换为布尔值；只要不是上述6个，都会执行

运算符和表达式

算数运算：+-*/% 具有隐式转换
比较运算：> >= < <= == != === !== 具有隐式转换,默认转为数字再比较
1. 若两边都是字符串,则按位PK每个字符的16进制Unicode或10进制ASCII码;0~ 9<A~ Z<a~ z<汉字
2. ===和!==:不带隐式转换的等值比较和不等比较,要求数值和数据类型都相同;用三等才能区分undefined和null
逻辑运算:&& || !
1. 短路逻辑:如果前一个条件已经能够得出最后结论,则不看后续条件
2. &&短路:如果前一个条件为true,才执行后续操作,为false就不会执行;公式:条件&&(操作);作用:简化简单的分支(即if(条件){操作};操作只能有一句话)
3. ||短路:用于浏览器兼容 e=e||window.event;
位运算
1. m左移n位 m<<n表示m*2的n次方
2. m右移n位 m>>n表示m/2的n次方
赋值运算:+= -= *= /= %=(先计算,再赋值回去)
1. i++表示递增,每次只会+1; i+=1表示累加,每次+几由程序员决定
2. i++和++i的区别:单独使用,放前放后都一样; 若参与了别的表达式,变量中的值都会+1,前++返回的是加了过后的新值,后++返回的是加之前的旧值
三目运算
1. 简化if...else 条件?操作1:默认操作;
2. 简化if...else if...else 条件1?操作1:条件2?操作2:默认操作;
3. 操作只能有一句话,默认操作不能省略

扩展

计算机带有舍入误差,解决方法是num.toFixed(d);d表示保留几位小数,会四舍五入自动进制;结果返回的是字符串,因此最好搭配parseFloat()使用
获取字符串中第一个字符的ASCII码:str.charCodeAt(0);