JavaScript基础入门-优快云博客

本文链接：https://blog.youkuaiyun.com/Miracle_Yan/article/details/85039914

本文全面介绍了JavaScript的基本概念，包括其在Web开发中的作用、语法、数据类型、数组、函数及事件处理，同时深入探讨了DOM操作技巧，是初学者不可多得的JavaScript学习资源。

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

一，简介

JavaScript 是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能。JavaScript 的主要功能是：动态的修改 HTML 页面内容，包括创建、删除 HTML 页面元素，修改 HTML 页面元素的内容、外观、位置、大小等。JavaScript 由以下三个部分组成：

ECMAScript，描述了该语言的语法和基本对象。
DOM（文档对象模型），描述处理网页内容的方法和接口。
BOM（浏览器对象模型），描述与浏览器进行交互的方法和接口。

二，使用 JavaScript

在 HTML 页面中使用 JavaScript 有两种方式。

使用 javascript: 前缀构建执行 JavaScript 代码的 URL
使用 <script…/> 元素来包含 JavaScript 代码

第一种方式，可以用在所有可以设置 URL 的地方，当用户触发该 URL 时， javascript: 之后代码就会获得执行。但是，如果页面需要包含大量的 JavaScript 代码，则建议使用第二种方式。<script…/>元素即可作为<head…/>元素的子元素，也可以作为<body…/>元素的子元素。
代码示例：

<!DOCTYPE html>
<html>
<head>
	<title>Demo</title>
	<meta charset="utf-8">
	<!-- 使用 script 元素引入外部的 JavaScript 代码 -->
	<script type="text/javascript" src="demo.js"></script>
	<!-- 使用 script 元素直接在当前页面中嵌入 JavaScript 代码 -->
	<script type="text/javascript">
		function clickedBtn1() {
			alert("您点击了按钮1");
		}
	</script>
</head>
<body>
	<!-- 使用 javascript: 前缀 + JavaScript的方式 -->
	<a href="javascript:alert('Hello');">Say Hello!</a>
	<br/>
	<button id="btn1" onclick="clickedBtn1()">按钮1</button>
	<button id="btn2" onclick="clickedBtn2()">按钮2</button>
</body>
</html>

三，JavaScript 输出

JavaScript 可以通过不同的方式来进行输出：

使用 window.alert() 弹出警告框
使用 document.write() 将内容写入 HTML文档中
使用 console.log() 将内容输出到浏览器的控制台

熟练的使用这些输出方法，可以帮助我们更好的调试 JavaScript 代码。
代码示例:

<!DOCTYPE html>
<html>
<head>
	<title>Demo</title>
	<meta charset="utf-8">
	<script type="text/javascript">
		function clickedBtn1() {
			// window.alert() 可以省略 window 前缀
			alert("您点击了按钮1");
			// 在载入页面后，浏览器输出流自动关闭。
			// 在此之后，任何一个对当前页面进行操作的document.write()方法将打开—个新的输出流
			// 它将清除当前页面内容(包括源文档的任何变量或值)。
			document.write("<font color='red' size='3'>document.wirte</font>");
			console.log("clickedBtn1方法执行完毕");
		}
	</script>
</head>
<body>
	<button id="btn1" onclick="clickedBtn1()">按钮1</button>
</body>
</html>

四，基本语法

1，基本类型

JavaScript 一共有五种基本数据类型：

数值类型：number
字符串类型：string
布尔类型：boolean
未定义：undefined
空：null

2，变量声明

JavaScript 是弱类型语言，使用变量之前，可以无需定义，想使用某个变量时直接使用即可。归纳起来，JavaScript 有两种方式来使用变量：

隐式定义：直接给变量赋值（不推荐）
显示定义：使用 var 关键字定义变量

代码示例：

<script type="text/javascript">
	a = 1;
	var b = "123";
	var c = '2134';
	var d = false;
	var e = null;
	// 我们可以使用 typeof() 方法来查看变量的类型
	alert(typeof(a));	// number
	alert(typeof(b));	// string
	alert(typeof(c));	// string
	alert(typeof(d));	// boolean
	alert(typeof(f));	// undefined
</script>

3，数组

数组是一系列的变量。与其他强类型语言不同的是，JavaScript 中数组元素的类型可以不相同。
JavaScript 数组的特征：

JavaScript 数组长度是可变的
JavaScript 数组元素的类型可以不相同
JavaScript 数组访问不会产生数组越界，未赋值的数组元素值为 undefined

代码示例：

<script type="text/javascript">
		// 定义一个空的数组
		var a = [];
		// 定义一个数组并初始化
		var a = [1, 2, 3];
		// 定义一个长度为3的数组
		var b = [3];
		// 取出数组元素
		var c = a[0];
		// 给数组元素赋值
		b[0] = "";
</script>

4，函数

JavaScript 使用 function 关键字来定义函数。
代码示例：

<script type="text/javascript">
		function getSum(a, b){
			alert(a + b);
		}
</script>

5，常用的事件

onload 事件会在页面或图像加载完成后立即发生
onclick 事件会在对象被点击时发生
ondbclick 事件会在对象被双击击时发生
onfocus 事件会在对象获得焦点时发生
onblur 事件会在对象失去焦点时发生
onchange 事件会在对象内容改变时发生
onkeyup 事件会在键盘按键被松开时发生
onmouseover 事件会在鼠标指针移动到指定的对象上时发生
onmouseout 事件会在鼠标指针移出指定的对象时发生

代码示例：

<!DOCTYPE html>
<html>
<head>
	<title>Demo</title>
	<meta charset="utf-8">
	<script type="text/javascript">
		function init(){
			alert("页面加载完成");
		}
	</script>
</head>
<body onload="init()">
	Hello!
</body>
</html>

6，DOM 操作

由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。
始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：

更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

代码示例：

<!DOCTYPE html>
<html>
<head>
	<title>Demo</title>
	<meta charset="utf-8">
	<script type="text/javascript">
		function init() {
			// 获取 HTML 页面元素
			// 由于 HTMl 页面的是从上往下加载的
			// 所以我们需要在页面加载完成以后来获取 HTMl 元素
			// 获取具有指定 ID 的元素
			var spanElement = document.getElementById("a");
			// 获取所有 name 属性为 username 的元素
			var usernameElements = document.getElementsByName("username");
			// 获取所有定义了 b 类的元素
			var pElements = document.getElementsByClassName("b");
			// 获取所有 body 元素
			var bodyElements = document.getElementsByTagName("body");
			
			// 修改 span 元素的内容
			spanElement.innerHTML = "<font color='red' size='5'>123</font>";
			
			// 获取 body 元素的所有子元素
			var bodyChildren = bodyElements[0].children;
			// 遍历 body 元素的所有子元素
			for(var i in bodyChildren) {
				console.log(bodyChildren[i]);
			}
			
			// 创建一个文本节点
			var text = document.createTextNode("Hello World!");
			// 将文本节点添加到 body 元素中
			bodyElements[0].appendChild(text);
			
			// 删除页面中的第一个 p 元素
			var pParentElement = pElements[0].parentElement;
			pParentElement.removeChild(pElements[0]);		
		}
	</script>
</head>
<body onload="init()">
	Hello!
	<br/>
	<span id="a">1234</span>
	<p class="b">这是一个段落</p>
	<input type="text" name="username" placeholder="请输入用户名"/>
	<br/>
	<input type="text" name="password" placeholder="请输入密码"/>
</body>
</html>