javascript第一周总结

知识大纲:

1. 输出方式
2. 常量变量
3. 算术运算符
4. 数据类型
5. 数据类型的转换
6. function函数
7. 分支结构
8. 循环结构
9. 数组
10. DOM

1. 输出方式

1. 在控制台输出日志：console.log(想要输出的东西)-通过F12控制台点击console查看；
2. 在页面输出日志：document.write(想要输出的东西)-直接在页面显示，支持识别标签；缺点:如果绑定点击事件后输出，会把原来的html和css全部替换掉；
3. 在弹出框输出日志：alert(想要输出的东西)-缺点：在浏览器自带的弹出框内输出内容，页面会被卡住，用户只能看到一个白板。

2. 常量变量

1. 变量：创建后，值可以再次修改，而且以后可以反复使用， var 变量=值；
2. 常量：创建后，值不可以修改， const 常量=值；
3. 变量命名规则：1.不能以数字开头；2.不能以关键字命名，例如name,使用name命名时，不管你保存赋值的是什么数据类型，都会默认为字符串类型。

3.算数运算符

+-*/%

1. +运算：如果左右两边单反有一个为字符串类型，另一边也会变成字符串，+运算就会变成字符串拼接；
2. -*/%运算 :可以把字符串变成数字，但前提字符串必须是纯数字组成的字符串才可以；如果字符串包含了非数字字符，就会变成NaN

4.数据类型

1. Number-数字
2. String-字符串，必须用''或""包括
3. Boolean-布尔，true或false，用于判断比较
4. Null-用于释放内存
5. Undefined-创建一个变量但是没有赋值就会变成undefined

5. 数据类型的转换

Number+Number=Number; Number+String=String JS在页面上获取的一切内容，数据类型都默认为字符串
1.隐士转换：

1. +运算：如果左右两边单反有一个为字符串类型，另一边也会变成字符串，+运算就会变成字符串拼接；
2. -*/%运算 :可以把字符串变成数字，但前提字符串必须是纯数字组成的字符串才可以；如果字符串包含了非数字字符，就会变成NaN
3. true-1;false-0; null-0;undefined-NaN
   4.NaN：不是一个数字，但是是数字类型 全是缺点：
   1、参与任何算术运算，结果都为NaN；
   2、参与任何比较运算，结果都为false，甚至自己都不认识自己；
   解决：!isNaN(x) true->x是一个有效数字 false->x是一个NaN
   2.显示转换/强制转换：
   1.转换为字符串：var str=x.toString();
   2.转化为数字: 1.parseInt(str/num)-整数型;
   2.parseFloat(str)-浮点型;
   3.Number(x);

6. function函数

1、创建： function 函数名(形参,...){ 函数体; }
2、调用：
1、程序员在JS里面调好：函数名(实参,...);
2、绑定在页面元素上：<any on事件名="函数名()"> HTML（内容）和CSS（样式）和JS（行为）要分离

7. 分支结构

比较运算符：> < >= <= == !=

逻辑运算符：&& || !

结果都是一个布尔值，但是比较运算符是直接比较，逻辑运算符是综合比较

if(条件){操作}
if(条件){操作}else{默认操作}
if(条件){操作}else if(条件){操作}else{默认操作}

8. 循环结构

1、var i=0; while(i<10){ console.log(i); i++; }

2、for(var i=0;i<10;i++){ console.log(i); }

3、死循环： while(true){} for(;;){}

4、循环流程控制语句：退出循环：break;

9. 数组

1、创建： 直接量：var arr=[1,2,3,4]; 构造函数：var arr=new Array(1,2,3,4);

2、使用 访问：arr[i] 添加：arr[i]=新值;//i处已经有人了，则为替换

3、数组三大不限制： 1、不限制长度 2、不限制类型 3、不限制下标越界

4、数组的属性：arr.length - 得到长度
1、缩容：arr.length-=n;
2、向末尾添加元素：arr[arr.length]=新值;
3、获取倒数第n个元素：arr[arr.length-n];

5、遍历数组： for(var i=0;i<arr.length;i++){ arr[i];//当前次元素 }

10. DOM

1.DOM树概念： DOM将我们的HTML看做了是一个倒挂的树状结构，但是树根不是html标签，而是document对象
document对象：不需要我程序员创建的，由浏览器的js解释器自动创建，一个页面只有一个document
作用：可以通过树根找到我们想要的任何一个DOM元素/节点/对象（属性和方法） DOM会将页面上每个元素、属性、文本、注释都会当作一个DOM元素/节点/对象

2.查找元素
1、通过ID查找元素：var elem=document.getElementById("id值"); 2、通过标签名查找元素：var elems=document/已经找到了的父元素.getElementsByTagName("标签名");
3、通过class名查找元素：var elems=document/已经找到了的父元素.getElementsByClassName("标签名");
4、通过关系查找元素：
前提条件：必须先找到一个元素才可以调用关系网
父元素：elem.parentNode;
子元素：elem.children; - 集合
第一个儿子：elem.firstElementChild;
最后一个儿子：elem.lastElementChild;
前一个兄弟：elem.previousElementSibling;
后一个兄弟：elem.nextElementSibling;
强调：DOM集合不能直接做操作！
3.属性
1、内容： 1、innerHTML：获取 和 设置 开始标签到结束标签之间的内容 - 支持识别标签
获取：elem.innerHTML;
设置：elem.innerHTML="新内容";

2、innerText：获取 和 设置 开始标签到结束标签之间的文本 - 不支持识别标签
获取：elem.innerText;
设置：elem.innerText="新文本";

以上两个属性都是为双标签准备的，但是操作不了单标签input的内容

4.绑定事件
elem.on事件名=function(){ 操作;
this关键字：目前只能用于事件内： 如果单个元素绑定事件：this->这个元素
如果多个元素绑定事件：this->当前触发事件的元素 }