五、JavaScript语句

JavaScript 代码块

  1. JavaScript 可以分批地组合起来。
  2. 代码块以左花括号开始，以右花括号结束。
  3. 代码块的作用是一并地执行语句序列。
  4. 本例向网页输出一个标题和两个段落：
function myFunction()
{
    document.getElementById("demo").innerHTML="你好Dolly";
    document.getElementById("myDIV").innerHTML="你最近怎么样?";
}

JavaScript 语句标识符

JavaScript 语句通常以一个 语句标识符 为开始，并执行该语句。

语句标识符是保留关键字不能作为变量名使用。

下表列出了 JavaScript 语句标识符 (关键字) ：

image-20210402161142968

对代码行进行折行

您可以在文本字符串中使用反斜杠对代码行进行换行。

<script>
        document.write("你好 \
        世界！")
    </script>

image-20210402161548368

知识点：JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

六、JavaScript注释

JavaScript单行注释

// 输出标题：
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
// 输出段落：
document.getElementById("myP").innerHTML="这是我的第一个段落。";

image-20210402161941553

JavaScript 多行注释

多行注释以 /* 开始，以 */ 结尾。

/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";
  1. 养成一个好的习惯就是写注释。
  2. 方便你二次阅读，维护你的代码。
  3. 如果后面项目转手，也方便别人来理解你的代码和维护你的代码。

七、JavaScript变量

使用变量

变量是用于存储信息的"容器"。

    <script>
        var x=5;
        var y=6;
        var z=x+y;
        console.log(x)
        console.log(y)
        console.log(z)
    </script>

image-20210402162438057

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
  • 变量名称对大小写敏感（y 和 Y 是不同的变量）

声明（创建）JavaScript变量

在 JavaScript 中创建变量通常称为"声明"变量。

我们使用 var 关键词来声明变量：

var name;

变量声明之后，该变量是空的（它没有值）。

如需向变量赋值，请使用等号：

name="xin";

也可以在声明变量的时候赋值

var name = "xin";  //	一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。

您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：

var lastname="Doe", age=30, job="carpenter";

在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。

在执行过以下语句后，变量 name 的值将是 undefined：

var name;

Javascript声明变量的时候，虽然用var关键字声明和不用关键字声明，很多时候运行并没有问题，但是这两种方式还是有区别的。可以正常运行的代码并不代表是合适的代码。

// num1为全局变量，num2为window的一个属性
var num1 = 1;
num2 = 2;
// delete num1;  无法删除
// delete num2;  删除

重新声明 JavaScript 变量

如果重新声明 JavaScript 变量，该变量的值不会丢失：

在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：

var carname="Volvo";
var carname;

在 2015 年以前，我们使用 var 关键字来声明 JavaScript 变量。

在 2015 后的 JavaScript 版本 (ES6) 允许我们使用 const 关键字来定义一个常量，使用 let 关键字定义的限定范围内作用域的变量

JavaScript中的let和const

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

全局变量

在函数外声明的变量作用域是全局的：

var carName = "Volvo";
 
// 这里可以使用 carName 变量
 
function myFunction() {
    // 这里也可以使用 carName 变量
}

局部变量

// 这里不能使用 carName 变量
 
function myFunction() {
    var carName = "Volvo";
    // 这里可以使用 carName 变量
}
 
// 这里不能使用 carName 变量

JavaScript 块级作用域(Block Scope)

使用 var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到。

{ 
    var x = 2; 
}
// 这里可以使用 x 变量

ES6 可以使用 let 关键字来实现块级作用域。

let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

{ 
    let x = 2;
}
// 这里不能使用 x 变量

let 声明的变量只在其声明的块或子块中可用，这一点，与var相似。二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数。

 <button onclick="varTest();">var</button>
    <button onclick="letTest();">let</button>
    <script>
        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
        }
    </script>

image-20210402163952937

const关键字

const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改：

const PI = 3.141592653589793;
PI = 3.14;      // 报错
PI = PI + 10;   // 报错

const定义常量与使用let 定义的变量相似：

  • 二者都是块级作用域
  • 都不能和它所在作用域内的其他变量或函数拥有相同的名称

两者还有以下两点区别：

  • const声明的常量必须初始化，而let声明的变量不用
  • const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改
var x = 10;
// 这里输出 x 为 10
{ 
    const x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

const 的本质: const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的。下面的代码并不会报错：

// 创建常量对象
const car = {type:"Fiat", model:"500", color:"white"};
 
// 修改属性:
car.color = "red";
 
// 添加属性
car.owner = "Johnson";

但是我们不能对常量对象重新赋值

Internet Explorer 10 及更早版本的浏览器不支持 const 关键字。

八 、JavaScript对象

  1. JavaScript 对象是拥有属性和方法的数据。
  2. 对象也是一个变量，但对象可以包含多个值（多个变量），每个值以 name:value 对呈现。

对象定义

你可以使用字符来定义和创建 JavaScript 对象:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

对象属性

  1. 可以说 "JavaScript 对象是变量的容器"。
  2. 但是，我们通常认为 "JavaScript 对象是键值对的容器"。
  3. 键值对通常写法为 name : value (键与值以冒号分割)。
  4. 键值对在 JavaScript 对象通常称为 对象属性。

对象方法

  1. 对象的方法定义了一个函数，并作为对象的属性存储。
  2. 对象方法通过添加 () 调用 (作为一个函数)。
  3. 该实例访问了 person 对象的 fullName() 方法:
name = person.fullName();

访问对象方法

    <p>创建和使用对象方法。</p>
    <p>对象方法作为一个函数定义存储在对象属性中。</p>
    <p id="demo"></p>
    <script>
        var person = {
            firstName: "John",
            lastName : "Doe",
            id : 5566,
            fullName : function() 
            {
            return this.firstName + " " + this.lastName;
            }
        };
        document.getElementById("demo").innerHTML = person.fullName();
    </script>

image-20210402193936623

Q.E.D.