一、先谈HTML

    网页有架构，样式，行为三大组成。架构由html决定，样式由css决定，行为由JavaScript决定

    html是超文本标记语言
    DOCTYPE：html5的声明

    二、JavaScript
    （一）js代码的书写：
    1）js可以写在HTML中的script标签中，script标签可以写在任意位置。
    2）还可以通过script标签引入外部js文件，例如<script src="aaa.js"></script>用于导入的script标签不能写js代码。

    （二）JavaScript变量：

    数值类型(number)：
    value = 15;

    字符串类型(string)：
    value = “adfja”;

    对象类型(Object)：
    value = new Object();(js中new对象只能new Object类型)

    布尔类型(boolean)：
    value = true;

    函数类型(function)：
    var value2 = function (){};

    var关键字可以接收任意数据类型

    typeof函数用于查看js变量的数据类型

    变量声名后未赋值会显示undefined，即未定义

    （三）逻辑运算：

    在js中，只有undefined，false，null ，0 四种情况下逻辑为假

    与运算：&&

    1、js的与运算，多个变量同时为true时，会取到最后者的值；

    2、多个变量与运算时，一者为假时，取到为假的值。

    3、两者同时为假时，会取到后者的值

    或运算：||

    从左到右判断变量是否为真，遇到真立即输出，若全部为假，则输出最后一个值。多者同时为true，取前者值。

    取反运算：！

    在变量前加！ ，取反

    （四）数组定义方式

    由于js是弱类型语言，所以js的数组可以存放不同类型的变量

    格式1： var 数组名 = [] //空数组

    格式2：:var 数组名 = [1，true，”fafa”] //定义数组并赋值

    1.     var array = [];
    2.     array[0] = 10;
    3.     //[object Object] 对象类型
    4.     array[10] = new Object();

    赋值时，如上面代码，数组长度为最大下标值加1，即为11，中间未赋值的默认取defined。

    （五）函数

    函数的两种定义方式

    1、function 函数名（）{} //无参函数

    1. //无参函数
    2.     function get(){
    3.         alert("有参函数")
    5.     }
    6.     //调用函数
    7.     get();

    function 函数名（直接写变量名，不用写数据类型）{} //有参函数

    1. function get(num){
    2.         alert(num);
    3.     }
    4.     get("jfaj")

    下面这个代码中，变量相加，如果变量都是数值类型，则相加，其他情况时则是字符串拼接。

    1. function getMethod(num1,num2){
    2.         var num = num1 + num2;
    3.         alert(num);
    4.     }
    6.     getMethod(100,"agdfa");

    如何给js函数指定返回值类型：直接在函数中写return

    2、第二种函数定义方式

    1. var fun1 = function (){
    3.     }
    4.     fun1();

    在js中，不支持函数/方法的重载，如果定义了相同的方法，后者会将前者覆盖掉

    有参函数调用时，可以不传参数，参数默认为defined。

    无参函数调用时，也可以传参数，语法不会报错，能正常执行。这是因为js无参函数中有隐式参数arguments，是一个可变长的参数，存在于当前js函数的形参列表。如果想要调用传入的参数，就用数组形式。

    1.  //arguments  js中的隐式参数，是一个可变长参数
    2.     var fun1 = function (){
    4.         alert(arguments[0]);
    5.         alert(arguments[1]);
    6.         alert(arguments[2]);
    8.     }
    9.     fun1(55,66,77);

    文本就绪函数：浏览器加载页面完成，文本都解析完毕后执行的函数。执行顺序在最后。因为浏览器解析HTML代码是一行一行往下解析的，所以需要获取标签对象的代码需要写在文本就绪函数中，不然获取不到。

    1. //jquery版本的文本就绪函数
    2.     $(function(){
    3.         //执行的内容
    4.     });
    6.     $().ready(function(){
    7.     //执行的内容
    8.     });
    11.     $(document).ready(function(){
    12.         //执行的内容
    13.     });

    （六）js中的事件

    如何绑定js中的事件

    1、静态绑定 指的是用html标签内部的事件属性进行事件的注册/绑定

    2、动态绑定 一般是指先根据document对象获取标签对象，在根据标签对象操作对应的事件属性。除表单提交事件除外都写在文本就绪函数中。

    常用事件：

    1. 1）单击事件 onclick
    2. 2）失去焦点事件   onblur
    3. 3）内容发生改变事件  onchange    常用于下拉列表框
    4. 4）表单提交事件  onsubmit  常用于验证表单提交前所有表单项是否合法。

    有些成员变量不用声明就可以在JSP页面的脚本（java程序片和Java表达式）中使用，这就是所谓的内置对象。

    1. /*    页面加载完成事件的动态绑定
    2.     window  指的HTML内置对象
    3.      js版本的文本就绪函数
    4. */
    5. <!--单击事件静态注册-->
    6. <input type="button" id="onclick" value="测试单击事件" onclick="getMethod02()">
    8. window.onload = function (){
    9.    //动态注册单击事件 1、获取标签对象 2、操作标签对应的属性
    10.     //document   也是html内置对象  上下文文本对象
    12.     var onclick = document.getElementById("onclick");
    14.    //操作标签对应的属性
    15.     onclickTest.onclick = function (){//动态注册单击事件
    17.             //getMethod02();
    19.     }
    20. }

    动态注册失去焦点事件
    1、获取标签对象 2、操作标签对应的属性

    失去焦点事件（onblur）：常用于验证失去焦点后输入内容是否合法
    失去焦点和获取焦点是一个鼠标行为，例如当点击数个输入框其中的一个使其处于编辑输入状态的时候就是获得可焦点，当点击其他输入框或者其他区域就会使这个输入框失去焦点

    1. <!--静态注册失去焦点事件-->
    2. 测试失去焦点:<input type="text" id="onblur" onblur="getMethod03()">
    4. //动态注册失去焦点事件
    5. window.onload = function (){ 
    6. var onblurTest = document.getElementById("onblur");
    8.     //[object HTMLInputElement]
    9.     //alert(onblurTest)
    10.     onblurTest.onblur = function (){//动态注册失去焦点事件
    12.         getMethod03();
    13.     }
    14. }

    动态注册内容改变事件
    1、获取标签对象 2、操作标签对应的属性

    onchange 事件会在域的内容改变时发生。
    onchange 事件也可用于单选框与复选框改变后触发的事件。

    1. <!--
    2.     <select></select> 下拉列表框
    3.     <option></option>每一个下拉单元
    4. -->
    5. 请选出你心目中的男神:
    6.     //静态注册内容改变事件测试
    7. <select onchange="alert('内容已改变')" id="onchange">
    9.     <option>冯老师</option>
    10.     <option>杨靖宇</option>
    11.     <option>刘兴源</option>
    12.     <option>刘德华</option>
    14. </select>
    16.     window.onload = function (){
    17. var onchangeTest = document.getElementById("onchange")
    19.     onchangeTest.onchange = function (){//动态注册内容改变事件
    21.         alert('内容发生改变');
    22.         }
    23. }
    25. //用于动态所注册内容改变事件测试
    26. <select id="onchange">
    28.     <option>冯老师</option>
    29.     <option>杨靖宇</option>
    30.     <option>刘兴源</option>
    31.     <option>刘德华</option>
    33. </select><br>

    表单提交事件：

    1. //静态绑定
    2. <form action="https://www.jd.com/" method="post">
    3.     <input type="submit" value="提交">
    4. </form>
    5. //在后面 onsubmit中return一个false即可拦截提交
    6. <form action="https://www.jd.com/" method="post" onsubmit="false">
    7.     <input type="submit" value="提交">
    8. </form>
    1. //动态绑定
    2. function getMethod(){
    3.       if(undefined){
    4.           return true;
    5.       }else{
    6.           return false;
    7.       }
    8.         }
    9. <form action="https://www.jd.com/" method="post" onsubmit="return getMethod()">
    10.     <input type="submit" value="提交">
    11. </form>