前言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 输出流 <!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 写入到元素文本内容 <body>
<p id="demo">demo</p>
<script>
document.getElementById("demo").innerHTML = "hello world";
</script>
</body>
方法二：通过alter() 弹出框显示内容 <head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
alert("hello world");
</script>
</body>
</html>
浏览器打开页面，在alert弹出框显示内容
 方法三：通过浏览器console调试，这种也是最常用的方式 我们可以在<script> 里面添加 console.log() 输出内容 <!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 进行解释，提高代码的可读性。 单行注释以 // 开头 <script>
// 这段是在控制台调试
console.log('---------hello world--------');
</script>
也可以在行末 使用单行注释 <script>
console.log('---hello world---'); // 这段是在控制台调试
</script>
多行注释以 / 开始，以 / 结尾 <script>
/*
这是多行注释
console.log() 是在控制台输出
*/
console.log('---------hello world--------');
</script>
如果我们想暂时注掉某段代码，可以用多行注释, 以下代码段不会运行 <script>
/* 以下代码不会执行
console.log('---------hello world--------');
alert("hello ...");
*/
</script>
分号; 结束语句JavaScript 在每行代码结束应该加上分号。 <script>
var x = 1;
console.log("hello world");
</script>
虽然有时候不加分号也不会报错，习惯上分号; 结尾。 声明 JavaScript 变量在 JavaScript 中我们使用 var 关键词来声明变量
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。 var 先声明后赋值当我们使用var 声明变量，没有赋值的时候，那么它是未定义（Undefined） <script>
var user; // 未赋值
console.log(user); // undefined
</script>
可以先声明后赋值, 赋值用等号= var user; // 声明未赋值
user = 'yoyo'; // 给变量赋值
console.log(user); // yoyo
var 声明并赋值var 声明变量并赋值 <script>
var user= 'yoyo';
console.log(user); // 输出 yoyo
</script>
var user= 'yoyo';其实等价于
var user; // 声明未赋值
user = 'yoyo'; // 给变量赋值
var 一次声明多个变量一条语句声明多个变量, 多个变量中间用逗号隔开 var user = 'yoyo', email = 'hello@qq.com', age = 20;
console.log(user); // yoyo
console.log(email); // hello@qq.com
console.log(age); // 20
当我们这样声明多个变量的时候, 只有变量c给赋值了 var a, b, c = 'hello';
console.log(a); // undefined
console.log(b); // undefined
console.log(c); // hello
其实就是等价于 var a;
var b;
var c = 'hello';
重新声明 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对象的一个属性，看下面例子。 <body>
<script>
// 如果不使用var 直接定义一个变量
user = 'yoyo';
console.log(user);
</script>
</body>
未声明变量直接调用会报错调用一个未声明的变量会报错Uncaught ReferenceError: user is not defined <script>
console.log(user);
</script>
于是在控制台 console 会看到报错
 有一种情况不会报错，那就是下面讲到的使用var 声明的变量会得到提升。 JavaScript 声明提升JavaScript 中，变量及函数的声明都将被提升到函数的最顶部。JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。 如以下我们先调用user变量，再用var声明，此时不会报错，因为函数声明和变量声明总是会被解释器悄悄地被”提升”到方法体的最顶部。 <script>
// 先调用后声明
console.log(user); // undefined
var user;
</script>
解释器会先找到var user; 提升到方法体的最顶部，也就是等价于 <script>
var user;
console.log(user); // undefined
</script>
初始化的赋值不会提升var 声明的变量可以提升，但是它的赋值不会被提升。
我们在先调用了变量，后面用var声明并赋值，此时赋值的内容不会提升，所以还是输出undefined <script>
// 先调用后声明
console.log(user); // undefined
var user = 'yoyo';
</script>
其实就是等价于 <script>
var user;
console.log(user); // undefined
user = 'yoyo';
</script>
只有 var 声明的变量可以提升，没用 var 声明的不会提升 console.log(user); // undefined
user = 'yoyo';
这个会报错Uncaught ReferenceError: user is not defined 在 2015 年以前，我们使用 var 关键字来声明 JavaScript 变量。
在 2015 后的 JavaScript 版本 (ES6) 允许我们使用 const 关键字来定义一个常量，使用 let 关键字定义的限定范围内作用域的变量。
2022年第 1 期《Python 测试平台开发》课程
|
