WEB基础之：JavaScript基础

JavaScript基础

• • 1. JavaScript简介
  • 2. JavaScript结合HTML
  • • 2.1 script标签
    • 2.2 **嵌入式编写：**
    • 2.3 **外部JS文件引用：**
  • 3. JS输出
  • 4. JavaScript 语法
  • • 4.1 JS的数据类型
    • 4.2 JS的变量
    • • 4.2.1 变量命名规则
      • 4.2.2 声明变量
      • 4.2.3 重置变量
      • 4.2.4 变量提升
    • 4.3 变量作用域
  • 5. 分号与空格
  • 6. JavaScript 代码块
  • 7. JavaScript 语句标识符

1. JavaScript简介

• JavaScript 被设计用来向 HTML 页面添加交互行为。
• JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
• JavaScript 是一种解释性语言（代码执行不进行预编译）。

JavaScript的组成

1. ECMAScript：JavaScript标准化部分，主要定义了基础的数据类型，语法，关键字等等。
2. DOM(文档对象模型)：Document object model ，整合JS，CSS，HTML。
3. BOM(浏览器对象模型)： Broswer object mode，整合JS 和 浏览器。

2. JavaScript结合HTML

2.1 script标签

<script>和</script>会告诉 JavaScript 在何处开始和结束。

JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言，因此无需在 <script>标签中声明type="text/javascript"。

HTML中引入JS的方式主要有两种:嵌入式引用、外部JS文件引用；

2.2 嵌入式编写：

• 必须位于<script>与</script>标签之间。脚本建议放置在 HTML 页面的</body>标签之前，这样不会阻碍网页加载。

2.3 外部JS文件引用：

• <script src="JavaScriptfile.js"></script>
  

3. JS输出

JavaScript 可以通过不同的方式来输出数据：

• 使用 window.alert() 弹出警告框。

  • <script>window.alert(1 + 2);</script>
    

• 使用 document.write() 方法将内容写到 HTML 文档内容流中。如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

  • HTML 输出流中使用 document.write，相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用（如使用函数），会覆盖整个文档。
    
    使用函数来执行document.write代码如下：
    
    <script>
    function myfunction(){
        document.write("使用函数来执行doucment.write，即在文档加载后再执行这个操作，会实现文档覆盖");
    }
    document.write("<h1>这是一个标题</h1>");
    document.write("<p>这是一个段落。</p>");
    </script>
    <p >
    您只能在 HTML 输出流中使用 <strong>document.write</strong>。
    如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
    </p>
    <button type="button" onclick="myfunction()">点击这里</button>
    

• 使用 innerHTML 写入到 HTML 元素。innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。

  • <script>document.getElementById("dowr").innerHTML = "将内容写到 HTML 文档中。";</script>
    

• 使用 console.log() 写入到浏览器的控制台。

  • <script>console.log(ConsoleLog);</script>
    

• console.log()与alert：

  • 他能看到结构化的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容。
  • console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。

4. JavaScript 语法

4.1 JS的数据类型

• **数字（Number）：**可以是整数或者是小数，或者是科学计数(e)。

• **字符串（String）：**可以使用单引号或双引号；

• 布尔（bool）： true 或 false

• **数组（Array）：**定义一个数组

  • [1, 2, 3]
    

• **对象（Object）：**类似Python中的字典

  • {key1:"value1", key2:"value2", key3:"value3"}
    

• **函数（Function）：**定义一个函数

  • function fun(a, b) { return a * b;}
    

• 表达式： 用于计算

  • 1 + 2
    

4.2 JS的变量

4.2.1 变量命名规则

• 小驼峰: let firstName=‘rule1’

• 大驼峰: let FirstName=‘rule2’

• 下划线法: let first_name=‘rule3’

• **匈牙利命名方式：**变量名+对象描述，整数i， 浮点fl， 布尔b， 字符串s， 数组a， 对象o， 函数fn， 正则re

  • iAge = 18;
    

4.2.2 声明变量

• let

  • let允许你声明一个作用域被限制在块级中的变量、语句或者表达式。即：let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。
  • let关键字定义的变量需要先声明再使用。
  • let 定义的变量值可以修改
  • 在Function中局部变量推荐使用let变量，避免变量名冲突。

• var

  • var关键字定义的变量可以先使用后声明。

  • var声明的变量的作用域是整个封闭函数。与let的区别是：let 声明的变量只在其声明的块或子块中可用。

  • function varTest() {
        var x = 1;
        if (true) {
            var x = 2;       // 同样的变量!
            console.log(x);  // 2
        }
        console.log(x);  // 2
    }
    
    function letTest() {
        let x = 1;
        if (true) {
            let x = 2;       // 不同的变量    
            console.log(x);  // 2  
        }
        console.log(x);  // 1
    }
    

• const

  • const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改：
  • const定义常量与使用let 定义的变量相似：
  • 二者都是块级作用域
    • 都不能和它所在作用域内的其他变量或函数拥有相同的名称
  • const 的本质: const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的。

• undefind：未使用值来声明的变量，其值实际上是 undefined。

  • var isUndefined;
    

• ** Null类型：**可以通过将变量的值设置为 null 来清空变量。

• isUndefined=null;
  

4.2.3 重置变量

• 使用 var 关键字声明的变量在任何地方都可以修改：

• 在相同的作用域或块级作用域中，不能使用let关键字来重置var关键字声明的变量。

  在相同的作用域或块级作用域中，不能使用let关键字来重置let关键字声明的变量。

  let关键字在不同作用域，或不用块级作用域中是可以重新声明赋值的。

• 在相同的作用域或块级作用域中，不能使用 const 关键字来重置 var 和 let关键字声明的变量:

• 在相同的作用域或块级作用域中，不能使用 const 关键字来重置 const 关键字声明的变量:

• const 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的:

4.2.4 变量提升

JavaScript var 关键字定义的变量可以在使用后声明，也就是变量可以先使用再声明

varPromote = "value1";    // 这里可以先使用 varPromote 变量
var varPromote;

4.3 变量作用域

• 变量在函数内声明，变量为局部作用域。局部变量：只能在函数内部访问。
  • 函数的内声明在函数未被调用之前，已经创建；
  • 若存在作用域链(函数套用函数)，也是在函数未被调用之前，已经创建；
  • 函数内部变量优先提前声明
• 变量在函数外声明，即为全局变量。全局变量: 网页中所有脚本和函数均可使用。
• 没有声明就使用的变量，默认为全局变量，不论这个变量在哪被使用。

5. 分号与空格

• ；分号用于分隔 JavaScript 语句。
• JavaScript 会忽略多余的空格。
• \ 在文本字符串中使用反斜杠对代码行进行换行

6. JavaScript 代码块

代码块以左花括号开始，以右花括号结束。

7. JavaScript 语句标识符

语句	描述
break	用于跳出循环。
catch	语句块，在 try 语句块执行出错时执行 catch 语句块。
continue	跳过循环中的一个迭代。
do … while	执行一个语句块，在条件语句为 true 时继续执行该语句块。
for	在条件语句为 true 时，可以将代码块执行指定的次数。
for … in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function	定义一个函数
if … else	用于基于不同的条件来执行不同的动作。
return	退出函数
switch	用于基于不同的条件来执行不同的动作。
throw	抛出（生成）错误 。
try	实现错误处理，与 catch 一同使用。
var	声明一个变量。
while	当条件语句为 true 时，执行语句块。