JavaScript入门

JavaScript是一种轻量级、解释型的Web开发语言，该语言系统不是很庞杂，简单易学。由于所有现代浏览器都已经嵌入了JavaScript引擎，JavaScript源代码可以再浏览器中直接被解释执行，用户不用担心支持问题。

在网页中插入JavaScript代码

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			document.write("<h1>Hello World</h1>")
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

< script >和< /script >标签配合使用，作为脚本语言的标识符来分隔其它源代码，避免与HTML标签和CSS样式代码混淆。

在解析网页源代码时，浏览器检索到

document时JavaScript在浏览器中定义的一个对象，它表示HTML文档内容。write()是document对象的一个方法，它表示在网页文档中输出显示指定的参数内容。

< script >标签

< script >标签包含两个属性：

  • type:
    设置标签包含脚本属于什么文本类型，如text/javascript属性值表示JavaScript代码类型的文本，默认值为text/javascript，所以可以不用设置。

  • language:
    设置标签包含脚本属于什么语言类型，javascript属性值表示javaScript语言类型。该属性主要适应早期浏览器的解析，因为它们会忽略掉type属性声明。

注意：一般来说，JavaScript代码可以被嵌入到网页的中的任何位置，如< head >标签的顶部、< head > 和 < /head > 标签之间、< body >标签的内部，甚至可以被放在< html > 或 < /html >标签的外部，浏览器都能够正确解析。

但是，根据W3C标准，< script > 和 < link >标签作为HTML文档的一个节点而存在。因此，它们也应该包含在< html > 和 < /html >根节点内，以便构成合理的结构，方便DOM控制。

浏览器引擎是按照从上到下的顺序来解析网页源代码的。考虑到DOM结构模块的规范性，建议用户把JavaScript脚本代码写在 < head > 和 < /head >标签之间，或者写在< body >和< /body >标签之间，如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//JavaScript脚本
		</script>
	</head>
	<body>
		<!-- 网页内容 -->
		<script>
			//JavaScript脚本
		</script>
	</body>
</html>

每个网页可以包含多个< script >标签，每个< script >标签包含的代码被称为JavaScript脚本块。
一般建议把相同或相近功能的代码放在一个脚本块中，而不同的功能代码分别放在不同脚本块中会更适宜管理。
适当时可以把通用脚本模块放在单独的JavaScript文件中，或者把它们封装为一个独立的对象以方便进行调用。
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//公共函数
			function hello(user){
				return "<h1>Hello," + user + "</h1>";//输出参数值 
			}
		</script>
	</head>
	<script>
		//全局变量对象初始化
		var user = "World";
	</script>
	<body>
		<script>
			//程序执行代码
			document.write(hello(user));
		</script>
	</body>
</html>

在这里插入图片描述

使用JavaScript文件

与CSS文件一样，JavaScript代码可以存放在独立的文件中，以增强JavaScript脚本的可重复调用。JavaScript文件是一个文本类型的文件，在任何文本编辑器中都可以被打开和编辑，JavaScript文件的扩展名为js。

引入JavaScript文件时，可以使用< script >标签实现，通过该标签的src属性指定JavaScript文件的URL（统一资源定位符）即可。

示例：
新建一个文本文件，另存为test.js，在该文件中书写一个公共函数，作用是返回字符串的长度

//公共函数：计算字符串的实际长度
function strlen(str){
	var len;//声明临时变量，存储字符串的实际长度
	var i;//声明循环变量
	len = 0;//初始化临时变量len为0
	for(i = 0; i < str.length; i++){//循环检测字符串中每个字符
		if(str.charCodeAt(i) > 255)//如果当前字符为双字节字符，+2
			len += 2;
		else 					   //如果当前字符为单字节字符，+1
			len++;
	}
	return len;//返回实际长度值
}

新建html文档，引入test.js。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 引入外部JavaScript文件 -->
		<script type="text/javascript" src="test.js" ></script>
	</head>
	<script>
		var str = "JavaScript编程语言";
		document.write("<h2>" + str + "</h2>");//输出变量的值
		document.write("<p>实际长度=" + strlen(str) + "字节</p>");//调用函数
	</script>
	<body>
	</body>
</html>

在这里插入图片描述

使用外部JavaScript文件，能够增强JavaScript模块化开发的程序，提高代码重用率。在网页开发中，用户应该养成代码重用的良好习惯，在编写JavaScript代码时，多使用外部JavaScript文件，这样能够提高项目开发的速度和效益。

Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

前端页面优化技巧

前端页面优化；网站加载速度提升技巧；增加用户体验度的实用小技巧；

avatar 开放原子开发者工作坊
cover

HTTP1.1协议详解

avatar 开放原子开发者工作坊

堆外缓存OHCache使用总结

一. 为什么用缓存用户数和访问量越来越大并发量/吞吐量要求越来越高连接数或者文件读写存在瓶颈应用和数据库所做的计算也越来越多如何能够有效利用有限的资源来提供尽可能大的吞吐量？一个有效的办法就是引入缓存什么是缓存?缓存（cache）最初用于CPU和主内存之间，指代访问速度比一般随机存取存储器（RAM）快的一种RAM。如今缓存的概念已被扩充，CPU与内存之间、内存和硬盘之间、硬盘与网络之间，都存在某种

avatar 开放原子开发者工作坊