js第一周学习教程

1.javaScript概念：简称js,是一个运行在客户端浏览器的解释性，弱类型，面向对象脚本语言。

①解释型：运行程序前，不需要检查语法正确性，直接执行，遇到错误立即停止后续代码，自由性较高。

②弱类型：变量保存的数据是随意的，数据类型是由数据决定的。如：1为数值，"1"为字符串。

③面向对象：对象名.属性名；对象名.方法名();

2.变量和常量：

①变量：创建后，值可以再次修改，以后反复使用到的数据，都要提前把它保存在变量中，以后使用变量名，就相当于在使用变量的值；注意：变量的值是可以改变的；

使用方法：var 变量名=值；

②常量：创建后，值无法再修改；

使用方法：const 变量名=值；

3.算数运算符：+，-，*，/，%；

注意：

取余：

①两个数相除，不去商，而取除不尽的余数；

②可用于判断奇偶性：Num/%2=0可判断为偶数，结果为1，说明为奇数。

③获取一个数字的倒数N位：

1234%10   4

1234%100    34

1234%1000    234

4.数据类型转换：

特殊：其实算数运算符具有隐式类型转换，默认转为数字再去运算。

①+运算：如果左右两边但凡出现一个字符串，那么悄悄的转为字符串，+运算则变为字符串的拼接。

②-*/：字符串也可以变成数字，但是必须是纯数字组成的字符串才行，如果字符串包含了非数字字符，直接转为NaN，参与任何运算，结果都为NaN，参与任何比较运算，结果都为false.

解决：!isNaN(x);

           true==>有效数字

           false==>NaN

5.强制转换：①转字符串：var str=x.toString();

                     注意：页面上一切数据都默认是字符串类型，x不能是Undefined或者null，因为无法使用。

  转数字：var num=parseInt/Float(str);

                var num=Number(x);万能，但是等效于隐式转换，还不如 -0，*1，/1，%1.

6.函数基础：

①创建函数：function 函数名(形参列表，...){

函数体；

}

②调用函数：函数名 (实参列表，...)；

                     elem.οnclick=function(){

函数名(实参列表，...);

}

注意：①任何一个独立的功能体，都要封装成一个函数。

②函数地位很高，随时随地考虑能不能封装，尤其是重复代码。

③函数中的一切内存，函数调用完后，都会释放。

④带参数的函数，传实参的顺序，一定和形参数据一一对应，数量也要对应。

⑤如果你的函数体，希望根据传入的实参不同，结果略微不同，则需要带参函数

7.分支结构：根据条件，选择部分代码执行

①比较运算符：> < >= <= == !=

    作用：比较条件

    结果：布尔值

    强调：如果想判断多个条件，不能连写

    解决：逻辑运算符

②逻辑运算符：&& || !

    作用：综合比较

    结果：布尔值

解释：&&并且，所有条件都满足，才为true.

           ||或者，满足一个条件，即为true.

！颠倒布尔值

  ③if(){}     if(){}else{}       if(){}else if(){}else{}

8.循环：根据条件，判断要不要再执行一次操作

  ①  var 循环变量=几
  ② while(循环条件){
        循环体;
        循环变量的变化
    }

  ③ for(var 循环变量=几;循环条件;循环变量的变化){
        循环体;
    }

    死循环：while(1){循环体}    for(;;){循环体}

    死循环要搭配上break才能停止循环

9.数组：一个变量（内存空间）保存多个数据
   ① 创建：
       var arr=[数据,...];
       var arr=new Array(数据,...);

   ② 访问：
        arr[i]

    ③添加/替换：
        arr[i]=新值;

    ④数组三大不限制：
        不限制类型/个数/下标越界（坏事）

    ⑤数组的长度：arr.length
        1、访问倒数第n个元素：arr[arr.length-n];
        2、向末尾添加元素：arr[arr.length]=新值;
        3、缩容：arr.length-=n;//删除arr倒数n个;

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

10.DOM：Document Object Model：文档对象模型，专门用于操作HTML（css）文档的

①树根：document对象，浏览器的js解释器（运行环境）会自动创建，通过树根找到页面上我们想要找到的DOM元素/对象/节点

②查找元素：
    标签名/class名：var elems=document/已经找到的父元素.getElementsByTagName/ClassName("标签名");
    特殊：
    ①找到了：返回一个类数组集合，没找到：返回一个空集合;
    ②DOM集合是不允许直接做操作的，要么下标找到某一个，要么遍历找到每一个
    ③也不一定非要从document开始查找，也可以写一个自己已经找到的父元素，只会找到这个父元素下面的元素

    通过关系获取元素：前提：至少要找到一个元素才能调用关系
        父：elem.parentNode;
        子：elem.children; - 集合
        第一个儿子：elem.firstElementChild;
        最后一个儿子：elem.lastElementChild;
        前一个兄弟：elem.previousElementSibling;
        后一个兄弟：elem.nextElementSibling;

③操作元素：<标签名 id="" class="" title="" style="样式">内容</标签名> - 操作元素的前提就是要找到元素
    1）内容：
        innerHTML（识别标签）/innerText（纯文本）/value（input准备的）;
        获取：elem.innerHTML/innerText/value;
        设置：elem.innerHTML/innerText/value="新内容";

    2）属性：
        获取属性值：elem.getAttribute("属性名");
        设置属性值：elem.setAttribute("属性名","属性值"); 
            无敌的

        简化版：
        获取属性值：elem.属性名;
        设置属性值：elem.属性名="属性值";
            缺陷：1、只能操作标准属性，不能操作自定义属性
                       2、class必须写为className
        
    3）样式：
        获取：elem.style.css属性名;
        设置：elem.style.css属性名="css属性值";
        特殊：1、内联样式：不会牵一发动全身，优先级最高
                   2、css属性名：如果出现了横线，去掉横线换成小驼峰命名法
                   3、获取时，只能获取到内联样式，样式表中的获取不到，暂时的一个小缺陷
        
    4）绑定事件：
        在js中绑定事件：符合我们的原则：内容（html）、样式(css)、行为(js)分离
        elem.on事件名=function(){
            要做的操作
            this关键字：目前只能在事件之中使用，是一个指针，不同的场景，指向不同
            单个元素绑定事件：this->这个元素
            多个元素绑定事件：this->当前元素
        }