html、css、js笔记2

JavaScript课堂笔记
JavaScript概述
1、简称JS
2、是一种脚本语言（也可以称为是一种解释型语言），脚本语言的特点。
    Java语言是一种脚本语言，属于编译型语言，“目标程序”已经无法用普通的文本编辑器打开。
    JavaScript是一种脚本语言，JavaScript的“目标程序”是以普通文本的形式保存的，用事本可以直接打开。浏览器打开就直接解释执行了。
    区分是否脚本语言：就看他的目标程序是否“纯文本”形式。
3、JavaScript和Java的关系：
    JavaScript运行在浏览器当中，浏览器中右执行JS代码的内核。
    Java运行在JVM当中。JavaScript和Java没有任何关系。
4、JavaScript主要用来操作HTML中的节点，产生动态效果
    JavaScript是一门编程语言，专门用来操作HTML页面中的节点，让网页产生动态效果
    JavaScript中也有变量、数据类型、运算符、if语句、佛如循环、便师傅、关键字等。
5、JavaScript分为三大块
    1、ECMAScript：JavaScript的核心语法。
    2、DOM：Document Object Model 文档对象模型
        DOM编程是通过JavaScript对HTML中的dom节点进行操作，DOM是由规范的，DOM规范是w3c指定的。
    3、BOM：Browser Object Model 浏览器对象模型
        BOM编程是对浏览器本身操作，例如：前进、后退、地址栏、关闭窗口、弹窗等。
6、JavaScript是一种事件驱动型的编程语言，通常是在发生某个事件的时候，去执行某段代码。
    其中事件包括很多，例如：鼠标单击事件click等，并且在JavaScript当中，任何一个事件都有对应的事件句柄。
    例如click对应的事件句柄是“onclick”。
    【事件句柄是指事件发生时要进行的操作。事件句柄又称为“事件处理函数”】
6.1、当用户在网页中进行某种操作时，就产生了一个“事件”(Event)。
    事件几乎可以是任何事情：单击一个网页元素、拖动鼠标等均可视为事件。
    JavaScript是事件驱动的，当事件发生时，它可以对之做出响应。
    具体如何响应某个事件由编写的事件处理函数完成。
    事件的处理函数叫做事件的句柄。
7、所有的事件句柄(事件的处理函数)都是以标签的属性的形式存在的。
    例如以下的input button就有一个onclick这样的属性。
    <input type="button" value="hello" οnclick="alert('薛英豪');" />
    只要有用户点击了以上这个按钮对象，此时按钮对象上发生了鼠标单击事件，
    那么注册在onclick事件句柄（处理函数）中的js代码会被执行！onclick后面的代码实际上是浏览器负责执行的。
    事件源：按钮
    事件：用户单击了按钮
    监听器：浏览器，浏览器一直在监听着这个事件什么时候发生
8、οnclick="后面的代码"并不是在浏览器打开的时候执行，浏览器打开的时候，只是将这个代码注册给onclick事件句柄了。
    等待该按钮的click事件的发生，只要发生，“后面的代码”会被事件监听器(浏览器)调用。
9、什么是句柄？
    Windows之所以要设立句柄，根本上源于内存管理机制的问题，即虚拟地址。
    简而言之数据的地址需要变动，变动以后就需要有人来记录、管理变动，
    因此系统用句柄来记载数据地址的变更。
    在程序设计中，句柄是一种特殊的智能指针。
   什么是事件句柄？
    事件句柄是指事件发生时要进行的操作。
    （又称事件处理函数），每一个事件均对应一个事件句柄，
    在程序执行时，将相应的“函数”或“语句”指定给事件句柄，
    则在该事件发生时，浏览器便执行指定的函数或语句，从而实现网页内容与用户操作的交互。
    当浏览器检测到某事件发生时，便查找该事件对应的事件句柄有没有被赋值，如果有，则执行该事件句柄。

嵌入JavaScript代码的三种方式
1、第一种方式：行间事件。
    <input type="button" value="hello" οnclick="window.alert('薛英豪');" />
    在标签中使用事件句柄（处理函数）。
2、第二种方式：内嵌式/脚本块。
    <script type="text/javascript">
        //在这里直接编写js代码，这些代码在页面打开的时候，自上而下的顺序依次逐行执行。
        alert("薛英豪");
    </script>
    脚本块在HTML文档的任意位置都可以写，但是一般写到“head”标签的“style”标签的下面
    一个页面中脚本快可以出现多个。
3、引入外部独立的js文件
    <script type="text/javascript" src="js/1.js"></script>
    在html文件哪里引入，就相当于在哪里直接将“1.js”文件中所有的js代码全部插进去了。
4、js当中有一个内置对象BOM，可以拿来直接使用，全部小写：window
    其中window有一个函数叫做alert，这个函数专门用来弹出对话框。
    window.alert('薛英豪');  window可以省略alert('薛英豪');
5、js中的字符串可以使用“单引号”括起来也可以使用“双引号”括起来，
    js中的一条语句可以“;”结尾，也可以不以“;”结尾。
6、常用事件句柄（处理函数）
    onclick：点击事件处理函数
    onmouseover：鼠标移入事件处理函数
7、注释：js中的注释和Java中的注释是一样的。
    // : 单行注释
    /* */ : 多行注释
    /**
     *   ： doc注释
     */
8、采用第三种方式引入外部js代码
    <script type="text/javascript" src="js/1.js">
        这里不能写代码了，这了代码也不会执行
    </script>
9、详细解析代码
<script type="text/javascript">
    window.onload = function () {  //window.onload代表，“浏览器的load事件句柄”，在页面元素都加载完之后最后加载的
        var oBtn1 = document.getElementById('btn'); //通过DOM对象获取到某个节点
        //js中后面给句柄赋值会覆盖原来赋的值，因为这个代码块实在页面所有节点加载完毕之后才执行的，
        //onclick可以看作是点击事件处理函数名，是一个句柄(是一个智能指针)
        //给句柄赋值之后，当click事件发生之后，句柄指向的代码就会执行。
        oBtn1.onclick = function () { 
            alert("123");
        }
        oBtn1.type = "text";  //通过js可以操作该节点的任何属性，可以“点”出来该节点的任何属性
    }
</script>
<input type="button" name="btn" id="btn" value="按钮" οnclick="window.alert('薛英豪');" />
10、onclick是一个事件句柄就是click事件的处理函数的“智能指针”，指向click事件发生时的处理函数。
    onload是一个事件句柄就是load(加载)事件的处理函数的“智能指针”，指向load事件发生时的处理函数。
    在行间写“οnclick="window.alert('薛英豪');"”这样的东西就相当于，吧“window.alert('薛英豪');”封装到了一个函数中。
11、标识符和关键字：
    标识符的命名规则和规范和Java时一样的。
        标识符只能由数字、字母、下划线、美元符号组成，不能含有其他特殊符号。
        标识符不能以数字开始。
        标识符严格区分大小写。
        关键字不能左标识符。
        标识符理论上没有长度限制。
    关键字：不需要刻意去记。

JS的变量
1、怎么声明？
    var 变量名;
   怎么赋值？
    变量名 = 值;
    var 变量名 = 值; [变量还可以声明的同时赋值]
   一行上能声明多个变量吗？
    var a,b,c = 300;
    声明了3个变量，a,b,c，并且c赋值300，其中a和b只是声明没有赋值，系统赋默认值undefined。
2、undefined在js中是一个具体的值，这个值就是undefined。
3、js语言是一种弱类型语言，没有编译阶段，直接浏览器打开解释执行，
    在js中声明变量的时候不需要指定变量的数据类型。
    程序在运行过程中赋什么类型的值，变量就是什么类型，并且变量的数据类型时可变的。

JS中的函数
1、定义函数的语法格式：
    function 函数名 (形式参数列表) {
        函数体;
    }
    形式参数列表：变量名1,变量名2,变量名3...
    例如：
    function sum (a, b) {
        return a + b;
    }
    因为js是一种弱类型的语言，不管是什么类型都可以接收，不管是什么类型都可以返回
    所以不用指定返回值类型和形式参数的类型。
1.1、函数的第二种声明方式：
    函数名 = function (形式参数列表) {
        函数体;
    }
    例如：
    sum = function (a, b) {
        return a + b;
    }
2、函数需要调用才能执行
    函数名 (实参列表);
3、undefined与任何数字做运算的结果都是NaN。
4、实参的格式可以和形参的格式不一样，但是一般的时候不这样做，因为这样做没有意义。
5、JS程序调试？
    首选方案是：alert(),在程序的某个位置先使用alert弹出某个变量的值，看看是否是正确的值。
   另一种方案是：采用浏览器自带的调试插件F12.
    F12插件中比较重要的面板：
        控制台
        查看器
        网络
6、把hello函数注册到点击事件的事件句柄的时候，hello函数必须已经被浏览器已经解释了，否则会绑定失败。
    所以hello函数不能在btn按钮已经加载了之后才被浏览器解释执行【hello函数不能放在window.onload函数中】。
    在页面打开的时候遵循自上而下的顺序一次逐行执行，
    <script type="text/javascript">
        function hello (name) {
            alert('欢迎' + name + '登录');
        }
    </script>
    <input type="button" name="btn" id="btn" value="按钮" οnclick="hello('张三');alert('lisi');" />
    就相当于：
    <script type="text/javascript">
        function hello (name) {
            alert('欢迎' + name + '登录');
        }
    </script>
    <input type="button" name="btn" id="btn" value="按钮" />
    <script type="text/javascript">
        var oBtn = document.getElementById("btn");//获取该元素必须在元素定义之后才可以获取
        oBtn.onclick = function () {  //在行内写到onclick句柄中的,会被封装到一个函数中.
            hello ('张三');
            alert('lisi');
        };
    </script>
    也可以使用window.onload
7、函数声明的优先级比较高，打开网页的时候，网页中所有的函数先进行声明.
    <script type="text/javascript">
        hello('薛英豪'); //在同一个网页上函数的声明优先级比较高，所以可以在声明之前调用。
        function hello (name) {
            alert('欢迎' + name + '登录');
        }
    </script>
8、href="#"与href="javascript:void(0)"的区别
    # 包含了一个位置信息，默认的锚是#top 也就是网页的上端。
    而javascript:void(0), 仅仅表示一个死链接。
    在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
    如果你要定义一个死链接请使用 javascript:void(0) 。
9、window是JS中的内置BOM顶级对象。
   document是JS中的内置DOM顶级对象。

局部变量和全局变量
1、全局变量：在函数体之外声明的变量。
    在浏览器打开的时候,解析到变量声明的这行代码的时候为变量分配空间，直至浏览器关闭的时候才会销毁。
2、局部变量：在函数体中声明的变量
    局部变量在函数被调用的时候分配空间，函数执行结束之后，内存释放。
3、变量的访问遵循变量“就近原则”。
4、只声明未赋值的变量是undefined，
    没有声明直接访问未定义的变量就会报错了。
5、在一个js代码块中如果有一条js代码报错了，那么这个代码块后续代码不再执行，但是其他代码块还是可以继续执行的。
6、每个函数中又有一个“arguments”数组。
    arguments数组是形参数组。
7、在js中，如果一个变量声明的时候没有使用var关键字的话，
    这个变量不管在那里声明这个变量都是全局变量。
   直接写 “age = 20” 就相当于声明了一个age全局变量，并且这个变量赋值为20.
   如果不使用var声明变量的话，必须在变量声明的同时赋值。
8、js中的函数可以重载吗？
    不可以。
    后来的同名函数会将原来的函数覆盖。
    js中只要出现同名函数之前的函数就消失了。
    在js中编写函数名的时候谨慎一下，以防将其他函数干掉。
9、JS的提示框：
    window.alert("警告信息"); //警告用户
    var result = window.confirm("提示信息"); //用户点击“确定”，result是true，用户点击“取消”，result是false
    var ret = window.prompt('请输入您的年龄', 23);// 返回用户输入的值或null, 第二个值为指定的默认值(可选)

JS中的数据类型
1、JS中声明变量不需要指定变量的数据类型啊，为什么还要学习数据类型？
    例如：var i = 100;var d = 3.14;
    在js中学习数据类型也不是为了声明变量，是为了理解js程序的底层原理。
2、ES6之前js中的数据类型包括6中：
    1.Undefined
    2.Number
    3.String
    4.Boolean
    5.Null
    6.Object
    除了Object都属于基本数据类型/原始数据类型
    Object叫做引用数据类型/对象数据类型
3、在ES6之后引入了其他新的类型
    Symbol
    BigInt
4、typeof运算符：
    typeof运算符可以在JS代码运行过程中，动态获取变量的数据类型。
    typeof语法格式： typeof  变量名;  或者  typeof(变量名)
    typeof运算符的运算结果是以下六个字符串之一：（注意全部是小写的）
        “undefined”、“number”、“string”、“boolean”、“object”、“function”
5、在JS中判断两个字符串是否相等应该使用“==”，JS中没有equals.
6、JS中的运算符和Java中的类似。
7、window.parseInt(数据);  “window.parseInt”可以将“数据”转换成int类型的数据。
    如果数据是一个“字符串”那就从第一个字符开始转换成数字，直至第一个不是数字的字符位才停止。
   window.parseFloat(数据); “window.parseFloat”可以将“数据”转换成浮点型数据。
8、null这个值属于Null类型，但是typeof运算符的运算结果是Object类。
9、JS比较官方的参考文档：
    搜索 web  api
10、Undefined类型
    只有一个值：undefined
    Undefined类型属于基本数据类型/原始类型
    当一个变量声明之后，没有手动赋值，系统默认复制undefined。
11、Null类型
    只有一个值：null
    Null类型属于基本数据类型/原始类型
    注意 typeof null；运算结果是Object
12、Number类型
    Number类型属于基本数据类型/原始类型
    所有的数字都是Number类型的数据。
    除了所有的数字之外还有NaN、Infinity...
    【window.Infinity和window.NaN】
12.1、当一个数学表达式的运算结果本应该返回一个数字，
    但最终无法返回一个数字的时候结果是NaN.
    例如： var result = 100 / "中";
12.2、Infinity是无穷大
    例如 var result = 100 / 0;
12.3、window.isNaN(数据);判断“数据”是否NaN，如果是返回true
    isNaN这个函数有一个特点，他会首先尝试将“数据”转换成数字，如果转换失败了，说明“数据”是一个NaN，那么就返回true。
    true会转换成1；false会转换成0.
    “数据”如果是一个字符串，必须是纯数字字符串才会转换成数字，isNaN才会返回false.
12.4、window.Number(数据); window.Number可以将不是数字类型的数据转换成Number类型的数据。
      “数据”如果是一个字符串，必须是纯数字字符串才会转换成数字,否则就是NaN.
13、window.Math是JS内置数学工具类
    Math.ceil(数据) ;  向上取整，返回Number类型的数据
    还有一些其他的函数....
14、Boolean类型
    1.Boolean类型是基本数据类型/原始类型。
    2.Boolean类型只有两个值：true、false。
    3.Boolean类型中有一个window.Boolean()函数，
        Boolean函数可以将不是Boolean类型的数据转换成Boolean类型数据
        转换规则：有数据就是true、没有数据就是false
            转换成false的几种情况：
                空字符串、空对象、数字0、NaN、undefined
            其他情况都转换成true。
        Boolean函数在JS中会被隐式调用，程序员是不需要手动调用的。
            例如：if (这里只能是boolean类型) 如果传进去的不是boolean类型，会隐式调用Boolean函数将其转换成Boolean类型的数据。
            if后面小括号中只能是true或者是false。
15、在JS中  “10 / 3”  结果是多少？
    这里和Java不同，这里的结果是3.33333....，并不是3
16、window.String(数据)；
        可以将数据转换成字符串类型的数据
    window.Object(数据)
        可以将数据转换成对象类型的数据。
17、String类型
    1.String类型属于基本数据类型/原始类型。
    2.再JS中怎么定义字符串，包括两种方式：
        1、如果采用这种方式创建的字符串就属于“原始类型”。
        var s = "字符串";
        var s = '字符串';
        2、如果采用这种方式创建的字符串就是与Object类型，这里使用了Object类的子类String，String是JS内置的，可以直接使用。
        var s = new String("字符串");
        var s = new String('字符串');
    3.再JS中不管是原始类型的字符串还是Object类型的字符串，他们的方法和属性都是通用的。
    4.String类型的常用属性和方法：
        常用属性：
            length属性，获取字符串的长度
        常用方法：
            charAt 方法
                获取指定下标位置的字符
            concat  方法
                连接字符串
            indexOf 方法：
                返回子串再原字符串当中第一次出现的起始位置的下标（下标从0开始以1递增）
            lastIndexOf 方法：    
                返回子串再原字符串当中最后一次出现的起始位置的下标（下标从0开始以1递增）
            replace 方法
                替换：字符串对象.replace(oldstr,newstr);
                只能替换第一个，如果想替换所有需要使用正则表达式
            split 方法：
                拆分字符串
            substr 方法: substr(startIndex, length)
                截取字符串
            substring 方法：substring(startIndex, endIndex)  //截取的字串中不包括endIndex下标位置的字符串
                截取字符串
                对于substr和substring来说这两个都是，
                只规定起始下标的话就是从起始下标开始截取直至串的末尾
            toLowerCase 方法：
                转小写
            toUpperCase 方法：
                转大写
18、JS中定义数组语法结构：
    var arr = [new Object(),1,"dads"];
    因为JS是弱类型的语言，所以js中的数据可以存储不同类型的元素。
    因为JS是弱类型的语言所以定义数组也是使用“var”关键字，没有“var[]”这种语法。
    arr.length是数组中元素的个数。
19、Object类型
    1.再JS中内置了一个类型Object，可以将Object看作是所有对象的超类/基类。
    2.再JS中默认定义的类型，没有特殊说明的话，默认继承Object。
    3.Object类型中有那些常用的属性和方法？
        属性：
            prototype:重点掌握
                作用：prototype属性可以给某个类型的对象动态扩展属性和方法。
                每个类型都有prototype属性。
                用某个类型调用“prototype”属性扩展属性和方法的话，该类型的所有对象都有这个属性或者方法。
                    var str = new String("123");
                    //就相当于给Object类型的对象扩展一个方法
                    Object.prototype.doSome = function () {
                        alert("测试prototype属性！");
                    }  //是给所有的Object类型的子类对象添加了一个doSome方法，不仅仅是给str指向的字符串对象添加了一个doSome方法。
                    // 因为String类型是Object类型的子类型，所以可以通过String类型的对象去调用给Object类型的对象扩展的方法和属性。
                    str.doSome();
                    //就相当于后期给Object类型的对象扩展一个方法
                    Object.prototype.username = "xueyinghao";
                    alert(o.username);//弹出   xueyinghao
                    var date = new Date();
                    date.doSome();//date对象也可以调用doSome方法。
                应用：给String类型的所有对象扩展一个(mysubstr)方法。
                String.prototype.mysubstr = function (startIndex,length) {
                    //其中的“this”是当前字符串对象。
                    //不用写返回值类型
                    return this.substr(startIndex,length);
                }
            constructor：
        方法：
            toLocaleString
            toString
            valueOf