鱼C论坛

 找回密码
 立即注册
查看: 11605|回复: 41

[学习笔记] 006 - 为网页注入灵魂

[复制链接]
发表于 2018-4-29 15:54:57 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2021-6-4 16:52 编辑






在线视频:






课程思维导图

Snip20180429_187.png

猛戳

                               
登录/注册后可看大图
超清





1、JS的那些事儿

本节课,让我们来使用script元素,没错,它就是用来为网页注入灵魂滴(引入JS)。

HTML-速查宝典,找到script
Snip20180429_186.png


Snip20180429_173.png


先看一下,有个大体印象,在开始前,在三剑客的世界(广义上的HTML5)有一个美丽(历久弥新)的
JavaScript和Java有什么区别呢?


答案:
1.gif


哈哈,预知更多详情,请看:Java 和 JavaScript 的关系!|【细说戏言】

以后再有人问的话,果断回复:
它们的区别就像甲鱼和小甲鱼的区别一样!


严肃一点,其实除了名字有雷同外,没有任何关系。

Java是一门十分完整、成熟的编程语言。

相比之下,JavaScript是一个可以被引入HTML页面的编程语言。

这两种语言并不完全相互依赖,而是针对不同的意图而设计的。

Java是一种面向对象编程(OOPS)或结构化编程语言,类似的如C ++或C。

而JavaScript是客户端代码语言,它被称为非结构化编程。

Snip20180429_176.png


欲知JavaScript的诞生历史(附老司机才能看懂的内涵),请看:0 2 2 6 ★ JavaScript'快速的爱情小孩' | 【quickie love-child 】

顺便透露下,零基础入门学习Web开发系列,还有JavaScript篇,别忘届时同步追番哦~

Snip20180429_178.png





2、初尝JavaScript

2.1、内嵌代码

就像上一讲的CSS一样,我们也可以通过内部嵌入外部调用两种方式加载JS文件。

通过<script>标签包裹JS代码就可以实现:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>鱼C-Web-006</title>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
  8.     <meta name="description" content="《零基础入门学习Web开发》案例演示">
  9.     <meta name="author" content="鱼C工作室">
  10.     <script type="text/javascript">
  11.         document.write("i love FishC.com");
  12.     </script>
  13. </head>
  14. <body>
  15. <p>上面的内容哪来的?</p>
  16. </body>
  17. </html>
复制代码

Snip20180429_189.png


script元素整体就是JS部分,内容是.js文件。
  1. <script type="text/javascript">
  2.         document.write("i love FishC.com");
  3.     </script>
复制代码


script元素内部的内容,鱼油先不用理解,只需知道是用来在网页上输出一段文本即可。

在JS系列中,咱们再来好好地一个一个拿下~

需要鱼油get到:
将script元素放在head元素中,会比放在body元素中的p元素被浏览器解析呈现~

上面的加载流程是由于浏览器渲染过程会按照htm中的结构顺序执行(DOM树)


修改script元素位置:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>鱼C-Web-006</title>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
  8.     <meta name="description" content="《零基础入门学习Web开发》案例演示">
  9.     <meta name="author" content="鱼C工作室">
  10. </head>
  11. <body>
  12. <p>上面的内容哪来的?</p>
  13. <script type="text/javascript">
  14.     document.write("i love FishC.com");
  15. </script>
  16. </body>
  17. </html>
复制代码

Snip20180429_191.png


看到了吧,前后位置发生了变化,了解这一点,对于稍后的延迟加载有很大帮助~

2.2、载入外部代码

载入外部文件,需要利用script元素的src属性。

先将刚才用到的.js部分:
  1. document.write("i love FishC.com");
复制代码


复制到外部名为"hi.js"的文件中。
Snip20180429_192.png


友情提醒:
外部调用时,就不要写script元素了,多此一举哦~


index.html文件调用:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>鱼C-Web-006</title>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
  8.     <meta name="description" content="《零基础入门学习Web开发》案例演示">
  9.     <meta name="author" content="鱼C工作室">
  10.     <script type="text/javascript" src="hi.js"></script>
  11. </head>
  12. <body>
  13. <p>上面的内容哪来的?</p>
  14. </body>
  15. </html>
复制代码


                               
登录/注册后可看大图


注意:
如果script元素,有设置src属性来加载外部代码,那么其内容就不能写入任何.js代码。

Snip20180429_193.png


此外细心的鱼油会观察到:
外部加载的代码,被浏览器执行渲染后,文本位置和一开始的例子中一样,都是在p元素的上面。





3、延迟执行代码

Snip20180429_194.png


浏览器正常的解析过程,在这里不做深述。

欲知详情请看:传统与现代&lt;script&gt;位置之争 |【延迟/异步】

简单讲就是:
没有js代码,整个代码从上到下顺序执行,如果添加了js文件,执行顺序会被打乱~


Snip20180429_180.png


演示代码.html:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>鱼C-Web-006</title>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
  8.     <meta name="description" content="《零基础入门学习Web开发》案例演示">
  9.     <meta name="author" content="鱼C工作室">
  10.     <script type="text/javascript" src="patch.js"></script>
  11. </head>
  12. <body>
  13. <p>我是谁?</p>
  14. <p>我从哪里来?</p>
  15. <p>我要到哪里去?</p>
  16. </body>
  17. </html>
复制代码

Snip20180429_195.png


patch.js:
  1. //    创建变量,获取页面中标签名为p的所有元素
  2.   var x=  document.getElementsByTagName("p");
  3.    
  4. //    遍历所有的p元素
  5.     for(var i = 0 ; i < x.length ; i++)
  6.     {
  7. //        依次设置文本内容
  8.         x[i].innerText = "小甲鱼到此一游~";
  9.     }
复制代码


成功调用,页面:

                               
登录/注册后可看大图


矮马,咋没出来呢?

通过上面的外部调用的例子,我们知道放在head元素中的script会在一开始被浏览器解析显示。

而我们的js部分是要设置DOM(修改body)结构中的p元素,而那一刻,p还没有被执行创建

所以,无法完成修改~

手动修改script顺序:
  1. <body>
  2. <p>我是谁?</p>
  3. <p>我从哪里来?</p>
  4. <p>我要到哪里去?</p>
  5. <script type="text/javascript" src="patch.js"></script>
  6. </body>
复制代码

Snip20180429_196.png


手动修改成功,只是稍微有点low。。。

没错,script还有几个神奇的属性,可以增加B格

记住:
defer和async属性都只能用在调用外部代码文件的script中



3.2、defer属性

defer属性用来延迟执行代码,其实就跟咱们手动将script元素放在</body>前是一个意思。

修改代码:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>鱼C-Web-006</title>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
  8.     <meta name="description" content="《零基础入门学习Web开发》案例演示">
  9.     <meta name="author" content="鱼C工作室">
  10.     <script type="text/javascript" src="patch.js" defer></script>
  11. </head>
  12. <body>
  13. <p>我是谁?</p>
  14. <p>我从哪里来?</p>
  15. <p>我要到哪里去?</p>
  16. </body>
  17. </html>
复制代码


                               
登录/注册后可看大图


没错将script元素放在head中,在上面的演示中,我们修改失败了。

添加defer属性,没错,页面中的p元素顺利被修改了~

不过有个细节,要注意:
defer延迟放到</html>之后,而我们手动调整顺序是放在</body>之前。


3.3、async异步属性

当我们不关系页面中的DOM是否存在被浏览器渲染,就可以采取异步加载方式。

不过,从本人多年的开发来讲:
一般外部加载的js文件,都是用来修改DOM操作的,所以意味着不能随便用async!


如果偏要用async异步加载,那么一定要有多个外部js文件

而他们将会和页面DOM一起被加载,其中加载顺序不可控,意味着:
这次可以,可能下次就不行了,然后又突然行了的尴尬。。。


预知详述请看:传统与现代&lt;script&gt;位置之争 |【延迟/异步】




<noscript>

noscript元素比较鸡肋,因为往往是浏览器不支持JS时,才生效。

现在,谁会闲的没事把js禁用。。。

出于演示,设置Chrome浏览器属性,禁用浏览器的js
Apr-29-2018 15-47-27.gif


禁用后,添加代码:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>鱼C-Web-006</title>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
  8.     <meta name="description" content="《零基础入门学习Web开发》案例演示">
  9.     <meta name="author" content="鱼C工作室">
  10.     <noscript>
  11.         <p>这位鱼油,您的浏览器竟然不支持JavaScript</p>
  12.     </noscript>
  13. </head>
  14. <body>
  15. </body>
  16. </html>
复制代码

Snip20180429_197.png





彩蛋

很喜欢的一首歌曲,《起风了》:
游客,如果您要查看本帖隐藏内容请回复





课后作业,完成了吗?








                               
登录/注册后可看大图







如果有收获,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢本系列学习笔记,请订阅 专辑&#9758;传送门)(不喜欢更要订阅



                               
登录/注册后可看大图




评分

参与人数 3荣誉 +3 鱼币 +4 贡献 +6 收起 理由
啊吁喔 + 2 + 3 + 2
goodluck1133669 + 1 + 1 + 1
睦ちゃん她爹 + 3

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-4-29 16:32:37 | 显示全部楼层
进展真快啊,马上就要js了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 1 反对 0

使用道具 举报

发表于 2018-4-30 09:06:10 | 显示全部楼层
我是来试试审核速度的
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-4-30 14:03:59 | 显示全部楼层
支持~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-8-7 07:07:40 | 显示全部楼层
开彩蛋了!!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-8-13 00:34:10 | 显示全部楼层
支持~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-8-22 20:45:54 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-9-28 15:52:23 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-11-19 00:19:31 | 显示全部楼层
太棒了,感谢小甲鱼
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-12-18 21:28:42 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-12-28 15:27:06 | 显示全部楼层
学习不易,需要坚持
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-1-23 11:12:15 | 显示全部楼层
起风了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-2-4 12:41:47 | 显示全部楼层
答案答案
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-2-8 15:45:56 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-3-4 19:37:38 | 显示全部楼层
啊飒飒
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-3-5 11:51:22 | 显示全部楼层
谢谢分享
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-4-3 23:32:12 | 显示全部楼层
正在真正看着就卡住了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-4-16 16:33:14 | 显示全部楼层
666666666
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-4-26 14:54:55 | 显示全部楼层
感谢楼主
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-7-11 15:13:38 | 显示全部楼层
开彩蛋看看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 05:33

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表