1 在HTML中使⽤JavaScript的⽅法

1.1 内部JavaScript

使⽤ <script> ... </script> 标签
属性：

  • charset（可选）字符集设置。
  • defer（可选执⾏顺序）值：defer、
  • language(已废除)、
  • src（可选）使⽤外部的js脚本⽂件
  • type(必选)类型：值：text/javascript
    1. <script type="text/javascript">
    2. <!--
    3. javaScript语⾔
    4. //-->
    5. </script>

    1.2 外部 JavaScript

    使⽤外部导⼊js会使代码更加有序，更易于复⽤，且没有了脚本的混合，HTML也会更加易读。
    1. <script type="text/javascript" src="my.js"></script>

    1.3 内联JavaScript处理器

    将js代码写⼊html代码中，如在html标签的事件中或超级链接⾥。
    1. <button onclick="javaScript语⾔"></button>
    2. <a href="javascript:alert('aa');alert('bb')">点击</a>

2 JavaScript基础语法

2.1 JavaScript的输出：

JavaScript 没有任何直接打印或者输出的函数。若有显示数据可以通过下⾯不同的⽅式来输出：

  • window.alert() 弹出警告框
  • document.write() ⽅法将内容写到 HTML ⽂档中
  • innerHTML 写⼊到 HTML 元素

  • console.log() 写⼊到浏览器的控制台
    示例：

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>JavaScript实例</title>
    6. </head>
    7. <body>
    8.   <h3>测试JavaScript的输出</h3>
    9.   <div id="did">div层</div>
    10. </body>
    11. <script>
    12.   //弹出⼀个信息提示框
    13.   window.alert("Hello JavaScript!");
    15.   //输出到浏览器⻚⾯中
    16.   document.write("这个是⻚⾯中的输出");
    18.   //通过写⼊HTML标签中，完成⻚⾯中的输出
    19.   document.getElementById('did').innerHTML="div层中的输出";
    21.   //控制台上的输出
    22.   console.log("控制台上的输出");
    23. </script>
    24. </html>

2.2 变量

  1. var name; // 使⽤var声明变量
  3. var age,gender; // 同时声明多个变量
  5. name = "zhangsan"; // 变量的赋值
  6. name = 'lisi';
  7. age = 20;
  8. gender = "man"
  10. var name1 = 'wangwu', age1 = 25; // 同时声明多个变量并赋值

2.3 变量的命名规则和规范

规则 - 必须遵守的，不遵守会报错

  • 由字⺟、数字、下划线、$符号组成，不能以数字开头
  • 不能是关键字和保留字，例如：for、 if、while。
  • 区分⼤⼩写

规范 - 建议遵守的，不遵守不会报错

  • 变量名必须有意义
  • 遵守驼峰命名法。⾸字⺟⼩写，后⾯单词的⾸字⺟需要⼤写。例如：userName、userPassword

    2.4 语句与注释

    语句：
    ⼀般程序中的语句是由表达式加分号构成。每条语句的分割符可以是回⻋、换⾏或是分号(推荐)；
    表达式的种类很多：
    如：算术表达式、赋值表达式、关系表达式、逻辑表达式等等…
    也可以是⼀个函数、⽅法的调⽤
    脚本注释：
    单⾏注释
    单⾏注释以 // 开头。
    任何位于 // 与⾏末之间的⽂本都会被 JavaScript 忽略（不会执⾏）。
    多⾏注释
    多⾏注释以 / 开头，以 / 结尾。
    任何位于 / 和 / 之间的⽂本都会被 JavaScript 忽略。

注释的⽬的：
为程序添加辅助说明，便于阅读理解。
注释掉临时不需要执⾏的代码、便于调试、排错。

3 JavaScript数据类型

3.1 基本类型

字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
注意：Symbol 是 ES6 引⼊了⼀种新的原始数据类型，表示独⼀⽆⼆的值。

3.2 引⽤数据类型

对象(Object)、数组(Array)、函数(Function)。

  1. //我们使⽤typeof操作符获取基本数据类型
  2. //Undefined 这个值表示变量不含有值
  3. console.log(typeof a); //undefined 未定义的
  5. var a = 10;
  6. console.log(typeof a); //number
  7. a = 3.14
  8. console.log(typeof a); //number
  9. a = 'zhangsan'
  10. console.log(typeof a); //string
  11. a = true
  12. console.log(typeof a); //boolean
  14. //可以通过将变量的值设置为 null 来清空变量
  15. a = null
  16. console.log(typeof a); //object
  17. console.log(a); //null
  19. a = [10,20,30];
  20. //或 a = new Array(10,20,30);
  21. console.log(typeof a); //object
  22. console.log(a instanceof Array); //true
  24. a = function(){} //定义空⽩函数
  25. console.log(typeof a); //function
  26. console.log(a instanceof Function); //true
  29. //整数的进制的输出
  30. console.log(10); //输出⼗进制数的值
  31. console.log(0b10); //输出⼆进制数10的值
  32. console.log(0o10); //输出⼋进制数10的值
  33. console.log(0x10); //输出⼗六进制数10的值
  35. //⼗进制转换其他进制
  36. var x = 110;
  37. x.toString(2)  // 转为2进制
  38. x.toString(8)  // 转为8进制
  39. x.toString(16) // 转为16进制
  41. //其他进制转⼗进制
  42. var x = "110"   // 这是⼀个⼆进制的字符串表示
  43. parseInt(x, 2)  // 把这个字符串当做⼆进制， 转为⼗进制
  45. var x = "70"    // 这是⼀个⼋进制的字符串表示
  46. parseInt(x, 8)  // 把这个字符串当做⼋进制， 转为⼗进制
  48. var x = "ff"    // 这是⼀个⼗六进制的字符串表示
  49. parseInt(x, 16) // 把这个字符串当做⼗六进制， 转为⼗进制

3.3 typeof 操作符

typeof 操作符获取⼀个变量的类型,返回结果如下：

  • undefined - 如果变量是 Undefined 类型的
  • boolean - 如果变量是 Boolean 类型的
  • number - 如果变量是 Number 类型的 (整数、浮点数)
  • string - 如果变量是 String 类型的 （采⽤””、 ‘’）
  • object - 如果变量是⼀种引⽤类型或 Null 类型的 如： new Array()/ new String()…

  • function — 函数类型

    1. typeof "zhangsan"            // 返回 string
    2. typeof 3.14                  // 返回 number
    3. typeof NaN                   // 返回 number
    4. typeof true                  // 返回 boolean
    5. typeof [10,20,30,40]         // 返回 object
    6. typeof {name:'lisi', age:20} // 返回 object
    7. typeof new Date()            // 返回 object
    8. typeof function(){}          // 返回 function
    9. typeof myCar                 // 返回 undefined (如果 myCar 没有声明)
    10. typeof null                  // 返回 object

    3.4 undefined 和 null 的区别

    null 和 undefined 的值相等，但类型不等：

    1. typeof undefined // undefined
    2. typeof null // object
    3. null === undefined // false
    4. null == undefined // true

    3.5 引用类型和基本类型的区分

    引⽤类型通常叫做类（class），也就是说，遇到引⽤值，所处理的就是对象。Object 对象⾃身⽤处不⼤，不过在了解其他类之前，还是应该了解它。 因为 ECMAScript 中的Object 对象与 Java 中的 java.lang.Object 相似， ECMAScript 中的所有对象都由这个对象继承⽽来，Object 对象中的所有属性 和⽅法都会出现在其他对象中，所以理解了 Object 对象，就可以更好地理解其他对象。

  • 基本类型理解：变量之间的互相赋值，是指开辟⼀块新的内存空间，将变量值赋给新变量保存到新开辟的内存⾥⾯；之后两个变量的值变动互不影响，例如：

    1. var a = 10; //开辟⼀块内存空间保存变量a的值“10”；
    2. var b = a; //给变量 b 开辟⼀块新的内存空间，将 a 的值 “10” 赋值⼀份保存到新的内存⾥；
    3. //a 和 b 的值以后⽆论如何变化，都不会影响到对⽅的值；

  • 引⽤类型理解：变量之间的互相赋值，只是指针的交换，⽽并⾮将对象（普通对象，函数对象，数
    组对象）复制⼀份给新的变量，对象依然还是只有⼀个，只是多了⼀个指引。

    1. //需要开辟内存空间保存对象，变量 a 的值是⼀个地址，这个地址指向保存对象的空间；
    2. var a = { x: 1, y: 2 };
    3. var b = a; // 将a 的指引地址赋值给 b，⽽并⾮复制⼀给对象且新开⼀块内存空间来保存；
    4. // 这个时候通过 a 来修改对象的属性，则通过 b 来查看属性时对象属性已经发⽣改变；

    3.6 类型转换：

    JavaScript 变量可以转换为新变量或其他数据类型：

  • 通过使⽤ JavaScript 函数

  • 通过 JavaScript ⾃身⾃动转换

ECMAScript 中可⽤的 3 种强制类型转换如下：

  • Boolean(value) - 把给定的值转换成 Boolean 型；
  • Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；
  • String(value) - 把给定的值转换成字符串；

使⽤：Number（）、parseInt() 和parseFloat（） 做类型转换

  • Number()强转⼀个数值(包含整数和浮点数)。
  • *parseInt()强转整数，
  • *parseFloat（）强转浮点数
    函数isNaN()检测参数是否不是⼀个数字。 is not a number
    示例： ```javascript //转换字串类型 String(100 + 23) // 返回 “123” String(true) // 返回 “true” String(new Date())// 返回 “Tue May 14 2019 11:06:28 GMT+0800 (中国标准时间)” String([10,20]) // 返回 “10,20” String(null) // 返回 “null”

//转换数值类型 Number(“3.14”) // 返回 3.14 Number(“3.14abc”) // 返回 NaN parseFloat(“3.14”)//返回 3.14 parseFloat(“3.14abc”)//返回 3.14 parseFloat(“b3.14abc”)//返回 NaN parseInt(“3.14”) //返回 3 parseInt(“3.14abc”)//返回 3 parseInt(“b3.14abc”)//返回 NaN ```