前端之JavaScript第一步

----------------------------------------------------------------------------------------------------牢记初心，砥砺前行

JavaScript是什么

HTML是一种标记语言，用来结构化我们的网页内容;
CSS 是一种样式规则语;
JavaScript 是一种脚本，一门编程语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画;

prompt

提示用户进行输入的对话框。

function updateName() {
  let name = prompt('输入一个新的名字：');
  para.textContent = '玩家1：' + name;
}

JavaScript可以做什么

• 客户端（client-side）:
  JavaScript 语言的核心包含一些普遍的编程特性，以让你可以做到如下的事情：

1. 在变量中储存有用的值。

2. 操作一段文本（在编程中称为“字符串”（string））。

3. 运行代码以响应网页中发生的特定事件。

4. and more.

API

应用程序接口（Application Programming Interfaces（API））将为你的代码提供额外的功能。是在JavaScript 语言核心上所构建.

API 是已经建立好的一套代码组件，可以让开发者实现原本很难甚至无法实现的程序。就像现成的家具套件之于家居建设，用一些已经切好的木板组装一个书柜，显然比自己设计，寻找合适的木材，裁切至合适的尺寸和形状，找到正确尺寸的螺钉，再组装成书柜要简单得多。

浏览器 API 内建于 web 浏览器中，它们可以将数据从周边计算机环境中筛选出来，还可以做实用的复杂工作。

浏览器 API

• 文档对象模型 API（DOM（Document Object Model）API） 能通过创建、移除和修改 HTML，为页面动态应用新样式等手段来操作 HTML 和 CSS。
• 地理位置 API（Geolocation API） 获取地理信息。
• 画布（Canvas） 和 WebGL API 可以创建生动的 2D 和 3D 图像。
• 诸如 HTMLMediaElement 和 WebRTC 等 影音类 API 让你可以利用多媒体做一些非常有趣的事，比如在网页中直接播放音乐和影片，或用自己的网络摄像头获取录像，然后在其他人的电脑上展示。

第三方 API

第三方 API 并没有默认嵌入浏览器中要从网上取得它们的代码和信息。比如：高德地图API, 新浪微博API.

JS做了什么

• 每个浏览器标签页都是运行代码的独立容器（专业术语称为“运行环境”）.
• JavaScript 代码运行是按从上往下的顺序执行.

函数

可以重复使用的代码块称为“函数”.

解释代码 vs 编译代码

• 在解释型语言中，代码自上而下运行，且实时返回运行结果。代码在由浏览器执行前，不需要将其转化为其他形式。代码将直接以文本格式（text form）被接收和处理。

• 编译型语言需要先将代码转化（编译）成另一种形式才能运行。比如 C/C++ 先被编译成汇编语言，然后才能由计算机运行。程序将以二进制的格式运行，这些二进制内容是由程序源代码产生的。

而JavaScript 是轻量级解释型语言。浏览器接受到JavaScript代码，并以代码自身的文本格式运行它。技术上，几乎所有 JavaScript 转换器都运用了一种叫做即时编译（just-in-time compiling）的技术；当 JavaScript 源代码被执行时，它会被编译成二进制的格式，使代码运行速度更快。尽管如此，JavaScript 仍然是一门解释型语言，因为编译过程发生在代码运行中，而非之前。

服务器端代码 vs 客户端代码

客户端代码是在用户的电脑上运行的代码，在浏览一个网页时，它的客户端代码就会被下载，然后由浏览器来运行并展示。这就是客户端 JavaScript。

服务器端代码在服务器上运行，接着运行结果才由浏览器下载并展示出来。流行的服务器端 web 语言包括：PHP、Python、Ruby、ASP.NET 以及… JavaScript！JavaScript 也可用作服务器端语言，比如现在流行的 Node.js 环境.

动态代码 vs 静态代码

“动态”一词既适用于客户端 JavaScript，又适用于描述服务器端语言。是指通过按需生成新内容来更新 web 页面 / 应用，使得不同环境下显示不同内容。服务器端代码会在服务器上动态生成新内容，例如从数据库中提取信息。

没有动态更新内容的网页叫做“静态”页面，所显示的内容不会改变。

注意:

1. 不要将js 代码放入HTML内容中。分开放, 不要造成污染.
   绑定所有按钮

const buttons = document.querySelectorAll('button');

for(let i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

2. 引入外部js要注意属性

链接: 前端之JavaScript基础