JS基本语法与操作

JavaScript介绍
    * 简称js,是一种浏览器解释型语言,嵌入到网页中由浏览器负责解析和执行
        ,可以实现网页动态效果,用户交互,实现网络请求或游戏制作
    * 组成
        1. 核心语法(ECNAScript 5)
        2. BOM(浏览器对象模型),提供操作浏览器窗口的方法
        3. DOM(文档对象模型),提供操作html文档的方法
JS的使用
    1.元素绑定事件
        事件: 用户的行为或元素的状态
        事件处理: 元素监听到事件发生后做出的响应
        事件名称:
            onclick (单击事件) ondblclick(双击事件)
        语法:
            将事件名称以标签属性的形式绑定到元素上
            <h1 onclick="JS代码"></h1>
    2. 内嵌方式
        使用<script type="text/javascript"></script>
        书写JS语句
        例:
        <script>
            //JS语句
        </script>
        标签可以书写再任意位置,书写任意多次.浏览器再解析到标签时
        会直接执行内部的脚本代码
    3. 外链方式
        创建外部的JS文件(.js),HTML文件中使用 <script src=""></script>
        引入,注意<script>既可以实现内嵌,也可以实现外链,但是二选一
    4. 语法规范
        * JS代码区分大小写
        * JS语句可以用;作为结束标志,也可以省略
            alert();
            alert()
        * JS中注释的语法
            //单行注释
            /*多行注释*/
    5. 输入语句
        console.log() 控制台输出
        alert("") 网页警告框
        prompt("") 带输入框的弹框
        document.write("") 在网页中输出,动态向body标签中写入内容,可以识别标签语法
            使用:
                * 代码的书写位置即为添加位置
                * 使用元素绑定时间的方式去动态添加,会造成页面重写(事件发生之前,body可能节加载完毕了)
JS基础语法
    1. 变量与常量
        * 变量
            1.用于存储在程序运行过程中随时可以修改的数据
            2.使用var数案件自声明变量
            3.注意:
                * 变量声明未赋值时 ,默认为undefined
                * 未声明未赋值时会报错
                * 声明变量时可以省略关键字,影响作用域
        * 常量
            1.一经定义就不能修改的数据
            2.使用const关键字去声明常量,通常常量名采用全大写字母
                命名规范:
                    自定义变量名,常量名,函数名或对象名时,可以由
                    数字,字母下划线和$组成,不允许以数字开头,不能与关键字冲突,尽量见名知意
                    多个单词组成时采用小驼峰表示
    2. 数据类型
        * 简单数据类型(值类型)
            * number
                整数:可以使用十进制,八进制或十六进制表示
            * string
                字符串使用引号表示,会自动为每一位字符分配下表,每位字符都有自己的Unicode编码

            * boolean
                布尔值,只有true/false
            * undefined
                变量声明为赋值时默认undefined
            * null
                空值,接触对象引用
        * 引用类型
            主要指对象
            class Pet(Object){
            }
            Pet.play()
            cat//根据类型创建出实例
        * 检测数据类型
            typeof num
            typeof (num)
    3.数据类型转换
        * 强制类型转换
            1. 转换字符串
                toString(),返回转换后的结果 toFixed(n) 保留n位小数
            2. 转换number
                *Number(n),将变量n转换为number值,返回转换结果,
                    如果变量中存在非number字符,一律转换失败,返回NaN(not a number)
                *parseInt(n)/parseFloat(n)
                    解析number部分.过程:如果参数为非字符串,逐位进行解析,对每一位字符
                        进行转Number的操作,一旦解析失败,挺直向后解析,返回结果
            3. 转换布尔值
                Boolean(n)将变量转换布尔值
                除零值以外所有值都为真
                零值: 0/0.0/""/undefined/NaN/null
        * 自动类型转化
            1.字符串与其他数字类型进行"+"运算,一律为字符串拼接.将费字符串数据
                自动转换为字符串进行拼接
            2.其他情况下,一律自动转换为number进行数学运算
    4.运算符
        * 赋值运算符 =
        * 数学运算符+ - * / %
        * 复合运算符 += -= *= /= %=
        * 自增或自减运算符 ++  --
            在变量自身值的基础上+1或-1
            使用:
                1.单独与变量结合,做前缀或做后缀没有区别
                2.与其他运算符结合使用时,前缀和后缀有区分
                ,前缀就先++/--,后缀就后++/--
        * 比较运算符/关系运算
            >  >=  <  <=  ==(相等)  !=(不等) ===(全等)

一. 运算符
    1. 赋值运算符
    2. 算术运算符
    3. 复合运算符
    4. 自增/自减
    5. 关系运算符
        "hello" > "abc"
        "10" >2 //10>2
        "10">"2" //"1">"2" ->false
        "abc">10//NaN > 10 -> false

    6. 逻辑运算
        逻辑运算用于表示表达式之间的关系,结果永远为布尔值
        * 逻辑与&&
            全1则1,只有表达式全部为ture,则最终结果才为ture
        * 逻辑或 ||
            有1则1,只要有一个表达式为ture,则最终结果为ture
            练习:定义变量表示年份,判断是否为闰年
                能被4整除不能被100整除
                能被400整除

        * 逻辑非 1
            对布尔结果取反
    7. 三目运算符
        语法:表达式1 ? 表达式2 : 表达式3;
        使用: 判断表达式1是否成立,成立的话
二. 流程控制
    1.控制代码的执行顺序和执行次数
    2.分类:
        * 顺序结构,从上到下依次执行
        * 选择结构,根据条件是否成立,选择执行某一段代码
        * 循环结构,根据条件是否成立来选择是否重复执行某段代码
    3.选择语句
        * if语句
            1.基本结构
                if(条件表达式){
                    条件成立时执行
                    }
            2.if - else语句
                if(条件){
                    条件成立时执行
                }else{
                    条件不成立时执行
                }
            3.多重分支if-else if
                if(条件1){
                    条件1成立是执行
                }else if(条件2){
                    条件2成立时执行
                }
                ......
                else{
                    条件n不成立时执行
                }
        * switch语句
            用于值的全等匹配
            语法:
                switch(变量){
                    case 值1:
                        匹配全等后执行的代码段
                        break; //结束匹配
                    case 值2:
                        匹配全等后执行
                        break;
                    ......
                    default:
                        所有case都不匹配时执行的默认操作
                        break;
                }
            特殊:
                * break关键字可以省略,一旦省略,会从当前匹配到的case
                    开始向后执行所有的代码语句,直到碰到break关键字结束匹配
                    或直行至结束
                * 多个case公用代码段
                    case 值1:
                    case 值2:
                        //任意case匹配全等后执行的操作
                        break;
    4.循环结构
        控制代码的重复执行
        * while循环
            语法:
                定义循环变量
                while(循环条件){
                    条件成立时,循环体
                    更新循环变量
                }
        * do-while循环
            语法:
                定义循环变量
                do{
                    循环体
                    更新循环变量
                }while(循环条件)
            与while循环的区别
                while循环先判断条件,成立时执行循环体
                do-while循环限制性循环体,再判断条件.不管条件
                    是否成立,循环体至少走一次
        练习:
            循环接受用户输入,输入exit表示退出,否则就在控制台中打印输出内容
        * for循环
            语法:
                for(定义变量;循环条件;更新变量){
                    循环体
                }
        * 循环控制
            break:跳出循环
            continue: 结束本次循环,开始下一次循环
        * 循环嵌套
            再循环中嵌套添加其他的循环
            练习:控制台99乘法表
三.函数
    1.函数用于保存一段待执行的代码,或者封装某个功能.
    2.语法
        * 函数声明
            function 函数名(参数列表){
                函数体
                return 返回值
            }
        * 函数调用
            函数名(参数列表)
    3.作用域
        全局作用域和函数作用域
        * 全局变量
            在程序的任意位置都能访问
            1.函数外部定义的变量都是全局变量
            2.函数内部省略var创建变量,一律为全局变量
        * 局部变量
            在函数体中使用var关键字声明一律为局部变量,
            只能在函数中使用,外界无法访问
	3. 匿名函数
    没有名称的函数
    "有名函数"的致命问题:
        JS中所有的全局变量/函数都会自动成为windows

5.JS中对象的分类
    * ES原生对象
        Array String Math ...总共十几个
    * 宿主对象(由浏览器提供的对象)
        window document location ....等数百个
    * 用户自定义对象
        var stu = { ...... }

6.ES原生对象 --Array
    数组: 是一种特殊的对象, 其中可以保存多个数据
    创建一个新的数组:
    var 数组变量名 = []; //长度为0的数组
    var 数组变量名 = new Array();  //长度为0的数组
    var 数组变量名 = [值,值,值,....];
    var 数组变量名 = new Array(值,值,...);
    var 数组变量名 = new Array(100);//创建一个长度为100的数组

    获取数组的长度
    console.log(数组变量名.length)

    修改数组中的某个数据:
    数组变量名[下标] = 新值;

    读取数组中的某个数据:
    console.log(数组变量名[下标]);

    在数组尾部添加一个新的数据:
    数组变量名[数组变量名.length] = 新值;

    * 遍历数组中的每个元素
        (1) for(var i = 0; i< 数组.length;i++){
                console.log(数组[i])
        }

        (2) 数组变量名.forEach(function(val,index){})

    * 在数组末尾添加/删除元素
        数组.push() //入栈
        var 删除的元素 = 数组.pop()  //出栈
    * 在数组头部添加删除元素
        数组.unshift()
        数组.shift()



3.ES原生对象--String
    String表示一个字符串
    注意: JS中所有的字符串都是不可变的,所有改变字符串内
        容的函数都无法改变原字符串内容,而是返回一个新字符串
    var uname = 'ding'
    uname = 'ya'
    (1) 获取字符串中字符的个数
        s.length
        var s = '玛丽2a'
        console.log(s) //4
    (2) 改变字符串的大小写
        s.toUppercase()
        s.toLowercase()
    (3) 获取字符串中的第i个字符
        var c = s.charAt(i)
    (4) 获取对应的Unicode玛
        var code = s.charCodeAt(i)
    (5) 获取指定字符在原字符中第一/最后一次出现的下标
        var i = s.indexOf()
        var i = s.lastIndexLast()
    (6)返回字符串中的一个子串
        var str = s.substring(start,end)
        注意:包括start 不包括end

    (7)拆分字符串(该方法与arr.join()是反向操作)
        s.split()
    (8) 替换字符串中的内容
        var str = s.replace(要被替换的内容,新的内容)
        var regexp = /***/g;  (g表示全局匹配,否则只能匹配一个,后续的会被忽略)

4. 宿主对象之 --BOM对象
    Browser Object Model:浏览器对象模型,
        即由浏览器提供的默认对象,专用于与浏览器交互
    BOM对象总共有7个(无需创建,直接使用):
        * window:指代当前浏览器窗口对象
        * document:指代当前浏览器渲染的HTML文档
        * screen:指代当前屏幕对象
        * location:指代当前浏览器渲染的网页地址
        * history:指代当前浏览器的浏览历史纪录
        * navigator:指代当前浏览器对象
        * event:指代当前浏览器事件
    window对象的常用API:
        (1)三种弹出对话框
            警告框: window.alert()
            输入提示框:window.prompt()
            确认框:window.confirm()
        (2)打开/关闭窗口
            window.close()关闭
            window.open(url)打开
        (3)两种定时器
            周期定时器:
                启动:window.setInterval(cb,time)
                停止:window.clearInterval(timer)
            一次性定时器:
                启动:window.setTimeout(cb,time)
                停止:window.clearTimeout(timer)
   2.window对象的属性
     * history:指代当前浏览器的浏览历史纪录
         提供操作当前窗口历史记录的方法
         属性:length (当前窗口访问过的URL(历史记录)数量,默认为1)
         方法:
             back()  <-- 返回上一个历史记录
             forward() -->前进下一个历史记录
             go(n)   正值表示前进n条历史记录
                     负值表示后退n条历史记录
         使用:
             *超链接修改地址栏中URL,会增加历史记录
             *前进和后退按钮不会增加历史记录,只是指针的移动
     * location
         保存当前窗口的地址栏信息
         属性:href
         可读可写,读取或设置当前窗口的URL

     * location:指代当前浏览器渲染的网页地址
     * screen:指代当前屏幕对象

一 DOM事件处理
        1.事件分类
            * 鼠标事件
            * 键盘事件
            * 加载完毕
            * 表单事件
                onfocus (表单控件获取到焦点)
                onblur (表单控件失去焦点)
                onchange (监听表单控件值或状态是否发生变化)
                oninput (实时监听输入)
                onsubmit (监听表单数据是否可以发送)    
        2.this
            指代函数的调用对象或事件的触发对象
        3.事件对象
            事件对象跟随事件触发自动创建,保存与当前事件相关信息
            自动传入事件处理函数中,只需要接收
            例:
                btn.onclick = function(event){
                    console.log(event);
                }