这是我参与「第五届青训营」伴学笔记创作活动的第 9 天

JavaScript

1、什么是JavaScript？

脚本语言。运行在浏览器的内存当中，最初叫LiveScript，后来改名为JavaScript，简称JS

2、在HTML中怎么嵌入JavaScript代码

三种方式：

事件句柄：

脚本快的方式：

    <script type="text/javascript">
        window.alert("Hello js");
    </script>

引入外部独立的js文件：

注意：

这种方式不可以，必须是双闭合的标签

3、关于JS中的变量

    <script>
        /**
         * var 变量名;
         * 变量名 = 值
         * javascript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值 
         */
        var i;
        alert("i =" + i);//i =undefined undefined是一个值

        //alert(age);//Uncaught ReferenceError: age is not defined

        var a,b,c = 200;
        alert("a=" + a);
        alert("b=" + b);
        alert("c=" + c);
        a = false;
        b = "abc";
        alert(a)
        alert(b)
    </script>

4、JS函数初步

    <script>
        /*
        
            1.JS中的函数
                等同于java中的方法
            2.函数如何定义？
                语法格式：
                    function(形参列表){
                        函数体;
                    }
                    第二种
                    函数名 = functio(形参列表){
                        函数体;
                    }
                JS中不需要指定返回值类型，返回什么类型都可以
        */
       function sum(a,b){
        //a和b都是局部变量，他们都是形参
        alert(a + b);
       }
       //调用函数
       sum(1,2);
    </script>

JS当中函数是不可以重载的，因为js是弱类型语言，在JS中如果有两个同名的函数，那么后面的会将前面的覆盖掉，前面的函数就不复存在了。

5、JS的局部变量和全局变量

    <script type="text/javascript">
        /*
            全局变量：
                在函数体之外声明的变量，浏览器打开时声明，浏览器关闭时销毁，尽量少用，占内存
            局部变量：
                在函数体当中声明的变量，包括一个函数的形参都属于局部变量
                局部变量从函数执行时开始创建，到函数执行结束后释放空间，变量销毁。
        */
       // 全局变量
       var i = 100;

       function accessI(){
        alert("i = " + i);
       }
       accessI();

       var username = "andy";
       function accessUsername(){
            var username = "lisi";
            alert("username = " + username);
       }
       accessUsername();

       alert("username = " + username);

       function accessAge(){
        var age = 20;
        alert("age = " + age);
       }

       accessAge();

       //alert("age = " + age);//Uncaught ReferenceError: age is not defined
       //以下语法很奇怪
       function myfun(){
            // 当一个变量声明的时候没有用var关键字，那么这个变量不管在哪都是全局的
            myname = "aaa";
       }
       myfun();
       alert("myname = " + myname);
       
    </script>

6、 JS中的数据类型

    <script type="text/javascript">
        /*
            虽然js在声明变量时，不需要指定数据类型，但是每个数据还是有数据类型的
                JS中数据类型有：原始类型、引用类型
                原始类型：Undefined、Number、String、Boolean、Null
                引用类型：Object以及Object子类
            ES6规范（ECMAScript），在ES6之后，基于以上六种又增加了一种Symbol
            JS中有一个运算符叫typeof，可以获取变量的数据类型
            结果(六个字符串之一)："undefined"/"number"/"string"/"boolean"/"object"/"function"


        */
       function sum(a,b){
            if(typeof a == "number" && typeof b == "number"){
                return a + b;
            }
            alert(a + "," + b + "必须都为数字");
       }
       var retValue = sum("a",1);
       alert(retValue);

       var a = null;
       alert(typeof a);//"object"

       alert(typeof sum);//"function"
    </script>

    <script type="text/javascript">
        /*
            Number类型包括哪些值？
            整数、小数、正数、负数、不是数字、无穷大都属于Number类型
            isNaN():true表示不是一个数字，false表示是一个数字
            parseInt(): 转成整数
            parseFloat(): 转成浮点数
            Math.ceil():作用是向上取整
        */
       var v1 = 1;
       var v2 = 3.14;
       var v3 = -100;
       var v4 = NaN;
       var v5 = Infinity;
       
    //    alert(typeof v1);
    //    alert(typeof v2);
    //    alert(typeof v3);
    //    alert(typeof v4);
    //    alert(typeof v5);

       var a = 100;
       var b = "abc";
       alert(a / b);// 运算结果本来应该是一个数字，但是最后没有数字，那么结果为NaN
       //Infinity
       alert(10 / 0);
       //关于isNaN
       //isNaN(数据)，true表示不是一个数字，false表示是一个数字
       function sum(a,b){
        if(isNaN(a) || isNaN(b)){
            alert("参与运算的必须是数字");
        }
        return a + b;
       }
       sum(123,"abc");
       alert(sum(123,1));

       //parseInt
       alert(parseInt(3.999));
       alert(parseInt("3.999"));
       //parseFloat
       alert(parseFloat("2.1"));
       alert(parseFloat(2.1));
       //Math.ceil()
       alert(Math.ceil(2.1));
    </script>

Boolean()：作用是将非Boolean类型转化为Boolean类型

规律：“有”就转化为true，没有就转化为false

String类型

    <script type="text/javascript">

        /*
            JS中使用"",''都可以
            创建字符串的两种方式：
                第一种方式 var s = "abc"
                第二种方式 使用内置类
        */
       var x = "abc";
       alert(typeof x);//String

       var y = new String("abc");
       alert(typeof y);//Object
    
       //考点：substr()和substring()的区别
       //substr(startIndex,length) 从startIndex开始截取length长度的子串
       alert("adasdvxcvs".substr(2,4));//asdv
       //substring(startIndex,endIndex) 包含startIndex但是不包含endIndex
       alert("adasdvxcvs".substring(2,4));//as
    </script>

Object

    <script type="text/javascript">
        /*
            Object类型是所有类型的超类，自定义的所有类型，默认继承Object
            Object类包括的属性
            prototype属性（常用的）：作用是给类动态的扩展属性和函数
            constructor属性
            函数
            toString、
            定义类的语法：
                function 类名(形参){

                }
                或
                类名 = function(形参){

                }
        */
       function User(a,b,c){
        this.sno = a;
        this.sname = b;
        this.sage = c;
       }
       //创建对象
       var u1 = new User(111,"zhangsan",33);
       //访问对象属性
       alert(u1.sname);
       alert(u1.sno);
       alert(u1.sage);

       alert(u1["sname"]);
       alert(u1["sno"]);
       alert(u1["sage"]);

       Produce = function(pno,pname,price){
        this.pno = pno;
        this.pname = pname;
        this.price = price;

        this.getPname = function(){
            return this.pname;
        }
       }

        pro = new Produce(11,"西瓜",4.0);
        alert(pro.getPname());

        Produce.prototype.getPrice = function(){
            return this.price;
        }
        alert(pro.getPrice());


    </script>

null、NaN、undefined的区别

    <script type="text/javascript">
        alert(typeof null);
        alert(typeof NaN);
        alert(typeof undefined);
 
        alert(null == NaN);//false
        alert(null == undefined);//true
        alert(NaN == undefined);//false
        //在JS中有两个特殊的运算法== 和 ===，前者表示等同，后者表示全等，前者只比较值是否相同，后者还需要比较类型是否一致

    </script>

7、JS中的常用事件

鼠标事件

onclick	鼠标点击左键触发
oncontextmenu	鼠标点击右键触发
ondblclick	鼠标双击触发
onmouseover	鼠标经过时触发
onmouseout	鼠标离开触发
onfocus	鼠标获得焦点触发
onblur	鼠标失去焦点触发
onmousemove	鼠标移动时触发
onmouseup	鼠标弹起时触发
onmousedown	鼠标按下触发

键盘事件

onkeyup	某个键盘按键松开触发
onkeydown	某个键盘按键按下触发
onkeypress	某个键盘按键按下触发，不识别功能键，如ctrl

触摸事件

touchstart	手指触摸到一个DOM元素时触发
touchmove	手指在一个 DOM 元素上滑动时触发
touchend	手指从一个 DOM 元素上移开时触发

表单事件

onfocus	表单获得焦点触发
onblur	表单失去焦点触发
oninput	表单每次输入触发
onchange	表单内容发生改变时触发
onselect	表单文本被选取时触发
onreset	表单重置时触发
onsubmit	表单提交时触发

动画事件

onanimationend	在动画结束播放时触发
onanimationiteration	在动画重复播放时触发
onanimationstart	在动画开始播放时触发

8、注册事件的两种方式

    <script type="text/javascript">
        /*
            第一种注册事件的方式，直接加句柄
        */
        function sayHello(){
            alert("hello world");
        }
    </script>
    <input type="button" value="hello" onclick="sayHello()"/>
    <input type="button" value="doSome" id="mybtn"/>
    <input type="button" value="doSome2" id="mybtn1"/>
    <script type="text/javascript">
        function doSome(){
            alert("do some...");
        }
        /*
            第二种方式注册事件
        */
        //1.先获取这个按钮对象
       var btnObj = document.getElementById("mybtn");
       // 2.给对象的onclick属性赋值
       btnObj.onclick = doSome;

      var btn1 = document.getElementById("mybtn1");
      btn1.onclick = function(){// 这个函数没有名字叫做匿名函数，这个匿名函数也是回调函数
        alert("doSome2.....");
      }
      document.getElementById("mybtn1").onclick = function(){
        alert("test....");
      }
    </script>

9、 JS代码的执行顺序

<!-- load事件会在页面元素全部加载完毕后才发生 -->
<body onload="ready()">
    <script type="text/javascript">
        /*
        document.getElementById("btn").onclick = function(){
            alert("hello js");
        }
        */
       function ready(){
        document.getElementById("btn").onclick = function(){
            alert("hello js");
        }
       }
    </script>
    <input type="button" value="hello" id="btn">
</body>   

<!-- 改进  -->
<script type="text/javascript">
        window.onload = function(){

            document.getElementById("btn").onclick = function(){
            alert("hello js");
             }

        }

    </script>
    <input type="button" value="hello" id="btn">

10、JS代码捕捉回车键

    <script type="text/javascript">
        window.onload = function(){
           var usernameEl = document.getElementById("username");
           //回车键的键值是13，Esc的键值是27
           usernameEl.onkeydown = function(event){// event变量会接收一个事件对象 这里是键盘事件对象
            //获取键值
            //对于键盘对象来说，都有keyCode属性来获取键值
            if(event.keyCode == 13){
                alert("用户登录。。")
            }
           }
        }
    </script>

11、JS中的void运算符

 <!-- href中不写内容表示当前路径 -->
    <!-- 
        void运算符的语法：void(表达式) 表达式必须写，不写的话后台会报错。
        运算原理：执行表达式，但不返回任何结果
        其中javascript：告诉浏览器下面执行的是一段js代码
        javascript不能省略
     -->
    <a href="javascript:void(0)" onclick="window.alert('test ...')">既保留住超链接的样式，同时用户点击该超链接时执行一段JS代码，页面不会跳转</a>

关于JS的一些自我总结｜ 青训营笔记

JavaScript

1、 什么是JavaScript？

2、在HTML中怎么嵌入JavaScript代码

3、 关于JS中的变量

4、JS函数初步

5、JS的局部变量和全局变量

6、 JS中的数据类型

String类型

Object

null、NaN、undefined的区别

7、JS中的常用事件

8、注册事件的两种方式

9、 JS代码的执行顺序

10、JS代码捕捉回车键

关于JS的一些自我总结｜青训营笔记

1、什么是JavaScript？

3、关于JS中的变量