006 - 为网页注入灵魂
本帖最后由 不二如是 于 2021-6-4 16:52 编辑上一集：005 - 相濡以沫不如相见于江湖
在线视频：
https://www.bilibili.com/video/BV1QW411N762?p=7
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
1、JS的那些事儿
本节课，让我们来使用script元素，没错，它就是用来为网页注入灵魂滴（引入JS）。
从HTML-速查宝典，找到script：
先看一下，有个大体印象，在开始前，在三剑客的世界（广义上的HTML5）有一个美丽（历久弥新）的梗：
JavaScript和Java有什么区别呢？{:10_266:}
答案：
哈哈，预知更多详情，请看：Java 和 JavaScript 的关系！|【细说戏言】
以后再有人问的话，果断回复：
它们的区别就像甲鱼和小甲鱼的区别一样！{:10_268:}
严肃一点，其实除了名字有雷同外，没有任何关系。
Java是一门十分完整、成熟的编程语言。
相比之下，JavaScript是一个可以被引入HTML页面的编程语言。
这两种语言并不完全相互依赖，而是针对不同的意图而设计的。
Java是一种面向对象编程（OOPS）或结构化编程语言，类似的如C ++或C。
而JavaScript是客户端代码语言，它被称为非结构化编程。
欲知JavaScript的诞生历史（附老司机才能看懂的内涵），请看：0 2 2 6 ★ JavaScript'快速的爱情小孩' | 【quickie love-child 】
顺便透露下，零基础入门学习Web开发系列，还有JavaScript篇，别忘届时同步追番哦～
2、初尝JavaScript
2.1、内嵌代码
就像上一讲的CSS一样，我们也可以通过内部嵌入和外部调用两种方式加载JS文件。
通过<script>标签包裹JS代码就可以实现：
<!DOCTYPE html>
<html lang="en">
<head>
<title>鱼C-Web-006</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="鱼C工作室">
<script type="text/javascript">
document.write("i love FishC.com");
</script>
</head>
<body>
<p>上面的内容哪来的？</p>
</body>
</html>
script元素整体就是JS部分，内容是.js文件。
<script type="text/javascript">
document.write("i love FishC.com");
</script>
script元素内部的内容，鱼油先不用理解，只需知道是用来在网页上输出一段文本即可。
在JS系列中，咱们再来好好地一个一个拿下～
需要鱼油get到：
将script元素放在head元素中，会比放在body元素中的p元素先被浏览器解析呈现～
上面的加载流程是由于浏览器渲染过程会按照htm中的结构顺序执行（DOM树）
修改script元素位置：
<!DOCTYPE html>
<html lang="en">
<head>
<title>鱼C-Web-006</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="鱼C工作室">
</head>
<body>
<p>上面的内容哪来的？</p>
<script type="text/javascript">
document.write("i love FishC.com");
</script>
</body>
</html>
看到了吧，前后位置发生了变化，了解这一点，对于稍后的延迟加载有很大帮助～
2.2、载入外部代码
载入外部文件，需要利用script元素的src属性。
先将刚才用到的.js部分：
document.write("i love FishC.com");
复制到外部名为"hi.js"的文件中。
友情提醒：
外部调用时，就不要写script元素了，多此一举哦～
index.html文件调用：
<!DOCTYPE html>
<html lang="en">
<head>
<title>鱼C-Web-006</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="鱼C工作室">
<script type="text/javascript" src="hi.js"></script>
</head>
<body>
<p>上面的内容哪来的？</p>
</body>
</html>
http://xxx.fishc.com/forum/201804/29/135212trc4pw32nhztopnw.png
注意：
如果script元素，有设置src属性来加载外部代码，那么其内容就不能写入任何.js代码。
此外细心的鱼油会观察到：
外部加载的代码，被浏览器执行渲染后，文本位置和一开始的例子中一样，都是在p元素的上面。
3、延迟执行代码
浏览器正常的解析过程，在这里不做深述。
欲知详情请看：传统与现代<script>位置之争 |【延迟/异步】
简单讲就是：
没有js代码，整个代码从上到下顺序执行，如果添加了js文件，执行顺序会被打乱～
演示代码.html：
<!DOCTYPE html>
<html lang="en">
<head>
<title>鱼C-Web-006</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="鱼C工作室">
<script type="text/javascript" src="patch.js"></script>
</head>
<body>
<p>我是谁？</p>
<p>我从哪里来？</p>
<p>我要到哪里去？</p>
</body>
</html>
patch.js：
// 创建变量，获取页面中标签名为p的所有元素
var x=document.getElementsByTagName("p");
// 遍历所有的p元素
for(var i = 0 ; i < x.length ; i++)
{
// 依次设置文本内容
x.innerText = "小甲鱼到此一游~";
}
成功调用，页面：
http://xxx.fishc.com/forum/201804/29/151220qkzrfywewnlwyfrq.png
矮马，咋没出来呢？
通过上面的外部调用的例子，我们知道放在head元素中的script会在一开始被浏览器解析显示。
而我们的js部分是要设置DOM（修改body）结构中的p元素，而那一刻，p还没有被执行创建。
所以，无法完成修改～
手动修改script顺序：
<body>
<p>我是谁？</p>
<p>我从哪里来？</p>
<p>我要到哪里去？</p>
<script type="text/javascript" src="patch.js"></script>
</body>
手动修改成功，只是稍微有点low。。。
没错，script还有几个神奇的属性，可以增加B格。
记住：
defer和async属性都只能用在调用外部代码文件的script中
3.2、defer属性
defer属性用来延迟执行代码，其实就跟咱们手动将script元素放在</body>前是一个意思。
修改代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>鱼C-Web-006</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="鱼C工作室">
<script type="text/javascript" src="patch.js" defer></script>
</head>
<body>
<p>我是谁？</p>
<p>我从哪里来？</p>
<p>我要到哪里去？</p>
</body>
</html>
http://xxx.fishc.com/forum/201804/29/152631y35uo80hf1uapmlz.png
没错将script元素放在head中，在上面的演示中，我们修改失败了。
添加defer属性，没错，页面中的p元素顺利被修改了～
不过有个细节，要注意：
defer延迟放到</html>之后，而我们手动调整顺序是放在</body>之前。
3.3、async异步属性
当我们不关系页面中的DOM是否存在被浏览器渲染，就可以采取异步加载方式。
不过，从本人多年的开发来讲：
一般外部加载的js文件，都是用来修改DOM操作的，所以意味着不能随便用async！
如果偏要用async异步加载，那么一定要有多个外部js文件。
而他们将会和页面DOM一起被加载，其中加载顺序不可控，意味着：
这次可以，可能下次就不行了，然后又突然行了的尴尬。。。
预知详述请看：传统与现代<script>位置之争 |【延迟/异步】
<noscript>
noscript元素比较鸡肋，因为往往是浏览器不支持JS时，才生效。
现在，谁会闲的没事把js禁用。。。
出于演示，设置Chrome浏览器属性，禁用浏览器的js：
禁用后，添加代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>鱼C-Web-006</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="鱼C工作室">
<noscript>
<p>这位鱼油，您的浏览器竟然不支持JavaScript</p>
</noscript>
</head>
<body>
</body>
</html>
彩蛋
很喜欢的一首歌曲，《起风了》：
**** Hidden Message *****
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：007-前端工程狮的自我修养
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif
进展真快啊，马上就要js了{:10_256:} 我是来试试审核速度的{:10_247:} 支持~ 开彩蛋了！！ 支持~ {:5_107:} {:7_130:} 太棒了，感谢小甲鱼 1
学习不易，需要坚持 起风了
答案答案
1 啊飒飒 谢谢分享 正在真正看着就卡住了 666666666 感谢楼主 开彩蛋看看