JavaScript

最新推荐文章于 2024-06-22 16:11:40 发布

卡世界的bug

最新推荐文章于 2024-06-22 16:11:40 发布

阅读量1k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_53229187/article/details/122815503

版权

JavaScript

参考：菜鸟教程

输出

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中，会覆盖原来的内容
使用 innerHTML 写入到 HTML 元素。一般同过document.getElementById(id) 方法获取目标标签
使用 console.log() 写入到浏览器的控制台。

数据变量

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。
拥有动态类型，字符串是由单引号和双引号括起来

数组：

var cars=new Array();
 cars[0]="Saab";
 cars[1]="Volvo";
 cars[2]="BMW";

或者 (condensed array):

var cars=new Array("Saab","Volvo","BMW");

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
```
var person={firstname:"John", lastname:"Doe", id:5566};  // 可以拆行书写
```
Undefined 这个值表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。

声明数据类型：

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

JavaScript中会将变量声明提升到函数的底部，即变量提升
JavaScript可以使用"use strict";这个字面量，开启严格模式，消除代码运行的一些不安全之处，保证代码运行的安全，提高编译器效率，增加运行速度，为未来新版本的Javascript做好铺垫。相应的也会出现一些限制：不允许使用未声明的变量，不允许删除变量或对象，不允许删除函数，不允许变量重名，不允许使用八进制，不允许使用转义字符，不允许对只读属性赋值，不允许对一个使用getter方法读取的属性进行赋值，不允许删除一个不允许删除的属性，变量名不能使用 “eval” 字符串，变量名不能使用 “arguments” 字符串，禁止this关键字指向全局对象，“use strict” 指令只允许出现在脚本或函数的开头。

对象

定义：

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

属性：

person.lastName;      person["lastName"];  // 属性的访问

对象方法：

methodName : function() {
    // 代码 
}

调用：

objectName.methodName() // 访问方法
objectName.methodName	// 将方法视为一个属性进行访问

函数

语法：

function myFunction(var1,var2) {
 //代码
}
// 参数数量是可以选择的，同时也可以选择返回值

变量：局部变量是声明在函数中，函数外的是全局变量，在函数执行完毕之后，局部变量就会死亡，当一个页面关闭时，全局变量就会被删除，但未声明的变量就是属于window对象的，属于window对象的变量就是全局变量，全局变量作用域则是整个页面，而局部变量的作用域只是作用于函数内。

事件

即发生的行为，可以是浏览器的行为，也可以是用户的行为
常见的事件：

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

使用样例：

<some-HTML-element some-event='JavaScript 代码'> // 双引号也可以使用

字符串

几乎于Java一致，可以使用单双引号的来书写带有引号的字符串，也有转义字符
字符串属性：

属性描述
constructor 返回创建字符串属性的函数
length 返回字符串的长度
prototype 允许您向对象添加属性和方法

属性	描述
constructor	返回创建字符串属性的函数
length	返回字符串的长度
prototype	允许您向对象添加属性和方法

字符串方法：

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

运算符与语句语法

与Java相比，多了绝对相等和不绝对相等 =和!

多了for/in遍历，用来遍历对象中的属性：

var person={fname:"Bill",lname:"Gates",age:56}; 
for (x in person)  // x 为属性名{
    txt=txt + person[x];
}

typeof用来返回数据类型，.constructor属性是用来返回构造器的
也有异常处理
对大小写敏感，使用Unicode字符集
数字字面量，字符字面量，表达式字面量，数组字面量，对象字面量（{firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”}），函数字面量（function myFunction(a, b) { return a * b;}）
变量用var声明，未声明值得变量的值是undefined，操作符有：= + - * / == != <> ，JavaScript函数可以重复引用，注释同Java
一条语句以“;”结尾，代码块以左右花括号确定，会忽略多余的空格，

JavaScript语句标识符：

语句	描述
break	用于跳出循环。
catch	语句块，在 try 语句块执行出错时执行 catch 语句块。
continue	跳过循环中的一个迭代。
do … while	执行一个语句块，在条件语句为 true 时继续执行该语句块。
for	在条件语句为 true 时，可以将代码块执行指定的次数。
for … in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function	定义一个函数
if … else	用于基于不同的条件来执行不同的动作。
return	退出函数
switch	用于基于不同的条件来执行不同的动作。
throw	抛出（生成）错误。
try	实现错误处理，与 catch 一同使用。
var	声明一个变量。
while	当条件语句为 true 时，执行语句块。

异步编程就是不所编写的代码的顺序运行你的代码，具体应用有回调函数（就是指明了完成当前任务之后还会再怎样执行）、异步AJAX。JavaScript中提供了一个类Promise，更加优雅的实现了异步任务的编写。

正则表达式

正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。主要用于文本查找和文本替换。

语法：

/正则表达式主体/修饰符(可选)

可以用字符串调用以下调用方法进行对文本的操作（参数均为）
- search(正则表达式) 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
- replace(正则表达式，替换的目标字符串) 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
在JavaScript中，预设了一个正则表达式的对象RegExp，则可以使用正则表达式调用以下方法：
- test(字符串)：目标字符串中是否含有满足该正则表达式的字符串
- exec(字符串)：返回字符串中满足正则表达式的字符串数组

调试

console.log()方法：在调试控制台中输出
debugger：程序在执行到这句话时就停止，相当于一个断点

表单验证

使用JavaScript进行表单验证添加适当的逻辑进行验证（数据验证）

通过向标签中添加适当的属性进行自动验证（约束验证）

约束验证 HTML 输入属性

属性	描述
disabled	规定输入的元素不可用
max	规定输入元素的最大值
min	规定输入元素的最小值
pattern	规定输入元素值的模式
required	规定输入元素字段是必需的
type	规定输入元素的类型

约束验证CSS伪类选择器

选择器	描述
:disabled	选取属性为 “disabled” 属性的 input 元素
:invalid	选取无效的 input 元素
:optional	选择没有"optional"属性的 input 元素
:required	选择有"required"属性的 input 元素
:valid	选取有效值的 input 元素

JavaScript验证API：

约束验证DOM方法

Property	Description
checkValidity()	如果 input 元素中的数据是合法的返回 true，否则返回 false。
setCustomValidity()	设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity 总是会返回false。如果要重新判断需要取消自定义提示，方式如下： `setCustomValidity('') setCustomValidity(null) setCustomValidity(undefined)`

约束验证DOM属性

属性描述
validity 布尔属性值，返回 input 输入值是否合法
validationMessage 浏览器错误提示信息
willValidate 指定 input 是否需要验证

属性	描述
validity	布尔属性值，返回 input 输入值是否合法
validationMessage	浏览器错误提示信息
willValidate	指定 input 是否需要验证

Validity属性

属性	描述
customError	设置为 true, 如果设置了自定义的 validity 信息。
patternMismatch	设置为 true, 如果元素的值不匹配它的模式属性。
rangeOverflow	设置为 true, 如果元素的值大于设置的最大值。
rangeUnderflow	设置为 true, 如果元素的值小于它的最小值。
stepMismatch	设置为 true, 如果元素的值不是按照规定的 step 属性设置。
tooLong	设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
typeMismatch	设置为 true, 如果元素的值不是预期相匹配的类型。
valueMissing	设置为 true，如果元素 (required 属性) 没有值。
valid	设置为 true，如果元素的值是合法的。

保留关键字

JavaScript保留关键字（JavaScript经常和Java一起使用，所以也要注意与Java的保留关键字区分）

abstract	arguments	boolean	break	byte
case	catch	char	class*	const
continue	debugger	default	delete	do
double	else	enum*	eval	export*
extends*	false	final	finally	float
for	function	goto	if	implements
import*	in	instanceof	int	interface
let	long	native	new	null
package	private	protected	public	return
short	static	super*	switch	synchronized
this	throw	throws	transient	true
try	typeof	var	void	volatile
while	with	yield

JavaScript对象、属性和方法

Array Date eval function hasOwnProperty
Infinity isFinite isNaN isPrototypeOf length
Math NaN name Number Object
prototype String toString undefined valueOf

Array	Date	eval	function	hasOwnProperty
Infinity	isFinite	isNaN	isPrototypeOf	length
Math	NaN	name	Number	Object
prototype	String	toString	undefined	valueOf

Windows保留关键字

alert	all	anchor	anchors	area
assign	blur	button	checkbox	clearInterval
clearTimeout	clientInformation	close	closed	confirm
constructor	crypto	decodeURI	decodeURIComponent	defaultStatus
document	element	elements	embed	embeds
encodeURI	encodeURIComponent	escape	event	fileUpload
focus	form	forms	frame	innerHeight
innerWidth	layer	layers	link	location
mimeTypes	navigate	navigator	frames	frameRate
hidden	history	image	images	offscreenBuffering
open	opener	option	outerHeight	outerWidth
packages	pageXOffset	pageYOffset	parent	parseFloat
parseInt	password	pkcs11	plugin	prompt
propertyIsEnum	radio	reset	screenX	screenY
scroll	secure	select	self	setInterval
setTimeout	status	submit	taint	text
textarea	top	unescape	untaint	window

HTML的句柄

onblur onclick onerror onfocus
onkeydown onkeypress onkeyup onmouseover
onload onmouseup onmousedown onsubmit
非标准的JavaScript，一个实例是 const 关键字，用于定义变量。一些 JavaScript 引擎把 const 当作 var 的同义词。另一些引擎则把 const 当作只读变量的定义。

Const 是 JavaScript 的扩展。JavaScript 引擎支持它用在 Firefox 和 Chrome 中。但是它并不是 JavaScript 标准 ES3 或 ES5 的组成部分。建议：不要使用它。
this关键字并不是固定不变的，它会随着所处的环境而改变含义
- 在方法中，this 表示该方法所属的对象。
- 如果单独使用，this 表示全局对象。
- 在函数中，this 表示全局对象。
- 在函数中，在严格模式下，this 是未定义的(undefined)。
- 在事件中，this 表示接收事件的元素。
- 类似 call() 和 apply() 方法可以将 this 引用到任何对象。
let关键字定义的变量是区块级别的，但声明为全局变量时也不属于Windows对象，声明过的对象在同一区块中不能再重复声明。const关键字声明的变量的值是不变的，但不等同于常量，所声明的对象中的值还是可以改变的。
JavaScript:void(0)中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值，语法如下：
```
void func()
javascript:void func()
// 或
void(func())
javascript:void(func())
```
href="#"与href="javascript:void(0)"的区别就是前者是占据一个位置的，而后者是一个死链接