零基础学习HTML(6)——初识JavaScript

最新推荐文章于 2022-06-29 10:30:21 发布

Dragon水魅

最新推荐文章于 2022-06-29 10:30:21 发布

阅读量528

点赞数

分类专栏：零基础学习Web开发文章标签： html javascript js

本文链接：https://blog.csdn.net/qq_43650934/article/details/106413914

版权

零基础学习Web开发专栏收录该内容

45 篇文章 2 订阅

订阅专栏

文章目录

- - 官方资料
  - 学习正文

注：学习笔记基于小甲鱼学习视频，官方论坛： https://fishc.com.cn/forum.php

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/

学习正文

script标签：https://man.ilovefishc.com/pageHTML5/script.html
noscript标签：https://man.ilovefishc.com/pageHTML5/noscript.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义文本内嵌脚本</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
	<script type="text/javascript">
		document.write("I love FishC.com!");
	</script>
</head>
<body>
	<p>上面的内容哪来的？</p>
</body>
</html>

在这里插入图片描述
如果把script标签放在p标签下面，则这两句话将上下调换。

也可以通过 src 属性引用外部脚本文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义文本内嵌脚本</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
	<script type="text/javascript" src="html/hi.js"></script>
</head>
<body>
	<p>上面的内容哪来的？</p>
</body>
</html>

js文件：

document.write("I love FishC.com!");

运行效果是一样的。

注：不能在同一个script元素里既定义内嵌脚本又引入外部脚本。

同时我们可以延迟执行脚本（打个补丁）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义文本内嵌脚本</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
</head>
<body>
	<p>我是谁？</p>
	<p>我从哪里来？</p>
	<p>我要到哪里去？</p>
	<script type="text/javascript" src="html/patch.js"></script>
</body>
</html>

js文件：

var x = document.getElementsByTagName("p");

for (var i=0; i < x.length; i++)
{
	x[i].innerText = "小甲鱼到此一游~";
}

在这里插入图片描述
HTML的解析是自顶向下的，所以我们要先显示p标签，然后再进行替换。

当然，我们也可以使用defer属性来延迟执行脚本，这样就不用将script元素贴的到处都是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义文本内嵌脚本</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
	<script type="text/javascript" src="html/patch.js" defer></script>
</head>
<body>
	<p>我是谁？</p>
	<p>我从哪里来？</p>
	<p>我要到哪里去？</p>
</body>
</html>

注：defer属性只能用于外部脚本文件。

异步执行脚本，可以使用async属性，但需要慎用，可能会导致不可控情况。
同样，async属性只能用于外部脚本文件。

noscript标签，用于不支持JavaScript的浏览器显示内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义文本内嵌脚本</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
	<script type="text/javascript" src="html/patch.js" defer></script>
	<noscript>
		<p>都什么年代了，没有JavaScript哪行？</p>
	</noscript>
</head>
<body>
	<p>我是谁？</p>
	<p>我从哪里来？</p>
	<p>我要到哪里去？</p>
</body>
</html>