[关闭]
@MRsunhuimin 2019-08-15T14:02:50.000000Z 字数 6842 阅读 175

javaScript(08.13)

web

作者：孙慧敏

1.概述

    JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。

    诞生于1995年，当时的主要目的是验证表单的数据是否合法。

    JavaScript本来应该叫Livescript，但是在发布前夕，想搭上当时超热的java顺风车，临时把名字改为了JavaScript。（也就是说js跟java没有关系，当时只是想借助java的名气）。

1.1 js组成部分

  • ECMA Script:构成js的核心语法基础
  • BOM:浏览器对象模型，用来操作浏览器上的对象
  • DOM:文档对象模型，用来操作文档中的元素

2. 特点：

  • 交互性（它可以做的就是信息的动态交互）
  • 安全性（不允许直接访问本地硬盘）
  • 跨平台性（只要是可以解析js的浏览器都可以执行，和平台无关）

3、和Java区别：

javascript java
Netspace公司产品，最初叫Livesscript Sun公司产品，现在是Oracle公司产品
直译式脚本语言 需要先编译成字节码文件，再编译
弱类型语言 强类型语言

4. 作用

    javaScript 被用来改进设计、验证表单、检测浏览器、创建cookies，等等。JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比如： Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等。

    最常用的二个：（1）运态修改html及css代码 （2）验证表单

5. 书写位置

5.1 内嵌式：

  1. //理论上js可以书写在页面的任意位置。
  3. <script>
  5.     alert("内嵌式")
  7. </script>

5.2 外链式：

  1. //首先新建一个文件类型为.js的文件，然后在该文件中写js语句，通过script标签对引入到html页面中。
  3. <script src="js文件路径地址">这里不能写js语句</script>

5.3 行内式：

  1. //直接书写在标签身上，是一个简写的事件，所以又称之为事件属性。     onclick单击事件
  4. <input type="button" value="点我呀!" onclick="alert('点我干啥!^6^')">
  6. <button onclick="alert('恭喜你,中 500 万!')">点我呀!</button>

6、注释：

  • 单行注释： // 注释语句 快捷键ctrl+/
  • 多行注释： /* 注释语句 */ 快捷键ctrl+shift+/
  • 注意：多行注释相互不能嵌套使用，只能在多行注释里面使用单行注释！

7、数据类型：

  • Js中的数据类型：
  • 数值型：number（凡是数字都是数值型，不区分整数和小数）
  • 字符串：string（凡是引号包裹起来的内容全部都是字符串）
  • 布尔：boolean（true、false）
  • 对象类型：object（特殊取值null）
  • 未定义型：undefined
  • -------------------华丽丽的分割线--------------------
  • 对比java中的数据类型：
  • 整数：byte short int long
  • 小数：float double
  • 字符：char
  • 布尔：boolean
  • 字符串：String

8、变量

变量：

8.1、定义：

    就是存放数据的、内疗可以存储任意数据

8.2、声明变量：

  1. var 变量名称 = 存储的数据;       (variable 变量)

8.3、变量命名规范：

    1.  只能由字母、数字、_（下划线）、$（美元符号）组成。

    2.  不能以数字开头。

    3.  命名中不能出现-（js会理解成减号进行减法的操作），不能和关键字冲突。

    js是弱类型语言，不重视类型的定义，但js会根据为变量赋值的情况自定判断该变量是何种类型：

    数值型：var i = 1;  var d = 2.35;
    字符串：var str = "用心学习";
    布尔型：var b = true;

    对比Java:java是强类型的语言，注重类型的定义，Java定义类型如下：

    整型：int i = 1;
    浮点型：double d = 2.35;
    字符串：String str = “用心学习”;
    布尔型：boolean b = true;

    总结：js中变量的定义。只要加一个var就行。java则使用什么类型的变量就要定义什么类型的。

9. 检测数据类型

  1. typeof(value); 或者typeof value;     //返回这个变量的类型. 
  2. //说明 : 同一个变量, 可以进行不同类型的数据赋值.
  1. <script type="text/javascript">
  3.     var a;
  4.     alert(typeof a);  // undefined
  6.     a = 998;
  7.     alert(typeof a); // number
  9.     a = "用心学习";
  10.     alert(typeof a); // string
  12.     a = true;
  13.     alert(typeof a); // boolean
  15. </script>

10、算术运算符
+ - * / % ++ --
注意：

  1. 由于js中的小数和整数都是number类型，不存在类似整数除以整数还是整数的结论。
  2. 字符串和其他的数据使用+号运算，会连接成一个新的字符串。
  3. 字符串使用除了+以外的运算符：如果字符串本身是一个数字，那么会自动转成number进行运算
    ，否则就会返回一个NaN的结果，表示这不是一个数字。NaN：not a number

11、关系（比较）运算符

    >       >=      <       <=      !=      

    ==  等于（只比较内容）   === 恒等于（比较内容的同时还要比较数据类型）

    注意：关系运算符返回的结果只有两个：true / false

  1. <script>
  3.     // 请问1 : 3 > 5, 结果为 ?
  4.     alert(3 > 5);   // false
  6.     // 请问2 : “22” == 22  结果为 ?
  7.     alert("22" == 22); // true  (仅仅判断数值)
  9.     // 请问3 : “22” === 22  结果为 ?
  10.     alert("22" === 22);  // false  (恒等于, 数值和类型都要相等)
  12. </script>

12、逻辑运算符

&&      与       true&&false     ====>false

||      或       true||false         ====>true

！       非       !true               ====>false

false（理解）：false,  0,  null,  undefined 

true（理解）：true, 非0,  非null,  非undefined

针对 && 顺口溜: 找第一个出现的假值. (一假即假)
针对 || 顺口溜: 找第一个出现的真值. (一真即真)

  1. 演示一：
  3. <script>
  5.     // 短路与 (一假即假)
  6.     // 口诀 : 找第一个为假的值.
  8.     // 请问1 :  8 < 7 && 3 < 4, 结果为 ?
  9.     alert(8 < 7 && 3 < 4);  // false
  11.     // 请问2 :  -2 && 6 + 6 && null 结果为 ?
  12.     alert(-2 && 6 + 6 && null); // null
  14.     // 请问3 :  1 + 1 && 0 && 5  结果为 ?
  15.     alert(1 + 1 && 0 && 5); // 0
  17. </script>
  1. //演示二:
  2. <script>
  4.     // 短路或 : 一真即真.
  5.     // 口诀 : 找第一个为真的值.
  7.     // 请问1 :  0 || 23 结果为 ?
  8.     alert(0 || 23); // 23
  10.     // 请问2 :  0 || false || true  结果为 ?
  11.     alert(0 || false || true); // true
  13.     // 请问3 :  null || 10 < 8 || 10 + 10结果为 ?
  14.     alert(null || 10 < 8 || 10 + 10);  // 20
  16.     // 请问4 :  null || 10 < 8 || false结果为 ?
  17.     alert(null || 10 < 8 || false); // false
  19. </script>

13、三元运算符：

  1. //条件？表达式1：表达式2
  2. //如果条件为true，返回表达式1的结果
  3. //如果条件为false，返回表达式2的结果
  4. //演示：
  5. <script>
  7.     // 请问1 :  3 ? “aaa” : “bbb” 结果为 ?
  8.     alert(3 ? "aaa" : "bbb");       // aaa
  10.     // 请问2 :  0 ? “ccc” : “ddd”  结果为 ?
  11.     alert(0 ? "ccc" : "ddd");       // ddd
  13. </script>

14、if条件语句

  1. //和java中的一样
  2. <script>
  4.       var score = 59;
  6.       if (score >= 90) {
  7.           alert("优秀");
  8.       } else if (score >= 80) {
  9.           alert("良好");
  10.       } else if (score >= 60) {
  11.           alert("及格");
  12.       } else {
  13.           alert("不及格");
  14.       }
  16.   </script>

15、switch分支结构

  1. //这个和java中switch结构一样。只是Java中表达式为：常量 //整型（去long）、字符、字符串
  3. //演示：
  4. <script>
  6.       var score = 59;
  8.       // 需求 : 将需要一个整型数值, 不想要小数点.
  9.       // window 对象的 parseInt 方法.
  10.       score = window.parseInt(score / 10 + "");
  11.       // alert(score);
  13.       switch (score) {
  14.           case 10:
  15.           case 9:
  16.               alert("优秀!");
  17.               break;
  18.           case 8:
  19.               alert("良好!");
  20.               break;
  21.           case 7:
  22.           case 6:
  23.               alert("及格!");
  24.               break;
  25.           default:
  26.               alert("不及格!");
  27.               break;
  28.       }
  30.   </script>

16. 循环结构 while、do-while. for;

    while(循环条件){循环体;}

    do{循环体;}while(循环条件);

    for(循环变量赋初值；循环条件；循环变量增值){循环语句;}

    console.log（...）; 以日志的形式在控制台输出结果！

  1. <script>
  3.     // 需求 : 统计 1~100 之间能够被3和7整除的数字个数
  5.     var count = 0;
  7.     // 1. 遍历 1~100 之间的所有整型数值
  8.     for (var i = 1; i <= 100; i++) {
  10.         // 2. 判断
  11.         if (i % 3 == 0 && i % 7 == 0) {
  12.             // alert(i);
  13.             console.log(i);
  14.             // 3. 累加个数
  15.             count++;
  16.         }
  17.     }
  19.     // 4. 查看结果
  20.     // alert(count);
  21.     console.log(count);

17、循环嵌套

  1. 演示案例9*9乘法表
  3.  <style>
  4.         table {
  5.             /* 将 table 表格的线变成了细线 */
  6.             border-collapse: collapse;
  7.             /*color: red;*/
  8.             border-color: red;
  9.         }
  10.     </style>
  12.     <script>
  14.         // 需求 : 九九乘法口诀表
  15.         document.write("<table border='1px solid red' cellspacing='0' cellpadding='8px'>");
  16.         document.write("<caption>九九乘法口诀表</caption>");
  17.         for (var i = 1; i <= 9; i++) {
  18.             document.write("<tr>");
  19.             for (var j = 1; j <= i; j++) {
  20.                 document.write("<td>");
  21.                 document.write(j + "*" + i + "=" + (j*i) + "&nbsp;&nbsp;&nbsp;&nbsp;");
  22.                 document.write("</td>");
  23.             }
  24.             document.write("</tr>");
  25.         }
  26.         document.write("</table>");
  28.     </script>

18、自定义函数

  • 函数是命名的独立的语句段，这个语句段可以被当作一个整体来引用和执行：
  • 格式：
    function 函数名(形式参数){函数体}
    调用函数：函数名(实际参数);

18.1、函数只有被调用后才会执行

18.2、如果函数需要返回值、直接使用return 返回、不会像java一样要考虑返回值的类型

  1. <script type="text/javascript">
  3.     // 定义一个函数 : function
  4.     function demo2() {
  5.         return 666;
  6.     }
  8.     // 调用函数 :
  9.     alert(demo2());
  11. </script>

18.3、如果函数需要传递参数、不需要指定参数的类型、直接使用变量即可

  1. <script type="text/javascript">
  3.     // 定义一个函数 : function
  4.     function demo3(a, b) {
  5.         return a + b;
  6.     }
  8.     // 调用函数 :
  9.     alert(demo3(10, 20));//显示30
  11. </script>

18.4、js中出现二个重名的函数名、后者会把前面的覆盖掉

  1. //对比java、java有重载（同名不同参）、重写（同名同参同返回值类型、方法体不一样）
  4. <script type="text/javascript">
  6.     // 定义一个函数 : function
  7.     function demo4(a, b) {
  8.         alert("调用1...");
  9.     }
  11.    function demo4() {
  12.        alert("调用2...");
  13.    }
  15.     demo4(10, 20);
  16.     demo4();
  18. </script>

19、匿名函数

  • 匿名函数是没有名字的函数
  • function(形式参数){函数体}
  • 调用方式：将匿名函数赋值给一个变量，通过变量名调用函数
  • 定义函数并赋值给变量：var fn = function(形式参数){函数体}
  • 调用函数：fn(实际参数);
  1. 演示：
  3. <script type="text/javascript">
  5.     // 匿名函数 : 没有名称的函数
  6.     var func = function(i, u) {
  7.         alert(i + " love " + u);
  8.     }
  10.     // 调用函数 :
  11.    func("柳岩", "小白");//显示柳岩love小白
  13. </script>

20、案例-轮播图

    说明1 : script 标签需要放在 body 标签之后.

    说明2 : window.setInterval(“字符串函数名称()”, 时间毫秒数);

    说明3 : window.setInterval(函数名称, 时间毫秒数);

    说明4 : window.setInterval(匿名函数, 时间毫秒数);推荐使用

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>轮播图</title>
  5.     <style>
  7.         div {
  8.             width: 80%;
  9.             margin: 50px auto;
  10.         }
  12.         img {
  13.             width: 100%;
  14.         }
  16.     </style>
  18. </head>
  19. <body>
  20.     <div class="container">
  21.         <img src="../img/01.jpg" alt="图片">
  22.     </div>
  23. </body>
  1. 实现一：
  3. <script>
  5.     // 需求 : 动态获取页面中的 img 标签, 然后修改 img 标签的 src 属性.
  6.     // 1. 获取 img 标签
  7.     var img = document.getElementById("img");
  8.     // alert(img);
  10.     // 定义一个变量
  11.     var count = 1;
  13.     // 1.2 定义一个函数
  14.     function changeImageSrc() {
  15.         count++;
  16.         img.src = "../img/0"+count+".jpg";
  18.         // 判断
  19.         if (count == 8) {
  20.             count = 0;
  21.         }
  22.     }
  24.     // 2. 循环切换图片
  25.     // window.setInterval(函数, 时间毫秒); 在指定的时间毫秒间隔, 不断调用第一个参数传入的函数.
  26.     // 调用方式一 :
  27.     // window.setInterval("changeImageSrc()", 1000);
  28.     // 调用方式二 :
  29.     window.setInterval(changeImageSrc, 1000);
  31. </script>
  1. 实现二：
  3. <script>
  5.     // 需求 : 动态获取页面中的 img 标签, 然后修改 img 标签的 src 属性.
  6.     // 1. 获取 img 标签
  7.     var img = document.getElementById("img");
  8.     // alert(img);
  10.     // 定义一个变量
  11.     var count = 1;
  13.     // 2. 循环切换图片
  14.     // window.setInterval(匿名函数, 时间毫秒); 在指定的时间毫秒间隔, 不断调用第一个参数传入的匿名函数.
  15.     window.setInterval(function() {
  16.         count++;
  17.         img.src = "../img/0"+count+".jpg";
  19.         // 判断
  20.         if (count == 8) {
  21.             count = 0;
  22.         }
  23.     }, 1000);
  25. </script>

21、js事件
21.1、事件概述：

  • 事件三要素：
    1. 事件源：被监听的html元素（就是这个事件加给谁），就是某个（某些）html标签
    1. 事件类型：某类动作，例如点击事件，移入移除事件，敲击键盘事件等
    1. 执行指令：事件触发后需要执行的代码，一般使用函数进行封装
      语法格式：事件源.事件类型=执行指令
事件名 描述
onload 某个页面或图像被完成加载
onsubmit 当表单提交时触发该事件，注意事件源是表单form
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onblur 元素失去焦点，通常针对表单元素
onfocus 元素获得焦点，通常针对表单元素
onchange 用户改变域的内容，通常针对表单元素
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的建被按下或按住
onkeyop 某个键盘的键被松开
onmousedown 某个鼠标按键被按下
onmouseup 某个鼠标按键被松开
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移动
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注