第一天
一、概述：JavaScript：简称JS，是一个运行在客户端浏览器的，解释型，弱类型，面向对象脚本语言。
1、解释型：在运行程序前，不需要先检查语法是否正则，直接执行，但是碰到错误就会停止执行后续代码。
2、弱类型：变量保存的数据是随意的，数据类型是由数据来决定的。
二、如何使用JS
1、使用方法：2种
1、直接在HTML页面上写script，里面就写js代码
<script>代码</script>
2、外部js，进行引入
1、创建一个xx.js的文件，里面写js代码
2、在HTML页面引入
<script src="js文件路径">
有了src属性，此处就不可以写代码
</script>
三、输出方式：检查错误：3种
1、在控制台输出日志：console.log(想要查看的东西); 在F12的console显示
2、在页面上输出日志：document.wrtie(想要查看的东西); - document当前文档 write写入：在页面上输出，而且支持识别标签 - 不建议使用：如果绑定了点击事件后输出，会把页面上原来的HTML和CSS都全部替换掉
3、在弹出框输出日志：alert(想查看的东西); - 在浏览器自带的弹出框中输出日志，但是弹出框会卡住页面，用户只能看到一个白板 - 不建议使用
四、变量和常量：
变量：创建后，值可以再次修改
何时使用：以后经常使用的数据，都要提前把他保存在一个变量中，以后使用变量名，相当于就是在使用变量的值
使用方法：var 变量名=值;
注意：
1、不能以关键字命名
2、不能以数字开头
3、建议下划线命名法 或 小驼峰命名法
2、如果你的变量名是name，不管你保存的数据是什么数据类型，都会悄悄的给你转变成一个字符串
3、多个变量创建可以简写：
var 变量名1=值1,变量名2=值2,....;
常量：创建后，值不能再次修改
语法：const 常量名=值; - 不建议使用
五、数据类型：分两大类
1、原始类型：5个
1、Number - 数字，取值：无数个
2、String - 字符串，取值：无数个，必须写上'' 或 ""
3、Boolean - 布尔，取值：两个：true/false - 往往用于判断比较的条件处使用
4、Undefined - 取值：1个：undefined，创建了一个变量，但是没有赋值，默认值为undefined。
5、Null - 空，取值：1个：null，释放变量/内存，节约内存空间
2、引用类型：11个
第二天
一、数据类型转化：不同的数据类型做操作可能出来的结果是不一样的
JS获取页面上的一切东西，数据类型默认都是一个字符串
如果你想要查看数据类型：typeof(想要查看的东西);
1、算术运算符的隐式转换：目的：就算不用看输出脑子也最后的结果是什么
默认：悄悄的将左右两边的东西，转为一个数字运算
特殊：1、+运算，碰上一个字符串，左右两边都会悄悄的转为字符串，+运算变为字符串拼接操作
2、别的数据类型其实也可以转为数字
true 1
false 0
undefined NaN
null 0
3、-*/%，字符串也可以转为一个数字，前提要是一个纯数字组成的字符串才行，只要包含一个非数字字符就转为NaN
4、NaN：Not A Number：不是一个数字，但是确实是数字类型。
2个缺点：
1、NaN参与任何算术运算结果都是NaN
2、NaN参与任何比较运算结果都是false，包括自己
!isNaN(x) true 是一个有效数字 false 是一个NaN
二 强制转换：强制转换数据类型，得到我们需要的数据，再做操作
1、转字符串：var i=x.toString();//x不能是undefined或null，因为undefined和null不能使用任何的.操作
页面上的一切东西，数据类型默认都是一个字符串
2、转数字：
1、parseInt(str/num);
执行原理：专门为字符串和小数转为整数数字准备的，从左向右依次读取每个字符，碰到非数字字符，就停止转换，
开始就碰到了不认识的，则NaN
2、parseFloat(str);
执行原理：几乎和parseInt一致，认识第一个小数点
3、Number(x);//此方法是万能的，任何人都可以转为数字
不建议使用：完全等效于隐式转换。
三、Function的基础：
1、Function：函数，称之为方法：需要提前预定义好的，以后就可以反复使用的代码段
2、如何使用：2步
1、定义函数：
function 函数名(){
若干的代码
}
2、调用/使用函数：
1、要么在js中程序员直接写死，要执行几次：函数名();
2、交给用户绑定在某个元素上，写上点击事件，让用户来触发：
<elem οnclick="js代码">内容</elem>
3、何时使用：
1、不希望打开页面立刻执行，而需要时再使用 或 由用户来触发
2、希望能够反复执行，不用刷新页面
3、以后任何一个独立的功能体，都要单独封装为一个函数
4、函数的地位非常高，随时随地考虑能不能封装为一个函数，尤其是重复的代码
5、函数内的一切内存，函数调用完毕后都会自动释放
4、带参数的函数：
创建：形参：形式参数，其实就是一个变量，但是不需要写var，而且默认也没有保存任何值，默认值为undefined
function 函数名(形参,形参,...){
函数体;
}
使用：实参：实际参数，真正的值，需要再你调用时再传入
函数名(实参,实参,...)
特殊：1、传实参的顺序一定要和形参的顺序一一对应，并且数量也要对应
2、不是一定要带参数的函数才是好函数，具体情况，需要具体分析：
如果函数体就是固定的 - 则普通函数
如果函数体希望根据传入的实参不同，做的略微不同 - 则带有参数的函数
四、分支结构：
1、程序的流程控制语句：3种
1、顺序执行 - 默认，从上向下的依次执行
2、分支结构 - 通过条件的判断，选择部分代码执行
3、循环结构 - 通过条件的判断，选择要不要重复执行某些代码
2、比较运算符：> < >= <= == !=
用于做判断/比较的
结果：一定是一个布尔值
强调：如果你想要判断多个条件，使用逻辑运算符
3、逻辑运算符：
&&：与，并且：要求全部条件都要满足，最后的结果才为true
只要有一个条件不满足，结果则为false
||：或：要求全部条件都要不满足，最后的结果才为false
只要有一个条件满足，结果则为true
!：颠倒布尔值
4、分支的语法：
一个条件，一件事，满足就做，不满足就不做
if(条件){
操作
}
一个条件，两件事，满足就做第一件，不满足就做第二件
if(条件){
操作
}else{
默认操作
}
多个条件，多件事，满足谁就做谁
if(条件1){
操作1
}else if(条件2){
操作2
}else{
默认操作
}
第三天
一、循环结构：
循环结构：反复执行 相同或相似的操作
循环三要素：
1、循环条件：开始 - 结束，循环的次数
2、循环体：做的操作是什么
3、循环变量：记录着我们当前在哪一次，而且他会不断的变化，往往都会向着不满足循环条件进行
1、while循环：
语法：
var 循环变量=几;
while(循环条件){
循环体;
循环变量变化;
}
执行原理：首先创建了循环变量，然后判断条件，如果条件满足，则做一次循环体操作，并不会退出循环，回过头继续判断条件满足吗，如果满足，则再做一次循环体操作.......
直到循环条件不满足，才会退出循环
死循环：
while(true){
循环体;
}
2、退出循环语句：break - 只能在循环中使用，多半都是搭配死循环使用的
2、for循环
语法：for(var 循环变量=几;循环条件;变量的变化){
循环体;
}
死循环： for(;;){
循环体;
}
二、数组的基础
数组：创建一个变量可以保存多个数据的集合
数组都是线性排列，除了第一个元素，每个元素都有唯一的前驱元素
除了最后一个元素，每个元素都有唯一的后继元素
每个元素都有一个自己的位置，称之为叫做下标，下标是从0开始的，到最大长度-1
1、创建数组：2种
1、直接量方式：
var arr=[];//空数组
var arr=[数据1,....];
2、构造函数方式：
var arr=new Array();//空数组
var arr=new Array(数据1,....);//而且这个方法还有一个坑
2、获取数组中的数据
数组名[下标];
3、添加/替换
数组名[下标]=新值;
下标处有没有元素，如果没有则为添加，如果有了就为替换
4、数组具有三大不限制
1、不限制元素的个数
2、不限制元素的类型
3、不限制元素的下标越界
如果获取元素，下标越界，返回的一个undefined
如果添加元素，下标越界，会得到一个稀疏数组，导致下标不再连续，如果搭配上循环去遍历每一个元素的话，我们会得到很多很多的undefined
5、长度：数组名.length - 获取当前数组的长度：最大下标+1
三个固定套路：
1、获取倒数第n个元素：arr[arr.length-n]
2、始终向末尾添加元素：arr[arr.length]=新值;
3、缩容：删除倒数n个元素：arr.length-=n
前面的下标好数，后面的下标也好数，但是中间的下标还是不好数
6、往往很多情况，我们不会拿出某个元素来使用，而是拿出所有的每个元素来进行 相同 或 相似的操作
遍历数组：把数组中的每个元素拿出来执行相同相似的操作
公式：
for(var i=0;i<数组名.length;i++){
console.log(数组名[i]);
}
第四天
一、DOM：Document Object Model：文档对象模型：专门用于操作HTML文档的，提供了一些属性和方法
二、DOM树概念：DOM将我们的HTML看做了是一个倒挂的树状结构，但是树根不是html标签，而是document对象
document对象：不需要我程序员创建的，由浏览器的js解释器自动创建，一个页面只有一个document
作用：可以通过树根找到我们想要的任何一个DOM元素/节点/对象（属性和方法）
DOM会将页面上每个元素、属性、文本、注释都会当作一个DOM元素/节点/对象
三、查找元素：
1、通过ID查找元素
语法：var elem=document.getElementById("id值");
特殊：
1、返回值，找到了返回的是一个当前找到的DOM元素，没找到，返回一个null，做了别的操作可能就会报错了
2、找到了多个相同的id，那么只会返回第一个
3、不建议使用，一次只能获取一个元素，也只能操作一个元素
4、其实根本不需要使用此方法，直接写ID也可以找到元素
2、通过标签名查找元素
语法：var elems=document/已经找到了的父元素.getElementsByTagName("标签名");
特殊：
1、返回值：找到了返回的一个是类数组DOM集合（很像数组，都能用下标，都能用length，都能遍历），没找到返回一个空集合
2、JS不能直接操作DOM集合，只能直接操作DOM元素，解决：要么使用下标拿到某一个元素，要么使用遍历拿到每一个元素
3、不一定非要从document开始查找，如果document去找，会找到所有的元素，可以换成我们已经找到的某个父元素，就只会找到这个父元素下面的元素了
3、通过class名查找元素
语法：var elems=document/已经找到了的父元素.getElementsByClassName("class名");
特殊：
1、返回值：找到了返回的一个是类数组DOM集合（很像数组，都能用下标，都能用length，都能遍历），没找到返回一个空集合
2、JS不能直接操作DOM集合，只能直接操作DOM元素，解决：要么使用下标拿到某一个元素，要么使用遍历拿到每一个元素
3、不一定非要从document开始查找，如果document去找，会找到所有的元素，可以换成我们已经找到的某个父元素，就只会找到这个父元素下面的元素了
4、通过关系查找元素：前提条件：必须先找到一个元素才可以调用关系网
父元素：elem.parentNode;
子元素：elem.children; - 集合
第一个儿子：elem.firstElementChild;
最后一个儿子：elem.lastElementChild;
前一个兄弟：elem.previousElementSibling;
后一个兄弟：elem.nextElementSibling;
操作元素：前提：找到元素才能操作元素：<标签 属性名="属性值" style="样式">内容</标签>
1、内容：
1、innerHTML：获取 和 设置 开始标签到结束标签之间的内容 - 支持识别标签
获取：elem.innerHTML;
设置：elem.innerHTML="新内容";
2、innerText：获取 和 设置 开始标签到结束标签之间的文本 - 不支持识别标签
获取：elem.innerText;
设置：elem.innerText="新文本";
以上两个属性都是为双标签准备的，但是操作不了单标签input的内容
3、value：专门为input的value值准备的
获取：input.value;
设置：input.value="新值";
2、属性：
获取属性值：elem.getAttribute("属性名");
设置属性值：elem.setAttribute("属性名","属性值");
简化版：
获取属性值：elem.属性名;
设置属性值：elem.属性名="新属性值";
缺陷：
1、class必须写为className class为关键字
2、不能操作自定义属性，只能操作标准属性
3、样式
使用样式的方式：
1、*内联/行内样式
2、内部样式表
3、外部样式表
二阶段我们就是要用js来操作【内联样式】
1、不会牵一发动全身
2、优先级最高
获取：elem.style.css属性名;
设置：elem.style.css属性名="css属性值";
特殊：
1、css属性名，有横线的地方，去掉横线，变为小驼峰命名法
border-radius borderRadius
2、目前学习的，获取时，只能获取内联样式
4、绑定事件：
elem.on事件名=function(){
操作;
this关键字：目前只能用于事件内：
如果单个元素绑定事件：this 这个元素
如果多个元素绑定事件：this 当前触发事件的元素
扫一扫
228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
