JavaScript入门使用-CSDN博客

本文链接：https://blog.csdn.net/weixin_45583303/article/details/118338775

文章目录

01.概述

JavaScript是什么？有什么作用？

在前端开发中，类比：
	HTML：人类身体
	CSS：衣服（美化）
	JavaScript：大脑（例如，为按钮添加功能）
	
JavaScript是强大的脚本语言

脚本语言：无法独立运行，必须嵌套到其他语言中，结合使用，无需编译，可以被浏览器直接运行
		java是编程语言，可以独立运行。（先编译，后运行）

JavaScript的语言特征以及编程注意事项

特征：
	1.无需编译，直接被浏览器解析执行
	2.无法单独运行，必须嵌入到HTML代码中运行
	3.由上到下依次执行

注意：
	1.JavaScript没有权限访问系统里的文件
	2.由于无需编译，且由上到下依次执行，所以在保证可读的情况下，允许使用链式编程
	3.JavaScript和java没有任何关系

JavaScript的组成

JavaScript的组成：ECMAScript，DOM， BOM

ECMAScript（核心）：规定了JS的语法和基本对象

DOM：文档对象模型，处理网页内容的方法和接口

BOM：浏览器对象模型，与浏览器交互的方法和接口

JavaScript的引入方式

在当前页面内部写script标签，script内部即可书写JavaScript代码
格式：
<script type="text/javascript">
	javascript的代码
</script>

注：script标签理论上可以书写在HTML文件的任意位置

外部引入,在HTML文档中，通过<script src="">标签引入.js文件
格式：<script type="text/javascript" src="javascript文件路径"></script>

注意：当script标签中添加了src属性之后，就不要再标签内部写东西了，会被覆盖，不执行

script标签规范化放置位置

开发规定：script标签的放置位置为，body结束标签之前

我们在开发时，可以先把脚本放到前面（方便开发），等开发结束之后再把脚本放后面

优点：保证HTML展示内容优先加载，最后加载脚本，增强用户体验性

示例：
<html>
	<head>
		<meta charset="utf-8">
		<title>AISMALL</title>
	</head>
	
	<body>
		<h1>先加载的网页内容</h1>
		<script></script>
	</body>
</html>					-->

02.JavaScript的语法规则

2.1.注释变量运算符

注释

注释：单行注释：//
多行注释：/**/

变量

变量简述：标示内存中的一块空间，用于存储数据，且数据是可变的

变量声明：var  变量名（默认值 undefined）

注意：JavaScript变量严格区分大小写

java中的变量类型有：基本数据类型，引用数据类型

JavaScript变量：
	一，JavaScript基本数据类型：（5种）
			string ：字符串（JavaScript中没有单个字符，所以双引单引号都代表字符串）
			boolean：布尔
			number：数字类型（任意数字）
			null：空（一个占位符）
			undefined：未定义类型
			注：undefined是从null中派生出来的，所以undefined==null

			javascript区别于java，是弱类型语言，变量的使用不用严格遵循规范，
			所以一个变量声明好之后（不管什么类型的变量都用var声明），可以赋予任意类型的值

			我们可以使用typeof运算符查看变量所属的数据类型
            例如：alert（typeof（str1））:显示出变量的类型
			
			注意：ECMAScript实现之初的一个bug，null属于基本数据类型，
			typeof（null）——>obj

	二，引用数据类型
		引用数据类型通常叫做类（class），但是在JavaScript中，因为不存在编译过程，
		所以没有类的概念，所以处理的引用数据类型都是对象

		标准创建方式：
			var str=new String（）；（和java相同）
			var str=new String；（JS特有）

运算符

大部分和java中的运算符相同：
	==   逻辑等，仅仅对比值
	===  全等，对比值并且对比类型，当值和类型都相等返回true

JavaScript的变量定义和java中不同
	
逻辑运算符（只有这么多，没有&）：
	与（&&  and）
	或（|| or）
	非（|  nor）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			var a;
			//未被定义的变量会被赋值undefined
			alert(a);
			alert(typeof(b));
            
			var b=10;
			alert(b);
            alert(typeof(b));
		</script>
	</body>
</html>

2.2.JavaScript正则

参考文档链接

文档链接：https://www.w3school.com.cn/jsref/index.asp

Javascript正则

正则对象的创建：RegExp对象的创建方式
	var reg=new RegExp("表达式")		(开发中基本不用)
	var reg=/^表达式$/;			直接量（常用）
	var reg=/表达式/;			普通方式

直接量中存在边界，即^代表开始，$代表结束

注：直接量检测为严格检测，全部符合才返回true，普通检测，为不严格检测，
   只要字符串里能匹配到（除非一个字符都匹配不到），就返回true

在正则表达式类中一共提供了三种方法，我们一般只用到test方法

test() 方法用于检测一个字符串是否匹配某个模式
	语法：RegExpObject.test(string)
	如果字符串 string 中含有与 RegExpObject 匹配的文本，有则返回 true，
	否则返回 false。

举个栗子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        <!--js代码无需调用，直接就会被浏览器执行-->
		<script type="text/javascript">
			var str = "Visit W3School";
			var patt1 = new RegExp("W3School");

			var result = patt1.test(str);

			document.write("Result: " + result);
		</script>
	</body>
</html>

2.3.javascript数组对象

JS数组的特性：可以看成Java中的ArrayList集合(里面可以存放不同类型的元素)
	数组中每一个成员没有类型限制，即可以存放任意类型数据
	数组的长度可以自动修改

注意：java数组中只能存放同一类型数据

JS数组的四种创建方式
	var arr=[1,2,3];
	var arr=new Array();	数组默认长度为零
	var arr=new Array(4); 定义长度为4的数组，每个元素为undefined
	var arr=new Array(1,2); 数组元素为1和2

JS数组的常用属性和方法：
查看API链接：https://www.w3school.com.cn/jsref/jsref_obj_array.asp
	length属性：
		arrayObject.length
	
	注意：在JavaScript中如果数组定义长度为4，arr[10]="10";
			数组会自动扩展到长度为11的数组，在Java中会报错

	数组方法：
		join()方法用于把数组中的所有元素拼接成一个字符串。
		元素是通过指定的分隔符进行拼接的。（不影响原数组）

		reverse()方法用于颠倒数组中元素的顺序。（影响原数组）

	数组方法：
		pop() 方法用于删除并返回数组的最后一个元素。
		push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		 <!--js代码无需调用，直接就会被浏览器执行-->
		<script type="text/javascript">
			var arr1=new Array(4);
			document.write("arr: " + arr1[0]);
			
			var arr2=new Array('hello','aismall');
			document.write("arr: " + arr2);
			
			var arr3=new Array('hello','aismall');
			arr3.reverse();
			document.write("arr: " + arr3);
		</script>
	</body>
</html>

2.4.javascript全局函数

全局函数：Global
全局函数（Function）
	eval() 函数:可计算某个字符串，并将其作为 JavaScript 代码来执行

	注：该方法只接受原始字符串（基本数据类型）作为参数，
	如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。
	因此请不要为 eval() 函数传递 String 对象（构造数据类型）来作为参数。

全局函数（Function）
	encodeURI() 函数可把字符串作为 URI 进行编码。
	decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。

	URI和URL的区别：
		URI是统一资源标识符
		URL是统一资源定位器
	资源：可以通过浏览器访问的信息都称之为资源（图片，文本，HTML，CSS等）

	URI表示资源的详细名称：包含资源名
	URL定位资源的网络位置：http://
	例如：
		http://www.baidu.com/   是URL
		
		/aismall.html	       是URI
		
		http://www.baidu.com/aismall.html  	即是URL也是URI

	字符创转数字（Function）
		parseInt() 函数可解析一个字符串，并返回一个整数。（小数点后面直接忽略）
		注：只有字符串中的第一个数字会被返回。
		
		parseFloat() 函数可解析一个字符串，并返回一个浮点数。
		注：该函数指定字符串中的首个字符是否是数字。
			如果是，则对字符串进行解析，直到到达数字的末端为止（遇到非数字结束转换），
			然后以数字返回该数字，而不是作为字符串。

	NAN：not a number（数字类型标识符）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			//此处x未被声明会报错
			alert(x);
			//eval()全局函数中的字符串会作为代码来执行
			eval("var y=10;")
			alert(y)
			//下面的代码不能被执行:String 是一个对象
			//eval(new String("var x=10;"));
		</script>
	</body>
</html>

2.5.javascript自定义函数

自定义函数（增强代码复用性）

自定义函数（增强代码复用性 ）:

函数格式：
	function 函数名(参数1,参数2,...){
		函数体	
	}
	
注意：function小写，无需指定返回值类型
	参数定义也不用写var，否则报错

自定义函数

函数使用的注意事项：
	JavaScript函数调用执行完毕一定有返回值，值的类型根据return决定，
	如果未return具体值，返回值为undefined，

JavaScript函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义覆盖之前的定义
因为JavaScript不存在函数重载，所以JavaScript仅根据方法名来调用函数，
即使实参与函数的形参不匹配，也不影响正常调用。

自定义对象(有了类才能有对象，根据已有的类自定义出对象)

自定义对象(有了类才能有对象，根据已有的类自定义出对象):
在JavaScript中的引用数据类型都是对象，而对象在JavaScript中可以用函数来表示，
相当于java中的创建的类

无形参格式：
	function 对象名(){
		函数体
	}
	
	//对象创建
	function Person(){
		this.name="east";
		this.age=18;
	}
	
	//对象引用
	var p=new Person();
	alert(p.name);
	alert(p.age);
	alert(p.name="AISMALL");

属性定义的方式：
	1.this关键字，在声明对象阶段，定义一个属性
	2.创建对象后，使用对象.属性方式      动态定义属性，例如：p.sex="男"；

为属性赋值的方法：
	function Person(n,s){
		this.name=n;
		this.age=s;
	}
	
1.构造参数赋值：var p=new Person("east",18);
2.创建对象后调用属性进行赋值：p.name=20

自定义对象（对象直接量）
开发中可以用一种简单的方式直接创建自定义的JavaScript对象，这种方式成为“对象直接量”
	格式：
		var 对象名={属性名1="属性值1",属性名2="属性值2",.........};
	注：该方式直接创建出实例对象，无需构造函数，无需再new创建实例对象，直接使用即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--JavaScript函数调用执行完毕一定有返回值，值的类型根据return决定，-->
		<script>
			function getSun(a,b){
				return a+b;
			}
			var result=getSun(1,2);
			alert(result);
		</script>
		
		<!--JavaScript函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义覆盖之前的定义-->
		<script>
			function aismall(a,b){
				return a-b;
			}
			function aismall(a,b){
				return a+b;
			}
			alert(aismall(1,2));
		</script>
		
		<script>
			//定义一个对象(相当于java中的类)
			function Person(n,a){
				this.name=n;
				this.age=a;
			}
			
            //创建一个对象，进行动态赋值
			var p=new Person("AISMALL",18);
			alert(p.name);
			alert(p.age);
			p.age=22;
			p.name="Dan";
			alert(p.name);
			alert(p.age);
		</script>
	</body>
</html>

03.BOM对象

3.1.BOM对象概述

BOM对象API：https://www.w3school.com.cn/jsref/index.asp

BOM对象简述：
BOM对象是什么？有什么用？
	BOM（Browser Object Model）：浏览器对象模型
	作用：用来执行浏览器对象上的相关操作（例如：浏览器上的地址，弹出消息等）

window对象是JavaScript的内置对象，使用window对象调用方法时可以省略window不写

举个栗子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			//window对象是JavaScript的内置对象，使用window对象调用方法时可以省略window不写
			window.alert("AISMALL_01");
			alert("AISMALL_02");
		</script>
	</body>
</html>