Java学习笔记-Day46 JavaScript(一)



一、JavaScript的简介


JavaScript 是浏览器可以解析并执行的语言,可以控制网页上元素,从而形成各种动态效果。因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。JavaScript 的主要场景是在网页中访问以及操作网页的元素,在nodejs中也可以调用封装的接口做服务器端开发。

1、ECMAScript与JavaScript 的关系


JavaScript 是一种基于 ECMAScript 规范的脚本语言,并在此基础上进行了自己的封装。ECMAScript 不是一种编程语言,仅仅是一种脚本语言规范,由欧洲计算机协会制定和发布,任何基于此规范实现的脚本语言都要遵守它的约定。所以,ECMAScript是JavaScript的规格,JavaScript是ECMAScript的一种实现。

2、JavaScript的基本特点


(1)脚本语言:JavaScript是一种解释型的脚本语言,C、C++等语言是先编译后执行,而JavaScript则可以直接执行。

(2)基于对象:JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

(3)简单:JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

(4)跨平台:JavaScript只依赖于浏览器而与操作系统无关,目前JavaScript已被大多数的浏览器所支持。

3、JavaScript的使用场景


(1)嵌入动态文本于HTML页面,对浏览器事件做出响应。

(2)读写HTML元素。

(3)在数据被提交到服务器之前验证数据。

(4)检测访客的浏览器信息。

(5)控制cookies,包括创建和修改等。

(6)基于Node.js技术进行服务器端编程。

二、JavaScript的基础

1、JavaScript(浏览器端)基础组成


(1)JavaScript核心语法:包含JavaScript的数据类型、函数封装、内置对象与本地对象。

(2)事件:事件是使用者对浏览器当前显示界面的操作,例如点击、鼠标移动、敲击键盘都是事件。

(3)DOM:文档对象模型(Document Object Model),是为浏览器供应商提供的操作页面元素的方式。JavaScript并不能直接操作页面元素(例如拖拽等功能),但可以调用DOM完成。

(4)BOM: 浏览器对象模型(Browser Object Mode) 是浏览器供应商提供的操作页面窗口的方式(例如打开新窗口、全屏显示等)。

2、JavaScript的引入方式


JavaScript语言如果直接编写在html文件上,浏览器将会将他的内容当作html代码执行,而不是当作JavaScript代码执行。

2.1、常见的引入JavaScript的方式


(1)内嵌JavaScript脚本。

	<script type="text/javascript" charset="utf-8">
		console.log("Hello,JavaScript!");
	</script>
  • type:声明脚本的语言类型。所有浏览器默认都是JavaScript(可以缺省)。
  • charset:声明脚本的编码类型,很多浏览器都忽略此属性,而使用meta标签定义的编码类型解析js代码。(不建议使用此属性)

(2)引入外部的javascript文件。

  • myjs.js
	document.write("hello,JavaScript");
  • 在html的代码文件中
	<script src="js/myjs.js" type="text/javascript" charset="utf-8"></script>

(3)在事件中编写javascript(不推荐)。

(4)模块化引入:模块化引入方式是现在前端模块化开发的主要模式。

2.2、script标签的放置位置


(1)放置于<head></head>之间

将 script 标签放置于 HTML 文档的 <head></head> 标签之间是一个通常的做法。由于 HTML 文档是由浏览器从上到下依次载入的,将 script 标签放置于<head></head> 标签之间,可以确保在需要使用脚本之前, script 标签中 JavaScript 代码已经被加载。

(2)放置于<body></body>之间

也有部分情况将 script 标签放置于 <body></body> 之间的,如下情况:有一段 JavaScript 代码需要操作 HTML 元素,但由于 HTML 文档是由浏览器从上到下依次载入的,为避免 JavaScript 代码操作 HTML 元素时,HTML 元素还未载入而报错(对象不存在),因此需要将包含这段代码的script标签写到<body></body> 的其它 HTML 元素的后面。

3、JavaScript的基本语法规则

3.1、注释


注释是编写在程序中作为程序的说明,以便于以后的参考、修改。在运行程序时不做处理。

注释的特点:① 被注释的程序块不会执行。② 注释可以提高代码的可读性,因此添加注释是编程的好习惯。③ JavaScript 的注释虽然不执行,但也会下载到客户端,因此在正式上线之前应使用其他工具去除掉全部的注释。

(1)单行注释

	<script type="text/javascript">
		//单行注释
	</script>

(2)多行注释

	<script type="text/javascript">
	/*
		多行注释
		多行注释
		多行注释
	*/
	</script>

3.2、关键字与保留字

3.2.1、关键字


关键字:目前在javascript语言中已经具有语法含义的英文词语,每个关键字都具有不同的使用场景和规则。
在这里插入图片描述

3.2.2、保留字


保留字:预计未来扩展javascript功能时会拓展的关键字。
在这里插入图片描述

3.3、标识符


标识符就是自定义函数和变量的名字。

命名规则:

① 标识符不能使用javascript的关键字、保留字。

② 标识符必须以字母、数字、下划线 _ 和美元符号 $,但是不能以数字开头。

4、JavaScript的变量


变量的概念:变量是存储信息的容器,变量可以根据变量名进行访问以及赋值。

var关键字:声明变量的关键字。在函数外部,变量不管是否用了var声明,都是全局变量。在函数内部,变量如果没有使用var关键字声明,那它就是全局变量,只有用var关键字声明了,才是局部变量。在javascript中,如果省略var关键字而直接赋值,那么这个变量则为全局变量,即使是在函数中定义的。

(1)声明变量的方式:

	<script type="text/javascript">
		var x;
		var x = 2;
		var name="tom", age=25;
	</script>

(2)修改变量的值: var只在声明的时候被使用一次,修改变量的值直接使用变量的名字进行赋值。

	<script type="text/javascript">
		var x = 2;
		x = 3;
	</script>

(3)变量重名规则: 程序中要保证定义的多个变量不重名,如果javascript中变量的重名并不像其他高级语言那样无法通过编译,而是采用如下规则:

① 如果两次变量的声明都对应赋值表达式,则后执行的变量会覆盖先执行的变量。

② 如果第一次变量的声明对应赋值表达式,第二次变量声明不对应赋值表达式,则第二次变量声明无效。

5、JavaScript的数据类型


数据类型: 变量值在内存中的存储方式。数据类型的主要作用是每一个类型对应的存储空间不同,从而更合理的使用内存。

5.1、基本数据类型


基本数据类型:JavaScript引擎默认支持的数据类型,基本数据类型的数据存储在栈内存中。除了string类型外,其余类型都占用固定内存空间。

基本数据类型的分类:

(1)undefined类型
(2)null类型
(3)boolean类型
(4)number类型
(5)string类型

5.1.1、undefined类型


undefined类型:是变量的默认赋值,表示缺少值,就是此处应该有一个值,但是还没有定义。

典型用法:

  • 变量被声明了,但没有赋值时,就等于undefined。
  • 调用函数时,应该提供的参数没有提供,该参数等于undefined。
  • 函数没有返回值时,默认返回undefined。
5.1.2、null类型


null类型:表示没有对象,即该处不应该有值。

null类型的特点:

  • undefined是null的衍生物,早期的null代表对象类型的数据为空。
  • null可以参与运算,在参与运算时js引擎会给null默认值。
  • null转为数值时为0。

undefined与null的区别:

  • 含义不同:null代表不应该有值,undefined应该有值,但还没赋值。
  • null转为数值时为0,undefined转为数值时为NaN。

== 运算符会把null和undefined当成同一种情况,所以此时的结果是true。

	<script type="text/javascript">
		console.log(null == undefined);
	</script>


=== 运算符不会把null和undefined当成同一种情况,所以此时的结果是false。

	<script type="text/javascript">
		console.log(null === undefined);
	</script>

5.1.3、boolean类型


boolean类型:只有两个取值范围,代表真(true)和假(false)。

5.1.4、number类型


number类型可以表示整数和浮点数。

	<script type="text/javascript">
		var x = 2;
		var y = 2.2;
	</script>

number类型支持多进制赋值但最终还是以二进制存储。

	<script type="text/javascript">
		var a = 11; //默认为十进制
		var b = 010;//以0开头代表8进制,如080则仍以10进制解析
		var c = 0xAF;//以0x开头代表16进制。
	</script>

number类型的浮点数表示方式。

	<script type="text/javascript">
		var x = 0.1;
		var y = .1;//可以省略0
	</script>

5.1.4.1、number类型的范围


(1)number类型整数的精确范围。

  • 最大值:2^53-1 = 9007199254740991
  • 最小值:-(2^53-1)= -9007199254740991

通过Number对象的常量可以获取number类型整数的范围

	<script type="text/javascript">
		console.log(Number.MAX_SAFE_INTEGER);
		console.log(Number.MIN_SAFE_INTEGER);
	</script>

(2)number类型浮点数的精确范围

  • 最大值:1.7976931348623157e+308
  • 最小值:5e-324

通过Number对象的常量可以获取number类型浮点数的范围

	<script type="text/javascript">
		console.log(Number.MAX_VALUE);
		console.log(Number.MIN_VALUE);
	</script>

5.1.4.2、number类型转换


(1)通过内置函数

	parseInt('字符',进制数);
	parseFloat('字符',进制数);
  • 从字符串的第一个有效数字开始到第一个无效字符结束的内容进行数字转换。
  • 对于无有效数字则返回NaN类型(Not A Number)。

(2)通过内置Number对象

	var a= Number(“11”);//不能识别有效数字,不建议使用

5.1.4.3、number类型其他取值


NaN:非数字,当执行parseInt无有效数字时返回。
Infinity:无穷,当超过浮点类型最大范围时。

5.1.5、string类型


string类型:字符串类型,可表示单个字符或多个字符的组合,采取可变内存的方式存储。

	var x = "111";
	var y = 'ddd';
	var z = "";//代表空字符串

转义字符:用一些普通字符的组合来代替一些特殊字符。

字面量含义
\n换行
\t制表
\b空格
\r回车
\f进纸
\\斜杆
\’单引号 ’
\’’双引号 ’‘

5.2、对象数据类型


对象数据类型本质上是一组无序的名值对,存储在堆内存中,占用内存大小可以变化。对象数据类型也称引用类型,除了基本类型之外的都是引用类型或对象类型。

	<script type="text/javascript">
		var a = {
			b:123,
			c:456
		};
		console.log(a.b);
		console.log(a.c);
	</script>

对象类型分类:

内置类型:如数组、日期类型。浏览器内置对象,可以直接使用。
用户自定类型:开发者自定义的对象。

5.2、对象类型、基本类型之间的区别


对象类型、基本类型之间的区别:
(1)定义方式不同。
(2)赋值方式不同。
(3)内存使用方式不间。

对象类型本质上是多个基础数据类型的数据封装。与基础数据类型相比对象类型在内存存储结构、访问方式、声明方式都不同。

5.3、typeof


typeof:获取目标变量的数据类型,以字符串形式返回,typeof是系统内置函数。

typeof的局限性:typeof只能区别出5个基本类型和对象类型,但无法识别对象类型的继承关系,以及对象类型赋值方式。

		<script type="text/javascript">
			var x = 1;
			var a = {
				b:1,
				c:{d:2}
			};
			console.log("基本数据类型" + typeof x);
			console.log("对象数据类型" + typeof a);
		</script>

在这里插入图片描述
如果在javascript中声明了一个变量,但是没有赋值,这个变量的类型则为 undefined。但是使用typeof类型解析,会认为null是一个object类型。

	<script type="text/javascript">
		var obj;
		console.log(typeof obj);
	</script>


javascript中可以使用另一种方式来判断这个变量(对象)的类型。

	<script type="text/javascript">
		var obj;
		Object.prototype.toString.call(obj);
	</script>

6、JavaScript的函数


函数是一段包含应用程序的程序块,此程序块可以被其他程序通过函数名调用,目的是提高代码公用性、可维护性。

函数的本质:函数是Function的一个实例对象,函数名是对象实例的变量名称,函数不存在重载。

<script type="text/javascript">
	var b = new Function('a','b','return a+b');
	console.log(b instanceof Function);//true 说明 b是Function的实例
	console.log(b.constructor === Function);//true
</script>

函数的预编译:浏览器在客户端加载时将会检索全局函数,并将其使用new Functon方式进行初始化,因此如下程序可以运行。

<script type="text/javascript">
	test();//可以执行
	function test() {
		console.log("test");
	}
</script>

6.1、函数的定义


(1)普通函数方式:
在这里插入图片描述

  • function:关键字,在定义函数时使用function来声明当前程序块为函数。
  • functionname:函数的名称,在执行函数时,需要使用函数名调用函数中的程序块。
  • parameter:形式参数,在定义函数时,该参数并没有实际的数值,因此称为形式参数,形式参数为 0-多个,用逗号分开。函数体内可将形参作为变量使用。参数组可以理解为一个内置的数组参数,可以在任何位置直接使用。在函数体内可以使用 arguments[i] 来获取第i个位置的实际参数值。在ES6中有可变参数,可变参数的数组长度不固定,个数不固定,可以在实参中输入任意个数的值。
  • return语句:将终止当前函数并返回当前函数的值,在 return关键字后面可以跟着一个值,这个值可以是javascript中的任何数据类型、数字、字符串、对象、函数。可以使用return跳出程序函数,在 return关键字后面也可以什么都不写,即 return;,终止当前函数。如果函数体内没有return,则js引擎会在函数体最后一句程序语句后执行 return; ,代表返回一个undefined;

命名规则如下:

  1. 符合javascript标识符的命名规则。
  2. 首字母小写,多个单词组合时除首单词外,其余单词的首字母大写。
  3. 可以巧妙的使用缩写,例如rowNum表示行数。

重名规则:如果在一个网页中出现多个同名函数(不区分参数),则最后定义的函数将覆盖之前的函数。

函数中的程序在函数定义的时候不会执行,只有在调用函数并出出传递给有效参数后才会执行。

JavaScript的函数定义和调用的代码可以写在html文件的<script></script>标签里,也可以写在js文件中,当在html文件调用js文件中的函数时,需要在html文件中导入这个js文件。

(2)匿名函数方式:函数定义和调用结合在一起来执行,没有函数名。

<script>	
	winodw.onload = function (){
		console.log("匿名函数");
	}
</script>

(3)函数表达式:

<script type="text/javascript">	
	var fun = function(a,b) {
		console.log("a+b="+(a+b));
	}
	fun(1,2);
</script>

(4)Function对象:不建议使用,但可以帮助我们理解javascript的核心。

		<script type="text/javascript">	
			var b = new Function('a','b','return a+b');
			// 此时的函数如下:
			// ƒ anonymous(a,b) {
			// 		return a+b
			// }
			console.log(b(1,2));//结果为3
		</script>

6.2、函数的调用


(1)直接调用:
在这里插入图片描述

  • javascript中调用函数时,实际传递的参数叫实参,实参的数量可以与形参的数量不同,缺省的实参在函数体内为undefined。
<script type="text/javascript">
	function fun(){
			for(let i=0;i<10;i++){
				console.log(i);
				if(i==5){
					return;
				}
			}
		}
	fun();
</script>


(2)在标签上使用事件+函数:

<标签名 属性=值 onclick="函数名()">

<input  type="button" onclick="fun()">
<script type="text/javascript">
	function fun(){
		for(let i=0;i<10;i++){
			console.log(i);
			if(i==5){
				return;
			}
		}
	}
</script>


(3)对象.事件=函数名:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button">点击</button>
		<script type="text/javascript">
			var f = function fun(){
				console.log("鼠标点击");
			}
			document.getElementById("btn"),onclick=f;
		</script>
	</body>
</html>


(4)使用超链接来调用函数:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="javascript:f()">点击</a>
		<script type="text/javascript">
			var f = function fun(){
				console.log("鼠标点击");
			}
		</script>
	</body>
</html>


(5)函数的自调用:

<script type="text/javascript">
	(function fun(){
		console.log("函数的自调用");
	})();
</script>

6.3、全局对象的常见函数


(1) isNaN():检查某个值是否是数字。
(2)parseFloat():解析一个字符串,并返回一个浮点数。
(3)parseInt():解析一个字符串,并返回一个整数。
(4)isFinite():检查某个值是否为有穷大的数。
(5)eval():可计算某个字符串,并执行其中的的 JavaScript 代码。

7、JavaScript的数组


JavaScript数组与其他语言(如java)的数组的相同点:

  • 功能相同,都是存储介质。
  • 操作相同,都是需要循环遍历数组的内容,同时都提供了修改数组数据的方式。

JavaScript数组与其他语言(如java)的数组的区别:

  • JavaScript数组对象是由js编写的本地对象,而其他语言中的数组都是独立的数据类型。
  • JavaScript数组的长度可变化。
  • JavaScript数组存储的数据可以为不同数据类型。
  • JavaScript数组由于是对象,因此可以为数组对象设定属性。

7.1、数组Array的创建


数组初始化后可以设定长度,若没有赋值,则数组中的元素为undefined。如果访问数组的索引号大于数组长度,则出现程序异常。通过数组的length属性可以访问数组的实际长度。数组的内容可以为任意数据类型。

(1)初始化数组,数组的长度为0。

	var array = new Array();


(2)初始化数组,设置数组的长度。

	var array = new Array(10);


(3)初始化数组,设置数组的内容。

	var array1 = [1,2,'字符'];
	var array2 = new Array(1,2,'字符');

获取数组的长度:array.length

检索数组的内容:array[索引值]

7.2、数组Array的方法


(1)concat():连接两个或更多的数组,并返回结果。
(2)join():将数组的所有元素放入一个字符串。
(3)push():向数组的末尾添加一个或更多的元素。
(4)reverse():颠倒数组元素的顺序。
(5)sort():对数组的元素进行排序。

7.3、数组Array的遍历方法

	<script type="text/javascript">	
		//数组
		var arr=["Java","script"];
		//数组的遍历,变量i是数组索引(从0开始)
		for (let i in arr) {
			console.log(i);
			console.log(arr[i]);
		}
	</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值