这是我参与「第五届青训营」笔记创作活动的第6天。

之前向大家展示了什么是html，css的基础概念，以及一些常见的概念的使用。

接下来就让我们进入对于JavaScript的学习。

这里我只会向大家展示一些我个人认为比较重点的部分。

JS的输出，事件，变量提升及严格模式

JS中的输出

JS中没有任何的打印和输出函数。

可以通过下边的方式来显示数据：

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

<div>
  <script>window.alert(5 + 6)</script>
</div>

使用 document.write() 方法将内容写到 HTML 文档中。

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<script>
document.write(Date());
</script>

使用 nnerHTML写入到 HTML 元素。

如果想要操作元素，可以使用 document.getElementById(id)方法。

使用 id属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容。

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

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

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

JS中的事件

HTML事件是发生在HTML元素上的事情。

如若HTML使用了JS,JS可以触发这些事件。

常见的HTML事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

当事件发生时，JS可以执行一些代码。

例如：按钮元素中添加了 onclick 属性 (并加上代码):

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>

JS中的变量提升

声明提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

JS中，函数及变量的声明都将被提升到函数的最顶部。

JS中，变量可以在使用后声明，也就是变量可以先使用再声明。

以下两种情况执行结果相同。

x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x

var x; // 声明 x

var x; // 声明 x
x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x

JS中只有声明的变量会被提升，已经初始化的变量不会提升。

下面两种情况结果不同：

var x = 5; // 初始化 x
var y = 7; // 初始化 y

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y

var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y

var y = 7; // 初始化 y

为了避免因为变量提升而出现更多的 BUG，通常我们在每个作用域开始前声明这些变量，这也是正常的 JS 解析步骤，易于我们理解。

JS中的严格模式

在脚本或函数的头部添加 use strict; 表达式来声明。

use strict的目的是指定代码在严格条件下执行。

严格模式下你不能使用未声明的变量。

举例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS学习</title>
</head>
<body>

<h1>使用 "use strict":</h1>
<h3>不允许使用未定义的变量。</h3>
<p>浏览器按下 F12 开启调试模式，查看报错信息。</p>
<script>
"use strict";
x = 3.14;       // 报错 (x 未定义)
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS学习</title>
</head>
<body>

<p>在函数内使用 "use strict" 只在函数内报错。
</p>
<p>浏览器按下 F12 开启调试模式，查看报错信息。</p>
<script>
x = 3.14;       // 不报错 
myFunction();
function myFunction() {
   "use strict";
    y = 3.14;   // 报错 (y 未定义)
}
</script>

</body>
</html>

严格模式的限制

不允许使用未声明的变量
不允许删除变量或者对象
不允许删除函数
不允许变量重名
等等

[ day6.前端JavaScript第一篇| 青训营笔记]

JS的输出，事件，变量提升及严格模式

JS中的输出

JS中的事件

JS中的变量提升

JS中的严格模式