JavaScript

Sillage777

已于 2023-03-02 16:31:33 修改

阅读量116

点赞数 3

分类专栏： PHP 文章标签： javascript 前端 html

于 2023-03-02 16:30:33 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_56378389/article/details/129303699

版权

PHP 专栏收录该内容

2 篇文章

订阅专栏

JavaScript简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能
手机等设备。
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。

JavaScript组成部分

ECMScript：脚本程序设计语言（JavaScript的核心）
BOM：浏览器对象模型（ Browser Object Model）
DOM：文档对象模型（ Document Object Model）

JavaScript功能

表单的验证：以往处理方式

表单提交 —> 服务端判断数据 —> 返回结果使用js处理方式：用户输入 —> 提交之前检查数据合法性 —> 获取到数据结果 —> 最终提交内容
运行在服务端。例如提供http服务、实现文件操作等
实现小游戏
实现网页特效。例如选项卡、幻灯片等

JavaScript样例

验证用户名和密码是否为空

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单验证</title>
	</head>
	<body>
		<from method="post" action="">
			账号：<input type="text" name="username" id="username"><br>
			密码：<input type="password" name="password" id="password"><br>
			<input type="submit" name="提交" id="button">
		</from>
		<script type="text/javascript">
			document.getElementById('button').onclick = function(){
				if(!document.getElementById('username').value || !document.getElementById('password'.value)){
					alert('用户名或密码为空！');
					return false;
				}
			}
		</script>
	</body>
</html>

JavaScript如何应用到页面中

行内应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS行内应用</title>
	</head>
	<body>
		<input type="button" value="button" onclick="alert('hello JS');">
	</body>
</html>

内部应用（内嵌）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS内部应用</title>
	</head>
	<body>
		<!-- script标签用于执行脚本代码，默认的type值为"text/javascript"，指定按照js的语法执行 -->
		<script type="text/javascript">
		window.alert('hello JS');// window.alert 等价于 alert
		</script>
	</body>
</html>

外部应用（外联）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS外部应用</title>
	</head>
	<body>
		<script type="text/javascript" src="./hello.js"></script>
	</body>
</html>

hello.js

alert('hello JS');

JavaScript基础语法

1.变量

1.1程序构成

任何编程语言程序组成都可以划分为3个部分：

表达式
变量
流程控制语句

1.2表达式

表达式即进行各种各样的运算
对于表达式所计算出的结果需要存储，方便后期使用进行运算

1.3变量

申明变量： var 变量名称（开辟一个内存空间）
申明变量且初始化： var 变量名称 = 变量值

1.3.1变量的使用

变量名称的首字母只能是字母、下划线(_)或美元符号($)，例如：变量名叫做 “1name” 首字母为数字不合法
变量名中不能包含空格或标点符号
变量名区分大小写，不能使用内置的关键字，例如： if、for、switch、break 等
变量名尽量以可读性命名，即见名知意，例如：姓名 name，年龄 age
推荐变量名采用首字母小写的驼峰式命名，例如 userInfo
使用下划线分隔方式命名，例如 user_info

2.数据类型

2.1数据类型的分类

在 JS 中，数据类型从大方向可以划分为两类：

基本数据类型：数字型；字符串型；布尔类型；undefined；null
引用数据类型：数组；对象

也可以分为三类：

常用数据类型数字型：字符串；布尔
特殊数据类型：undefined；null
复合数据类型：数组；对象

2.2数字类型

数字类型（Number）表示变量存储的值为数字。数字包括正数、负数、整数与小数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数字类型</title>
	</head>
	<body>
		<script type="text/javascript">
			// 变量为容器，容器中保存的数据类型是什么格式，就代表的是什么数据类型
			var a = 10; // 申明一个变量a，保存的值为数字类型
			// typeof 为 JS 中的内置语句，用来查看变量保存的值的数据类型
			console.log(typeof a);
			var height = 1.78;
			console.log(typeof height);
			var money = -1000;
			console.log(typeof money);
			// 数字类型的数据可以进行数学运算
			// = 号代表为赋值操作，将 = 号右侧的表达式运算的结果赋值给 = 号左侧的变量
			money = money + 2000;
			console.log("计算之后的结果为：",money);
			// 进行除法运算
			console.log(money/31);
			// 当被除数为0时，结果无意义，显示为 Infinity
			console.log(money/0);
			// NAN 表示不是一个数字 Not A Number
			// "a" 不是数字类型的数据
			console.log("a" * 10);
			console.log(a * 10);
		</script>
	</body>
</html>

输出结果：

在这里插入图片描述

2.3字符串类型(String)

使用单引号或者双引号包裹起来的字符就是字符串类型(String)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字符串类型</title>
	</head>
	<body>
		<script type="text/javascript">
			// 使用双引号包裹
			var name = "爱新觉罗溥仪";
			// 使用单引号包裹
			var name2 = '溥仪';
			console.log(typeof name,typeof name2);
		</script>
	</body>
</html>

输出结果：

在这里插入图片描述

2.3.1单双引号混合使用的情况

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字符串类型</title>
	</head>
	<body>
		<script type="text/javascript">
			var info = '"PHP"是世界上最好的语言！';
			console.log(info);
			var info2 = "'HTML'是超文本标记语言！";
			console.log(info2);
		</script>
	</body>
</html>

输出结果：

在这里插入图片描述

2.3.2转义字符

转义字符即"\开头"用于在字符串中需要输出特殊的符号使用。转义字符比较多常用的包括’（输出单引号）、\n(换行)、\r(回车) 、"(输出双引号)
常用转义字符所对应的意义：

转义字符	意义	ASCII码值(十进制)
\n	换行(LF)，将当前位置移到下一行开头	010
\r	回车(CR)，将当前位置移动到本行开头	013
\t	水平制表(HT)(跳到下一个TAB位置)	009
\\	代表一个反斜杠字符"\"	092
\’	代表一个单引号字符	039
\"	代表一个双引号字符	034
?	代表一个问号	063
\0	空字符(NULL)	000

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字符串类型</title>
	</head>
	<body>
		<script type="text/javascript">
			// 使用双引号时，里面的单引号不借助转义字符
			var name = "My name's Sillage";
			console.log(name);
			// 使用单引号时，需要借助转义字符来输出单引号
			var name2 = 'My name\'s Sillage';
			console.log(name2);
			// 其他转义字符的使用
			var info = '勒索\t病毒通常使用非对称和对称加密算法组合的形式来加密文件，\n绝大部分勒索病毒均无法通过技术手段解密，一般无法溯源，危害巨大。';
			console.log(info);
		</script>
	</body>
</html>

输出结果：

在这里插入图片描述

2.4布尔数据类型(boolean)

布尔数据类型表示一种状态：一般使用布尔值表示真与假，布尔值本身没有特别含义，但是经常会使用在流程控制上
布尔类型可以出现的值为：true / false

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>布尔类型</title>
	</head>
	<body>
		<script type="text/javascript">
			// 手动指定变量的值为真，可以作为标识符使用
			var n1 = true;
			console.log(typeof n1); // boolean
			// 使用运算符获取布尔值
			var a = 10;
			var b = 20;
			// 判断a是否大于b，如果a大于b，结果为真，否则结果为假
			console.log(a > b); // false
		</script>
	</body>
</html>

输出结果：

在这里插入图片描述

2.5 undefined

undefined 类型只有一种值，就是 undefined。一般是申明变量没有初始化就为 undefined

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>undefined</title>
	</head>
	<body>
		<script type="text/javascript">
			// 只是申明了a变量
			var a; // => undefined
			console.log(a); // undefined
			a = 10;
			console.log(a); // 10
		</script>
	</body>
</html>

输出结果：

在这里插入图片描述

2.6 null

null 数据类型的值也只有一个，就是 null，null 代表为空

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>null</title>
	</head>
	<body>
		<script type="text/javascript">
			var a = null;
			console.log(null == a);
			console.log(typeof a);
		</script>
	</body>
</html>