使用JS

创建一个js文件夹，在html里写一个script然后src引入js。

输出方式

console.log(),在括号里写入你想要输出的东西。

变量

变量通俗的说,变量就是存放数据的容器。我们通过变量名来获取数据,甚至修改数据。

创建一个变量:

var 变量名=值；
特殊点:
1.不可以随便取名； 2.不可以用数字开头； 3.可以使用下划线和驼峰命名； 4.起名做好见名知意； 5.变量名不可以为关键字；

数据类型有那些：

数字=Number（蓝色）取值无数个只要是数字就可以
字符串=string（黑色）取值无数个需要加上""
布尔=boolean（蓝色）布尔值只有两个分别是true和false,分别代表的是对和错。
空=null(灰色）取值只有null
一个未定义的值=undefined(是一个垃圾）

六种运算符

算术运算符：+，-，*，/，%=取余；
会带有隐式转换：会把两边的数据转换为数字然后运算。
但是+运算如果遇到的是一个字符串和另一个，则会把两者拼接。
比较运算符：>,<,>=,<=,==,!=,!==，===。用于if中
逻辑运算符：
&&=与：满足一个为false，全部满足才为true；
||=或者：满足一个为true，全部不满足才为false；
赋值运算符：=，+=,*=,-=,/=,%=;
自增自减运算符：++，--；
位运算：m<<n==m左移了n位，m*2的n次方; m>>n==m右移了n位，m/2的n次方；

分支

if分支:
1.if(一个条件）{操作}
2.if(条件1）{操作一}else if(条件2）{操作二}else{默认操作}
switch...case分支：
1.前提需要知道最后的结果是什么才可以使用；
2.语法：switch(变量或者表达式）{case值1:操作1;break;case值2:操作2;break;default:默认操作;}
三目运算：为了简化简单的分支：操作只能有一句话.

强制转换数据类型：

转字符串：var str=x.toString()---页面上所有的东西都是字符串，所以没必要转。
转数字：
1.parseInt(str/num)---从左往右依次读取，只认识数字字符，遇到不是数字字符就停止，不认识小数点。 2.parseFloat(str)----从左往右依次读取，只认识数字字符，遇到不是数字字符就停止，但是认识小数点。
转布尔:Boolean(x)-----万能的，任何人都可以转为布尔，完全等效于隐式转换，其实Boolean()就是隐式转换的底层原理，还不如!!x
注意：只有6个会为false：0，undefined，null，"",NaN,false，其余都是true。

循环

!!!!循环都是一次一次的执行

第一种while循环：
语法:var 循环变量=几;while(循环条件){循环体;循环变量变化起来;}
死循环：while(true){死循环操作}
break - 退出整个循环
continue - 退出本次循环，下一次还是会执行的
！！第二种for循环：
语法for(var 循环变量=几;循环条件;循环变量变化起来){循环体;}}
死循环：for(;;){循环体;}
两者之间的区别：while更麻烦，for更简单，大部分用for.
第三种do...while循环：不用，很麻烦

函数

Function

使用
1.创建：function 函数名(){函数体/代码段;}
2.调用：在JS里面写函数名()；或者在HTML里绑定点击事件：<p onclick="函数名()">文字</p>
以后如果不希望一打开页面就执行就可以使用函数

传参

function 函数名（形参，）{函数体;}形参可以写多个中间用逗号隔开
使用带参数的函数时，记得必须传入实参 - 实际参数，就是你传递过去的值function zhazhiji(fruit){console.log("正在榨"+fruit+"汁");} zhazhiji("苹果")
注意：传参的时候顺序是不能乱的，必须和形参的顺序一一对应上，数量也不要多也不要少.!!!!!!!

自定义函数Function

什么是自定义函数：需要提前预订好的，以后可以反复使用的一个代码段。

使用：先创建：

声明方式：
function 函数名(形参){函数体;return 返回值;}
直接量方式：
var 函数名=function(形参){函数体;return 返回值;}

调用函数：

var result=函数名(实参);

其实return的本意是退出函数，但是如果return的后面跟着一个数据顺便将数据返回到函数作用域的外部，
但是return只负责返回不负责保存，所以在调用函数时，你需要用一个变量去接住他，
就算省略return，默认也有return，会悄悄的返回一个undefined给你，建议有返回值才拿变量去接住，如果不需要返回值，直接不用接具体要不要得到函数的结果
如果有一天你在全局希望拿着函数的结果去做别的操作，那么记得加上return

作用域

全局作用域：全局变量和全局函数，在页面的任何一个位置都可以访问/使用
函数作用域：局部变量和局部函数，只能在（函数调用时，内部可用）
!!!!!!优先使用局部的，局部没有找全局，全局没有就报错

作用域特殊点：

局部可以使用全局的，但是全局不能使用局部的,解决的话就加上return 返回值.

数组Array

数组里每个元素都有一个自己的位置，称之为叫做下标，下标都是从0开始的，到最大长度-1

1.创建数组

var arr=[]

2.获取数组里面的数据

数组名[i]

3.添加和替换元素

数组名[i]=新数据
如果下标处没人，则为添加，如果下标处有人则为替换

4.特殊

数组不限制个数，不限制类型
数组中唯一的属性：length
获取到数组的长度，长度是从1开始
语法：数组名.length

5.三个固定的套路

获取数组倒数第n个元素：arr[arr.length-n];
向末尾添加元素：arr[arr.length]=新;
缩容：删除数组倒数n个元素：arr.length-=n;

6.遍历数组

往往很多情况，我们不会拿出数组的某个数组来使用，而是拿出数组中的所有数组来进行相同或相似的操作 - 搭配上循环
公式：for(var i=0;i<arr.length;i++){ arr[i];//当前次元素 }

DOM：Document Object Model

查找元素

直接通过 HTML 的特点去查找元素

可以通过id去查找
var elem=document.getElementById("id值");但是一次只可以找到一个元素（前端不使用，留给后端）
可以通过class名去查找
var elems=document/已经找到的某个父元素.getElementsByClassName("class名");

返回值：找到了返回的是一个类数组DOM集合，没找到返回一个空数组
JS只能直接操作DOM元素，不能直接操作DOM集合！解决：要么下标拿到某一个，要么遍历拿到所有人
不一定非要从document开始查找，如果从document去找，会找到所有的元素，可以换成我们已经找到的某个父元素

可以通过标签名去查找
var elems=document/已经找到的某个父元素.getElementsByTagName("标签名");

返回值：找到了返回的是一个类数组DOM集合，没找到返回一个空数组
JS只能直接操作DOM元素，不能直接操作DOM集合！解决：要么下标拿到某一个，要么遍历拿到所有人
不一定非要从document开始查找，如果从document去找，会找到所有的元素，可以换成我们已经找到的某个父元素

通过元素之间的关系去查找元素：前提：至少要【先找到一个元素】才可以使用关系网

父亲：elem.parentNode;//单个元素
儿子：elem.children;//集合
第一个儿子：elem.firstElementChild;//单个元素
最后一个儿子：elem.lastElementChild;//单个元素
前一个兄弟：elem.previousElementSibling;//单个元素
后一个兄弟：elem.nextElementSibling;//单个元素

操作元素

操作元素的前提首先需要找到元素才可以操作。

1.内容

innerHTML - 获取或设置开始标签到结束标签之间的内容。（支持识别标签）

获取：elem.innerHTML;
设置：elem.innerHTML="新内容";
value - 专门用于获取或设置input的内容的
获取：input.value;
设置：input.value="新值";

2.属性

获取属性值：elem.属性名;
设置属性值：elem.属性名="属性值";

！！特殊:

class必须写为className
只能操作标准属性，不能操作自定义属性

3.样式

二阶段我们就是要用js来操作（内联样式）：

不会牵一发动全身
优先级最高

获取样式：elem.style.css属性名;
设置样式：elem.style.css属性名="css属性值";
特殊：css属性名，有横线的地方，去掉横线，换为小驼峰命名法--background-color换成backgroundClor

4.绑定事件

elem.onclick=function(){}；
关键字this - 这个，目前只能在【事件】内部使用
如果单个元素绑定事件，this-->这个元素
如果多个元素绑定事件，this-->当前元素

JS第一周总结