javascript的基础知识

什么是javascript：简称js，是运行在【js解释器】的【解释型】【弱类型】【面向对象】脚本语言

   1、js解释器：不需要安装：
    1、浏览器自带
    2、后续在node.js服务器端 - 安装一个独立的js解释器

   2、解释型：运行之前需要不需要检查语法是否正确，直接运行，碰到错误就停止运行，比如：javascript、php... - 宽松
      编译型：运行之前需要检查语法是否正确，如果不正确，直接不能运行，比如：java、c等 严格

   3、js特点：
    1、代码可用任何编辑器编写
    2、解释型 - 不需要检查对错，直接运行，碰到就停止
    3、弱类型语言：是 由数据 决定了 数据的类型是什么    - 更自由
        1   - number数字
        "1" - string字符串
        变量想保存什么数据类型都可以 - 随意

       强类型语言：是 数据类型 决定了 你要保存的数据是什么 - java    - 更严格
    4、面向对象语言 - 万物皆对象（属性和方法）
        以后语法中：对象名.属性名;
                对象名.方法名();

   4、js的用途：
    1、css能做的，js能做，css不能做的，js也能操作
    2、ajax和服务器端进行交互 - 也是js的一部分

   5、如何使用javascript：2种方式
    1、在HTML页面上写上一个script标签，再在里面编写你的js代码 - 上课使用为了方便
        <script type="text/javascript">
            //编写自己的js代码
        </script>

  6、js代码：
    1、注释：作用：1、提示自己/别人  2、 养成一个写注释的好习惯
        单行注释：//
        多行注释：/**/

    2、输出方式 - 3种
        作用：打桩输出 - 检查错误

           （重点哦）1、在F12的控制台输出日志：console.log(数字/"字符串"/变量); - 这才最重要的（都不会影响到用户的体验）
        2、在页面上输出，支持标签：document.write(数字/"字符串"/变量); - 缺点：如果绑定了一个按钮的事件，替换掉页面上所有的已有元素
        3、在弹出框输出：alert(数字/"字符串"/变量); - 缺点：卡主页面，必须关闭掉弹出框，用户才能看到页面的东西

    2、在外部创建一个.js文件，在里面编写属于你的js代码 - 正式开发中使用
        <script src="js路径" type="text/javascript" charset="utf-8">
            不能再次编写代码了，必须将js代码放到js文件中
        </script>

    建议：js都写在html的最后，好处2个：
        1、如果js非常的耗时，用户至少能看到html和css的效果
        2、后续我们js会操作html结构，如果js放在head中可能找不到运算

1、 （重点）数据类型的转换：
   javascript是弱类型语言，由数据决定了数据类型是什么

   对于不同数据类型的运算时，数据类型会自动进行转换
    number+number=number
    number+string=string
  
   1、隐式转换：我们程序员看不见，悄悄执行的转换操作
    （重点）算术运算符：+ - * / %
     （重点）具有隐式转换：默认两边都转为数字，再运算
        *特殊：1、+运算，碰上一个字符串，两边都会悄悄的转为字符串，变为拼接操作
           2、- * / % 要是纯数字的字符串也可以转为数字，但是包含了非数字字符则为NaN
           3、xx转为数字的话，会转为什么结果
                true->1
                false->0
                undefined->NaN
                null->0
                "100"->100
                "100px"->NaN
           4、NaN：Not A Number：不是一个数字，但是确实是number类型（不是有效的数字）
            全是缺点：1、NaN参与任何算术运算，结果仍为NaN
                  2、NaN参与任何比较/关系运算，结果都为false，甚至不认识自己 - 带来了一个问题：我们没有办法使用普通的关系/比较运算去判断x是不是NaN
                    解决：!isNaN(x); 判断是不是有效数字
                    作用：防止用户输入的必须是一个有效数字
                    结果：true->是有效数字  false->是NaN

   2、显式/强制转换：隐式转换出来的结果不是我们想要的，程序员可以手动调用一些方法进行数据类型的转换
    1、转字符串：xx.toString();//转为字符串，但是undefined和null不支持，undefined和null不能使用.操作
        基本不会使用，页面上获取到的数据始终都是一个字符串

    2、（重点）转数字：
        1、*语法：parseInt(str/num)
        执行原理：从左向右依次读取每个字符，碰到非数字字符则停止，并且不认识小数点，如果一来就不认识则为NaN
            console.log(parseInt(35.45));//35
            console.log(parseInt("35.45"));//35
            console.log(parseInt("3hello5"));//3
            console.log(parseInt("35px"));//35
            console.log(parseInt("hello35"));//NaN
            console.log(parseInt(true));//NaN

        2、 （重点）语法：parseFloat(str);
        执行原理：几乎和parseInt一直，但是认识第一个小数点
            console.log(parseFloat("35.45"));//35.45
            console.log(parseFloat("35.45.45"));//35.45
            console.log(parseFloat("35.4abc5.45"));//35.4
            console.log(parseFloat("35.45px"));//35.45

        以上两个API作用：强制转为数字的同时并且去掉单位

        3、语法：Number(x);//万能的，任何人都可以转为数字，垃圾：其实就是隐式转换，还不如隐式转换简单：
             还不如：*1 /1 -0

2、 （重点）函数：Function基础：也称之为方法
    url(图片路径)：完成了一个根据图片路径显示图片的功能
    rotate(90deg)：完成了一个根据角度值顺时针旋转45度的功能

    js的自定义函数：完成了一个......功能

    1、什么是函数：函数(Function)是一段被【预定义好的】，可以【反复使用】的代码
              是个独立的功能体，可以将【若干】的代码放在里面

        
    2、语法：2部分
        1、创建函数/方法
            function 函数名(){
                //若干代码段
            }
        
        2、调用函数/方法
            函数名();//程序员写几次就调用几次

            小技巧：绑定在页面元素之上，用户来触发了
            <elem οnclick="js语法"></elem>

    3、什么东西适合放在函数之中？
        1、不希望打开页面立刻执行，等用户来触发
        2、不希望只执行一次，可以反复触发
        3、本身就是一个独立的功能体：你写的每一个作业都是一个独立的功能体
        4、建议：以后每一个作业都要封装为一个函数：函数在js中具有第一等公民的地位，函数中的变量都是会自动释放的

    4、带有参数的函数：
        榨汁机 - function：功能：榨汁
        原材料 - 参数：放入一个苹果、梨子、香蕉...
        如何创建带参数的函数：
            function 函数名(形参,...){//形参（形式参数）其实就是一个变量，只不过不需要var
                函数体;
            }

        调用带参数的函数的时候：
            函数名(实参);//实际参数

            function zzj(fruit){
                console.log("榨"+fruit+"汁");
            }
            
            zzj("苹果");
            zzj("梨子");

        强调：
          1、传入实参的顺序一定要和形参的顺序对应上
          2、函数不一定非要有参数：1、如果你的操作是固定的，则不需要传递参数
                          2、根据传入的实参不同，做的操作略微不同，则需要添加参数

3、 （重点）分支结构：
   1、程序的结构：3种
    1、顺序结构：默认结构，从上向下依次执行每一句代码
    2、分支结构：根据判断条件，选择一部分代码去执行（只会走一条路）
    3、循环结构：根据判断条件，选择是否重复执行某一段代码

   2、比较/关系运算符：> < >= <= == !=
    结果：以上六个运算符结果都为布尔值：true、false
    往往比较运算符出现在分支、循环的判断条件之中
    其实关系运算符也具有隐式转换：

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

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

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

        强调：
          1、最后的else是可以省略的，但如果条件都不满足，则分支白写
          2、条件有时候写的顺序需要注意，因为分支只会走一条路

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

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

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

1、变量和常量
  （重点） 变量：可以改变的
     var 变量名=值;

   常量：一旦创建就不可以修改
     const 常量名=值;

2、数据类型：
    1、原始/基础/值类型：5个
        Number、String、Boolean、undefined、null

    2、引用类型：11个 - Array

3、算术运算符：+ - * / %

4、数据类型的转换：
    1、隐式转换：
        算术运算符具有隐式转换，默认都转为数字再运算
        特殊：1、+运算，碰上字符串，则为拼接
              2、-*/%，字符串也会转为数字，必须是纯数字组成的字符，但凡包含了非数字字符则为NaN
              3、true:1
             false:0
             undefined:NaN
             null:0
             "500":500
             "50dsa0":NaN
              4、NaN：参与算术运算结果都为NaN,参与比较运算结果都为false，判断是不是NaN：!isNaN(x)

    2、显示/强制转换
        1、xx.toString();//undefined和null不支持

        2、parseInt(str/num)/parseFloat(str)/Number(x)

5、函数：提前预定义好，反复执行的代码
   创建：
    function 函数名(形参,...){
        函数体
    }

   调用：
    函数名();

    elem.οnclick=function(){
        函数名();
    }

6、分支结构：if...

7、循环结构：反复执行的代码 - 几乎一瞬间执行完毕
    var i=0;
    while(i<10){
        循环体;
        i++;
    }

    for(var i=0;i<10;i++){
        循环体;
    }

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

    退出循环：break

8、（重点知识哦）数组：一个变量/内存空间保存住多个数据
    创建：var arr=[1,2,3,4,5,...]

    访问：arr[下标]
          倒数第n个：arr[arr.length-n]

    添加/替换：arr[下标]=新值
          末尾添加：arr[arr.length]=新值

    缩容：arr.length-=n;

    遍历数组：对数组中的每个元素执行相同 或 相似的操作
      for(var i=0;i<arr.length;i++){
        arr[i];//当前次元素
      }

9、DOM：Document Object Model：文档对象模型：操作文档

   概念：DOM把HTML看做了一个树状结构，树根是document对象（属性和方法），不需要创建，直接使用

   1、获取元素：
    标签/class名：var elems=document/已经找到的父元素.getElementsByTag/ClassName("标签/class名")
    特殊：1、返回的是一个类数组集合，可用下标、length、遍历 - 不能直接做操作
          2、没找到返回的空集合
          3、不一定非要从树根进行查找

  （重点）  通过节点之间的关系：前提：至少要找到一个人
        通过节点找父元素：xx.parentNode;  （单个元素）
        通过节点找子元素：xx.children;  (集合)
        通过节点找第一个儿子：xx.firstElementChild;  （单个元素）
        通过节点找最后一个儿子：xx.lastElementChild;  （单个元素）
        通过节点找前一个兄弟：xx.previousElementSibling; （单个元素）
        通过节点找后一个兄弟：xx.nextElementSibling;  （单个元素）

   2、操作元素：
    1、内容：innerHTML（双标签：识别标签）/innerText（双标签：纯文本）/value（input）
       获取：elem.内容属性;
       设置：elem.内容属性="新内容";

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

    3、样式：
       内联样式
       获取：elem.style.css属性名; - 只能获取到内联样式
       设置：elem.style.css属性名="css属性值"
       注意：css属性名有横线的地方都去掉横线，变为小驼峰命名法

   3、绑定元素：
    单个元素：xx.οnclick=function(){
            this->xx
          }

    集合：
      for(var i=0;i<elems.length;i++){
        elems[i].οnclick=function(){
            this->当前元素
        }
      }