一js代码：
注释：作用：1、提示自己/别人 2、玩 - 养成一个写注释的好习惯
单行注释：//
多行注释：/**/
输出方式 - 3种
作用：打桩输出 - 检查错误
*在F12的控制台输出日志：console.log(数字/"字符串"/变量); - 这才最重要的（都不会影响到用户的体验）
2、在页面上输出，支持标签：document.write(数字/"字符串"/变量); - 缺点：如果绑定了一个按钮的事件，替换掉页面上所有的已有元素
3、在弹出框输出：alert(数字/"字符串"/变量); - 缺点：卡主页面，必须关闭掉弹出框，用户才能看到页面的东西
*变量：
硬盘：存储文件、数据 - 外部存储器
CPU：中央处理器计算
内存：是【临时存储】程序在运行过程中，所需要用到的数据
内存空间：保存数据的一个地方
内存地址：内存空间门牌号，0x0132asd123rtsa325sa，内存地址过长，为他取一个别名，就称之为变量名
变量就是一个内存
语法：var 变量名=值;
作用：1、经常使用的数据，可以先提前保存起来
2、数据是可能被修改的
*特殊：1、变量名不是随意的：1、不能以数字开头 2、不能使用关键字 3、尽量的见名知意
千万不要：
var aa;
var ab;
var ac;
千万不要：
var xingming; - 逼格低
尽量要：
var name;
var age;
var gender;
变量名有一个很特殊name - 不管你保存的数据是什么，最后都会变成一个字符串
其实你想要创建一个变量只需要：var 变量名;其实就已经创建好了 - 不赋值也没关系，至少创建了不会报错了
但是一般来说我们都要立马跟上赋值操作，因为默认值undefined是无用
如果创建了多个变量，可以省略掉中间var，分号都要换为逗号简写
其实var关键都可以不写，但是不推荐 - 导致全局污染
=：赋值符号，把=右边的数据保存在=左边的变量名之中，左边就单单纯纯的是一个变量名而已，不会变成变量的值
以后不管代老师说创建/声明/定义 - 同一个意思
没有 = null
常量：一旦创建值不可以被修改
语法：const 常量名=值;
****数据类型：不同的数据类型的，做的操作也是不一样的
1、原始/基本/值类型：5个
Number - 数字，取值：无数个
String - 字符串，取值：无数个
Boolean - 布尔值，取值：2个，表示一个【判断的结果】，true（真） 、 false（假）
Undefined - 取值只有一个：undefined - 变量的默认值，undefined没有任何作用
Null - 空，取值1个：null，作用，你用完了的变量（内存），可以用null释放 - 释放内存节约
2、引用/对象类型：11个对象（属性和方法）
*算术运算符：+ - * / %
m%n：取余，俗称模，m/n不取商，而且除不尽的余数
作用：
1、*判断奇偶性
num%2 == 1 奇数
num%2 == 0 偶数
2、获取一个数字的后n位
1234%10 -> 4
1234%100 -> 34
1234%1000 -> 234
3、判断一个数字永远不超过几
num%5 -> 结果永远不会超过5
***算术运算其实具有隐式数据类型转换，默认都会转为数字，运算
特殊：+运算，如果碰到一个字符串，那么两边的数据都会悄悄转换字符串，然后+运算变为拼接操作
- * / %其实字符串也可以转为数字，必须是纯数字组成的字符串才行，只要包含一个非数字字符结果则为NaN
*扩展：
1、用户输入框：var user=prompt("提示文字","默认值");
2、查看数据类型：typeof(变量/值/表达式);
3、页面上获取到的数据类型都是字符串，如果你就想转为数字：
parseInt(str) -> 转为整数
parseFloat(str) -> 转为浮点数
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
***数据类型转换
javascript是弱类型语言，数据类型都是有数据决定的
对于不同数据类型的运算时，数据类型会进行转换： number + number = number number + string = string
javascript中想要查看自己的数据类型是什么：typeof(你想要查看的)
*1、隐式转换： 自动转换，程序员看不见 *算术运算，默认左右两边都会转成数字，再运算 特殊：1、+运算，只要有一个是字符串那么左右两边都会悄悄转为字符串，在拼接 2、true->1 false->0 undefined->NaN null->0 3、-/%，其实字符串也可以转为数字，只不过必须是纯数字组成的字符串才可以，只要包含了非数字 字符，则转为NaN
NaN：Not a Number：不是一个数字，但他确实是number类型，简单理解：无效的数字
特点：1、NaN参与任何算术运算结果都为NaN
2、NaN参与任何比较运算结果都为false，甚至自己都不认识自己
问题：正是因为自己都不认识自己，所以我们没有办法使用普通的比较运算来判断一个x是不是NaN
有可能用户恶意输入，结果隐式转为NaN，我们如何放置恶意输入
解决：判断x是不是NaN
var bool=isNaN(x); x是NaN结果为true x是数字结果false
也可以返用!isNaN(x)：x是数字结果为true，x是NaN结果就为false
!isNaN(x)专用防止用户恶意输入，目前我们仅仅只能控制用户输入数字 - 更深入的控制我 们需要以后学习了正则表达式才可以
显式转换
强制转换：隐式转换的结果可能不是我们想要的，我们程序员可以手动调用某些方法，进行数据转换，再运算
1、转字符串：
语法：var str=xx.toString();//xx不能是undefined和null，因为undefined和null不能使用.
此方法不重要：页面上获取来的所有的数据默认都是字符串类型
*转数字：
*1、parseInt(str/num);
原理：从左向右依次读取每个字符，进行转换，碰到非数字字符，就停止，而且不认识小数点
如果一开始就碰到了不认识的字符，则转为NaN
比如：
parseInt(35.5) -> 35
parseInt("35.5") -> 35
parseInt("35hello5") -> 35
parseInt("hello35") -> NaN
parseInt("35px") -> 35
parseInt(bool/un/nu) -> NaN
*2、parseFloat(str);
原理：几乎和上者一致，但是它认识第一个小数点
比如：
parseFloat(35.5) -> 35.5
parseFloat("35.5") -> 35.5
parseFloat("35.5px") -> 35.5
parseFloat("35.5.5") -> 35.5
parseFloat(".555") -> 0.555
parseFloat("px35.5px") -> NaN
parseFloat(true) -> NaN
强调：以上两个方法，只支持str和num使用，其余的使用则为NaN ,可以去掉单位变成一个数字
3、Number(x);//万能的，任何数据都可以转为数字
//完全等效于隐式转换，还不如 x*1 x/1 x-0
` js里面的函数：完成了一个...........的功能
使用函数：2步：关键字 function
1、创建函数
function 函数名(){
若干函数体;很多很多的代码
}
2、调用函数
1、直接在js里面写上：
函数名();//写几次就调用了几次`
2、绑定在某个页面元素上： - 让用户进行交互
<elem onclick="函数名()"></elem>
定义带参数的函数：2步
1、创建带形参的函数
function 函数名(形参,形参,...){
若干函数体;很多很多的代码
}
在定义函数功能时在小括号中放入的参数，称之为叫做形式参数，简称形参，其实就是一个变量名，只不过不用var
2、调用的过程中，传递参数，称之为实际参数 ，简称为实参，其实就是变量的值
函数名(实参,实参,...)
注意：传入实参的顺序和个数一定要和形参一一对应上！
比如：
function zzj(fruit){
console.log("正在榨"+fruit+"汁")
}
zzj("苹果");
zzj("香蕉");
总结1、如果你的函数体是固定的不变的，则不需要使用带参数的函数
2、如果你的函数希望根据传入的实参做的事儿略微不同，则需要带参数的函数来完成
***分支结构：
1、流程控制语句：3种
1、顺序结构：
默认的，代码从上向下一步一步的执行
2、分支/选择 结构
根据条件，选择一部分代码去执行
3、循环 结构
根据条件，判断你是否需要重复的执行某一部分代码
比较运算符：> < >= <= == != 作用：判断/条件 结果：一定是一个bool，只有可能会是true 或 false 也有默认的隐式转换，悄悄的转为数字再比较
if结构：当条件满足时，执行某些语句，条件不满足时，则不会执行这些语句
1、一个条件，一件事，满足就做不满足就不做
if(条件){
操作
}
2、一个条件，两件事，满足就做第一件，不满足就做第二件
if(条件){
操作
}else{
默认操作
}
3、多个条件多件事，满足谁就做谁，
if(条件1){
操作1
}else if(条件2){
操作2
}else if(条件3){
操作3
}else{
默认操作;
}
注意：1、else if写几个全看你自己
2、最后的else可以省略，但是省略后，如果条件都不满足则什么都不做
扩展：逻辑运算符：&&（与、而且） ||（或者） !（非、不）
&&：只有全部条件都满足，最后结果才为true
只要有一个条件不满足，结果则为false
||：只要有一个条件满足，结果就为true
只有全部条件都不满足，最后结果才为false
!：颠倒布尔值：!true->false
!false->true
!!true->true
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
***循环结构
1、问题：在程序中打印输出1000句hello world
console.log("1hello world");
...
console.log("1000hello world");
什么事循环，做着重复的事。
***循环：反复执行【相同 或 相似】的操作，几乎是一瞬间就执行完很多次了
循环三要素：
1、循环条件：开始、结束，重复执行的次数
2、循环操作：循环体，要执行的操作是什么
3、循环变量、变量要改变（自增/自减）
while循环
语法：
var 循环变量=几;
while(循环条件){
循环体;
循环变量改变;
}
举例：
var i=1;
while(i<=10000){//1001
console.log(i+"hello world");
i++;//i+=1 i=i+1
}
原理：
先判断循环条件，如果条件为真，则执行一次循环体中的语句，然后再一次判断条件，如果为真，则再一次执行一次循环体中语句...
直到循环条件为假，才会退出循环
重点：循环是一次一次执行的，只不过速度很快，而且循环没结束之前，会卡主后续代码
循环中的流程控制语句：允许条件结束之前提前退出循环
语法：break
位置：任何一个循环中都可以使用，只能放在循环中
场合：1、某种条件达成时，提前退出循环
2、搭配死循环使用：在 不确定循环次数的时候，只能使用break来退出循环
死循环：while(true){
循环体;
}
*for循环
语法：for(循环变量(表达式1);循环条件(表达式2);变量的改变(表达式3)){
循环体;
}
执行流程：先计算表达式1的值，计算表达式2的值，如果为true，执行一次循环体，在计算表达式3的值...
直到表达式2的值，结果为false，循环才会退出
特殊：1、死循环：for(;;){循环体}
2、表达式1和表达式3可以同时写多个
for vs while
1、while循环 一般比较适用于 不太确定循环次的时候使用 - 死循环
2、for循环 一般适合用于 已经确定了循环次数 - 个人更推荐
总结一句话：何时使用循环？
只要反复执行 【相同 或 相似】 的操作
函数可以反复执行（多半都是用户可以反复触发的），循环也可以反复执行（一瞬间几乎就执行完毕了）
*****数组
问题：保存1000个同学的姓名？
var name1="王家凯1";
...
var name1000="王家凯1000";
如何将多个数据 同一个保存和管理？？ -- 数组
多个元素/数据组成的一个集合 - 在一个变量名中保存着多个数据
数组中的元素，都是按照线性顺序排列的：
特点：除了第一个元素外，每个元素都有一个唯一的前驱元素
除了最后一个元素外，每个元素都有一个唯一的后继元素
*数组中每个元素都有一个唯一的位置序号，称之为【下标】，用来表示数组中的每一个元素
注意：下标从0 开始到 元素的最大个数-1
创建数组：2种方式
*1、直接量方式：var arr=[];//空数组
var arr=[元素,元素,...]
2、构造函数方式：var arr=new Array();//空数组
var arr=new Array(元素,元素,...);
2、访问数组中的元素：通过 下标
语法：数组名[i]
注意：获取数组下标越界，得到的是undefined！ -- 数组是无限长度的，但是如果没有数据的地方，默认值为undefined
3、追加元素：
语法：数组名[i]=新内容
注意：1、如果当前下标没有内容，则为追加
2、如果当前下标已经有内容了，则为替换
3、如果你的下标越界了/下标不连续，会导致数组变成一个稀疏数组，并不是什么好事情 - 尽量不要下标越界
4、数组中的三大不限制：
1、不限制元素的类型
2、不限制元素的个数
3、不限制元素的下标越界 - 并不是好事情
5、数组中有一个唯一的属性
属性语法：数组名.length：获取当前数组的长度（长度等于最大下标+1）
三个固定套路：
1、始终向末尾追加元素：arr[arr.length]=元素;
2、获取倒数第n个元素：arr[arr.length-n];
3、缩容：删除末尾的n个元素：arr.length-=n;
6、循环遍历数组：把数组中的每个元素取出来执行 【相同或相似】 的操作
公式：
for(var i=0;i<数组名.length;i++){
数组名[i];//当前次元素
}
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ DHTML：Dynamic：动态的HTML，并不是新的语言也不是新的技术，只是将现有技术整合的一个统称， 让网页在离线状态也能保存动态效果 DHTML = HTML + CSS + JS(dom)
DOM：Document Object Model 文档 对象 模型，专门用于操作文档（HTML和CSS）
DOM树：DOM将HTML文档看做了是一个倒挂的树状结构 在HTML文档中，所有的元素、属性、文本、注释等等都会被视为一个DOM节点/DOM对象/DOM元素
*重要概念：其实树根是document对象， 在JS中，不需要我们去创建的，由浏览器的js解释器自动创建，且一个页面只有一个document 作用：通过树根可以找到下面的任何一个DOM元素，还可以操作他
获取元素：类似css的选择器 - 必须先找到元素才能操作元素 1、通过 HTML的特性 获取元素： 1、ID获取： 语法：var elem=document.getElementById("id值"); -- id是唯一 在当前 DOM树中，根据元素的id，获取具体的dom节点 返回：找到了，保存的就是对应的元素 没找到，返回的是一个null
重点：！！！！输出出来长得像一个标签的样子，才叫做DOM节点/DOM对象/DOM元素，才能去执行后续操作
2、*标签名获取：
语法：var elems=document/parent.getElementsByTagName("标签名");
在当前 DOM树中，根据元素的标签名，获取了具体的dom集合（类数组集合）
返回：找到了，返回的是一个类数组集合
没找到，返回的是一个空集合[];
强调：1、***dom集合不允许直接做后续操作，会报错：解决：1、要么加下标拿到某一个 2、要么循环遍历拿所有
2、parent代表的是你已经找到的某个父元素
3、*class名获取
语法：var elems=document/parent.getElementsByClassName("标签名");
在当前 DOM树中，根据元素的标签名，获取了具体的dom集合（类数组集合）
返回：找到了，返回的是一个类数组集合
没找到，返回的是一个空集合[];
强调：1、***dom集合不允许直接做后续操作，会报错：解决：1、要么加下标拿到某一个 2、要么循环遍历拿所有
2、parent代表的是你已经找到的某个父元素
*2、通过 元素之间的关系 获取元素： 想要使用之前前提条件：至少要找到一个人才能动用关系
父元素：xx.parentNode; //单个元素
子元素：xx.children; //集合
第一个儿子：xx.firstElementChild; //单个元素
最后一个儿子：xx.lastElementChild; //单个元素
前一个兄弟：xx.previousElementSibling; //单个元素
后一个兄弟：xx.nextElementSibling; //单个元素
重点：集合不能做操作，只有单个元素可以
*操作元素：前提：1、至少要找到元素
2、页面上所有的东西数据类型都是一个字符串
1、元素的内容：标签之中的东西
*1、innerHTML属性：
语法：获取：elem.innerHTML; - 往往都是用来做判断的
设置：elem.innerHTML="内容"; - 修改
2、innerText属性：
语法：获取：elem.innerText;
设置：elem.innerText="文本";
小总结：以上两个操作几乎相似，但是innerHTML才可以识别标签，innerText只能操作纯文本 - 只有双标签可用
*3、value属性：专为单标签input准备的获取和设置内容
语法：获取：input.value;
设置：input.value="值";
元素的属性：什么叫属性：<elem id class title href alt style src></elem>
1、获取元素的属性值 - 往往都是用来做判断的
elem.getAttribute("属性名");
2、设置元素的属性值 - 修改
elem.setAttribute("属性名","属性值");
属性的简化版操作：
1、获取元素的属性值：elem.属性名; - 往往都是用来做判断的
2、设置元素的属性值：elem.属性名="属性值"; - 修改
简化版小缺陷：1、class必须写为className
2、自定义属性不能操作，只能操作标准属性
元素的样式：
1、CSS定义的方式：
1、内联样式 - JS要操作最好就要操作内联样式
2、内部样式表
3、外部样式表 - 一阶段最适合开发时使用
2、为什么JS要尽量的操作内联样式：
1、优先级最高 - 写的JS的样式不至于别人给覆盖了
2、牵一发而动全身 - 内联样式只会修改到当前元素
3、语法：
获取：elem.style.css属性名; - 往往都是用来做判断的
设置：elem.style.css属性名="css属性值"; - 修改
特殊：1、css属性名写法不一样，把横线删掉换成驼峰命名法
CSS JS：
width width
background-color backgroundColor
border-top borderTop
2、获取：因为代老湿现在教你们是一个内联样式的操作，获取也只能获取内联样式 - 唯一的小缺点
*新的绑定事件的操作： HTML与JS分离
elem.onclick=function(){
自己写操作
*****特殊：事件中可以使用一个关键字 this
1、单个元素绑定了事件 this->这个单个元素
2、多个元素循环同时绑定了事件 this->当前触发事件的元素
建议：如果你在事件中想要使用到绑定事件的元素，推荐使用this
}
