JavaScript

最新推荐文章于 2024-05-21 15:30:00 发布

DuDuDu.

最新推荐文章于 2024-05-21 15:30:00 发布

阅读量107

点赞数

本文链接：https://blog.csdn.net/weixin_44807446/article/details/99638701

版权

一、JavaScript

发展史：
* 1992年，nombas公司 C–,最早的客户端脚本语言。专门用于表单验证。后更名为 scriptEarth
* 网景 scriptlive，后来找到sun公司合作，共同开发出 JavaScript
* 微软定义了 JScript
* ECMA(欧洲计算机制造商协会)定义了一套客户端脚本语言的规范 ECMAScript规范
JavaScript的实现由以下3个不同的部分组成的
核心：ECMAScript
文档对象模型：DOM
浏览器对象模型：BOM
js与html结合方式

内部js

定义<script>标签，标签体书写js代码
					* 注意：<script>标签定义的位置，会影响执行顺序

外部js

定义<script>标签,通过src属性导入外部js文件，开发首选

二、ECMAScript规范

1.常量

js原始数据类型:

number：数字类型，包含整数和小数和 NaN(not a number)
string: 字符串和字符类型 “” ‘’
boolean: 布尔型true 和 false
null：空类型。对象的占位符
undefined：未定义,如果一个变量没有初始化值，默认为undefined
Object：引用类型，对象

2.变量

JS中定义变量使用关键字 var定义变量 var str = “abc”;
js是一门弱类型语言：定义变量时，不需要规定其数据类型。
typeof运算符：获取变量的数据类型,可以知晓他是什么原始数据类型
ES6规范中，const可以定义常量。 const a=100;

3.语句

if
switch
while
do...while
for语法跟Java中的一样

4.运算符：会发生自动类型转换

一元运算符

        ++  --  +(正)   -(负)
					1.自动类型转换：在js中，如果传递给运算符的值，和 运算符想要接受的 值 的类型不匹配，就会自动类型转换
			
					2. 其他类型转为number
						1.字符串转数字：字面上能转为数字的，就转成了数字；转不了的转NAN
						NaN参与的运算，结果都为fasle，除了(!=)
						2.布尔类型转数字：true为1，false为0

比较运算符

   >  <  >= <=  !=  ==  ===  instanceof
					1. NaN参与的运算，结果都为fasle，除了(!=)
					2. 字符串比较小大：如果长度一致按照字典顺序比较  长度不一致 那谁的长度长那就谁大
					3. == ===(全等于):
						 全等于比较时，先比较类型，如果类型不一致，直接返回false

逻辑运算符

						       && || !
					其他类型转boolean
							1. number：非0为true，0和NaN为false，
							2. string: 除了空字符串("")，其他都是true
							3.null 和 undefined:转为false
							4. 对象:所有对象都为true

算数运算符

       + - * / %
			NaN 参与数学运算 结果都为NaN

赋值运算符

     =    +=

三元运算符

表达式 ? 值1 : 值2;

void运算符
拦截返回值，一般结合a标签一起使用

* 注销a标签跳转功能，保留可被点击的功能
	<a href="javascript:void(0);" onclick="exit();">退出</a>

5.对象

js是一门基于对象的语言
基于对象：不能由原生的对象派生出新的对象。就是不存在继承关系
Function():代表函数

三、JS中的内置对象

1.String对象

1.定义方式:
			var str1="zxcvbnm";//定义方式1
			var str2=new String("fghjk");//定义方式2
			2. 属性 length: 字符串的长度,
			3.方法:
			charAt() 返回在指定位置的字符。
			charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
			concat() 连接字符串。 	
			indexOf() 根据字符检索此符在字符串中的索引。 
			lastIndexOf() 从后向前搜索字符串。 
			substring() 提取字符串中两个指定的索引号之间的字符。 
			toLowerCase() 把字符串转换为小写。
			toUpperCase() 把字符串转换为大写。 
			replace() 替换与正则表达式匹配的字符串。
			split() 把字符串分割为字符串数组。
			trim():去除字符串两端的空格

2.Number对象

1.创建对象：var num=new Number(555.6666);
			       var num1=Number(5694);
		2.方法：
			MAX_VALUE 最大数
			MIN_VALUE 最小数
			toString()  把数字类型转成字符串,使用指定的基数
			toFixed() 把数字转换为字符串，结果的小数点后有指定位数的数字
			toPrecision()  把数字格式化为指定的长度

3.Date对象

1.定义方式： var myDate=new Date();
2.方法：
			       getTime()   获取毫秒值
			       toLocaleString()  获取当前日期的字符串形式

4.Math对象

Math对象,不需要new ,直接使用对象名点上方法接口
	 Math.random()；随机产生0----1 之间的随机数     
      Math.round(); 四舍五入得到一个整数  
      Math.min(); 取最小值
      Math.max();取最大值
      Math. abs() 返回数的绝对值。 
      Math.floor();向下取整
      Math.ceil();向下取整

5.数组对象

                         1.创建数组对象
		方式1:var arr1=new Array();
			 arr1[0]="大家好";
			 arr1[1]=15;
			 arr1[2]=true;
		方式2：var arr2=new Array(10,20,30,40,50);    简写var arr2=[10,20,30,40,50];
		方式3：可以规定数组耳朵长度
		var arr3=new Array(3);
	二维数组var arr4=[[20,50],[30,40],[70,34]];
		
	                        2.属性length  数组的长度

	             3.特点：
			 在js中数组可以存储任意类型元素
			 在js中数组的长度可变
	             4.方法：
			concat() 连接两个或更多的数组，并返回结果。  
			join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 
			pop() 删除并返回数组的最后一个元素 
			push() 向数组的末尾添加一个或更多元素，并返回新的数组长度。 
			reverse() 颠倒数组中元素的顺序。
			shift() 删除并返回数组的第一个元素
			unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
			slice() 从某个已有的数组返回选定的元素
			sort() 对数组的元素进行排序  从小到大
				* 默认排序方式：字典顺序
				* 要想实现自己的比较方式，需要传入比较器方法对象
			splice() 删除元素，并向数组添加新元素。
			filter() 检测数值元素，并返回符合条件所有元素的数组。
			forEach() 数组每个元素都执行一次回调函数。
			isArray() 判断对象是否为数组。
			indexOf() 搜索数组中的元素，并返回它所在的位置。
			reduce() 将数组元素计算为一个值（从左到右）。
			map() 通过指定函数处理数组的每个元素，并返回处理后的数组。

6.Global全局方法对象

* 特点:该对象中的方法调用，不需要对象的引用，可直接使用
			
			* isNaN() 检查某个值是否是NaN。 
			* parseInt() 把字符串转换为数字

7.正则表达式对象

			1.创建正则对象
		    var v=new RegExp('^[a-z]{6,16}$',i);//方式1
			var rgex=/^[a-z]{6,16}$/i;//方式2   
				i模式 不区分大小写的匹配
				g模式 全文匹配
			
			2.方法
			* test() 判断这个字符串,是否符合正则
			* exec() 截取符合正则的数据
			
			3.字符串中有关正则的方法
				字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。
				它将在 stringObject 中查找与 regexp 相匹配的子字符串，
				然后用 replacement 来替换这些子串。
				如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。
				否则，它只替换第一个匹配子串。

四、函数function()

函数:类似于Java中的方法，对一段功能逻辑的封装，以实现重复调用

	1.创建方式：
			* var fun = new Function("参数列表","方法体");
			* function 方法名称(形参列表){
								方法体
						  }
			* var fun = function(){
						
						  }
	2.使用: 函数名称(实参列表),
	3.特点：
			* 函数的形式参数，不需要写数据类型.
			* JS中调用函数时,可以不传参,可以少传,可以多传
	4.JavaScript 变量的生存期
			* JavaScript 变量的生命期从它们被声明的时间开始。
			* 局部变量会在函数运行以后被删除。
			* 全局变量会在页面关闭后被删除。(局部变量,前面的var 省略不写,就变成了全局变量)
		
    5.函数有两个属性
			* 函数的length属性可以获取形参个数
			* 函数内部有arguments属性他是一个数组,可以把所有传递过来的参数,放到这个数组中

五、DOM

DOM：Document Object Model 文档对象模型

概念：将标记语言文档的各个组成部分封装为对象
组成：
Document：文档对象
Element:元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
Node：节点对象

1.Document：文档对象

1.获取：window.document 
			document.body;   //body属性 可以获取body标签对象
			document.title;   //title 属性获取文档标题
			document.lastModified;//获取文档最后一次修改时间
			
2.方法：
				* 获取Element对象
					* getElementById():通过id属性值获取唯一的元素,
					* getElementsByClassName():通过class属性值获取元素对象数组
					* getElementsByTagName():通过标签名称获取元素对象数组
					* getElementsByName():通过name属性值获取元素对象数组
			
				* 创建其他对象
				* createElement:创建元素对象
				* createAttribute：创建属性对象
				* createComment：创建注释对象
				* createTextNode：创建文本对象
				//给属性对象设置值
				font1.setAttribute('color','yellow');

2.Element:元素对象

*innerHTML属性：获取或设置 元素的 子内容
*innerTEXT属性:获取标签之间的文本内容

六、事件

1.概念

事件：一件事
事件源：事件发生的组件。
监听器：一个对象。当事件源上发生了事件，就执行对象中的某些方法
注册监听：将监听器绑定到事件源上，监听事件的发生

2.js中注册监听的方式

1. 在定义标签时，添加 事件名称属性。属性值是js代码
	 * js代码会被自动封装到一个function函数的方法体中
	  例子：<div id="div_id" onclick="fun();">hehe</div>
2. 通过js获取元素对象，再添加事件。
				//1.获取元素对象
				var input = document.getElementById("username");
				//2.注册监听
				input.onclick = function(){
					//alert("hehe");
				}

3.js中事件的种类

焦点事件：

           * onfocus 元素获得焦点。 
		   * onblur  元素失去焦点

点击事件：

* onclick 当用户点击某个对象时调用的事件句柄。 
* ondblclick 当用户双击某个对象时调用的事件句柄。

键盘事件：

           * onkeydown 某个键盘按键被按下。
		   * onkeyup 某个键盘按键被松开。 
		   * onkeypress 某个键盘按键被按下并松开。

鼠标事件：

					* onmousedown 鼠标按钮被按下。 
					* onmouseup 鼠标按键被松开。 
					* onmouseover 鼠标移到某元素之上。 
					* onmouseout 鼠标从某元素移开。 
					* onmousemove 鼠标被移动。

表单事件：

					* onsubmit 确认按钮被点击。 
					* onreset 重置按钮被点击。

加载与卸载事件

* onload 一张页面或一幅图像完成加载。 
* onunload 用户退出页面。 其他浏览器不支持 IE支持

其他事件：

针对表单
		* onchange 域的内容被改变。 比如下拉框
		* onselect 文本被选中。

七、BOM

BOM：Browser Object Model 浏览器对象模型

概念：将浏览器的各个组成部分封装为对象
特点： BOM对象不能自己创建，当文档加载进内存，浏览器自动创建。
组成：
Window()：窗口对象
Location()：地址栏对象
History()：历史记录(当前窗口)对象
Navigator ：浏览器对象
Screen：显示器屏幕

availHeight	获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。 	
availWidth	获取系统屏幕的工作区域宽度，排除 Windows 任务栏。 	
height		获取屏幕的垂直分辨率。 
width		获取屏幕的水平分辨率。

1.Window：窗口对象

			1 使用方式： 
				* window.方法名();    window 可以省略
				* 方法名;
			
			2 方法:
				* 与弹出有关的方法
					alert() 显示带有一段消息和一个确认按钮的警告框。
					confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
					prompt() 显示可提示用户输入的对话框。 
					
				* 与定时器有关的方法
					setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。 循环执行
					clearInterval() 取消由 setInterval() 设置的 timeout。  
					
					setTimeout() 在指定的毫秒数后调用函数或计算表达式。 只执行一次
						* 参数：
							参数1：字符串(js语句)或者 函数对象
							参数2：毫秒值。
					clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 


	
				* 与打开关闭有关的方法：
					open():打开新窗口
						* 参数：打开目标的URL
						* 返回值：返回新打开窗口的window引用
					close():关闭窗口
						* 谁调用我 ， 我关谁
						
			3 属性：
				* 获取其他对象的属性：
					* history ：对 History 对象的只读引用。
					* location ：用于窗口或框架的 Location 对象。 
					* Navigator 对 Navigator 对象的只读引用。
					* Screen 对 Screen 对象的只读引用。
					* document：对 Document 对象的只读引用。

2.Location：地址栏对象

1.获取方式：可以用window对象中的属性获取
2. 属性：
		href：设置或获取当前的URL

3.History：历史记录对象

1.获取方式：可以用window对象中的属性获取
2. 方法：
		go:
			1:前进
		   -1：后退

DuDuDu.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫