Web前端——JavaScript基础

最新推荐文章于 2024-06-17 02:47:03 发布

硝酸童不酸

最新推荐文章于 2024-06-17 02:47:03 发布

阅读量1k

点赞数 3

分类专栏： Web前端文章标签： 1024程序员节 javascript 前端学习

本文链接：https://blog.csdn.net/qq_51594459/article/details/127504690

版权

Web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript

一、JavaScript概述
二、嵌入JS的方式
三、JS基础语法
总结

一、JavaScript概述

JavaScript是一种嵌入到 HTML 页面内，运行在客户端、由浏览器进行编译运行的脚本语言，具有控制程序流程、实现动态效果的功能

HTML CSS JS三者的关系
HTML是主体，CSS用来修饰HTML，JS是用来操作HTML和CSS的，修改HTML中的元素，修改CSS的样式，达到网页的动态效果

一个完整的 JavaScript 主要由以下三个部分组成。

ECMAScript
ECMAScript 是一种标准的脚本语言规范，它规定了 JavaScript 的基础语法部分，包括变量和数据类型、运算符、逻辑控制语句、关键字和保留字以及对象等。简单可以把ECMAScript 理解为接口，而 JavaScript 为该接口的实现。
BOM
BOM（Browser Object Model，浏览器对象模型）提供了可独立于内容与浏览器进行交互的对象，主要用于管理浏览器窗口与窗口之间的通讯。
DOM
DOM（Document Object Model，文档对象模型）是 HTML 文档对象模型定义的一套标准方法，用来访问和操纵 HTML 文档

二、嵌入JS的方式

1.在事件句柄中提供JS代码

1.JS是一种基于事件驱动型的编程语言，一般都是依靠事件来触发JS代码执行的。
2.在JS当中，任何一个事件都有对应的一个事件句柄。所有的事件句柄都是在事件名称面前添加on
例如：

事件	事件名	事件句柄
鼠标单击事件	click	onclick
鼠标双击事件	dblclick	ondblclick
获取焦点事件	focus	onfocus
失去焦点事件	blur	onblur

3.所有的事件句柄都是以标签的属性形式存在
4.在JS中有一个内置的隐藏对象：window，全部小写
window代表的是浏览器窗口对象，也可以直接拿来使用
window对象有一个alert方法/函数，可以完成弹窗操作
举例：鼠标点击按钮，弹出对话框
测试代码：
在这里插入图片描述

2.脚本块

JavaScript 代码块（包含在<script type=”text/javascript”>标签内的代码）除了可以放在<body>标签内，还可以写入到<head>标签内，实际开发中通常根据需求来决定JavaScript代码块的位置
在这里插入图片描述

3.引入外部独立的JS文件

在这里插入图片描述

三、JS基础语法

1.变量和对象

JavaScript 是一种弱类型语言，在声明变量时，不需要特别指定变量的类型，变量的类型由赋给变量的值来确定
声明变量的语法统一为：var 变量名 = 值；
变量未赋值，系统默认赋值undefined
例子
在这里插入图片描述
x 和 y 属于 number类型，s 属于 string 类型，b 属于 boolean 类型，arr 属于 object 类型，und 属于 undefined 类型，nul 属于 null 类
在 JavaScript 中，对象也变量，但是对象包含很多值
定义对象的具体语法如下。

var obj = {变量名 1：“变量值 1”，变量名 2：“变量值 2

对象也可以有方法，方法是在对象上执行的动作
在这里插入图片描述
person.firstName表示访问 firstName属性
person.fullName()表示访问 fullName()方法

2.常用的输入输出

JavaScript 的输入和输出主要用来让用户和程序进行交互，常用的输出有警告框（alert）输出和控制台（console）输出，常用的输入有提示框（prompt）

(1).警告框输出

alert()方法会弹出一个包含一个字符串和一个“确定”按钮的对话框。该方法的参数可以是变量的值，也可以是表达式的值，如果要显示其他类型的值，则需要强制转换为字符串

<script type="text/javascript">
	var name = "Jack";
	alert("my name is " + name)
	var age = 32;
	alert("my age is " + String(age))
</script>

(2).控制台输出

可以使用 console 对象的 log()方法在浏览器的控制台输出程序的内容

<script type="text/javascript">
	var name = "Jack";
	console.log("My name is " + name )
</script>

控制台输出在实际开发中主要用于程序的调试，十分常用

(3).提示框输入

Prompt()方法会弹出以个提示框，用于等待用户输入数据，该方法的返回值会返回用户
输入的数据

<script type="text/javascript">
	var cls = prompt("请输入你所在的班级: ")
	alert("输入的班级为：" + cls)
</script>

3.函数

语法格式：
JS中的函数不需要指定返回值类型，返回什么类型都行
在这里插入图片描述
JavaScript 在定义函数的参数时无需类型检查和类型限定，形参的类型由实际传进来的参数值来确定
例子：

<script type="text/javascript">
	function hello(name, age) {
		alert("你好：" + name + age)
	}
	hello("Jack", 99)
</script>

3.事件

还有一种常见的函数定义方式为匿名定义，通常用于和 JavaScript 的事件绑定
事件是使用 JavaScript 实现网页特效的灵魂，当用户与浏览器交互时会触发各类事件

常见的事件及其触发条件

名称	事件
onblur	失去焦点
onchange	下拉列表选中项改变，或文本框内容改变
onclick	鼠标单击
ondblclick	鼠标双击
onfocus	获得焦点
onkeydown	键盘按下
onkeyup	键盘弹起
onload	页面加载完毕
onmousedown	鼠标按下
onmouseover	鼠标经过
onmousemove	鼠标移动
onmouseout	鼠标离开
onmouseup	鼠标弹起
onreset	表单重置
onselect	文本被选定
onsubmit	表单提交

例子：

<body>
	<script type="text/javascript">
		function hello(name, age) {
			alert("你好：" + name + age)
		}
	</script>
	<input type="button" value="打招呼" onclick="hello('jack', 99)">
</body>

4.BOM

BOM 提供了独立于内容的、可以与浏览器窗口交互的一系列对象，其中 window 对象是整个 BOM 的核心。
在浏览器打开网页后，首先看到的是浏览器窗口，抽象来看即为 window对象

(1).window对象的方法

常见方法：

名称	说明
alert()	警告对话框
prompt()	提示框
confirm()	确认框
setTimeout()	在指定的毫秒数后调用函数
setInterval()	按照指定的周期循环调用函数

使用 window 对象调用方法的格式为：window.方法名()；
由于 window 对象是全局对象，因此在访问 window 对象的方法或属性时，可以省略window 对象。可以直接使用 alert()方法来直接创建警告框，而完整的写法应该是window.alert()

setTimeout()
该函数用于在指定的毫秒数后调用函数或表达式
以下代码使用该函数实现了 3秒后弹出对话框的功能。

function timeAlert() {
	setTimeout("alert('闹钟 3s')", 3000)
}

setInterval()
与 setTimeout()函数不同的是，setInterval()函数会在一定周期内不停的调用某一函数，
直到窗口被关闭或者强制停止。
例如以下代码会每隔 3 秒弹出警告框

function timeInterval() {
	setInterval("alert('闹钟每隔 3s')", 3000)
}

JavaScript 内置的**clearTimeout()和 clearInterval()**这两个方法可以用来清除定时器，通常由事件来触发。

例子：

<body>
	<button onclick="timeInterval()">setTimeInterval 定时器</button>
	<button onclick="javascript:clearInterval(t)">清除 timeInterval 定时器
	</button>
	<script>
		var t;
		function timeInterval() {
			t = setInterval("alert('闹钟每隔 3s')", 3000)
		}
	</script>
</body>

这里将定时器标识为全局对象 t，然后将 t 传入 clearInterval()函数，即可清除定时器 t

(2).window对象的属性

window 对象的常见属性

名称	说明
history	历史URL信息
location	当前URL信息
document	当前文档对象

History 对象
History 对象包含用户的浏览历史等信息，它在程序中可以代替浏览器的后腿（前进）按钮来访问历史记录。
History 对象常用方法

名称	说明
Back()	返回上一页
Forward()	返回下一页
Go(n)	n 为整数，整数表示前进 n 个页面，负数表示后退 n 个页面

以下代码实现了浏览器的前进和后退按钮功能。

<body>
	<input type="button" value="后退" onclick="history.back()">
	<input type="button" value="前进" onclick="history.forward()">
</body>

location 对象
location 对象可以访问浏览器的地址栏，最常见的功能便是动态跳转到另外一个页面，跳转的方法是修改 location 的 href 属性，
下面代码可以根据用户的输入来跳转到指定的页面

<script type="text/javascript">
	url = prompt("请输入要跳转的 URL 地址： ");
	location.href = url
</script>

使用超链接也能实现页面的跳转，但超链接跳转通常是静态跳转（URL 需直接指定），而 location 对象能实现动态跳转
在这里插入图片描述
document 对象
document 对象即是 window 对象的一部分，也代表了整个页面（文档），可用来访问页面中的所有元素（页面元素是一个树形结构）。
document 对象的常用方法如下表

名称	描述
Write()	向页面写文本
getElementById()	根据元素 ID 返回该元素的引用
getElementsByName()	根据元素 name 属性名称返回对象的集合
getElementsByTagName()	根据元素的标签名返回对象的集合

举个例子：

<body>
	<script type="text/javascript">
		document.write("简单动态效果");
		function changeCity() {
			document.getElementById("zcity").innerHTML = "上海";
		}
		function getZCity() {
			var zcities = document.getElementsByName("zcity");
			var str = '';
			for (var i = 0; i < zcities.length; i++) {
				if (zcities[i].checked == true)
					str += zcities[i].value + " ";
			}
			document.getElementById("text").innerHTML = str;
		}
	</script>
	<div id="zcity">杭州</div>
	<input type="button" value="改变城市" onclick="changeCity()"> <br>
	<input type="checkbox" name="zcity" value="温州">温州
	<input type="checkbox" name="zcity" value="宁波">宁波
	<input type="checkbox" name="zcity" value="台州">台州 <br>
	<input type="button" value="获取浙江省城市" onclick="getZCity()"> <br>
	<p id="text"></p>
</body>

显示效果：
在这里插入图片描述

5、innerHTML和innerText

属性，用于获取和设置元素内部的内容
两者的区别：
innerHTML会将后面的字符串当做一段HTML代码解释并执行，最终展示一个效果
innerText即使后面是一段HTML代码，也只是将其当作一个普通的字符串来处理
测试代码：

<!doctype html>
<html>
	<head>
		<title>根据ID获取元素</title>
	</head>
	<body>
		<script type="text/javascript">
			function setContent(){
				var divElt = document.getElementById("mydiv");
				divElt.innerHTML = "<font color='green' size='4'>用户名不能为空</font>"
				// divElt.innerText = "<font color='green' size='4'>用户名不能为空</font>"
			}
		</script>
		<div id="mydiv"></div>
		<input type="button" value="设置div的内容" onclick="setContent()" />
	</body>
</html>