02尚硅谷_JavaScript王振国 - 课堂笔记.pdf
    1.js不允许重载。
    2.隐性参数arguments

    1. <script type="text/javascript">
    2.     function fun(a) {
    3.         alert( arguments.length );//可看参数个数
    5.         alert( arguments[0] );
    6.         alert( arguments[1] );
    7.         alert( arguments[2] );
    9.         alert("a = " + a);
    11.         for (var i = 0; i < arguments.length; i++){
    12.             alert( arguments[i] );
    13.         }
    15.         alert("无参函数fun()");
    16.     }
    17.     // fun(1,"ad",true);
    19.     // 需求：要求 编写 一个函数。用于计算所有参数相加的和并返回
    20.     function sum(num1,num2) {
    21.         var result = 0;
    22.         for (var i = 0; i < arguments.length; i++) {
    23.             if (typeof(arguments[i]) == "number") {
    24.                 result += arguments[i];
    25.             }
    26.         }
    27.         return result;
    28.     }
    30.     alert( sum(1,2,3,4,"abc",5,6,7,8,9) );
    33. </script>


    3.Object形式的自定义对象**

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <script type="text/javascript">
    7.         // 对象的定义：
    8.         //     var 变量名 = new Object();   // 对象实例（空对象）
    9.         //     变量名.属性名 = 值;         // 定义一个属性
    10.         //     变量名.函数名 = function(){}  // 定义一个函数
    11.         var obj = new Object();
    12.         obj.name = "华仔";
    13.         obj.age = 18;
    14.         obj.fun = function () {
    15.             alert("姓名：" + this.name + " , 年龄：" + this.age);
    16.         }
    17.         // 对象的访问：
    18.         //     变量名.属性 / 函数名();
    19.         // alert( obj.age );
    20.         obj.fun();
    21.     </script>
    22. </head>
    23. <body>
    24. </body>
    25. </html>

    4.大括号形式的自定义对象

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <script type="text/javascript">
    7.         // 对象的定义：
    8.         // var 变量名 = {            // 空对象
    9.         //     属性名：值,            // 定义一个属性
    10.         //     属性名：值,            // 定义一个属性
    11.         //     函数名：function(){}    // 定义一个函数
    12.         // };
    13.         var obj = {
    14.             name:"国哥",
    15.             age:18,
    16.                 fun : function () {
    17.                 alert("姓名：" + this.name + " , 年龄：" + this.age);
    18.             }
    19.         };
    21.         // 对象的访问：
    22.         //     变量名.属性 / 函数名();
    23.         alert(obj.name);
    24.         obj.fun();
    25.     </script>
    26. </head>
    27. <body>
    29. </body>
    30. </html>

    事件
    常用的事件：
    onload 加载完成事件： 页面加载完成之后，常用于做页面 js 代码初始化操作
    onclick 单击事件： 常用于按钮的点击响应操作。
    onblur 失去焦点事件： 常用用于输入框失去焦点后验证其输入内容是否合法。
    onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作
    onsubmit 表单提交事件： 常用于表单提交前，验证所有表单项是否合法。
    事件的注册又分为静态注册和动态注册两种：
    什么是事件的注册（绑定）？ 其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
    静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
    动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件 响应后的代码，叫动态注册。
    动态注册基本步骤：
    1、获取标签对象
    2、标签对象.事件名 = fucntion(){}
    ①onload

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <script type="text/javascript">
    7.         // onload事件的方法
    8.         function onloadFun() {
    9.             alert('静态注册onload事件，所有代码');
    10.         }
    12.         // onload事件动态注册。是固定写法
    13.         window.onload = function () {
    14.             alert("动态注册的onload事件");
    15.         }
    17.     </script>
    18. </head>
    19. <!--静态注册onload事件
    20.         onload事件是浏览器解析完页面之后就会自动触发的事件
    21.        <body onload="onloadFun();">
    22. -->
    23. <body>
    25. </body>
    26. </html>

    ②onclick

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <script type="text/javascript">
    7.         function onclickFun() {
    8.             alert("静态注册onclick事件");
    9.         }
    11.         // 动态注册onclick事件
    12.         window.onload = function () {
    13.             // 1 获取标签对象
    14.             /*
    15.             * document 是JavaScript语言提供的一个对象（文档）<br/>
    16.             * get           获取
    17.             * Element       元素（就是标签）
    18.             * By            通过。。   由。。经。。。
    19.             * Id            id属性
    20.             *
    21.             * getElementById通过id属性获取标签对象
    22.             **/
    23.             var btnObj = document.getElementById("btn01");
    24.             // alert( btnObj );
    25.             // 2 通过标签对象.事件名 = function(){}
    26.             btnObj.onclick = function () {
    27.                 alert("动态注册的onclick事件");
    28.             }
    29.         }
    31.     </script>
    32. </head>
    33. <body>
    34.     <!--静态注册onClick事件-->
    35.     <button onclick="onclickFun();">按钮1</button>
    36.     <button id="btn01">按钮2</button>
    37. </body>
    38. </html>

    ③onblur

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <script type="text/javascript">
    7.         // 静态注册失去焦点事件
    8.         function onblurFun() {
    9.             // console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用
    10.             // log() 是打印的方法
    11.             console.log("静态注册失去焦点事件");
    12.         }
    14.         // 动态注册 onblur事件
    15.         window.onload = function () {
    16.             //1 获取标签对象
    17.            var passwordObj = document.getElementById("password");
    18.            // alert(passwordObj);
    19.             //2 通过标签对象.事件名 = function(){};
    20.             passwordObj.onblur = function () {
    21.                 console.log("动态注册失去焦点事件");
    22.             }
    23.         }
    25.     </script>
    26. </head>
    27. <body>
    28.     用户名:<input type="text" onblur="onblurFun();"><br/>
    29.     密码:<input id="password" type="text" ><br/>
    30. </body>
    31. </html>

    运行结果：
    image.png
    ④onchange

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    7.     <script type="text/javascript">
    8.         function onchangeFun() {
    9.             alert("女神已经改变了");
    10.         }
    12.         window.onload = function () {
    13.             //1 获取标签对象
    14.             var selObj = document.getElementById("sel01");
    15.             // alert( selObj );
    16.             //2 通过标签对象.事件名 = function(){}
    17.             selObj.onchange = function () {
    18.                 alert("男神已经改变了");
    19.             }
    20.         }
    23.     </script>
    24. </head>
    25. <body>
    26.     请选择你心中的女神：
    27.     <!--静态注册onchange事件-->
    28.     <select onchange="onchangeFun();">
    29.         <option>--女神--</option>
    30.         <option>芳芳</option>
    31.         <option>佳佳</option>
    32.         <option>娘娘</option>
    33.     </select>
    35.     请选择你心中的男神：
    36.     <select id="sel01">
    37.         <option>--男神--</option>
    38.         <option>国哥</option>
    39.         <option>华仔</option>
    40.         <option>富城</option>
    41.     </select>
    44. </body>
    45. </html>

    运行结果：
    image.png
    ⑤onsubmit

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <script type="text/javascript" >
    7.         // 静态注册表单提交事务
    8.         function onsubmitFun(){
    9.             // 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
    10.             alert("静态注册表单提交事件----发现不合法");
    12.             return false;
    13.         }
    15.         window.onload = function () {
    16.             //1 获取标签对象
    17.             var formObj = document.getElementById("form01");
    18.             //2 通过标签对象.事件名 = function(){}
    19.             formObj.onsubmit = function () {
    20.                 // 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
    21.                 alert("动态注册表单提交事件----发现不合法");
    23.                 return true;
    24.             }
    25.         }
    27.     </script>
    28. </head>
    29. <body>
    30.     <!--return false 可以阻止 表单提交 -->
    31.     <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
    32.         <input type="submit" value="静态注册"/>
    33.     </form>
    34.     <form action="http://localhost:8080" id="form01">
    35.         <input type="submit" value="动态注册"/>
    36.     </form>
    38. </body>
    39. </html>

    运行结果：
    image.png