js第一周学习总结

    1.什么是js？

        概述：JavaScript 简称js，是一个运行在客户端浏览器的【解释型】【弱类型】【面向对象】脚本语言

            1.语言类型

                1.编译型：在运行程序之前，需要先检查语法是否正确，如果不正确，直接不允许运行-严格

                2.解释型：在运行程序之前，不需要检查语法是否正确，直接执行，但碰到错误代码时就会停止后续代码，更加自由

            2.类型

                1.弱类型：变量保存的数据可以随意，数据类型是由数据来决定的 - 更加自由

                    1 - number 数字

                    "1" - string 字符串

                2.强类型：变量保存的数据，由数据类型决定 -java- 更加的严格

            3.面向对象 - 很难

                对象名.属性名;

                对象名.方法名();

                在编程界有一句话：万物皆对象

            4.特点：

                1.可以使用一切编辑器工具编写js代码

                2.解释型  

                3.弱类型

                4.面向对象编程方式

                5.可以做一切css完成不了的效果(轮播、选项卡、购物车、验证、数据渲染)

    2.如何使用

        1.直接在html上写一个script标签，里面书写js代码   <script>js代码</script>

        2.外部js，进行引入 - 正式开发时使用

            步骤：

                1.创建一个.js的文件，里面书写js代码

                2.在html页面引入

                    <script src="js路径">

                        // 只要引入了js代码，这里的js代码就失效了

                    </script>

    3.js输出方式/打桩输出：

        目的：帮助我们检查错误

        1.在控制台输出日志：console.log(想要输出/查看的东西); - 在f12中的console显示日志

        2.在页面上输出日志：document.write(想要输出/查看的东西); - Document当前文档 - write写入

            在页面上输出，支持识别标签 -垃圾- 如果绑定了点击事件后输出，会把页面上原来的HTML和CSS都全部替换掉

        3.在弹出框输出日志：alert(想要输出/查看的东西); - 在浏览器自带的弹出框中输出，但弹出框会卡主页面，用户只能看见一个白板 -垃圾-

    4.*变量和常量：

        1.*变量：创建后，值可以再次修改

            何时使用：以后反复使用的数据，都要提前保存在一个变量中，使用变量名就相当于使用变量值

            语法：var 变量名=值;  =的含义：赋值符号，将右边的东西保存在了左边的变量名之中

            注意：

                1.变量名不能随便写

                    1.不能以关键字命名

                    2.不能以数字开头

                    3.建议下划线命名法或小驼峰命名法 header news_Header

                2.如果你的变量名是name，不管保存的数据是什么数据类型，都会转变成一个字符串

                    小知识：字符串输出为黑色，数字输出为蓝色

                3.多个变量创建可以简写：

                    var 变量名1=值1,变量名2=值2...;

        2.*常量：创建后，值不可以再次修改，只能设置一次值

            语法：const:常量名=值;

        扩展知识：

            用户输入弹出框：

                var user=prompt("提示文字","默认值")

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

        1.%：取余，俗称模，不取商，取余数

        固定套路：

            1.判断奇偶性：num%2

            2.获取一个数字的倒数n位：num%10^n 1234%10 --> 4

            2.*****特殊：运算符(不止算术运算符)具有隐式类型转换(悄悄转换)，默认转为数字再运算

                +运算：如果左右两边但凡出现一个字符串，那么两边都悄悄转为字符串，+运算将不再是+运算，而是字符串的拼接

                - * / %：字符串也可以转为数字，但前提是必须是纯数字组成的字符串，

                如果字符串包含了非数字字符，直接转为NaN(No a Number)，但却是一个数字

                    1.NaN参与任何算术运算，结果仍为NaN

                    2.NaN参与任何比较运算，结果都是false

    6.*数据类型：两大类

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

            1.Number-数字，取值：无数个

            2.String-字符串，取值：无数个，必须写上 ' '或" "

            3.Boolean-布尔，取值：两个，true/false --往往用于判断比较的真假

            4.Undefined-取值：1个，undefined，创建了一个变量，但是没有赋值，默认值为undefined，祖师爷犯的错，用来做大部分操作都会报错！

            5.Null-空，取值：1个，null，释放变量/内存，节约内存空间

        2.引用/对象类型：11个引用类型的对象(很多的属性和方法)

   

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

        小知识：

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

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

            3.Num+Num=Num   Num+Str=Str

        1.*****算术运算符的隐式转换 目的：不需要输出，心里也能知道结果

            默认：悄悄将左右两边的东西转为一个数字，再运算

            特殊：  

                1.+运算碰上字符串，转为字符串拼接

                2、别的数据类型其实也可以转为数字

                    true->1

                    false->0

                    undefined->NaN

                    null->0

                3、其实-*/%，字符串也可以转为一个数字，前提要是一个纯数字组成的字符串才行，但凡包含一个非数字字符就转为NaN

                    "1000"->1000

                    "1000px"->NaN

                4、NaN：Not A Number：不是一个数字，但是确实是数字类型，不是一个有效数字(不在三界之中)

                    2个缺点：

                        1、NaN参与任何算术运算结果都是NaN

                        2、NaN参与任何比较运算结果都是false，甚至不认识自己

                            问题：我们没有办法使用普通的比较运算来判断x是不是NaN

                            解决：!isNaN(x)

                                true->是一个有效数字

                                false->是一个NaN

               

            ！！！！学完了算术运算的隐式转换，但我们依然没有解决一个事，所以有了强制转换

                "100px"+100 -> "100px100"

                "100px"-*/%100 ->   NaN

        2.显示/强制转换：隐式转换出来的结果不是我们想要的，这时就需要手动调用一些方法，强制转为我们需要的类型，再做操作

            1、转字符串：var str=x.toString();//x不能是undefined或null，因为undefined和null不能使用任何的操作

            x不能是undefined或null的原因：

                因为页面上的一切东西，数据类型默认都是一个字符串，所以undefined遇见字符串会触发隐式转换，变成NaN

                    而NaN执行任何操作得到的都是NaN(除了比较运算)

                因为null会释放内存，就相当于没有给x赋值，x没有被赋值那么就会默认是undefined，输出NaN

            2、***转数字：

                1、*parseInt(str/num);   parse->解析  Int->整型

                    执行原理：专门为字符串和小数转为整数数字准备的，从左向右依次读取每个字符，碰到非数字字符，就停止转换，如果一来就碰到了不认识的，则为NaN

                2、*parseFloat(str/num);     parse->解析  Float->浮点型

                    执行原理：几乎和parseInt一致，认识第一个小数点

                3、Number(x);//此方法是万能的，任何人都可以转为数字

                            //垃圾：完全等效于隐式转换，我们还得多记忆一个方法，没必要，还不如 x -0 *1 /1 %1

                            console.log("100"-0);

                            console.log(true*1);

                            console.log(false/1);

                            console.log(undefined%1);

                            console.log(null+0);

    8.*****Function的基础

        1.Function:函数，称之为方法：需要提前【预定义好】的，以后就可以【反复使用】的【代码段】一般后面带括号的代码都是函数，比如 rotate();  url();

        2.语法

            1.定义/声明/创建函数：

                function 函数名(){

                    功能代码;

                }

            2.调用/使用函数：

                1.在js中程序员直接写死要执行几次：函数名();

                2.在某个元素上写上点击事件，让用户来触发：

                    <元素 οnclick="js代码"></元素>

               

        3.何时使用：

            1、*不希望打开页面立刻执行，而是需要时再使用 或 由用户来触发

            2、*希望能够反复执行，不用刷新页面

            3、以后任何一个独立的功能体，都要单独封装为一个函数

            4、函数的地位非常高，函数是第一等公民地位，随时随地考虑能不能封装为一个函数，尤其是重复的代码

            5、函数内的一切内存，函数调用完毕后都会自动释放

        4、带参数的函数：

                创建：形参：形式参数，其实就是一个变量，但是不需要写var，而且默认不保存任何值，默认值为undefined

                    function 函数名(形参,形参,...){

                        函数体;

                    }

                使用：实参：实际参数，真正的值，需要在你调用时再传入

                    函数名(实参,实参,...)

               

                特殊：

                    1、传实参的顺序一定要和形参的顺序一一对应，并且数量也要对应

                    2、不是一定要带参数的函数才是好函数，具体情况，需要具体分析：

                        如果你的函数体就是固定的 - 则普通函数

                        如果你的函数体希望根据传入的实参不同，而得到不同的结果 - 则使用带有参数的函数

    9.***分支结构

        1、程序的流程控制语句：3种

            1、顺序执行 - 默认，从上向下的依次执行

            2、分支结构 - 通过条件的判断，选择部分代码执行

            3、循环结构 - 通过条件的判断，选择要不要重复执行某些代码

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

            用于做判断/比较的

            结果：一定是一个布尔值

            强调：如果你想要判断多个条件，绝对不能像小时候数学的写法：18<=age<=65，错误的！

                解决：逻辑运算符

        3、逻辑运算符：

            &&：与，并且

                只有全部条件都满足，最后的结果才为true

                    只要有一个条件不满足，结果则为false

            ||：或

                要求全部条件都不满足，最后的结果才为false

                    只要有一个条件满足，结果则为true

            !：非

                颠倒布尔值

        4、分支的语法：

            一个条件，一件事，满足就做，不满足就不做

                if(条件){

                    操作

                }

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

                if(条件){

                    操作

                }else{

                    默认操作

                }

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

                if(条件1){

                    操作1

                }else if(条件2){

                    操作2

                }else{

                    默认操作

                }  

   

    10.***循环结构

        循环结构：反复执行 【相同 或 相似】的操作

        循环三要素：

            1、循环条件：开始 - 结束，循环的次数

            2、循环体：做的操作是什么

            3、循环变量：记录着我们当前在哪一次，而且他会不断的变化，往往都会向着不满足循环条件进行

        1、while循环：

            语法：

                var 循环变量=几;

                while(循环条件){

                    循环体;

                    循环变量变化;

                }

            执行原理：首先创建了循环变量，然后判断条件，如果条件满足，则做【一次】循环体操作，并不会退出循环，

                回过头继续判断条件满足吗，如果满足，则再做【一次】循环体操作.......

                直到循环条件不满足，才会退出循环

            宏观上感受循环一瞬间就结束了，但是微观上来说其实是【一次一次】执行的

        特殊：

            1、死循环：永远不会停下来的循环

                何时使用：不确定循环次数的时候

                while(true){

                    循环体;

                }

                或者

                for(;;){}

            2、退出循环语句：break - 只能在循环中使用，多半都是搭配死循环使用的

   

    11.*****数组的基础

        1.什么是数组：一个变量可以保存【多个数据】的集合

        注意：

            1.数组都是线性排列，除了第一个元素，每个元素都有唯一的前驱元素

            2.除了最后一个元素，每个元素都有唯一的后继元素

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

        2.语法：

            1、*直接量方式：

                var arr=[];//空数组

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

            2、构造函数方式：

                var arr=new Array();//空数组

                var arr=new Array(数据1,....);//而且这个方法还有一个坑(后续说)

        3.获取数组中的数据

            语法：数组名[下标];

        4.添加/替换

            数组名[下标]=新值;

            下标处有没有元素，如果没有则为添加，如果有了就为替换

        5、数组具有三大不限制

            1、不限制元素的个数

            2、不限制元素的类型

            3、不限制元素的下标越界 - 不是一个好东西了

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

                如果添加元素，下标越界，会得到一个稀疏数组，导致下标不再连续，如果搭配上循环去遍历每一个元素的话，我们会得到很多很多的undefined

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

            解决：数组中唯一的属性：长度：数组名.length - 获取当前数组的长度：最大下标+1

                三个固定套路：

                    1、获取倒数第n个元素：arr[arr.length-n]

                    2、始终向末尾添加元素：arr[arr.length]=新值;

                    3、缩容：删除倒数n个元素：arr.length-=n

                前面的下标好数，后面的下标也好数，但是中间的下标还是不好数

        7、***往往很多情况，我们不会拿出某个元素来使用，而是拿出所有的每个元素来进行 相同 或 相似的操作

            遍历数组：把数组中的每个元素拿出来执行相同相似的操作

            公式：

                for(var i=0;i<数组名.length;i++){

                    <!-- console.log(数组名[i]);  当前次元素，要干什么，看你的  -->

                }

    扩展知识：

        JavaScript其实由三部分组成的

            ECMAScript - 核心语法，以后JS不管做什么操作可能都离不开它（算法题/逻辑题)

            DOM     - Document Object Model - 文档对象模型，可以用JS来操作HTML和CSS了

            BOM         - Browser Object Model - 浏览器对象模型，可以用来操作浏览器

    12.DOM树概念：

        DOM将我们的HTML看做了是一个倒挂的树状结构，但是树根不是html标签，而是document对象

        document对象：不需要我程序员创建的，由浏览器的js解释器自动创建，一个页面只有一个document

        作用：可以通过树根找到我们想要的任何一个DOM元素/节点/对象（属性和方法）

        DOM会将页面上每个元素、属性、文本、注释都会当作一个DOM元素/节点/对象

            文本:标签与标签之间的文本之所以出现就是因为两个标签之间的空格产生的

   

    13.查找元素：

        1.通过ID查找元素

            语法：var elem=document.getElementById("id值");

                        elem:自己取的名字

            注意：

                1、返回值，找到了返回的是一个当前找到的DOM元素，没找到，返回一个null，做了别的操作可能就会报错了

                2、找到了多个相同的id，那么只会返回第一个

                3、*垃圾方法，一次只能获取一个元素，也只能操作一个元素，麻烦

                4、其实根本不需要使用此方法，直接写ID也可以找到元素 - 偷懒的写法

        2.通过标签名查找元素

            语法：var elems=document/已经找到了的父元素.getElementsByTagName("标签名")[下标];  注意：下标是从0开始

            已经找到了的父元素:要先用方法(如id查找)找到父元素，再使用父元素的名字即elem来使用，即elem.getElementsByTagName("标签名")[下标];

            加下标的原因：因为找出来是一个类数组，不管有几个，所以即使是只有一个也需要加下标,也可以在var的时候在后面加下标,或者遍历找每一个，通过标签名查找元素相同

            注意：

                1、返回值：找到了返回的一个是类数组DOM集合（很像数组，都能用下标，都能用length，都能遍历），没找到返回一个空集合

                2、*JS不能直接操作DOM集合，只能直接操作DOM元素，解决：要么使用下标拿到某一个元素，要么使用遍历拿到每一个元素

                3、不一定非要从document开始查找，如果document去找，会找到所有的元素，可以换成我们已经找到的某个父元素，就只会找到这个父元素下面的元素了    

       

        3.通过class名查找元素

            语法：var elems=document/已经找到了的父元素.getElementsByClassName("类名")[下标];

            特殊：

                1、返回值：找到了返回的一个是类数组DOM集合（很像数组，都能用下标，都能用length，都能遍历），没找到返回一个空集合

                2、*JS不能直接操作DOM集合，只能直接操作DOM元素，解决：要么使用下标拿到某一个元素，要么使用遍历拿到每一个元素

                3、不一定非要从document开始查找，如果document去找，会找到所有的元素，可以换成我们已经找到的某个父元素，

                    就只会找到这个父元素下面的元素了

       

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

            elem:id值或已经找到了的元素

            父元素：elem.parentNode;

            子元素：elem.children; - 集合

            第一个儿子：elem.firstElementChild;

            最后一个儿子：elem.lastElementChild;

            前一个兄弟：elem.previousElementSibling;

            后一个兄弟：elem.nextElementSibling;

        强调：DOM集合不能直接做操作！

    扩展知识：

        加样式：elem[下标].style.border="";  

   

    14.操作元素

        前提：找到元素才能操作元素

        <标签 属性名="属性值" style="样式">内容</标签>

        1.内容：

            1.*innerHTML:获取和设置开始标签到结束标签之间的内容

                获取：elem.innerHTML;   elem==>id值或找到的元素 - 支持识别开始标签到结束标签之间的标签

                设置：elem.innerHTML="新内容";

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

                获取：elem.innerText;

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

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

            3.*value：专门为input的value值准备的

                获取：input.value;

                设置：input.value="新值";

        2.*属性：

                elem:被找到的父元素，或是id

            获取属性值：elem.getAttribute("属性名");

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

            简化版：

            获取属性值：elem.属性名;

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

                缺陷：

                    1、class必须写为className - 2015年过后，ES6诞生过后，class变成了一个关键字

                    2、不能操作自定义属性，只能操作标准属性

        3.*样式

            使用样式的方式：

                1、*内联/行内样式

                2、内部样式表

                3、外部样式表

            二阶段我们就是要用js来操作【内联样式】

                1、不会牵一发动全身

                2、优先级最高

       

                注意：要先获取到标签再使用,如何获取看上面的查找元素

                elem：获取标签时取的名字

                获取：elem.style.css属性名;

                设置：elem.style.css属性名="css属性值";

                特殊：

                    1、css属性名，有横线的地方，去掉横线，变为小驼峰命名法

                        border-radius   ->  borderRadius

                    2、目前学习的，获取时，只能获取内联样式 - 小缺点，我们可以忽略掉

        4.绑定事件：

            注意：要先获取到标签再使用

            elem：获取标签时取的名字

            elem.on事件名=function(){

                操作;

                *****this关键字：目前只能用于事件内：

                    如果单个元素绑定事件：this->这个元素

                    如果多个元素绑定事件：this->当前触发事件的元素

            }

    总结：

        获取 - 往往都是用与判断比较

        设置 - 就是添加/修改