javascript

简称：js
是一个运行在客户端浏览器的【解释型】【弱类型】【面向对象】脚本语言。
编译型：需要先检查语法，再运行，如果语法不正确。就不会执行。（更严格）
解释型：不需要先检查语法，执行之后发现了错误，就会停止运行。（更自由）
弱类型：变量保存的数据随意的，由数据来决定的。（自由）
强类型：变量保存的数据，由数据类型来决定的。
面向对象-(难点)
1. 常用的写法：
  
  对象名.属性名
  
  对象名.方法名（）；
2. 特点：
  
  1)、可以使用一切编辑工具编写JS代码，编辑器不代表你的实力... 2)、解释型 3)、弱类型 4)、面向对象 5)、可以做一切css完成不了的效果（轮播、选项卡、购物车、验证...）
  
  javascript其实由三部分组成：
  
  1、ECMAScript - 核心语法，内功心法，以后的任何操作可能都离不开我们这些天学习的东西 2、DOM - Document Object Model - 文档对象模型（外功招式），文档：HTML、CSS - JS操作页面元素了 3、BOM - Browser Object Model - 浏览器对象模型（外功招式），操作浏览器的，但是很多东西浏览器本身就自带了，所以BOM使用相对较少

如何使用 JS:****

1、使用的方法：（2种）

   1、直接在HTML写上一个script标签，在里面书写js代码 - 上课用
        <script>js代码</script>

    2、创建一个xx.js文件，在其中写入js代码，最后在HTML引用 - 正式开发使用方式
        <script src="xx.js">
            只要有src属性在，此处不可以在书写代码了
        </script>

2、输出方式/打桩输出/检查错误:(3种)

1)、在控制台输出日志：console.log();

2)、在页面输出日志： document.write();

- 支持标签，缺点：如果以后学会了绑定事件里面有document.write这句话，那会替换掉整个页面

3)、在弹出框输出日志：alert();

-缺点：会卡主整个页面，导致用户只能看到白板

变量和常量：

1、变量：var 变量名=值

创建后，值可以修改。

以后反复使用的数据，都需要保存在变量中，使用变量名，就等同于使用里面的值

1)、变量名是随意的：

不能以数字开头，建议使用下划线命名法和驼峰命名法，命名要尽量见名之意。

2)、如果变量名为name，都会变成为默认的字符串。

2、常量：创建后，值不可以修改。

一个网页中需要固定的值的时候，可以使用常量，因为它的值是不可以修改的。

***** 算数运算符：+ - * / %

1、%：取余,俗称摸，两个数相除，不取商，而是取除不尽的余数： m%n

1)、判断奇偶性：number%2=0时说明为偶数，=1时说明是奇数。

****2)、+运算：

1>、如果左右两边都是一个数字，直接相加

2>、但是如果左右两边有一个字符串，则+运算，不再是+运算就会变成拼接的操作：我+1=我1；

数据类型：分为两大类：

1、原始/基本/值类型：5个

1)、Number-数字，取值：无数个

2)、String-字符串，取值：无数个

3)、Boolean-布尔，取值：ture（真，对）和false（假，错）

4)、Undefined-取值：undefined，创建了一个变量，但是没有赋值，默认值为 undefined，都不能拿来做任何的操作。

5)、Null-空，取值：null，不用的变量，可以进行释放，节约我们的内存空间。

***数据类型的转换：不同的数据类型做操作可能出来的结果也不一样

1、js获取页面上的一切东西，数据类型默认都是一个字符串

2、如果你想要查看数据类型：typeof(查看的东西 )

3、**算术运算的隐式转换：我们看不见的默认：悄悄的将左右两边的东西，转为一个数字，在运算 1<、特殊：

1、+运算，碰上一个字符串，左右两边都会悄悄的变成字符串，+运算也不再是+运算，变了拼接操作 2、原来别的数据类型也能转为数字 true->1 false->0 undefined->NaN：只要是转为数字，但是我又不知道该转为多少的时候，结果一定为NaN null->0 3、其实-/%，字符串也可以转为一个数字，前提要是一个纯数字组成的字符串才能，但凡包含了一个非数字字符则为NaN "100"->100 "100px"->NaN 4、NaN：Not A Number：不是一个数字，但是确实又是数字类型，不在三界之中，不是一个有效的数字 2<、缺点： 1、NaN参与任何算术运算，结果仍为NaN 2、NaN参与任何比较运算，结果都为false,甚至自己都不认识自己问题：我们没有办法使用普通的比较运算来判断x是不是NaN

2、强制/显示转换：隐式转换出来的结果不是我们想要的，我们程序员就要手动调用一些方法，强制转为我们想要的数据类型，再运算 1、转字符串：var str=xx.toString();//xx不能是undefined和null，因为undefined和null不能使用.做任何操作页面上的一切数据类型都是字符串

   2、***转数字：3种
        1、*parseInt(str/num);  parse->解析 Int->整型
        原理：专门为字符串和小数转为整数数字准备的，从左向右依次读取每个字符，碰到非数字字符就会停止转换，
              如果一来就碰到了不认识的字符，结果就为NaN，不认识小数点
            console.log(parseInt(100.5));//100
            console.log(parseInt("100.5"));//100
            console.log(parseInt("100px"));//100
            console.log(parseInt("px100"));//NaN
            console.log(parseInt("1px00"));//1
            console.log(parseInt(true));//NaN
            console.log(parseInt(false));//NaN
            console.log(parseInt(undefined));//NaN
            console.log(parseInt(null));//NaN

        2、*parseFloat(str);     parse->解析 Float->浮点数：小数
        原理：几乎和parseInt一致，认识小数点
            console.log(parseFloat(100.5));//100.5
            console.log(parseFloat("100.5"));//100.5
            console.log(parseFloat("100.5px"));//100.5
            console.log(parseFloat("px100.5"));//NaN
            console.log(parseFloat("10px0.5"));//10
            console.log(parseFloat("100.5.5.5"));//100.5
            console.log(parseFloat(".555"));//0.555

        3、Number(x);//此方法是万能的，任何人都可以转为数字
                 //垃圾：完全等效于隐式转换，我还得记忆一个方法，还不如 -0 *1 /1

***** Function的基础：

1、Function：函数，也称之为方法：需要【预定义】好的，以后就可以【反复使用】的【代码段】

2、如何使用：2步 1、创建/定义/封装函数： function 函数名(){ 若干的函数体/代码段/操作 }

2、调用/使用函数

函数名（）；

注意：

1、程序员在js里写死，调用几次，就执行几次

          2、交给用户来触发，只需要为某个元素绑定点击事件
            **<elem onclick="js代码">内容</elem>**

3、何时使用： 1、不希望打开页面立刻执行，而需要时再用，或者由用户来触发 2、希望能够反复执行，不用刷新页面 3、以后任何一个独立的功能体，都要单独封装为一个函数 4、函数在js中的地位最高：函数是第一等公民地位，所以随时随地，咱们要想着能不能封装函数

4、带参数的函数原材料 -> 参数比如：菠萝块->菠萝何时使用：如果我的函数体，希望根据传入的实参的不同，做的略微不同创建：形参：形式参数，其实就是一个变量，但是不需要写var，而且默认也没有保存任何值 function 函数名(形参,...){ 若干的函数体/代码段/操作 }

调用：实参：实际参数，真正的值，需要你在调用函数时传入进去

函数名（实参）；

特殊：

1、传参的顺序一定要一一对应上，并且数量也要对应 2、不是一定需要带参数的函数，才是好函数，具体要不要带有参数，需要看我们的需求。如果你的函数体就是固定的 - 则普通函数搞定如果你的函数体是根据参数的不同，做的略微不同 - 就使用带参数的函数

***分支结构：

1、程序的流程控制语句：3种 1、顺序执行 - 默认：从上向下依次执行 2、分支结构 - 通过条件判断，选择部分代码执行 3、循环结构 - 通过条件判断，选择要不要重复执行某块代码

2、比较运算符：>= <= > < == != 用于做判断的结果：一定是一个布尔值强调：1、=：不是比较，而叫做赋值操作，把等号右边的东西保存到等号左边 2、如果你想要判断多个条件，绝对不能像小时候数学的写法：18<=age<=65，错误的！在代码里不支持。解决：逻辑运算符

、逻辑运算符： &&：与、并且。要求全部条件都满足，最后的结果才为true，只要有一个条件不满足，结果则为false

||：或。要求全部条件都不满足，最后的结果才为false，只要又一个条件，结果则为true

！：颠倒布尔值：！true -> false !false -> true

4、分支的语法：一个条件，一件事，满足就做，不满足就不做 if(条件){ 操作 }

一个条件，两件事，满足做第一件，不满足做第二件

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

多个条件，多件事，满足谁，就做谁

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

****循环

循环结构：反复执行相同或相似的操作循环三要素： 1、循环条件：开始 - 结束，循环的次数 2、循环体：做的操作是什么 3、循环变量：记录着我们当前在哪一次，而且它会不断的变化**

1、while循环：

语法： var 循环变量=几; while(循环条件){ 循环体; 循环变量发生变化; } 执行原理：首先创建了循环变量，判断循环条件，如果条件满足，则做一次循环体操作，并不会退出循环，回过头来再次判断条件满足，则再做一次循环体操作... 直到条件不满足为false时，才会退出循环宏观上感觉循环一瞬间就结束了，但微观上来说其实是一次一次执行的

特殊：
  1）、有的时候真有可能需要使用死循环：永远不会停下来的循环
    何时：不确定循环次数的时候
    while(true){
        死循环     
    }
  2）、退出循环语句：break; - 只能用在循环中，多半都是搭配死循环使用

2、*for循环：

执行原理：和while的原理是一样的，但是他比while看上去更加的简洁，更加的舒服语法： for(var 循环变量=几;循环条件;循环变量发生变化){ 循环体; }

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

面试题：while 和 for的区别？
    while和for几乎没有区别：
        一般来说我们不确定循环次数的时候，会使用while循环 - 死循环
        一般来说我们确定循环次数的时候，会使用for循环 - 更漂亮更简洁，大部分情况

***** 数组：

变量其实就是我们所谓的内存，变量创建的越多，那么我们内存空间消耗越大，那么网站性能就会越差

解决：数组：创建一个变量可以保存【多个数据】数组都是线性排列，除了第一个元素，每个元素都有唯一的前驱元素除了最后一个元素，每个元素都有唯一的后继元素

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

1、创建数组：2种

1）、*直接量方式：var arr=[];//空数组

var arr=[数据1,...];

 2）、构造函数方式：var arr=new Array();//空数组
        var arr=new Array(数据1,...);//而且他还有个坑

2、获取数组之中的数据：

数组名[i];

3、后续添加/替换元素：

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

4、数组具有三大不限制：

1）、不限制元素的类型 2）、不限制元素的个数 3）、不限制元素的下标越界 - 不是一个好东西：

如果获取元素，下标越界，返回的是一个undefined

如果添加元素，下标越界，会得到一个稀疏数组，如果搭配上循环去获取每个元素，则会得到很多很多的undefined

问题：自己数下标，是不科学的，很有可能就会数错

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];//当前次元素，要干什么由你自己决定 }

DOM：Document Object Model：文档对象模型：专门用于操作HTML文档的，提供了一些方法

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

一、查找元素：

1）、通过ID找元素： var elem=document.getElementById("id值"); 特殊：（1、返回值：找到了返回当前找到的DOM元素，没找到返回是一个（2、找到了返回的也只是第一个id的元素

1、*通过标签名找元素：

var elems=document/已经找到了的父元素.getElementsByTagName("标签名"); 特殊： 1）、返回值：找到了返回一个类数组DOM集合，没找到返回的是一个空数组 2)、JS只能直接操作DOM元素，不可以直接操作DOM集合，解决：要么使用下标拿到某一个元素，那么使用遍历拿到每一个的元素 3)、不一定非要从document开始查找，如果从document去找，会找到的所有的元素，可以换成我们已经找到的某个元素

2、*通过class名找元素：

var elems=document/已经找到了的父元素.getElementsByClassName("class名"); 特殊： 1、返回值：找到了返回一个类数组DOM集合，没找到返回的是一个空数组 2、JS只能直接操作DOM元素，不可以直接操作DOM集合，解决：要么使用下标拿到某一个元素，那么使用遍历拿到每一个的元素 3、不一定非要从document开始查找，如果从document去找，会找到的所有的元素，可以换成我们已经找到的某个元素

3、通过关系找元素：前提条件：必须先找到一个元素才可以调用关系网

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

二、操作元素：前提：找到元素才可以操作元素

1、内容：

*1）、innerHTML - 获取和设置开始标签到结束标签之间的内容，支持识别标签的获取：elem.innerHTML; 设置：elem.innerHTML="新内容";

2）、innerText - 获取和设置开始标签到结束标签之间的文本，不支持识别标签的

获取：elem.innerText; 设置：elem.innerText="新文本";

*3）、value - 准备为获取input的value值准备的

获取：input.value; 设置：input.value="新内容";

2、*属性：

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

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

缺陷： 1）、class必写为className 2）、不能操作自定义属性

3、样式：

    使用样式的方式：
    1、内联样式
    2、内部样式表
    3、外部样式表

获取：elem.style.css属性名; 设置：elem.style.css属性名="css属性值"; 特殊：

1）、css属性名，有横线的地方，去掉横线，换为小驼峰命名法 border-radius -> borderRadius 2）、获取时，只能获取内联样式 - 小缺点，我们可以忽略掉

总结：一切的获取，往往都是用于判断操作一切的设置，其实也就可以理解为是修改

4、绑定事件：

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

Javascript 第一周的学习总结