马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2021-6-4 16:52 编辑
在线视频：
课程思维导图
1、JS的那些事儿
本节课，让我们来使用script元素，没错，它就是用来为网页注入灵魂滴（引入JS）。
从HTML-速查宝典，找到script：
先看一下，有个大体印象，在开始前，在三剑客的世界（广义上的HTML5）有一个美丽（历久弥新）的梗：
JavaScript和Java有什么区别呢？
答案：
哈哈，预知更多详情，请看：Java 和 JavaScript 的关系！|【细说戏言】
以后再有人问的话，果断回复：
它们的区别就像甲鱼和小甲鱼的区别一样！
严肃一点，其实除了名字有雷同外，没有任何关系。
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>
注意：
如果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[i].innerText = "小甲鱼到此一游~";
}
成功调用，页面：
矮马，咋没出来呢？
通过上面的外部调用的例子，我们知道放在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>
没错将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>
彩蛋
很喜欢的一首歌曲，《起风了》：
课后作业，完成了吗？
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ）
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-4-29 15:54:57
置顶卡
千斤顶
显身卡
发表于 2018-4-29 16:32:37
发表于 2018-4-30 14:03:59
