JS基础语法和JS对象

JS基础语法

第一部分：JavaScript介绍

    1、js组成
            由ECMAScript（基本语法）、DOM（文档对象模型）、BOM（浏览器对象模型）组成
    2、作用：可以改变html中标签的内容，改变标签的样式，验证输入。

第二部分：js代码书写

    1、页面中直接书写   （内嵌式写法）
                <script>{     js代码     }</script>     //script标签建议放到head标签下，但其实在HTML的任意部位都可以。
    2、引入外部js文件
                将js代码单独建立文件存放，在页面中引入即可使用。实现了js与html内容分离。
                格式：<script type="text/javascript" src="外部js文件路径"></script>
    ★★★3、注意：js文件中不能包含<script>标签 ；   当<script>标签作为引入外部js文件用途后，则其标签体中不能书写代码，其中的代码不会被解析。

第三部分：js变量声明

    1、介绍：js是一门弱类型的解释型语言，在变量定义时无需指定数据类型。
    2、格式
                （1）var  变量名 ；
                                变量名 = 值 ；
                （2）var 变量名 = 值 ；
    3、注意
                （1）变量的定义规则同java一致。
                （2）变量名见名知意做到，整型变量以iXxx开头，布尔型变量以bXxx开头 ，数组变量以aXxx开头。
                （3）JavaScript中如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。(不推荐)
                （4）js中可以重复定义变量名相同的变量。

第四部分：数据类型

    1、介绍js中数据类型分为两类：原始类型、引用类型
    2、原始类型
                Undefined ：当变量定义未初始化时，访问该变量会返回Undefined；或调用方法无返回值时也会返回Undefined。  值只有一个：undefined
                        故，alert(typeof undefied); // undefined
                Null  ： object类型，值只有null。
                        故，alert(typeof null); //object
                Number : 一切数字不论整型、浮点型都为该类型。
                String ：字面量（值）由双引号或单引号引起来。
                Boolean :  
        ★★★注意：针对原始类型，可以使用typeof 来获得变量是属于那种原始类型
                    alert(typeof  10) //number  ； alert(typeof "hello")  //string
            但是注意，使用typeof判断引用类型时输出的都是object。  
                    alert(typeof new Number(10)) //object   alert(typeof new String("hello"));
    3、引用数据类型
                （1）Boolean  Number   String  Array   Date     Math   RegExp  
        ★★★（2）可以使用instanceof 判断引用类型变量是属于某种类型。

、
var numObj = new Number(10);
alert(numObj instanceof Number); // true
alert(numObj instanceof String); // false

第五部分：js类型转换

    1、转换成字符串
                true、false、小数可以调用toString（）转换成字符串（结果是它们本身）。其他类型则会报错。
    2、转换成数字 ★
                  (0)   isNaN(字符串)  //判断字符串不是纯数字字符串，true表示非纯数字字符串。
                （1）parseInt(字符串值)  //尝试着将参数值转换成整数。一旦遇到非数字字符则停止转换
                （2）parseFloat（字符串值）  //尝试着将参数值转换成小数。一旦遇到非数字字符则停止转换
                （3）注意
                                只有包含了数字的字符串才能进行转换，且数字必须位于字符串的开头。
                                除此之外的其他数据进行转换都会提示“NaN”
    3、强制类型转换★
                （1）强制转换成布尔     格式： Boolean(待转换的数据)     
                            结论：非空对象、非空字符串、非零数字的转换结果都是true，其他转换(""、null、+0、-0、NaN、undefined)都为false。
                            
                                alert("demo1:"+Boolean("")) //false
                                alert("demo2:"+Boolean(null)) // false
                                alert("demo3:"+Boolean(-0)) //false
                                alert("demo4:"+Boolean(+0)) //false
                                alert("demo5:"+Boolean(NaN)) //false
                                alert("demo6:"+Boolean(undefined)) //false

                （2）强制转换成数字     格式：  Number(待转换的数据)
                        注：左侧表示待转数据，右侧表示结果
                                true   --> 1      false --> 0     ；  空字符串  -->0      null -->0
                                只带数字的字符串  --> 数字      ； 其他形式 --> NaN  
                （3）强制转换成字符串   格式： String(待转换的数据)
                            结论：结果是其本身。强制转换对所有数据都支持，不像调用toString()函数转换成字符串只适用于true、false、小数。    

第六部分：运算符和表达式

    1、一元运算符
                （1）     ++ 、--同java中的含义相同。
                （2）注意仅由数字组成的字符串，在进行++ 、-- 运算前会将其类型转换成数字类型后进行计算。
    2、位运算符
                ECMAScript中所有的整数字面量都是带符号的整数。
    3、逻辑运算符
               
                （1）！（取反） ：java中计算方式一致
                                前提：了解其他非布尔类型转换成Boolean的结果（即：结论：非空对象、非空字符串、非零数字的转换结果都是true，其他转换(""、null、+0、-0、NaN、undefined)都为false。）
                                
                                    alert("demo1:"+!""); //true
                                    alert("demo2:"+!null); //true
                                    alert("demo3:"+!-0); //true
                                    alert("demo4:"+!+0); //true
                                    alert("demo5:"+!NaN); //true
                                    alert("demo6:"+!undefined); //true

                （2）&& ： 
                         a)  当运算符两侧的值是Boolean类型时计算方式同java，计算结果为Boolean。
                         b)  当有一侧数据类型不为Boolean时计算规则。




				1. 

单独运算(计算结果不一定为Boolean类型)

                                       ★★ 计算前先将非Boolean类型的数据转换成Boolean进行比较。
                                                当左边表达式（转换成Boolean）能够确定最终结果，则为结果为该表达式（转换前数据）。右边部分将不再进行计算。
                                                当左边表达式不能确定最终结果，则最终结果为右边表达式。
                总结：判断时任意类型转成布尔类型进行判断，结果为转换前数据。（左边能确定则是左边，不能确定就是右边）

alert(true&&“abc”); //abc
alert(“abc”&&true); //true
alert(“abc”&&false);//false

                        2.   运用在条件语句中，作为表达式时其计算结果一定是Boolean类型的。  ★★★ 
                                    var str1 = "xiaogu";
                                    var str2 = "1215";
                                    alert("单独运算:" + (str1 && str2)); //1215
                                    if(str1 && str2) {
                                    //只要str1或str2不满足为：""、null、+0、-0、NaN、
                                    // undefined中的任意一个值，则表达式的值为true
                                        alert("条件满足"); //执行该语句
                                    }else {
                                        alert("条件不满足");
                                    }
                    总结：
                            一定要知道当&&运用在条件语句中时，无论&&两侧是否含有非Boolean类型数据，其计算结果都一定是布尔值。
                （3）| |
                                 a)  当运算符两侧的值是Boolean类型时计算方式同java，计算结果为Boolean。
                                 b)  当有一侧数据类型不为Boolean则按以下规则计算（注意：计算结果不一定为Boolean）： 

                     结论：左边能确定最终结果，则为左边表达式；否则为右边表达式。
                    || 运用在条件语句中时，不论||两侧是否含有非布尔类型数据，其计算结果都必为布尔值。
    4、算术运算符（基本同java一致）
            （1）加法特殊行为
                        a) 有NaN则NaN  ；    b) Infinity 同号为本身，异号为NaN    c)同0则0
            （2）减法特殊行为
                        a) 有NaN则NaN  ；    b) -Infinity 减 Infinity，结果为 NaN    c) -Infinity 减 Infinity，结果为 NaN
                (3)乘法特殊性为
    5、关系运算符
                (1)  数字字符串同数字进行比较：数字字符串转换成数字后，再进行比较。
                (2)  字符串和数字进行比较，字符串不能转换成数字，所以最终结果为false。
    6、 等性运算符 ★★
                ★★等号(==)和非等号(!=)用于处理原始类型数据，全等号(===)和非等号(!==)用于处理对象。
                == ： 比较的是内容是否相同，同为true 不同为false。  如："123" = 123   //结果为true
                === ： 当内容相同且类型相同时为true。 ！== ：当内容或者数据类型有一个不同时为true。
                    例如： var  str = "123" ; var num = 123 ;    "123" === 123  //结果为false，值相同但类型不相同。
                            
             （1）当类型间不能直接比较时应转换成对方类型，然后再进行比较。
                                        比如：数字字符串  和  数字  ；   对象  和  字符串       对象   和   数字          （注：前面的类型都可以转换成后面的类型）
               (2)  Boolean在比较前会将，false  -->0  true -->1    ;                 NaN  == NaN   结果为false
               (3)   null 和 undefined  相等   ；                 NaN  ==  XXX  结果=false          ;       NaN != XXX   结果为true 
                
                    

    7、三元运算符、赋值运算符   （同java    一致）

第七部分：条件语句

    1、if   if-else 同java中一致
        if(表达式)  ：表达式的结果不必是真正的boolean类型，ECMASCRIPT会将其结果转为成boolean值。当表达式的结果为：空串、null、undefined、0时为false，其他情况都为true。
    2、switch  语句case后面可以跟变量
    3、for循环中初始化变量时类型要为：var     例如：for(var i = 0;......)

补充如何在页面中调试js代码：

JS对象

第一部分：js常用对象

    1、Boolean
            1.1、构造函数: new Boolean（值 | 变量） //返回的是一个对象
            1.2、函数：Boolean（值 | 变量）//将参数值转换成一个原始类型的布尔值。
          1.3、注意：当传入的参数值是：“ ”、null、undefined、NaN、false、0、-0时对象设置为false，其他情况都为true。
    2、Number 
            1.1、构造函数: new Number（值） //返回的是一个对象
                        例如：   var  NumObj = new  Number(10);  //NumObj
            1.2、函数：Number(值)  //将参数值转换成一个原始类型的数值。
            1.3、注意：当传入的参数值是：“ ”、null、undefined、NaN、false、0、-0时返回0，为true返回1，数字或者数字字符串转成数字；其他情况都为NaN。
    3、String    
            1.1、使用new关键字时在创建对象，直接使用则是将值转换成原始数据类型。
                        格式：new String（值|变量）  //返回的类型是对象 object。
                                    String （值|变量）//返回的是原始类型string 。
            1.2、方法同java中String类的方法相似含义相同。
                            如：indexOf（）从某一位置开始获取指定字符串第一次出现的索引位置，不存在则返回-1
                                    substr(索引，个数) 从指定索引处开始获取指定个数的字符。
                                                    ....................................
    4、Array （注意长度可变，且可存放任意值）
            4.1、对象创建方式
                    方式一： var 变量名 = new Array（值）；
                    方式二：var 变量名 = Array（值）；
                    方式三：var 变量名 = [值1，值2，......];     非官方写法
          4.2、常用方法
                    （0）reverse() 数组元素反转
                    （1）join（间隔符）//将数组元素通过指定间隔符连起来。
                    （2）sort（） //对元素进行排序
                                字符串数组排序：字符串数组对象.sort()  //按照字母的自然顺序排序。
                                数字数组 | 数字字符串数组： 对象.sort(function(m,n){ return m - n })
                                    return  m - n 表示按数字大小升序排列。
                                    return  n - m  按数字大小降序排列。
                    （3）pop()  //删除数组最后一个元素，并返回该元素值
                    （4）push（）//向数组最末尾处添加一个或多个元素，返回新数组的长度
                    （5） shift（） //删除数组第一个元素，并返回该元素
                    （6）unshift() //向数组头部添加一个或多个元素，并返回新数组的长度
    5、Date
                获取当前日期和时间
             5.1、常用方法
                      获取年份 getFullYear（）、获取月getMonth（）、获取某月第几日getDate（）.......    
                        toLocaleString（）将当前时间转换成字符串如： 2019/1/27 下午6:47:12
    6、Math
                Math不用创建对象直接调用函数 执行即可。
             6.1、 常用方法
                        ceil（x）//大于x最小整数    ； floor（x） //小于x的最大整数
    7、RegExp
             7.1、语法
                        格式：new RegExp("正则表达式")      
                                   new RegExp("正则表达式","参数");     参数：i  忽略大小写 ； g  全局
             7.2、常用方法
                         test()  返回值为布尔类型
                            例如:   var rege = /^[0-9]{3,10}$/     该正则表达式匹配的是一个0-9的数字
                                        var s = 33;      rege.test(s)   //结果为false
    8、global（全局）★★
             8.1、编码解码
                        浏览器地址栏中的中文会进行url编码
                        encodeURI（字符串）//把字符串编码为URI
                        decodeURI（字符串）//解码某个编码的URI
            8.2、eval（）方法：将字符串转换成js代码以脚本来运行。
                        例如：  var s = "alert("hello")";   //最终结果是警告框，输出“hello”文本信息。

    9、注意事项：
                    原始类型中的：String Number Boolean都是伪对象，可以调用相应的方法。

第二部分、函数

    1、函数定义
                   方式一：
                            function 函数名（参数）{//函数体   [return]}
                            使用：函数名(实参)
                  方式二：
                            var  变量名=function（参数）{   //函数体   [return]}
                            ★注意：将函数表达式存储在一个变量中后，变量也可以作为一个函数使用。
                                            例如： 变量名（参数）;
                  注意事项：
                    （1）定义时不用指定函数的返回值类型；若函数有返回值则直接在函数体中使用return返回方法调用处。
                    （2）函数定义时形参不用指定类型。因为var可以接收任意类型的参数。
                    （3）js中函数没有重载一说，当定义多个函数重名时后定义的函数会覆盖原有的只会执行最后定义的那个函数(并且调用时不会去考虑实参值是否与当前被调用函数的形参保持一致)。
                      (4)   每个函数都具有一个类数组对象arguments，该对象存储方法被调用时传递过来的实参值。
        变量的作用域：
                    局部变量：定义在函数中，只能在当前函数中使用。
                    全局变量：定义在<script>标签中，函数外可在方法中、同一页面的其他<script>标签中使用。
    
    2、事件
            2.1、事件
                    （1）onclick 单击   ；（2）ondbclick 双击  ；（3）onload页面加载事件。
                    （4）★★★onsubmit表单提交事件，被应用于form标签上。使用格式：onsubmit=“return  函数名（）”，要求函数必须返回一个布尔类型的值。最终，根据返回的值来确定是否需要将表单数据进行提交。 
            2.2、事件和函数的绑定★★★  即：当某个事件发生后执行所绑定的函数。
                    格式1:<XXX 事件名="函数名（参数）"></XXX>
                                注意：参数若是this，则是将当前dom对象传递给函数。
                    格式2；给元素派发事件
                                    （1）documentElementById（“id值”）.onclick = function(){  //函数体}
                                    （2）documentElementBuId（"id值"）.onclick = 函数名 。
                    使用元素派发事件注意事项；
                            （1）获取元素对象的语句一定要在标签定义位置之后，否则会报错。
                                                ........................①
                                                    ............................②
                                                    标签定义处④
                                                        .............................③
                                         ★★★   即：获取元素对象的语句，可以在③位置但不可以在①②位置。
                            （2）如果想要在任意位置获取元素对象，则可以将获取元素对象的语句添加到onload事件指定的函数中，因为onload代表页面加载完成。页面加载完成后就清楚了各标签的位置了，所以不会再报错了。
            2.3、阻止浏览器的默认事件发生和传播
                            preventDefault：取消事件的默认行为。  如：取消超链接点击后页面跳转。
                            stopPrapagation:   阻止事件向外进行传播。  如：嵌套的div中发生的事件，不想让包裹它的div也收到，则可以使用这个方法。
    3、注意 ：
             在函数中可以将this作为参数进行传递，this表示的当前对象（元素）   

第三部分、BOM（浏览器对象模型）

    1、window对象（当前窗口）
             window对象在调用其自身方法和属性时，window关键字可以省略。     
                                       如：window.onload  等价于  onload    
            1.1、常用属性
                            使用window对象可以直接使用调用其他四个对象。因为其他四个对象都是其属性。
                                        例如：window.location  等价于  location
            1.2    常用方法
                            （1）消息框
                                        alert（）//警告框；   
                                        confirm（“消息内容”）//确认框，可以根据返回值（Boolean类型）进行一定的操作。点击确定返回true，点击取消返回false。
                                        prompt（text，defaultText）//提示用户输入，返回用户输入的内容。
                                                text：提示信息
                                                defaultText ： 对话文本框中默认显示的内容
                                                返回值：点击确定，返回对话框中的文本；点击取消，返回null。
                            （2）定时器
                                    1）
                          方式一：setInterval（函数名，毫秒值）//每间隔XXX毫秒就调用一次函数。（具有周期性）
                          方式二：setInterval（"函数名(参数)"，毫秒值）//每间隔XXX毫秒就调用一次函数。
                                使用格式：var   xx  = setInterval（yyy，毫秒值）
                                clearInterval（定时器变量名）//清除由setInterval创建的定时器
                                使用格式：clearInteerval（xx）;
                                    2）
                            setTimeout（函数名，毫秒值）  // 多少秒后执行函数中的内容，只执行一次。
                                   使用格式：setTimeout（xx，毫秒值）
                            clearTimeout（）//清除创建由setTimeout创建的定时器。
                                     使用格式：clearTimeout（xx）
                                    3）区别
                                    setInterval设置的定时器会周期性的执行，而setTimeout设置的定时器则 只执行一次。 
                                    4）页面加载成功执行事件
                                      可以直接在script标签中按照如下方式书写：
                                            onload = function(){//函数体}        
                       （3）打开和关闭
                                            open（url）:url为要打开的地址路径    ；    close（）： 关闭        
     2、location（定位信息  相当于地址栏）       

                （1）常用属性
                        href：获取或设置当前页面的url
                                location.href;   //获取          
                                location.href = "值";  //设置 ，相当于超链接可以打开指定路径额页面。
                                    例如：location.href = "index.html"  等效于  location = "index.html"
                （2）常用方法
                                    reload：重新加载页面，相当于刷新当前页面。
    3、history（历史）
                      （1）常用方法
                                back（）//返回   ；  forward（）//向前    
                              ★★  go(int xx) //当xx 等于1时向前，等于-1时向后。

第四部分、DOM（文档对象模型）★★★★

    1、介绍
            每个载入浏览器的 HTML 文档(HTML部分)都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document对象是Window对象的一部分，所以Window.Document等价于 Document。
    2、节点（Node）
            （1）文档节点    document      ；      （2）元素节点   element            
            （3）属性节点    attribute         ；      （4）文本节点  text
           (1) 获取一个元素节点
                ★★★补充：文档中一些特有元素节点的出现会伴随着与其对应的XXX对象被创建，而这些对象中包含了一些特有的属性和方法。
                例如：(1) form标签每出现一次则会伴随创建一个与之对应的Form对象，通过Form对象可对表单进行操作。
                          (2) img标签....................会创建一个Image对象。见W3CSchool  HTML DOM对象
                    四种方式：
                                document.getElementById("id值")     //获取指定id的元素
                                document.getElementsByName（“class属性值”） //获取到class属性值为指定值的一个或多个元素。
                                document.getElementsByTagName("元素|标签名")   //获取到一类元素，指定标签名的元素。
                                document.getElementsByName("Name属性的值")  //获取name属性的值为指定值的一个或多个元素。
           (2) js中操作元素的css属性
   CSS和JS中属性名写法的区别

            方式一：dom对象.style.属性名 = "样式值" ；  
            方式二：dom对象.className = "类名"
                           首先使用类选择器定义好样式，类名自拟。例如： 类名为cla
                                    .cla{
                                            css属性："值"；css属性："值" ......
                                        } 
                                                       
            (3)操作元素标签体
                               方式一： dom对象.innerText
                               方式二： dom对象.innerHTML       ★★      建议采用
                 innerText和 innerHTML获取 | 设置标签体内容的区别：
                        获取标签体内容：
                                
                             innerText 获取的是标签体中的文本内容 ； 
                             innerHTML获取的是标签体中的所有内容(包括html标签)
                                    
                        设置标签体内容：
                            innerText 设置的内容被解析为普通文本 ；
                            innerHTMl设置时若内容中包含html元素则会被解析后展示。
             操作元素标签体和给元素追加孩子的区别：
                                dom对象.innerHTML：可以将拼接的子标签内容插入父标签中，插入的内容是string类型的。
                                                              如：dom对象.innerHTML = "<option>标签体内容</option>";                    
                                父标签dom对象.appendChild(孩子) ：插入父标签中的孩子必须是object类型的，否则不会成功。