初学js笔记

1.弱类型语言：保存的数据决定数据类型

2.使用js:

在外部创建一个js文件，编写js代码，引入 
        <script src="路径" type="text/javascript" charset="utf-8"></script>

3.输出的方式(测试,打桩输出)
(1)console.log(想要输出的内容)
(2)alert(想要输出的内容) - 打开警告框，在警告框中输出，会卡主整个页面（白板）

4.注释：
    单行注释：//
     多行注释：/**/

5.变量名:不能以数字开头 /不能使用关键字

6.常量：一旦创建就不允许修改了
      语法：const 常量名=值;

7.算数运算符：+ - * / %
   m%n：m/n不取商，取除不尽的余数
   作用：
      (1)判断奇偶性：
            num%2==0 偶数
            num%2==1 奇数

       (2)获取一个数字的后n位：
            1234%10    -> 4
            1234%100-> 34

      (3)判断一个数字永远不超过几
            num%5 -> 结果永远不会超过5

      8.算术运算默认具有隐式转换为数字，在运算
        特殊：+运算，如果碰到了一个字符串，那么两边都会悄悄的转为一个字符串，然后+运算变为拼接操作

    9.数据类型
           (1)String - 字符串，无数个取值："" 或 '';
           (2)Number - 数字，无数个取值
           (3)Boolean - 布尔，只有两个取值：true（真） false（假） - 判断/比较
           (4)Undefined - 取值只有一个：undefined - 默认值
          (5)Null - 取值只有一个：null，空，释放变量的

            可以使用typeof(检查数据类型);

      

1.隐式转换：
    只转为数字：

        true->1
        false->0
        undefined->NaN
        null->0
        "100"->100
        "100px"->NaN

    2.算术运算的隐式转换：
            默认:两边会悄悄的转换为数字再运算，
            特殊：+运算，碰到一个字符串，两边会悄悄的转换为字符串，再拼接起来
            字符串也是可以转为数字的，但是要求是纯数字组成的字符串，只要字符串里包含一个
               非数字字符则转为NaN
    

NaN参与任何算术运算，结果仍为NaN
NaN参与任何比较运算，结果都为false，甚至不认识自己

 解决：!isNaN(x);
               如果结果为true，说明是一个数字
               如果结果为false，说明是一个NaN
   可以是不是判断NaN，要求用户输入的必须是一个数字

  3.显示转换：
    (1)转为数字：专门用于将字符串转为数字
        语法：parseInt(str/num),parseFloat(str)
        执行原理：从左向右依次读取每一个字符，碰到非数字字符就停止转换，并且不能认识小数点，如果一来就不认识，则为NaN，只能放入str/num，一旦放入别的数据类型就会转换NaN

   parseFloat(str):认识第一个小数点
      

   4、定义函数 以及 功能
    语法：
        function 函数名(){
            函数体;//若干操作
        }
    注意：函数定义好之后，不会立刻执行，只有在【调用】之后才会执行

   5、调用函数
    语法：函数名();

    调用的方式：2种
        (1)直接在js内部调用
       (2)可以绑定在页面元素之上：比如：<elem οnclick="函数名();"></elem>

   6、封装在函数之中
    (1)不希望打开页面立刻执行，可能是用户来触发
   (2)有可能会反复执行的代码，重复的代码

   7、带参数的函数
          function 函数名(形参,...){
            函数体;
          }

        调用带参数的函数，必须向里面传入实际参数
          函数名(实参,...);

   (1)传入实参的顺序要和形参的顺序一一对应上
    (2)函数不一定非要有参数：如果是固定的操作，不需要传入参数
                 如果你希望根据传入的参数的不同，结果不一样，那么就需要带参数的函数

   8、比较运算符：> < >= <= == !=
      结果：以上6个运算符：布尔值：true、false
      往往比较运算都会出现在分支、循环的条件之中

   9、if结构：
    (1)一个条件一件事，满足就做，不满足就不做
        if(条件){
            操作
        }

    (2)一个条件两件事，满足就做第一件，不满足就做第二件
        if(条件){
            操作
        }else{
            默认操作
        }

    (3)多个条件多件事，满足谁就做谁
        if(条件1){
            操作1
        }else if(条件2){
            操作2
        }else{
            默认操作
        }

  10.逻辑运算符：
    &&：与（并且）
        只有全部条件都为true，最后结果才为true
        只要有一个条件为false，最后结果就为false

    ||：或者
        只有全部条件都为false，最后结果才为false
        只要有一个条件为true，最后结果就为true

    !：颠倒bool值

    1.循环的三要素
        （1）循环条件：开始、结束：反复执行多少次
        （2）循环体：循环操作：要做什么
      （3）循环变量 以及 循环变量的变化

   2、while循环：
    （1）语法：
      var 循环变量=几;
      while(循环条件){
        循环体;
        循环变量发生变化;
      }

    （2）执行原理：先判断循环条件，如果条件为true的话，则执行【一次】循环体
                          直到条件为false，才会退出循环执行后续代码
 

    （3）死循环：
        while(true){循环体}

   （4）退出循环： break ；

   3、for循环：
    （1）语法：for(循环变量;循环条件;循环变量的变化){
            循环体;
          }

    （2）循环变量处可以创建多个中间用,间隔
     （3）死循环：for(;;){操作}

    for vs while：
    1、while循环用于 - 死循环
    2、for循环适用于-确定循环次数的时候使用 

    4、数组
       数组中每个元素都有一个唯一的位置序号，称之为【下标】，用来表示数组中的每一个元素
            下标是从0开始的，到最大长度-1

  （1）创建数组：
        var arr=[];//空数组
        var arr=[数据,数据,...];

    （2）创建的特殊点：
        1、不限制数据的长度
        2、不限制数据的类型
        3、不限制下标越界 - 并不是好事情
           访问元素时下标越界：结果undefined
            追加元素时下标越界：数组变成一个稀疏数组

    （3）访问数组中的元素：
    数组名[下标];

    （4）追加/替换元素
    数组名[下标]=值;
    当前下标有没有元素，如果有，则为替换，如果没有，则为追加

    （5）数组中有一个属性：length：长度
    语法：数组名.length

    （6）套路：
      1、向末尾追加元素：数组名[数组名.length]=值;
      2、获取倒数第n个元素：数组名[数组名.length-n];
      3、删除某位的倒数的n个元素：数组名.length-=n;

    （7）遍历数组：把数组中的每个元素都取出来执行 相同 或 相似 的操作
    公式：
      for(var i=0;i<数组名.length;i++){
        数组名[i];//当前次元素
      }

1、获取元素：
（1）通过 id：
       语法：var elem=document.getElementById("id值");
       特殊：
        1、id重复了，只会找到第一个
        2、如果没找到，返回的是一个null
  (2）通过 标签名：
       语法：var elems=document/parent.getElementsByTagName("标签名");
       返回：类数组集合，可以使用下标，可以使用length，也可以遍历，不能直接做操作
         
       特殊：
        1、可以使用下标获取到某个元素，也可以使用遍历获取到所有元素，再做操作
        2、如果没找到，返回的是一个空集合
        3、此方法不一样非要写document，可以写parent（你已经找到的某个父元素）

（3）通过 class名：
       语法：var elems=document/parent.getElementsByClassName("class名");
  

    2、通过 元素之间的关系 获取元素：
            必须先找到一个元素才能使用关系
    1、父亲：elem.parentNode; - 单个元素
    2、儿子：elem.children; - 集合
    3、第一个儿子：elem.firstElementChild; - 单个元素
    4、最后一个儿子：elem.lastElementChild; - 单个元素
    5、前一个兄弟：elem.previousElementSibling; - 单个元素
    6、后一个兄弟：elem.nextElementSibling; - 单个元素

---------------------------------------------------------------------------------------------------------
4、操作元素：<any 属性名="属性值" style="css属性名:css属性值;">内容</any>
   1、内容：
       *1、innerHTML：双标签，能够识别标签
       获取：elem.innerHTML; - 往往用于参加比较运算
       设置/修改：elem.innerHTML="新值";

    2、innerText：双标签，纯文本
       获取：elem.innerText; - 往往用于参加比较运算
       设置/修改：elem.innerText="新值";

       *3、value：单标签<input>
       获取：input.value; - 往往用于参加比较运算
       设置/修改：input.value="新值";
 
   2、属性：
    获取属性值：elem.getAttribute("属性名"); - 往往用于参加比较运算 - 万能
    设置属性值：elem.setAttribute("属性名","属性值"); - 万能

    （1）简化：
        获取属性值：elem.属性名; - 往往用于参加比较运算
        设置属性值：elem.属性名="属性值";

        特殊点：
          1、class必须写为className
          2、只能操作标准属性，不能操作自定义属性

    

   3、样式：

  获取样式：elem.style.css属性名; - 往往用于参加比较运算 
  设置样式：elem.style.css属性名="css属性值";

   

   4、绑定事件：
    elem.οnclick=function(){
        this：只能在事件之中使用
        this->单个元素绑定事件this指向的就是这个元素
        this->多个元素循环绑定了事件，this指向的就是当前元素（你当前点的是哪个就是哪个）
    }