每篇文章的浪漫主义
凌晨的海或凌晨的山顶,总要去一次吧,趁热夏。
到底什么是JavaScript
广义的定义
JavaScript 是一种脚本,一门编程语言,它可以在网页上实现复杂的功能,网页展现给你的不再是简单的静态信息,而是实时的内容更新,交互式的地图,2D/3D 动画,滚动播放的视频等等。 JavaScript 怎能缺席。 它是标准 Web 技术蛋糕的第三层。
- HTML是一种标记语言,用来结构化我们的网页内容并赋予内容含义,例如定义段落、标题和数据表,或在页面中嵌入图片和视频。
- CSS 是一种样式规则语言,可将样式应用于 HTML 内容,例如设置背景颜色和字体,在多个列中布局内容。
- JavaScript 是一种脚本语言,可以用来创建动态更新的内容,控制多媒体,制作图像动画,还有很多。 (**好吧,虽然它不是万能的,**但可以通过简短的代码来实现神奇的功能。 )
它到底可以做什么?
我们先来看一段代码:
<p>我的名字:张三丰</p>
p {
font-family: sans-serif, '黑体';
/*letter-spacing 属性增加或减少字符间的空白(字符间距)。*/
letter-spacing: 1px;
/* text-transform 属性控制文本的大小写。*/
text-transform: uppercase;
text-align: center;
border: 2px solid rgba(0, 0, 200, 0.6);
background: rgba(0, 0, 200, 0.3);
color: rgba(0, 0, 200, 0.6);
box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
border-radius: 10px;
padding: 3px 10px;
display: inline-block;
/*cursor:hand 与 cursor:pointer 的效果是一样的,都像光标指向链接一样,光标变成手行。*/
cursor: pointer;
}
const para = document.querySelector('p');
para.addEventListener('click', updateName);
function updateName() {
let name = prompt('输入一个新的名字:');
para.textContent = '我的名字:' + name;
}
客户端(client-side)JavaScript 语言的核心包含一些普遍的编程特性,以让你可以做到如下的事情:
- 在变量中储存有用的值。比如,我们请求客户输入一个新名字,然后将其储存到 name 变量中。
- 操作一段文本(在编程中称为“字符串”(string))。上文的示例中,我们取字符串 “我的名字:”,然后把它和 name 变量连结起来,创造出完整的文本标签,比如:“我的名字:张三丰”。
- 运行代码以响应网页中发生的特定事件。上文的示例中,我们用一个 click 事件来检测按钮什么时候被点击,然后运行代码更新文本标签。
- …
这些都只是最基础的一些,有很多很多的功能。
JavaScript 语言核心之上所构建的功能更令人兴奋。应用程序接口(Application Programming Interfaces(API))将为你的代码提供额外的超能力。
那什么是API了?
API 是已经建立好的一套代码组件,可以让开发者实现原本很难甚至无法实现的程序。就像现成的家具套件之于家居建设,用一些已经切好的木板组装一个书柜,显然比自己设计,寻找合适的木材,裁切至合适的尺寸和形状,找到正确尺寸的螺钉,再组装成书柜要简单得多。
API 通常分为两类。
浏览器 API 内建于 web 浏览器中,它们可以将数据从周边计算机环境中筛选出来,还可以做实用的复杂工作。例如:
-
文档对象模型 API(DOM(Document Object Model)API) 能通过创建、移除和修改
HTML,为页面动态应用新样式等手段来操作 HTML 和 CSS。比如当某个页面出现了一个弹窗,或者显示了一些新内容(像上文小 demo中看到那样),这就是 DOM 在运行。 -
地理位置 API(Geolocation API) 获取地理信息。这就是为什么 谷歌地图 可以找到你的位置,而且标示在地图上。
-
画布(Canvas) 和 WebGL API 可以创建生动的 2D 和 3D 图像。人们正运用这些 web 技术制作令人惊叹的作品。
-
影音类 API
让你可以利用多媒体做一些非常有趣的事,比如在网页中直接播放音乐和影片,或用自己的网络摄像头获取录像,然后在其他人的电脑上展示。
第三方 API 并没有默认嵌入浏览器中,一般要从网上取得它们的代码和信息。
JavaScript 在页面上做了什么?
让我们简单回顾一下,浏览器在读取一个网页时都发生什么。
浏览器在读取一个网页时,代码(HTML, CSS 和 JavaScript)将在一个运行环境(浏览器标签页)中得到执行。就像一间工厂,将原材料(代码)加工为一件产品(网页)。
在 HTML 和 CSS 集合组装成一个网页后,浏览器的 JavaScript 引擎将执行 JavaScript 代码。这保证了当 JavaScript 开始运行之前,网页的结构和样式已经就位。
这样很好,因为 JavaScript 最普遍的用处是通过 DOM API(见上文)动态修改 HTML 和 CSS 来更新用户界面(user interface)。如果 JavaScript 在 HTML 和 CSS 就位之前加载运行,就会引发错误。
浏览器安全
每个浏览器标签页就是其自身用来运行代码的独立容器(这些容器用专业术语称为“运行环境”)。大多数情况下,每个标签页中的代码完全独立运行,而且一个标签页中的代码不能直接影响另一个标签页(或者另一个网站)中的代码。这是一个好的安全措施,如果不这样,黑客就可以从其他网站盗取信息,等等。
JavaScript 运行次序
当浏览器执行到一段 JavaScript 代码时,通常会按从上往下的顺序执行这段代码。这意味着你需要注意代码书写的顺序。比如,我们回到第一个例子中的 JavaScript 代码:
这里我们选定一个文本段落(第 1 行),然后给它附上一个事件监听器(第 3 行),使得在它被点击时,updateName()
代码块(5 – 8 行)便会运行。updateName()
(这类可以重复使用的代码块称为“函数”)向用户请求一个新名字,然后把这个名字插入到段落中以更新显示。
解释代码 vs 编译代码
作为程序员,你或许听说过这两个术语:解释(interpret)和 编译(compile)
。在解释型语言中,代码自上而下运行,且实时返回运行结果。代码在由浏览器执行前,不需要将其转化为其他形式。代码将直接以文本格式(text form)被接收和处理。
相对的,编译型语言需要先将代码转化(编译)成另一种形式才能运行。比如 C/C++ ,java先被编译成汇编语言,然后才能由计算机运行。程序将以二进制的格式运行,这些二进制内容是由程序源代码产生的。
JavaScript 是轻量级解释型语言。浏览器接受到 JavaScript 代码,并以代码自身的文本格式运行它。技术上,几乎所有 JavaScript 转换器都运用了一种叫做即时编译(just-in-time compiling)的技术;当 JavaScript 源代码被执行时,它会被编译成二进制的格式,使代码运行速度更快。尽管如此,JavaScript 仍然是一门解释型语言,因为编译过程发生在代码运行中,而非之前。
两种类型的语言各有优势.
怎样向页面添加 JavaScript?
内部 JavaScript
先来一段代码:
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8">
<title>#</title>
</head>
<body>
<button>点我呀</button>
</body>
</html>
我们加入JavaScript代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
document.addEventListener("DOMContentLoaded", function () {
function createParagraph() {
let para = document.createElement('p');
para.textContent = '你点击了这个按钮!';
document.body.appendChild(para);
}
const buttons = document.querySelectorAll('button');
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', createParagraph);
}
});
</script>
</head>
<body>
<button>点我呀</button>
</body>
</html>
运行效果:
外部 JavaScript
-
首先,在刚才的 HTML 文件所在的目录下创建一个名为 script.js 的新文件。请确保扩展名为 .js,只有这样才能被识别为 JavaScript 代码。
-
将 script 元素替换为:
<script src="script.js" async></script>
- 在 script.js 文件中,添加下面的脚本:
function createParagraph() {
let para = document.createElement('p');
para.textContent = '你点击了这个按钮!';
document.body.appendChild(para);
}
const buttons = document.querySelectorAll('button');
for(let i = 0; i < buttons.length ; i++) {
buttons[i].addEventListener('click', createParagraph);
}
保存并刷新浏览器,你会发现二者完全一样。但是现在我们把 JavaScript 写进了一个外部文件。这样做一般会使代码更加有序,更易于复用,且没有了脚本的混合,HTML 也会更加易读,因此这是个好的习惯。
内联 JavaScript 处理器
这个 demo 与之前的两个功能完全一致,只是在 button 元素中包含了一个内联的 onclick 处理器,使得函数在按钮被按下时运行。
然而请不要这样做。 这将使 JavaScript 污染到 HTML,而且效率低下。对于每个需要应用 JavaScript 的按钮,你都得手动添加 οnclick=“createParagraph()” 属性。
可以使用纯 JavaScript 结构来通过一个指令选取所有按钮。下文的这段代码即实现了这一目的:
const buttons = document.querySelectorAll('button');
for(let i = 0; i < buttons.length ; i++) {
buttons[i].addEventListener('click', createParagraph);
}
这样写乍看去比 onclick 属性要长一些,但是这样写会对页面上所有按钮生效,无论多少个,或添加或删除,完全无需修改 JavaScript 代码。
async 和 defer
浏览器遇到 async 脚本时不会阻塞页面渲染,而是直接下载然后运行。这样脚本的运行次序就无法控制,只是脚本不会阻止剩余页面的显示。当页面的脚本之间彼此独立,且不依赖于本页面的其它任何脚本时,async 是最理想的选择。
添加 defer 属性的脚本将按照在页面中出现的顺序加载,因此第二个示例可确保 jquery.js 必定加载于 script2.js 和 script3.js 之前,同时 script2.js 必定加载于 script3.js 之前。
脚本调用策略小结:
- 如果脚本无需等待页面解析,且无依赖独立运行,那么应使用 async。
- 如果脚本需要等待页面解析,且依赖于其它脚本,调用这些脚本时应使用 defer,将关联的脚本按所需顺序置于 HTML 中。
提示:对于这篇学习笔记就暂时到这了,兄弟们加油
对于这篇学习笔记就暂时到这了,兄弟们加油
从现在做起,坚持下去,一天进步一小点,不久的将来,你会感谢曾经努力的你!
如果又出错的,请各位友友指正。
新人报到,各位友友们,给我个三联(点赞,关注,收藏)