【前端】JavaScript学习笔记

最新推荐文章于 2026-01-08 23:43:28 发布

原创最新推荐文章于 2026-01-08 23:43:28 发布 · 666 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #js #javascript #java #html

一、JavaScript简介

1.什么是JavaScript

被设置用来向HTML页面添加交互行为。
JavaScript是一种脚本语言（轻量级编程语言）。
由多行可执行的计算机代码组成。
通常被直接嵌入HTML页面。
是一种解释性语言（代码执行不能进行预编译）。

2.JavaScript的作用

HTML：它是整个网站的骨架。
CSS：它是对整个网站骨架内容进行优化（修饰）。
JavaScript：它能让整个页面具有动态效果。

3.JavaScript的组成

ECMAScript：核心，包含基本语法、变量、关键字、保留字、数据类型、语句、函数等等。
DOM：文档对象模型，包含整个HTML页面的内容。
BOM：浏览器对象模型，包含整个浏览器相关的内容。

二、JavaScript基础

1.语法

与java一样，变量、函数名、运算符以及其他一切都是区分大小写的。
变量是弱类型的，定义变量时只用var运算符，可以将它初始化为任何值。可以随时改变变量所存数据类型（尽量避免这样）。
每行结尾的分号可有可无（建议写上）。
注释与java相同。

2.变量

所有变量声明只能使用var。例如：var a = 123；var test；
可以不对变量进行初始化，变量声明不是必须的。
如果在函数内部使用var定义，那么它是一个局部变量，如果没有使用var定义，那么它是一个全局变量。

3.数据类型

原始数据类型：
- undefined：未定义的（已经声明，但为赋值）
- boolean：布尔类型
- number：数字类型（小数类型与整数类型）
- string：字符串类型
- object：对象类型，或null值（没有声明的变量值为null，类型为object）
- 注意：typeof运算符对于null值会返回object，这实际上是JavaScript最初实现中的一个错误，然后被ECMAScript沿用了。现在，null被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它任然是初始值。
引用数据类型：
- Array：数组
- Boolean：布尔
- Date：日期
- Math：算术
- Number：数字
- String：字符串
- RegExp：对象

4.等性运算符

单等于（=）：用于赋值。
双等于（==）：用于比较，字符串类型的变量会转换为number类型进行比较。
三等于（===）：用于比较，直接进行比较，不进行转换。

5.语句

与java类似。

6.函数

有名函数：function fun1();
匿名函数：function();

三、Document对象（DOM）

1.简介

当网页被加载时，浏览器会创建页面的文档对象模型。
DOM可以改变HTML元素。
DOM可以改变HTML属性。
DOM可以改变CSS样式。
可以对页面所有事件做出响应。

2.DOM HTML

改变HTML内容

//new HTML为页面内容
document.getElementById(id).innerHTML=new HTML;

改变HTML属性

//attribute为属性名，new value为属性内容
document.getElementById(id).attribute=new value;

3.DOM CSS

改变HTML样式

//property表示样式，new style为值
document.getElementById(id).style.property=new style;

4.DOM常用事件

onload和onunload事件：
- 页面加载事件、页面关闭事件。
- 用户在进入或者离开页面时被处罚，所有操作都可以放入其绑定的方法中。
- 可用于检测访问者的浏览器类型、浏览器版本，并基于这些信息来加载网页的正确版本，可用于处理cookie。
- 事件要绑定在body标签中。
onchange事件：
- 事件常结合输入字段的验证来使用，当用户改变输入的内容时，触发这个事件。
- 常用于多级联动。
- 事件通常绑定到input标签中。
onmouseover和onmouseout事件：
- 鼠标移入和移出事件。
- 事件可用于在用户鼠标移至某元素上方和移出元素时触发。
onmousemove事件：
- 鼠标被移动事件。
- 常用于标记已经查看过的信息。
onfocus和onblur事件：
- 聚焦和离焦事件，当鼠标点击输入框或离开输入框时，输入框会发生一定的变化，从而触发提示，常用于表单校验。
- 事件通常绑定在input标签中。
onclick和ondblclick事件：
- 鼠标单击或双击事件。
onkeydown和onkeypress事件：
- 键盘按下和松开事件，搜索引擎使用较多。
onsubmit事件：
- 表单提交事件，用于表单校验时是否提交。

四、Brower对象（BOM）

1.Window

Window表示浏览器的窗口。

常用方法

alert（“内容”）：将内容以弹窗形式输出。
setInterval（code，milliseconds）：按指定周期milliseconds执行代码串code。
clearInterval（）：清除定时操作。
setTimeout（code，milliseconds）：按指定时间milliseconds执行一次代码串code。
clearTimeout（）：清除定时操作。
confirm（“message”）：显示带有提示信息的确定取消框。
prompt（“message”）：显示带有提示信息的输入框。

属性

属性	描述
closed	返回窗口是否已经被关闭。
defaultStatus	设置或者返回窗口状态栏中默认文本。
document	对Document对象的只读引用。
frames	返回窗口中所有命名的框架，该集合是Window对象的数组，每个Window对象在窗口中含有一个框架。
history	对History对象的只读引用。
innerHeight	返回窗口的文档显示区的高度。
innerWidth	返回窗口的文档显示区的宽度。
length	设置或返回窗口。
location	用于窗口或框架的Location对象。
name	设置或返回窗口的名称。
navigator	对 Navigator 对象的只读引用。
opener	返回对创建此窗口的窗口的引用。
outerHeight	设置或返回一个窗口的外部高度。包含工具条与滚动条。
outerWidth	设置或返回一个窗口的外部宽度。包含工具条与滚动条。
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent	返回父窗口。
screen	对 Screen 对象的只读引用。
screenLeft	返回窗口相对于屏幕窗口的x坐标。
screenTop	返回窗口相对于屏幕窗口的y坐标。
screenX	返回窗口相对于屏幕的x坐标。
screenY	返回窗口相对于屏幕窗口的y坐标。
self	返回对当前窗口的引用。等价于 Window 属性。
status	置窗口状态栏的文本。
top	返回最顶层的父窗口。

方法

方法	描述
alert()	把键盘焦点从顶层窗口移开。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
close()	关闭浏览器窗口。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()	创建一个 pop-up 窗口。
focus()	把键盘焦点给予一个窗口。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。
moveTo()	把窗口的左上角移动到一个指定的坐标。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
print()	打印当前窗口的内容。
prompt()	显示可提示用户输入的对话框。
resizeBy()	按照指定的像素调整窗口的大小。
resizeTo()	把窗口的大小调整到指定的宽度和高度。
scrollBy()	按照指定的像素值来滚动内容。
scrollTo()	把内容滚动到指定的坐标。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

2.History

包含用户在浏览器中访问过的URL。
History对象是Window对象的一部分，可以通过window.history属性对其进行访问。

属性

属性	描述
length	返回历史列表中URL的数量。

方法

方法	描述
back()	加载history列表中的前一个URL。
forward()	加载history列表中的下一个URL。
go(num)	加载history列表中的某个具体页面。

3.Location

包含有关当前URL的信息。
Location对象是Window对象的一部分，可以通过window.location属性对其进行访问。

常用属性：
- href：是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。语法：location.href。
属性

属性	描述
hash	返回一个URL的锚部分
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
href	返回完整的URL
pathname	返回的URL路径名
port	返回一个URL服务器使用的端口号
protocol	返回一个URL协议
search	返回一个URL的查询部分

方法

方法	描述
assign()	载入一个新的文档
reload()	重新载入当前文档
replace()	用新的文档替换当前文档

4.Navigator

Navigator 对象包含有关浏览器的信息。

5.Screen

Screen 对象包含有关客户端显示屏幕的信息。
Screen

五、案例

1.使用JS完成注册页面表单校验

步骤分析：

确定事件（onsubmit）并为其绑定一个方法。
编辑这个方法，获取用户输入的数据，获取数据时需要在指定的位置定义一个id。
对用户输入的数据进行判断。
数据合法，表单可以提交。
数据不合法，给出错误信息，拦截表单提交。

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单校验</title>
		<script type="text/javascript">
			function checkForm(){
				var username = document.getElementById("username").value;
				if(username==""){
					alert("用户名不能为空！");
					return false;
				}else if(username.length<4&&username.length>0){
					alert("用户名长度不能小于4！")
					return false;
				}else if(username.length>20){
					alert("用户名长度不能大于20！");
					return false;
				}
				//校验密码
				var password = document.getElementById("password").value;
				if(password==""){
					alert("密码不为空");
					return false;
				}else if(password.length>0&&password.length<6){
					alert("密码不能小于6位");
					return false;
				}else if(password.length>20){
					alert("密码不能大于20位");
					return false;
				}
				//确认密码
				var repassowrd = document.getElementById("repassword").value;
				if(repassowrd!=password){
					alert("两次密码输入不一致");
					return false;
				}
			}
		</script>
	</head>
	<body>
		<div align="center">
			<form action="/userReg" name="userReg" onsubmit="return checkForm()" method="post">
				<table border="1px" cellpadding="0" cellspacing="0">
					<tr><td>用户名</td>
						<td>
							<input type="text" name="username" id="username"/>
						</td>
					</tr>
					<tr><td>密码</td>
						<td>
							<input type="password" name="password" id="password">
						</td>
					</tr>
					<tr><td>重复密码</td>
						<td>
							<input type="password" name="repassword" id="repassword">
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<input type="submit" value="提交">
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>

2.使用JS完成首页轮播图效果

步骤分析：

确定事件（onload）并为其绑定一个方法，onload绑定到body标签中。
编辑此方法。
编辑定时任务setInterval。
编辑定时任务中的方法。
通过变量的方式，进行循环（获取轮播图位置，并设置src属性，到最后一张图片时重置循环）。

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style>
			div{
				border: 1px solid red;
				width: 1610px;
				height: 830px;
				margin: auto;
				text-align: center;
				margin-top: 30px;
			}
		</style>
		<script type="text/javascript">
			function init(){
				setInterval("changeImg()",3000);
			}
			var i = 0;
			function changeImg(){
				i++;
				document.getElementById("img1").src="../img/"+ i +".jpg";
				//假设有三章图片，当到第三张图片时重置循环。
				if(i==3){
					i=0;
				}
			}
		</script>
	</head>
	<body  onload="init()">
		<div id="">
			<img src="../img/1.jpg" alt="图片" id="img1">
		</div>
	</body>
</html>