JavaScript（day0920）

已于 2023-09-20 21:51:14 修改
阅读量135 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
于 2023-09-20 14:51:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45842677/article/details/133070407
版权

1.JavaScript介绍

Java是面向对象语言，而JavaScript是函数式语言。

函数式语言没有对象归属，只关心数据操作。

编程语言的种类：

（1）结构化编程语言，比如C语言等。

（2）函数式编程语言，比如OCaml, Lisp等。

（3）逻辑式编程语言，比如Prolog等。

（4）面向对象程序语言，比如Java等。

  • JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript

  • JavaScript的标准是ECMAScript。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式命名为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015

web前端三层：

结构层    HTML          从语义的角度，描述页面结构

样式层    CSS           从审美的角度，美化页面

行为层    JavaScript     从交互的角度，提升用户体验

  • JavaScript（简称“JS”） 是一种具有函数优先的轻量级、解释型或即时编译型的编程语言

  • JavaScript是一种描述语言，基于对象和事件驱动的脚本语言

  • HTML与用户没有交互功能，网页只能看不能操作。 JavaScript用来制作web页面交互效果，提升用户体验

  • HTML 当做毛坯房，CSS当做装修，JavaScript当做智能家居

特点：

脚本语言（一种轻量级的编程语言）

一种解释性语言（无需预编译）

被设计为向HTML页面添加交互行为

运行于客户端（浏览器）

 2.JavaScript组成

 2.1 ECMAScript

(1)ECMAScript定义了脚本语言的所有属性、方法和对象，包括：
    语法、类型、关键字、保留字、运算符、对象等
(2)除了JavaScript外，同时也是Nombas的ScriptEase和Flash脚本ActionScript的基础

 2.2 DOM

(1)JS中将整个文档对象（html文件）描述成树状模型结构，有元素节点、属性节点、文档节点等等
(2)节点之间有父子关系，JS可以通过描述的节点及关系，动态的操作节点和节点属性

2.3 BOM

(1)描述与浏览器进行交互的方法和接口
(2)可对浏览器窗口进行访问和操作，例如：弹出新的浏览器窗口、移动或关闭浏览器窗口等

3 JavaScript引入方式

3.1 使用script标签编写JS代码

<!-- 
    嵌入式：
        (1)在script标签中写JS代码
        (2)调试代码时使用
-->
<script type="text/javascript">
    console.log("内嵌式");
</script>

3.2 使用script标签通过src属性引入js文件

<!-- 
  外链式：
    (1)在其他xx.js文件中写JS代码，通过script标签引入
    (2)开发时很常用
 -->
<script src="../js/basic.js" type="text/javascript" charset="utf-8"></script>

3.3 直接在元素事件上编写JS代码

 <!-- 
  行内式：
    (1)直接写到元素的内部
    (2)不建议使用
 -->
<input type="button" value="按钮" οnclick="console.log('行内式')" />

3.4 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="点我" onclick="javascript:console.log(3)"/>
		<a href="javascript:void(0)">aaaa</a>
	</body>
	<script src="js/t1.js">
		//script标签引入src后，内部标签体失效，所以321不出来
		console.log(2);
	</script>
	<script>
		//一般把script标签写在body下边
		//向控制台输出 console.log("hello js！！！");
		console.log("hello js!!!");

/*		
		js引入方式
		1.页面中使用script标签
		  一般把script标签写在body下边 保证页面元素已加载结束
		2.使用script标签 带src属性 引入js文件
		  带src的script标签 标签体无效(js代码无效)
		3.在元素上直接编写js代码
		  尽量少用	javascript:void(0) a标签跳转效果禁用
*/
	</script>
</html>

4 JavaScript变量定义

弱变量

4.1 var 

  • 使用var声明变量

  • 具有全局作用域和函数内作用域

  • 无块作用域

// 全局变量->全局作用域
var a = 1;
console.log(a); 
function myFun1() {
  console.log(a); 
  // 函数内变量->函数作用域
  var b = 2;
  console.log(b); 
}
myFun1();
// 下面语句报错：Uncaught ReferenceError: b is not defined
// console.log(b);

// 无块作用域
{
  var c = 3;
}
console.log(c); //3

 4.2 let

  • 使用let声明变量

  • 具有全局作用域和函数内作用域

  • 具有块作用域

{
	let a = 1;
}
// 下面语句报错：Uncaught ReferenceError: a is not defined
// console.log(a);

4.3 const 常量

  • 通过 const 定义的变量与 let 变量类似，但不能重新赋值

const PI = 3.1415;
// 下面语句报错：Uncaught TypeError: Assignment to constant variable
// PI = 3.141592653;

5 变量声明

5.1 内容概述

(1)在编程语言中，变量用于存储数据值   
(2)JS是弱类型语言：在编译后确定数据类型，没有明显的类型，可以随着环境的不同自动变换类型
(3)变量声明时无需指明类型，赋值时根据值类型决定变量的类型

5.2 变量命名

 (1)所有 JavaScript 变量必须以唯一的名称为标识，这些唯一的名称称为标识符
(2)命名规则如下：
    A.字母、下划线和美元符$开始    
    B.不能以 数值|数字 开头
    C.严格区分大小写
    D.不能使用关键字

6 数据类型

6.1 变量定义及数据类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<span>1</span>
		<input type="text" value="1"/>
	</body>
	<script>
	/*
	java中		定义变量 需要先声明变量类型	强类型语言
	javascript	定义变量 不需要先声明变量类型	弱类型语言
						赋值时根据值的类型	决定变量的类型
						使用统一关键字声明变量
						var
						let
						const
	js由浏览器解释执行（没有编译过程）
	··从上到下 从左到右
	  哪行出错 后边不再执行
	*/
	//变量定义规范：驼峰+英文
	//不确定是不是关键字 加前缀
	var myTemp=1;
	var myVal;
	/*数据类型
      使用typeof关键字，可以检查变量的当前类型
		number		数字型	整型 浮点型 都是number
		string		字符串	""	''	``（模板字符串 方便拼接变量 `aa${变量名}aa`	 ）
		boolean 	布尔型	true/false
		undefined	未定义或未初始化    变量被声明后，但未被赋值
		object		复合类型 所有内置对象 都属于object
		
		function	函数类型
		
		console.log(myVal2)
		console.log(typeof myVal2)
	*/
	myVal = 10.1111111;
	console.log(myVal);
	console.log(typeof myVal);
	myVal = `abc`;
	myVal = `ab + myTemp + c`;
	myVal = `ab${myTemp}c`;
	console.log(myVal);
	console.log(typeof myVal);
	
	myVal = true;
	console.log(myVal);
	console.log(typeof myVal);
	
	myVal = new Date();
	console.log(myVal);
	console.log(typeof myVal);
	myVal = [];
	console.log(myVal);
	console.log(typeof myVal);
	
	myVal = function(){
		console.log(123);
	}
	
	console.log(myVal);
	console.log(typeof myVal);
	myVal();
	
	</script>
</html>

6.2 数据类型转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		/*
		主动类型转换
		parseInt(myNum)		字符串转整型
		parseFloat(myNum)	字符串转浮点型
		
		NaN	  not a number	数值类型的特殊值 不是数字
		
		内置类型转换
		可以转成数字的字符串	与数字之间 有内置类型转换
		boolean值			与数字0/1  有内置类型转换
		== 与 === 区别：
            1、“==”只判断数值不判断数据类型，而“===”判断数值也判断数据类型；
            2、用“==”作比较时可以自动转换数据的类型，而“===”不可以自动转换数据的类型；
            3、“===”更加严谨，建议使用“===”；
		*/
		var myNum = "1.1";
		console.log(parseInt(myNum));
		console.log(parseInt(myNum)+1);
		console.log(typeof parseInt(myNum));
		console.log(parseFloat(myNum));
		console.log(typeof parseFloat(myNum));
		
		var myNum2 = "1.1a1";
		console.log(parseInt(myNum2));
		console.log(typeof parseInt(myNum2));
		console.log(parseFloat(myNum2));
		console.log(typeof parseFloat(myNum2));
		
		var myNum3 = "a111111";
		console.log(parseInt(myNum3));
		console.log(typeof parseInt(myNum3));
		
		var myNum4 = "10";
		var myNum5 = 10;
		console.log(myNum3 == myNum4);
		console.log(myNum3 === myNum4);
		
		var myNum6 = false;
		var myNum7 = 0;
		console.log(myNum6 == myNum7);
		console.log(!=0);
		
		//代码压缩	开发版本		生产版本（代码压缩）
	</script>
</html>

7 JavaScript运算符

7.1 内容概述

7.2 案例

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>运算符</title>
</head>

<body>
</body>
<script type="text/javascript">
	/* 	
		运算符：
			算数运算符： +  -  *  /  %  ++  --
			比较运算符：>  >=  <  <=  ==  !=  ===
				==：只比较值，包含内置转换的结果，不关注类型
				===：比较的是值和类型
			赋值运算符：=  +=  -=  *=  /=  %=
			逻辑运算符：&&  ||  !
				0：false
				1：true
	 */

	/* 算数运算符 */
	/* +  -  *  /  %  ++  -- */
	/* 小数相加时会丢失精度，如0.1+0.2需要取位数，使用toFixed（位数） */
	console.log(0.1 + 0.2);//0.30000000000000004
	console.log((0.1 + 0.2).toFixed(2));//0.30
	var myNum = 3;
	console.log(myNum / 2);//1.5
	console.log(myNum % 2);//1
	console.log(myNum++);//3
	console.log(--myNum);//3

	/* 比较运算符 */
	/* >  >=  <  <=  ==  !=  === */
	var myNum2 = 1;
	var myStr1 = '1';
	console.log(myNum2 == myStr1);//true
	console.log(myNum2 === myStr1);//false
	console.log(myNum2 != myStr1);//false
	console.log(myNum2 !== myStr1);//true

	/* 赋值运算符 */
	/* =  +=  -=  *=  /=  %= */
	myNum -= 1;
	console.log(myNum);//2

	/* 逻辑运算符 */
	/* &&  ||  ! */
	/* 0：false  1：true */
	console.log(!0);//true
	console.log(myNum2 == true);//true
</script>

</html>

8 条件语句/循环语句

8.1 条件语句

if结构
if(bol){

} else if(bol){

} else{

}
switch结构
switch(sens){
	case '1':doSomething;break;
	case '2':doSomething;break;
	default:doSomething;
}

8.2 循环语句

for循环结构，有限次数的循环
for(let i=0;i<=10;i++){
  
}
  
for(let idx in arr){
  
}
while结构，不定次数的循环
while(bol){
	
}

do{
	
}while(bol)

9 浏览器开发者工具调试js

几乎所有的浏览器都支持JS代码的调式，IE、Chrome、FireFox中调试的快捷键：F12

9.1 设置断点

  • 注：设置断点以后要重新刷新页面才会在断点停下来

9.2 出现错误

  • 如果出现错误，有些浏览器会出现提示

 注意：js语法不如java严格，报错信息也不像java中那么准确，通常需要根据经验判断错误出现的原因

10 JavaScript函数

10.1 系统函数

10.1.1 内容概述

(1)系统函数：系统中已存在的函数
(2)分类如下：
      parseInt()：将字符串类型的值转换成整数
      parseFloat()：将字符串类型的值转换成浮点数
      isNaN()：判断转换为数字是否出错
      eval()：将可运行的字符串转换运行

10.1.2 案例

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>内置函数</title>
</head>

<body>
</body>
<script type="text/javascript">
	/* 
		内置函数：
			parseInt()：将字符串类型的值转换成整数
				对于13.15，使用parseInt()，获取到的值是13，相当于取整
			parseFloat()：将字符串类型的值转换成浮点数
			toString()：将数字类型的值转换成字符串类型
			isNaN()：判断是不是数字，若是数字或可以转换为数字，返回为false；否则返回为true
			eval()：将可运行的字符串转换运行
	 */

	/* 将字符串类型的值转换成整数 */
	var myStr = '13';
	console.log(parseInt(myStr)); //13

	/* 将字符串类型的值转换成浮点数 */
	var myStr2 = '13.14';
	console.log(parseFloat(myStr2)); //13.14
	console.log(parseInt(myStr)); //13

	/* 将数字类型的值转换成字符串类型 */
	var myNum = 18;
	console.log(myNum.toString()); //字符串18

	/* 判断是不是数字，若是数字或可以转换为数字，返回为false；否则返回为true */
	var myNum2 = 20;
	var myNum3 = '20';
	var myStr3 = 'abc';
	console.log(isNaN(myNum2)); //false
	console.log(isNaN(myNum3)); //false
	console.log(isNaN(myStr3)); //true

	/* 将可运行的字符串转换运行 */
	console.log(eval('1+2+3+4')); //10
	console.log(eval('1+"a"+2')); //1a2
</script>

</html>

10.2 自定义函数

10.2.1 内容概述

(1)需要程序员自己编写、定义

(2)形参不需要指明数据类型

(3)需要返回值时加上return，不需要指明返回值的类型

10.2.2 案例

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>自定义函数</title>
</head>

<body>
</body>
<script type="text/javascript">
	/* 
		函数定义：
			function 函数名(){
				//若需有返回值，使用return
			}
			function 函数名(参数列表){
				//若需有返回值，使用return
			}
			匿名函数：
				function(){
					//若需有返回值，使用return
				}
		函数调用：
			函数名();
			函数名(参数);
	 */

	/* 函数定义1：无参 */
	function myFun1() {
		console.log("111");
	}
	/* 函数调用1 */
	myFun1();

	/* 函数定义2：有参 */
	function myFun2(a, b) {
		return a + b;
	}
	/* 函数调用2 */
	var sum = myFun2(3, 4);
	console.log("sum=" + sum); //7

	/* 函数定义3：匿名函数 */
	var add = function (a, b) {
		return a * b;
	}
	/* 函数调用3 */
	console.log(add(4, 5)); //20
</script>

</html>

11 JavaScript事件

11.1 注册事件

11.1.1 内容概述

(1)执行事件的步骤：
      获取事件源
      注册事件（绑定事件）
      添加事件处理程序（采取函数赋值形式）
(2)给元素添加事件，称为注册事件或绑定事件
    注册事件有两种形式：传统注册方式和方法监听注册方式
    传统注册方式：
    利用on开头的事件
    比如onclick，btn.οnclick=function(){}
    方法监听注册方式：
            w3c标准推荐方式
        addEventListener()是一个方法

11.1.2 案例  

<body>
  <!--此处以单击事件为例-->
	<input id="myBtn" type="button" value="点击" onclick="myFun()" />
</body>

<script>
  function myFun() {
    
	}
</script>

11.2 事件分类

当用户单击元素时，发生该事件                                         onclick
当指针移动到元素或其中的子元素上时                              onmouseover
在元素获得焦点时发生此事件                                             onfocus
当form元素的内容、选择的内容或选中的状态发生改变时  onchange
在对象已加载时                                                                   onload
当用户松开键时                                                                   onkeyup
在提交表单时                                                                       onsubmit

11.3 案例

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>单击事件</title>
	<style type="text/css">
		div {
			width: 100px;
			height: 100px;
			border: 1px solid black;
		}
	</style>
</head>

<body>
	<input id="myBtn" type="button" value="点击" onclick="myFun()" />
	<p id="content" onclick="myFun2()">马到成功</p>
	<div id="myDiv" onclick="myFun3()">

	</div>
</body>
<script type="text/javascript">
	/* 
		单击事件：
			click
		常规操作：
			找元素、改属性
			
			value属性：
				获取value属性值：
					document.getElementById("id属性值").value
				设置value属性值：
					document.getElementById("id属性值").value="值"
			标签体内容：
				获取标签中间的内容：
					document.getElementById("id属性值").innerHTML
				设置标签中间的内容：
					document.getElementById("id属性值").innerHTML="值"
			设置样式：
				document.getElementById("id属性值").style.样式属性值="值";
	 */

	function myFun() {
		/* 获取按钮上的内容 */
		console.log(document.getElementById("myBtn").value);
		/* 给按钮修改名字 */
		document.getElementById("myBtn").value = "按钮";
	}

	function myFun2() {
		/* 获取段落标签p中的值*/
		console.log(document.getElementById("content"));
		console.log(document.getElementById("content").innerHTML);
		/* 给段落标签p中的内容重新赋值 */
		document.getElementById("content").innerHTML = "功成名就";
	}

	function myFun3() {
		/* 给div设置背景颜色 */
		document.getElementById("myDiv").style.backgroundColor = "green";
		/* 获取div的背景颜色 */
		console.log(document.getElementById("myDiv").style.backgroundColor);
	}
</script>

</html>

12 正则表达式

  • 在JS中，经常用正则表达式配合进行前端校验，给用户相应提示

  • 语法：/ reg /

  • 两个特殊的符号'^'和'$'，作用是分别指出一个字符串的开始和结束，例：/^xxxxxx$/

  • 正则表达式经常与表单项校验配合使用

12.1 字符匹配符

（1）[…]：匹配方括号中包含的字符集中的任意一个字符。例如，正则表达式“[abc]”，字符“a”、“b”、“c”都可以与之匹配。
（2）[^…]：匹配方括号中未包含的任何字符。例如，正则表达式“[^ab]”，除了字符“a”、“b”之外,其他的任何字符都可以与之匹配。
（3）[a-z]，[1-9]：匹配指定范围内的任何字符。
（4）[^a-z]，[^1-9]：匹配不在指定的范围内的任何字符。
（5）\d：匹配任意一个数字字符，等效于[0-9]。
（6）\D：匹配任意一个非数字字符，等效于[^0-9]。
（7）\s：匹配任何空白字符，包括空格、制表符等。
（8）\S：匹配任何非空白字符。
（9）\w：匹配任何英文字母、数字和下划线，等效于[A-Za-z0-9_]。
（10）\W：匹配任何非英文字母和数字类字符，但不包括下划线，等效于[^A-Za-z0-9_]。
（11）.：匹配除换行符\n之外的任何单字符。

12.2 次数限定符

（1）{n}:出现n次
（2）{n,}：规定前面的元素或组合项至少出现n次。例如“o{2,}”，字符串“bod”不能与之匹配，但“foood”可以与之匹配。
（3）{n,m}：规定前面的元素或组合项至少连续出现n次，至多连续出现m次，其中n≤m，逗号和数字之间不能有空格。例如“o{1,3}”，字符串“food”和字符串“foood”都能与之匹配。
（4）+：规定前面的元素或组合项必须出现一次或连续出现多次，等效于{1,}。
（5）*：规定前面的元素或组合项可以出现零次或连续多次，等效于{0,}。例如“zo*”，字符串“z”和“zoo”都能与之匹配。
（6）?：规定前面的元素或组合项出现零次或一次，等效于{0,1}。例如“zo?”,字符串“z”和“zo”都能与之匹配。

12.3 常见正则表达式

1．匹配身份证号码：^\d{15}$|^\d{18}$
2．邮箱：^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$;
3．中国的邮政编码：^\d{6}$
4．匹配字符串中的中文字符：[\u4e00-\u9fa5]
5．验证5到12位的qq号：^\d{5,12}$    
6. 验证手机号 ^1(3|4|5|7|8)\d{9}$

12.4 案例

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>表单提交事件</title>
	<style type="text/css">
		#emailImg {
			width: 10%;
			height: 10%;
			vertical-align: bottom;
			/* 将图片隐藏 */
			display: none;
		}
	</style>
</head>

<body>
	<form action="../1-使用方式.html" method="post" onsubmit="return checkAll()">
		<table>
			<tr>
				<td>手机号</td>
				<td>
					<input id="myPhone" type="text" onkeyup="checkPhoneVal()" />
					<span id="phoneMsg"></span>
				</td>
			</tr>
			<tr>
				<td>邮箱</td>
				<td>
					<input id="myEmail" type="text" onkeyup="checkEmailVal()" />
					<span>
						<img id="emailImg" src="../images/false.png" />
					</span>
				</td>
			</tr>
			<tr>
				<td>
					<input type="submit" />
				</td>
			</tr>
		</table>
	</form>
</body>
<script type="text/javascript">
	/*
		表单提交事件：
			submit：
			return checkAll()：当函数checkAll的返回值为true时，允许提交，否则不允许提交
	 */

	/* 
		验证手机号是否合法
	*/
	function checkPhoneVal() {
		var phoneVal = document.getElementById("myPhone").value;
		var phoneRules = /^1(3|4|5|7|8)\d{9}$/;
		var phoneMsg = document.getElementById("phoneMsg");
		var bol = false;			
		if (phoneRules.test(phoneVal)) {
			bol = true;
			phoneMsg.innerHTML = "手机号输入合法";
			phoneMsg.style.color = "green";
		} else {
			phoneMsg.innerHTML = "手机号输入不合法";
			phoneMsg.style.color = "red";
		}
		return bol;
	}

	/* 
		验证邮箱是否合法
	*/
	function checkEmailVal() {
		var emailVal = document.getElementById("myEmail").value;
		var emailRules = /^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;
		var emailImg = document.getElementById("emailImg");
		emailImg.style.display = "inline-block";
		var bol = false;
		if (emailRules.test(emailVal)) {
			bol = true;
			emailImg.src = "../images/true.png";
		} else {
			emailImg.src = "../images/false.png";
		}
		return bol;
	}

	/* 
		同时验证手机号和邮箱是否合法
	*/
	function checkAll() {
		console.log(checkPhoneVal());
		console.log(checkEmailVal());
		return checkPhoneVal() && checkEmailVal();
	}
</script>

</html>

云中键仙
关注
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值