【1】JavaScript 的基本语法_jsoup执行script代码-优快云博客

本文链接：https://blog.youkuaiyun.com/CharlesYuangc/article/details/136751638

本文详细介绍了JavaScript的基本语法，包括HelloWorld示例，脚本在HTML中的正确嵌入位置，外部脚本和内联脚本的使用注意事项，语句规则，以及注释的添加方法。重点讲解了如何优化代码结构和浏览器兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【1】JavaScript 的基本语法

使用 JavaScript 编写 [Hello World]
将 JavaScript 嵌入 Html 文件中 - \<script\> 标签 -
语句（Statement）的规则
插入注释

使用 JavaScript 编写 [Hello World]

新建代码

使用编辑器，编辑 hello.html 文件，其代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello World</title>
		
		<!-- JavaScript 的脚本代码 -->
		<script type="text/javascript">
			window.alert('Hello World!!!');
		</script>
		
		<!-- 无法使用 JavaScript 的情况 -->
		<noscript>您的浏览器当前版本无法支持 Javascript，请升级浏览器！！！</noscript>
	</head>
	<body>
	</body>
</html>

当前使用的编辑器是 HBuilder X ，可访问官网：https://www.dcloud.io/ ，自行下载。

保存创建的代码

在这里插入图片描述
编码字符使用 UTF-8，在编辑器的右下角的状态栏中可以更改字符集编码。

运行代码

当前运行的浏览器是 Chrome，可以选择其它浏览器；前提是：自己的电脑上已经安装过了。
操作步骤、如下，
运行 -> 运行到浏览器(B) -> Chrome
在这里插入图片描述
运行的结果如下：

如果对话框没有显示，那么请通过开发者工具（按F12）查看错误情况。
此处用于模拟报错，将【第9行】代码修改错误，如下：

按 F12 后，打开开发者工具，可以清晰看到报错（也有提示 hello.html:9)
在这里插入图片描述

日常开发代码调试时，会经常使用到开发者工具（按F12，即可打开）

将 JavaScript 嵌入 Html 文件中 - <script> 标签 -

写法 <script> 元素标签

<script type="text/javascript">
 javascript 代码
</script>

type 属性标识脚本的种类。一般设置为 text/javascript 。在 HTML5 中 text/javascript 是默认值，所以也可以省略不写。

放置 <script> 元素标签的位置

(1) <body> 元素下（任意的位置）

将<script>元素中的处理结果直接放在页面中输出时使用。是以前常见的写法，但是内容和代码混合在一起，从页面的可读性和维护性的角度来看是不可行的。现在基本上已经不在使用了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello World</title>
	</head>
	<body>
		
		... 任意的内容... 
		
		<script type="text/javascript">
			... JavaScript 代码 ... 
		</script>
		
		... 任意的内容... 
		
	</body>
</html>

(2) <body> 元素下（</body>闭合标签之前）

一般的浏览器，在脚本的读取或者执行完成之前是不进行绘制的。因此，读取或者执行时间较长的脚本，，会直接导致页面绘制的延后。如果有巨大的脚本更是如此。
因此，常常将<script>元素放在页面的末尾作为页面快速化的手段。这样，在绘制完页面之后，可以慢慢的读取和执行脚本，所以看起来绘制的速度改善了。
一般，Javascript处理通常是在页面都就绪了之后执行的，所以这样基本上就没有什么弊端。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello World</title>
	</head>
	<body>
		
		... 任意的内容... 
		
		<script type="text/javascript">
			... JavaScript 代码 ... 
		</script>
	</body>
</html>

(3) <head> 元素下

但是，也有 (2) 无法处理的情况。在 Javascript 中，有定义函数的<script>元素必须放在调用函数的<script>元素之前这样的规则（即函数的定义、调用在同一个<script>元素中情况）。例如：在<body>元素下需要调用的函数，必须在<head>元素下事先读取。
另外，即使是从脚本中输出样式表这样的情况，也要在输出正文之前下放置<head>元素下的<script>元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello World</title>
		
		<script type="text/javascript">
			... JavaScript 代码 ... 
		</script>
		
	</head>
	<body>
		
		... 任意的内容... 
		
	</body>
</html>

另外，<script>元素标签在 .html 文件中放多少个是没有限制的，因为页面最终会将所有的 <script> 元素合并为一个来解释。

导入外部脚本

JavaScript 代码可以作为外部文件另外定义。

写法<script>元素（外部文件）

<script type="text/javascript" src="path" [charset="encoding"]></script>

path：脚本文件的路径。
encoding：脚本文件使用的字符编码。

例如，之前的案例代码也可调整为如下：
hello.js 文件内容如下：

<!-- JavaScript 的脚本代码 --> 
window.alert('Hello World!!!');

hello.html 文件内容如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello World</title>
		<script type="text/javascript" src="hello.js" ></script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

代码外部化，有以下优点：

通过分离视图和脚本，代码更易于复用。
通过脚本外部化， .html 文件更简洁。

并用外部脚本和内联脚本时的注意点

并用外部脚本和内链脚本时，请注意不能像下面这样写：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello World</title>
		
		<script type="text/javascript" src="hello.js" >  // 这里已经引用外部脚本
			// 这里内部还写了其它代码
			console.log('你好，世界！！！');
		</script>
		
	</head>
	<body>
	</body>
</html>

因为设定了 src 属性，<script>元素下的内容会被忽略。如果要并用外部脚本和内联脚本时，必须像下面一样将<script>元素放在别处。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello World</title>
		
		// 第一个：script 标签
		<script type="text/javascript" src="hello.js" >  // 这里已经引用外部脚本
		</script>
		
		// 第二个：script 标签
		<script type="text/javascript">
			// 这里内部还写了其它代码
			console.log('你好，世界！！！');
		</script>
		
	</head>
	<body>
	</body>
</html>

在锚标签中嵌入脚本 - JavaScript 伪协议

除了使用<script>元素外，还可以在锚标签的 href 属性中以 javascript:~ 的形式嵌入脚本。这样的写法称为 JavaScript 伪协议

<a href="JavaScript:脚本代码"> </a>

例如：实现点击链接时打开对话框，代码如下：

<a href="JavaScript:window.alert('Hello World!!!');"> </a>

语句（Statement）的规则

(1) 句末添加分号 ;
虽然分号也可以省略，但是会造成语句的段落不明确，所以一般不建议省略句末分号。除非有特别的理由，否则不要省略分号。

// 如下代码的句末省略了分号，虽然不会造成错误，但是不推荐。
window.alert('Hello, World !!!')

(2) 语句中途也可以包含空格或者换行 / 制表符
例如，如下的代码是正确的 JavaScript 代码

window.
	alert
		('Hello World !!!');

虽然上述代码不会报错，但是这么撰写代码只会使代码显得冗余、不易阅读，且无实际意义。但若一行较长的代码，建议这么使用：适当换行。

(3) 严格区分大小写
JavaScript的语句可以相当灵活的书写，但有一点需要特别注意，那就是严格区分大小写。例如，下面的代码时不可以的。

// 此处的 alert 单词首字母是 大写。
window.Alert('hello world !!!');

扩展：
多条语句也是可以写在一行的。（不推荐）
例如，如下代码：
window.alert('HelloWorld!!!'); window.alert('你好，世界！！！');

插入注释

注释，是和代码没有关系的一些备注信息。
JavaScript中，有3种添加注释的写法：

写法	概要
// comment	单行注释。从 // 开始到行末都会被注释
/* comment */	多行注释。/* ~ */ 包围的内容都会被注释
/** comment */	文档注释。/** ~ */ 保温的内容都会被注释

需注意的是：在代码运行时，注释是不会随之运行的。