JavaScript 学习-1.注释与 var 变量声明

2022-05-16 13:13:59 浏览数 (1)

前言

JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用 JavaScript。

JavaScript 简介

JavaScript 的学习分三个部分: 1、核心(ECMAScript)：JavaScript的核心，描述了语言的基本语法和数据类型。ECMAScript 是一套标准，定义了一种语言的标准与具体实现无关。 2、文档对象模型DOM(Document Object Model)：用于操作页面的元素。一套操作页面元素的 API。DOM 可以把 HTML 看做是文档树，通过 DOM 提供的 API 可以对树上的节点进行操作。 3、浏览器对象模型BOM(Browser Object Model)：操作的是浏览器。一套操作浏览器功能的 API。通过 BOM 可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等。

调试

JavaScript 是依赖于浏览器运行的，在浏览器中我们有以下常用的三种方式可以调试代码。

方法一：直接写入 HTML 输出流

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    document.write('hello world');
</script>
</body>
</html>

浏览器打开页面，会在页面上输出”hello world”

或者用innerHTML 写入到元素文本内容

代码语言：javascript复制
<body>
<p id="demo">demo</p>

<script>
document.getElementById("demo").innerHTML = "hello world";
</script>
</body>

方法二：通过alter() 弹出框显示内容

代码语言：javascript复制
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    alert("hello world");
</script>
</body>
</html>

浏览器打开页面，在alert弹出框显示内容

方法三：通过浏览器console调试，这种也是最常用的方式

我们可以在<script> 里面添加 console.log() 输出内容

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    console.log("hello world");
</script>
</body>
</html>

谷歌浏览器f12 后，查看console内容

也可以直接在控制台输入调试代码

清空日志可以点清空按钮，也可以快捷键ctr L

注释

可以添加注释来对 JavaScript 进行解释，提高代码的可读性。

单行注释以 // 开头

代码语言：javascript复制
<script>
// 这段是在控制台调试    
console.log('---------hello world--------');
</script>

也可以在行末 使用单行注释

代码语言：javascript复制
<script>
console.log('---hello world---'); // 这段是在控制台调试  
</script>

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

代码语言：javascript复制
<script>
/*
  这是多行注释
  console.log() 是在控制台输出
 */
console.log('---------hello world--------');
</script>

如果我们想暂时注掉某段代码，可以用多行注释, 以下代码段不会运行

代码语言：javascript复制
<script>
/* 以下代码不会执行
console.log('---------hello world--------');
alert("hello ...");
 */
</script>

分号; 结束语句

JavaScript 在每行代码结束应该加上分号。

代码语言：javascript复制
<script>
var x = 1;    
console.log("hello world");
</script>

虽然有时候不加分号也不会报错，习惯上分号; 结尾。

声明 JavaScript 变量

在 JavaScript 中我们使用 var 关键词来声明变量 变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

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

var 先声明后赋值

当我们使用var 声明变量，没有赋值的时候，那么它是未定义（Undefined）

代码语言：javascript复制
<script>
var user;         // 未赋值
console.log(user);   // undefined
</script>

可以先声明后赋值, 赋值用等号=

代码语言：javascript复制
var user;         // 声明未赋值
user = 'yoyo';   // 给变量赋值
console.log(user);   // yoyo

var 声明并赋值

var 声明变量并赋值

代码语言：javascript复制
<script>
var user= 'yoyo';
console.log(user);  // 输出 yoyo
</script>

var user= 'yoyo';其实等价于

代码语言：javascript复制
var user;         // 声明未赋值
user = 'yoyo';   // 给变量赋值

var 一次声明多个变量

一条语句声明多个变量, 多个变量中间用逗号隔开

代码语言：javascript复制
var user = 'yoyo', email = 'hello@qq.com', age = 20;
console.log(user); // yoyo
console.log(email); // hello@qq.com
console.log(age); // 20

当我们这样声明多个变量的时候, 只有变量c给赋值了

代码语言：javascript复制
var a, b, c = 'hello';
console.log(a); // undefined
console.log(b); // undefined
console.log(c); // hello

其实就是等价于

代码语言：javascript复制
var a;
var b; 
var c = 'hello';

重新声明 JavaScript 变量

如果重新声明 JavaScript 变量，该变量的值不会丢失, 只有当重新声明并赋值时，才会被替换掉。

代码语言：javascript复制
var user = "hello";
console.log(user);   // hello
var user;
console.log(user)  // hello
var user = "world";
console.log(user);  // world

未使用 var 定义的变量

如果未使用var 直接定义的变量，它实际上是定义了全局对象 window 的一个属性，前面说了JavaScript 的学习分三个部分：核心(ECMAScript)、文档对象模型DOM、浏览器对象模型BOM。 其中浏览器（ Browser）对象模型 BOM 包含了以下对象

  • Window 对象
  • Navigator 对象
  • Screen 对象
  • History 对象
  • Location 对象

未使用 var 直接定义的变量，就属于这里window对象的一个属性，看下面例子。

代码语言：javascript复制
<body>

<script>
// 如果不使用var 直接定义一个变量
user = 'yoyo';
console.log(user);
</script>
</body>

未声明变量直接调用会报错

调用一个未声明的变量会报错Uncaught ReferenceError: user is not defined

代码语言：javascript复制
<script>
console.log(user);
</script>

于是在控制台 console 会看到报错

有一种情况不会报错，那就是下面讲到的使用var 声明的变量会得到提升。

JavaScript 声明提升

JavaScript 中，变量及函数的声明都将被提升到函数的最顶部。JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

如以下我们先调用user变量，再用var声明，此时不会报错，因为函数声明和变量声明总是会被解释器悄悄地被”提升”到方法体的最顶部。

代码语言：javascript复制
<script>
// 先调用后声明
console.log(user); // undefined
var user;
</script>

解释器会先找到var user; 提升到方法体的最顶部，也就是等价于

代码语言：javascript复制
<script>
var user;
console.log(user);   // undefined
</script>

初始化的赋值不会提升

var 声明的变量可以提升，但是它的赋值不会被提升。 我们在先调用了变量，后面用var声明并赋值，此时赋值的内容不会提升，所以还是输出undefined

代码语言：javascript复制
<script>
// 先调用后声明
console.log(user);  // undefined
var user = 'yoyo';  
</script>

其实就是等价于

代码语言：javascript复制
<script>
var user;
console.log(user); // undefined
user = 'yoyo';   
</script>

只有 var 声明的变量可以提升，没用 var 声明的不会提升

代码语言：javascript复制
console.log(user); // undefined
user = 'yoyo';

这个会报错Uncaught ReferenceError: user is not defined

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

2022年第 1 期《Python 测试平台开发》课程

编程算法 javascript html api ecmascript

0 人点赞