第一天的学习

一.输出方式：

• console.log(); 在控制台输出；
• document.write(); 在当前文档输出；
• alert(); 警告弹窗；

二.创建变量和常量：

• var 变量=变量值； 例：var a=0； var a=prompt（"用户自己输入"）;
• const 常量=常量值； 例：const a=1； 注：创建常量后不可以修改，很少用；

三.运算符

• + - * / % 注：+运算比较特殊，+运算，如果碰到字符串，那么加号两边会悄悄的转换为字符串再进行拼接。

四.数据类型

1. 数据类型分为原始数据类型（5个）和引用/对象类型（11个）
2. 原始数据类型：

•             String: 字符串，取值有无数个，必须 "" 或 '' 包裹
  

•             Number：数字，取值有无数个，不需要任何包裹
  

•             Boolder：布尔，取值只有2个，true（真）和false（假），一般用于判断
  

•             undefined：取值只有一个：undefined，变量未赋值时的默认值，没有任何用处
  

•             Null：取值只有一个：null（空），一般用于释放内存/变量
  

第二天的学习

一.数据类型转换

隐式转换：我们程序员看不见，数据类型悄悄进行的变化

1. 算术运算的隐式转换：默认转为数字，在运算

•   true->1
  

•   false->0
  

•   undefined->NaN
  

•   null->0
  

2. 特殊：

1、+运算，碰上一个字符串，则两边都会悄悄变成字符串，变为了拼接操作

2、- * / % ，字符串也可以转为数字，前提是纯数字组成的字符串，包含了非数字字符，则为NaN

• "100"->100
• "100px"->NaN

3、NaN：Not a Number 不是一个数字，但确实是数字类型，不是一个有效数字

• 1、参与任何算术运算结果仍为NaN
• 2、参与任何比较运算结果都为false - 不能用普通的比较运算判断是不是NaN

•   解决：!isNaN(x);
  

•   true->有效数字
  

•   false->NaN
  

强制转换：隐式出来的结果不是我们想要的，我们可以手动调用一些方法转换数据类型，再去做运算

1.转字符串：

var str=x.toString();
注：

• x不能是null和undefined，null和undefined不能使用.去做任何操作
• 页面上一切的数据类型，都是字符串

2.转数字：

		var num=parseInt/Float(str);
		执行原理：从左向右，依次读取每个字符，碰到非数字字符，则停止，如果一来就不认识则为NaN，Int不认识小数点，Float认识第一个小数点

		Number(x);//虽然是万能的，任何人都可以转为数字，完全等效于隐式转换，绝对不要手动使用，还不如-0 *1 /1

二.函数

• - 创建函数：function 函数名() {}
• - 调用函数：<button onclick="函数名()">调用函数</button>或buts.onclick=function(){}

三.分支

1、比较运算符：> < >= <= == !=
	结果都是一个布尔值，正好用于判断条件

2、逻辑运算符：综合比较
	&&：全部条件满足，才满足，只要一个不满足，则不满足 
	
	||：全部条件不满足，才不满足，只要一个满足，则满足  
	
	!：颠倒布尔值

3、语法：
	if(条件){操作}

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

第三天的学习

循环结构：

var 循环变量=几;
while(循环条件){
	循环体;
	变量的变化
}

for(var 循环变量=几;循环条件;变量的变化){
	循环体;
}

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

退出循环：break;

数组：

创建：var arr=[数据,...];
      var arr=new Array(数据,...);

访问：arr[i];

添加/替换：arr[i]=新值;

length属性：获取到数组的长度：语法：arr.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];
	} 
            

第四天的学习

获取元素

1.通过html特点获取
          通过ID名获取：document.getElementById("id值");  注：通常不用，留给后端用
          通过标签名获取：document/parent.getElementsByTagName("标签名");
          通过class名获取: document/parent.getElementsByClassName("class名");
          注：获取标签名和class名获取的都是一个集合，通常会搭配遍历数组使用；
          
2.通过自身关系获取
          获取父元素：this.parentNode;
          获取子元素：this.children;   注：获取的是一个集合
          获取第一个子元素：this.firstElementChild;
          获取最后一个子元素：this.lastElementChild;
          获取上一个兄弟：this.previousElementSibling;
          获取下一个兄弟:this.nextElementSibling;

操作元素：

内容：innerHTML(识别标签)/innerText(纯文本)/value(input专属)
	获取：elem.以上三个中的其中一个;
	设置：elem.以上三个中的其中一个="新内容";

属性：
	获取属性值：elem.getAttribute("属性名");
	设置属性值：elem.setAttribute("属性名","属性值");

	简化：
	获取属性值：elem.属性名;
	设置属性值：elem.属性名="属性值";
	小缺陷：
		1、class必须写为className
		2、只能操作标准属性，不能操作自定义属性

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

绑定事件：
	单个元素绑定
	elem.onclick=function(){
		this->elem
	}

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