3 JAVASCRIPT
https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript
3.1 First Steps
3.1.1 概述
3.1.2 什么是javascript
3.1.2.1 javascript定义
javascript是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不在是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D动画，滚动播放的视频等等。
- HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。
- CSS 是一种样式规则语言，可将样式应用于 HTML 内容， 例如设置背景颜色和字体，在多个列中布局内容。
- JavaScript 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。
3.1.2.2 javascript可以做什么
javascript api分类
- 浏览器api，内建与web浏览器，他们可以将数据从周边计算机环境中筛选出来，还可以做复杂的工作。
- Document Object Model API 能通过创建、移除和修改HTML，为页面动态应用咸阳市等手段来操作HTML和CSS。
- Geolocation API 获取地理信息。
- Canvas/WebGL API 可以创建生动的2D和3D图像。
- audio/video API 可以i利用多媒体做一些非常有趣的事。
- 第三方api
3.1.2.3 javascript在页面上做了什么
- 浏览器安全
- JavaScript运行次序
- 解释代码VS编译代码
- 服务端VS客户端
- 动态代码VS静态代码
3.1.2.4 向页面添加JavaScript
css使用<link>元素链接外部样式表，使用<style>元素向HTML嵌入内部样式表，javascript这里只需要一个元素<script>。
- 内部javascript
- 外部javascript
- 内联javascript
- 脚本调用策略
- async和defer
3.1.2.5 注释
1
2
3
4
5
6
|
//我是一行注释
/*
我是多行注释
我是多行注释
*/
|
3.1.3 Javascript初体验
3.1.3.1 像程序员一样思考
3.1.3.2 猜数字游戏
- 初始设置
- 添加变量
- 函数
- 运算符
- 条件语句
- 事件
- Event Listener
- Event Handler
- 补全代码
- 循环
- 对象
- 浏览器对象
3.1.3.3 大功告成
https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>猜数字游戏</title>
<style>
html {
font-family: sans-serif;
}
body {
width: 50%;
max-width: 800px;
min-width: 480px;
margin: 0 auto;
}
.lastResult {
color: white;
padding: 3px;
}
</style>
</head>
<body>
<h1>猜数字游戏</h1>
<p>我刚才随机选定了一个100以内的自然数。看你能否在 10 次以内猜中它。每次我都会告诉你所猜的结果是高了还是低了。</p>
<div class="form">
<label for="guessField">请猜数：</label><input type="text" id="guessField" class="guessField">
<input type="submit" value="我猜" class="guessSubmit">
</div>
<div class="resultParas">
<p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
</div>
<script>
let randomNumber = Math.floor(Math.random() * 100) + 1;
const guesses = document.querySelector('.guesses');
const lastResult = document.querySelector('.lastResult');
const lowOrHi = document.querySelector('.lowOrHi');
const guessSubmit = document.querySelector('.guessSubmit');
const guessField = document.querySelector('.guessField');
let guessCount = 1;
let resetButton;
function checkGuess() {
let userGuess = Number(guessField.value);
if (guessCount === 1) {
guesses.textContent = '上次猜的数：';
}
guesses.textContent += userGuess + ' ';
if (userGuess === randomNumber) {
lastResult.textContent = '恭喜你！猜对了！';
lastResult.style.backgroundColor = 'green';
lowOrHi.textContent = '';
setGameOver();
} else if (guessCount === 10) {
lastResult.textContent = '!!!游戏结束!!!';
lowOrHi.textContent = '';
setGameOver();
} else {
lastResult.textContent = '你猜错了！';
lastResult.style.backgroundColor = 'red';
if (userGuess < randomNumber) {
lowOrHi.textContent = '你刚才猜低了！';
} else if (userGuess > randomNumber) {
lowOrHi.textContent = '你刚才猜高了！';
}
}
guessCount++;
guessField.value = '';
guessField.focus();
}
guessSubmit.addEventListener('click', checkGuess);
function setGameOver() {
guessField.disabled = true;
guessSubmit.disabled = true;
resetButton = document.createElement('button');
resetButton.textContent = '开始新游戏';
document.body.appendChild(resetButton);
resetButton.addEventListener('click', resetGame);
}
function resetGame() {
guessCount = 1;
const resetParas = document.querySelectorAll('.resultParas p');
for (let i = 0; i < resetParas.length; i++) {
resetParas[i].textContent = '';
}
resetButton.parentNode.removeChild(resetButton);
guessField.disabled = false;
guessSubmit.disabled = false;
guessField.value = '';
guessField.focus();
lastResult.style.backgroundColor = 'white';
randomNumber = Math.floor(Math.random() * 100) + 1;
}
</script>
</body>
</html>
|
3.1.4 Javascript代码的错误
3.1.4.1 错误类型
3.1.4.2 出错的示例
3.1.4.3 修复语法错误
3.1.5 变量
3.1.5.1 声明变量
3.1.5.2 初始化变量
3.1.5.3 var与let的区别
3.1.5.4 更新变量
3.1.5.5 变量类型
- Number
- String
- Boolean
- Array
- Object
3.1.5.6 动态类型
3.1.6 数字与运算符
3.1.6.1 数字
3.1.6.2 算术运算符
- 加法(+)
- 减法(-)
- 乘法(*)
- 除法(/)
- 求余(%)
- 幂(**)
3.1.6.3 自增和自减
3.1.6.4 赋值运算符
- 加法赋值(+=)
- 减法赋值(-=)
- 乘法赋值(*=)
- 除法赋值(/=)
3.1.6.5 比较运算符
- 严格等于(===)
- 严格不等于(!==)
- 小于(<)
- 大于(>)
- 小于等于(<=)
- 大于等于(>=)
3.1.7 字符串
3.1.7.1 基本知识
3.1.7.2 连接字符串
3.1.8 有用的字符串方法
3.1.8.1 字符串当对象
3.1.9 数组
3.1.9.1 什么是数组
3.1.9.2 有用的方法
3.1.10 笑话生成器
3.2 Javascript基础要件
3.2.1 基础要件概述
3.2.2 条件语句
3.2.3 代码循环
3.2.4 函数
3.2.5 建立自己的函数
3.2.5 函数返回值
3.2.6 事件介绍
在web中，事件在浏览器窗口中被触发并且通常被绑定到窗口内部的特定部分。
3.2.6.1 事件举例
- 用户在某个元素上点击鼠标或者悬停光标。
- 用户在键盘按下某个按键。
- 用户调整浏览器的大小或关闭浏览器。
- 页面停止加载。
- 提交表单。
- 播放、暂停、关闭视频。
- 发生错误。
- 等…
3.2.6.2 使用事件
3.2.6.2 其他事件概念
3.3 Javascript对象介绍
3.3.1 对象概述
3.3.2 对象基础概念
3.3.3 适合新手的javascript
3.3.4 对象原型
3.3.5 继承
3.3.6 JSON
3.3.7 对象构建实践
3.4 异步Javascript
3.4.1 异步概述
3.4.2 异步编程概念
3.4.3 异步JavaScript简介
3.4.4 超时和间隔
3.4.5 优雅的异步处理
3.4.6 async和await
3.4.7 选择正确的方法
3.5 客户端网页API
3.5.1 网页API介绍
3.5.2 操纵文档
3.5.3 从服务器获取数据
3.5.4 第三方API
3.5.5 画图
3.5.6 视频与音频
3.5.7 客户端存储