javaScript和前面的css、html不一样,javaScript是一种编程语言。
javaScript:是一门客户端脚本语言。怎么理解呢?
客户端是指:javaScript是运行在客户端浏览器中的且每一个浏览器都有JavaScript的解析引擎。
脚本语言是指:不需要编译,直接就可以被浏览器解析执行了,不像java那样要先编译为.class文件然后才能被执行,脚本语言是可以直接被执行的。
作用:可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验。比如:轮播图、你鼠标放到页面的某个位置给你展开对应的菜单、点击按钮让页面对你的点击产生反馈、点击显示隐藏文本框等等。
在1990年代的时候,因为网络传输的速度比较慢,然后那个时候因为浏览器这边不能处理任何请求,每一次的请求都要发送到服务器端处理,然后再返回结果,速度就很慢,然后就出现了脚本语言,这个脚本语言可以在浏览器这边给你做一些简单的校验,这样你就不用每次都发送请求到服务器了。比如你要注册一个用户信息,然后你注册的时候需要输入一些信息,以前没有脚本语言的时候,你每次点击注册的时候都要发送信息到服务器端,然后你某个信息没有填了或者格式写错了,这种简单的错误,你也要发送到服务器端处理验证,而且你传输的速度比较慢,那么你注册等待的时间就很久了,用户体验会极差。然后有了脚本语言,这个语言让你注册输入的不符合要求的错误,在浏览器这里用脚本语言去做校验,就不用传输到服务器去处理了。然后你要是输入格式都是对的,你点击注册,才把信息传输到服务器去执行,再反馈给你页面,这样速度就快多了,用户体验就会好多了。脚本语言的好处就是:不用和服务器进行交互,这个脚本语言可以在客户端这边直接执行,来控制html的元素并判断内容的格式是否正确、数据是否完整。要是符合要求再去把数据发送到服务器端去处理。
所以对于脚本语言,那个时候最先出来的就是C–语言,因为C++当时比较火,这个公司想借东风火起来,但是结果没有火,因为C++比较难,大家都以为C–也比较难就不愿意学了。然后后来网景这个公司发现这个脚本语言很好,就开发了LiveScript,但是也没有火起来,因为这个公司是做浏览器的公司,对语言开发的还不是很成熟,然后java火了,这个公司就请java公司的专家来改造这个LiveScript并且改名为javaScript,借java的热度,这个语言也火起来了。然后微软看到这个语言这么火,就抄袭,写了一个JScript,也火起来了。然后这个C–就不爽了,他们都是从C–公司借鉴来的,他们都火了,自己为什么没有火,然后他们发现是这个名字取得有问题,然后他们就把这个语言改名为ScriptEase。然后也火起来了。这样就迎来了三足鼎立的效果,对程序员来说很不友好,因为他们要会三门语言才能让一个网页在不同浏览器中都能使用。所以ECMA组织就站出来了,他把这三家的语言整合了,他定义了一个标准叫ECMAScript,那三家都得来遵循这个标准改造自己的语言,所以现在的JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)。
现在的javaScript:JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
ECMAScript:客户端脚本语言的标准。
内部JS:你需要定义标签,然后在标签体里面就写js代码。注意这个
标签可以写在html的任何位置,在head标签内,在body标签内等等都是可以的(但是不能违反标签的语法,比如不能
这样写)。但是写在不同位置,那么他们执行的顺序就不一样,比如你把
语句写在head标签里,就会让这个js语句先与body标签里面的东西执行,即你先执行js语句,然后再显示body里面标签效果。
例1,我们这个标签写在任何位置都是可以的。
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z7EX0YdA-1669000887833)(javaScript/image-20221110110822440.png)]
例2,你把script
语句放在不同的位置,那么执行的顺序也会不同。
代码:你script标签在head标签内,head标签是比body标签先执行的。所以这里是先执行script然后再执行input,但是这个alert语句是带堵塞的,你要点击确定后才会去执行下面的语句,所以效果是下面这样的。因此,如果你要让script语句能获取到某个标签的值,那么你就得把这个script标签放在那个标签的后面,让script标签后执行。
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EnDun9fY-1669000887835)(javaScript/image-20221110112014875.png)]
点击确定后效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZMUDdsaM-1669000887838)(javaScript/image-20221110112039237.png)]
代码:script
语句在input标签后面
效果:你看是先显示了文本输入框,然后再执行js语句,因为显示文本输入框这个html语句是没有堵塞的,所以显示了文本输入框后就立马显示js的提示框了。
外部JS:你需要定义标签,然后通过这个标签的src属性引入外部的js文件。一般你把这个js文件的名字命名为js。
资源文件:
代码:
效果:先显示”Hello World“,你点击确定后,再显示”我是外部的js文件“。因为现实Hello World的js语句写在前面,所以先执行。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FhZJxtgQ-1669000887840)(javaScript/image-20221110141517784.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hyGKCOxI-1669000887842)(javaScript/image-20221110141600936.png)]
注意:
可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
可以定义多个。并不是一个html文件只能定义一个script
标签。单行注释://注释内容
多行注释:/注释内容/
例子:
变量:一小块存储数据的内存空间。
Java语言是强类型语言,而JavaScript是弱类型语言。
强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。以后就只能是存这个数据类型的数据了,不能改变的。强类型的数据只能存储固定类型的数据
弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,即,将来这片内存空间可以存放任意类型的数据。
模型如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jZbhNI4T-1669000887844)(javaScript/image-20221110150225352.png)]
定义变量的语法:
var 变量名 = 初始化值;
或者 var 变量名;
使用例子如下:
效果:先弹出一个3,然后堵塞,你点击确定,再弹出abc。所以可以看到我们给a这个变量赋值不同的数据类型的值是可以运行成功的。
javaScript的定义变量的演示如下
代码:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量title>
<script >
//下面我们来演示一下各种变量的定义:
//定义number类型
var num = 1;
var num2 = 1.2;
var num3 = NaN;//表示定义一个不是数字的数字类型。
/*
这里先了解一下document.write();这个语句,这个语句就相当于我们java中的在控制台打印数据的效果,我们先直接来用,之后我们才去讲这个语句的原理。这个document.write();和System.out.print()类似,你document.write("a"+"b");就是进行字符串拼接。但是你用这个语句在网页里面显示的是不带换行的,这里没有自带换行的输出。但是我们可以document.write(num+"
");这么写,在原来的document.write(num);后面加上一个+"
"就能达到换行的效果了。注意:这里除了可以在document.write();里面写
还能写其他的html标签,比如document.write("
");就是在网页打印一个横线的效果。
*/
//输出到页面上
document.write(num+"
");
document.write(num2+"
");
document.write(num3+"
");//显示NaN
//定义string类型
var str = "abc";
var str2 = 'edf';
document.write(str+"
");
document.write(str2+"
");
//定义boolean
var flag = true;
document.write(flag+"
");
/*
我们给一个变量一个null值,那么他就是null,你要是没有给这个变量一个null值,这个变量的值就是undefined,你也可以给这个变量一个undefined值,其实效果是一样的。
*/
// 定义null,undefined
var obj = null;
var obj2 = undefined;
var obj3 ;
document.write(obj+"
");
document.write(obj2+"
");
document.write(obj3+"
");
script>
head>
<body>
body>
html>
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gRxn4H9e-1669000887846)(javaScript/image-20221110152141226.png)]
typeof函数:可以获取变量当前存的数据的数据类型。
使用例子,代码展示:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量title>
<script >
var a = 1;
document.write(a+"------"+typeof(a) +"
");
a=NaN;
document.write(a+"------"+typeof(a) +"
");
a = "abc";
document.write(a+"------"+typeof(a) +"
");
a = true;
document.write(a+"------"+typeof(a) +"
");
a = null;
document.write(a+"------"+typeof(a) +"
");
a = undefined;
document.write(a+"------"+typeof(a) +"
");
script>
head>
<body>
body>
html>
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2zgTbwvB-1669000887849)(javaScript/image-20221110154803397.png)]
解释null执行typeof返回object:即,解释为以前null解释为object是一个错误,但是现在我们对null的解释是认为他是一个对象的占位符,所以从解释上可以理解了,他就没有改变这个bug了。以前我们对null的解释是,他是一个表示空的常量,所以他应该是一个原始值,所以在以前这里就是错误的,但是现在我们认为null是对象的占位符,所以他就不改变这个bug了,因为这样也能被理解。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IvxvuAVS-1669000887852)(javaScript/image-20221110155025401.png)]
一元运算符:只有一个运算数的运算符。比如a++就是一元运算符,因为这个运算符需要一个运算数。但是a+b需要两个运算数,所以这个a+b的+是一个二元运算符。然后a > b ? 1:0;因为需要三个运算数参与运算,所以这个"关系表达式? 表达式1: 表达式2;"是三元运算符。
一元运算符主要有:++,-- ,+(正号,不是加号) ,-(负号)。
注意点:
++(–) 在前,先自增(自减),再运算
++(–) 在后,先运算,再自增(自减)
注意:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换。所以你要是在一个正号或者负号或者++、–后面跟一个非数值类型的变量,那么这个变量会先转为对应的数值类型,然后再参与运算。
其他数据类型转为number的转换规则:
算数运算符
即,加减乘除取模等那些运算符:+ - * / % ...
赋值运算符
即,= += -+....
,和java中的一样。
比较运算符
即,> < >= <= == ===(全等于)
类型相同的两个值进行比较:直接比较。注意字符串之间的比较是:按位逐一比较字符串一个字符的asc码大小,一样就比较两个字符串的下一个字符,直到得出大小为止。
类型不同的两个值进行比较:先进行类型转换,再比较。如果字符串和number类型的数据进行比较,是把字符串类型转为number类型的数据,要是转换失败就是把字符串转为NaN,NaN和任何数值进行比较返回都是false。
在比较运算的时候要(字符串和字符串比较不用转换。就算你是”123“>null的比较也是都转为number类型再比较的)、一元运算的时候、算术运算的时候(字符串和字符串相加的时候是拼接不用转换)的类型转换规律是:
这里总结一下NaN的运算
===:全等于这个运算符的比较效果为:在比较之前,先判断类型,如果类型不一样,则直接返回false。全等于判断的时候不转换类型,要是判断类型不同直接就是返回false了。
比较的结果是一个boolean类型的值。
逻辑运算符
即,&& || !
,注意:这里的这个&&是短路的与,这里的||是短路的或。
进行逻辑运算的时候boolean外的其他类型都会转boolean类型的值,然后进行运算,转换的规则如下:
注意:运算符的优先级还是和java一样,!和单元运算符的优先级是最高的,然后赋值号的优先级是最低的。
例子:
document.write(15&&11&&1);//显示为1
15 1111
11 1011
结果1011
1 0001
结果 0001
document.write(0||15&&10);//显示为10
10 1010
15 1111
结果 1010
0 0000
结果 1010
document.write(9||15&&11&&1);//显示9
15 1111
11 1011
结果 1011
1 0001
结果 0001
9 10001
结果 1001
所以:
java中的while(某个引用变量!=null){……}
在javaScript中可以写为while(某个引用变量){……}
java中的while(字符串引用变量!=null && 字符串引用变量.length()>0){……}
可以写为javaScript中的while(字符串引用变量){……}
三元运算符
即,? : 表达式1 ? 表达式2;
,和java的三元运算符一样。
if…else…
switch
在java中,switch语句的括号里面可以接受的数据类型: byte、int、short、char、枚举(JDK1.5) 、String(JDK1.7)
但是在js的switch语句的括号里面可以接受任意的原始数据类型
比如下面这个写法在js中就是语法正确的:
while
do…while
for
是每一句语句都以分号结尾。但是要是这一行里面就只有一条语句的话,可以省略分号,每一句语句加分号的话,一行可以写多个语句。我们写的时候不建议用省略分号的写法。
变量的定义可以写var也可以省略。要是你用了var定义变量,那么定义出来的变量是局部变量,你要是不用var定义的变量,那么定义出来的就是全局变量。
但是我们也不建议使用这样定义全局变量,我们要让块外面能访问那个变量我们建议使用下面这个方式,这样可读性会更好一点。
但是要注意一点:就是你在方法里面定义了一个全局变量,你要调用那个方法,那个变量才能被使用。
比如下面这样你就能弹出4
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JODcWQHh-1669000887853)(javaScript/image-20221113162720172.png)]
但是你要是下面这样,方法里面初始化变量,但是你没有调用这个方法,那么你使用这个变量将会用不了,虽然没有提示你错误,但是连弹窗都没有。
例子:我们要用javaScript输出一个9*9乘法表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7oVZFAnw-1669000887855)(javaScript/image-20221111093640759.png)]
代码:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>99乘法表title>
<style>
td{
border: 1px solid;
}
style>
<script>
document.write("");
//1.完成基本的for循环嵌套,展示乘法表
for (var i = 1; i <= 9 ; i++) {
document.write("");
for (var j = 1; j <=i ; j++) {
document.write("");
//输出 1 * 1 = 1
document.write(i + " * " + j + " = " + ( i*j) +" ");
document.write(" ");
}
/*//输出换行
document.write("
");*/
document.write(" ");
}
//2.完成表格嵌套
document.write("
");
script>
head>
<body>
body>
html>
所以可以总结一点:就是你用javaScript其实就是相当于用程序语言去动态地去写html语句。相当于你document.write(“”)就是动态地写了一个标签。你用上面这个javaScript语句其实就是相当于用js写了一些html语句,然后一起把他生成的这个html语句拿去执行,然后展示出效果。
对象包括基本对象、BOM对象、DOM对象。
Boolean、Number、String类型就像是原始类型的包装类型对象,这里细讲了,自己看菜鸟教程就行https://www.runoob.com/jsref/jsref-obj-boolean.html,很简单的。
Function:函数对象。他是一个特殊的对象。在java中方法是一个对象的一部分。但是在js中方法(函数)就是一个对象。
对象的创建:有三种方式。
属性:length,作用是记录形参的个数,不是记录实参个数。
特点:
调用格式:方法名称(实际参数列表);
例子演示:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
//创建对象的方式1。但是这种方式用得不多,因为这个方式定义时只能写得比较难看。
//1.创建对象。这种创建有一个坏处就是,比较难看,不是很符合我们其他语言的习惯。这个方法体就是你定义函数对象写的参数中的最后一个字符串。除最后一个字符串,其他字符串都是定义的形参名字,这里的a和b这两个字符串都是形参名。
//格式为:var fun = new Function(形式参数列表,方法体);
var fun1 = new Function("a", "b", "alert(a+b);");
//2.调用方法
fun1(3, 4);//效果:弹出7
alert(fun1.length);//可以看出我们这个fun1就是一个对象。这个length相当于是他的属性。这个属性记录了这个对象定义的时候需要的形参的格个数。这里弹出2。
//创建对象的方式2:这种方式比较类似我们java中的那个方法。
//1.创建。注意:javaScript方法定义时,不用写形参的类型,即你java中定义方法void f(int a,int b){……},你在js中定义方法不是function f(var a,var b){……}这样,而是要写为function f(a,b){……}这样。而且js中这样的写法不只是方法定义了,他是既定义了方法又创建了函数对象。且给了对象名,下面这个例子的对象名为fun2。
function fun2(a, b) {
alert(a + b);
}
//2.调用方法
fun2(4, 5);//弹出4。其实这里要是没有后面的覆盖,对象这里弹出的是9,因为后面我们覆盖了这个fun2对象,让这个fun2指向了后面那个对象,所以这里弹出4。这一点要注意,后面的覆盖会影响前面的调用对象的结果。
//创建对象的方式3:这种方式是相当于创建的对象叫fun3
//1.创建对象
var fun3 = function (a, b) {
alert(a + b);
}
//2.调用方法
fun3(7, 8);//效果:弹出15
//下面这样就相当于用fun2指向了新的对象了。就是这里的覆盖fun2对象,才导致上面的fun2(4, 5);调用语句弹出4.
function fun2(a, b) {
alert(a);
}
//在js中你定义的方法是两个参数的,你调用的时候你实参可以不匹配他的形参个数。这一点在java中是不行的,java中实参必须和形参严格匹配。js中多传、少传某个参数甚至形参需要参数但是不传实参都是可以的。少传或不传的话你没有给值的变量的值就被当作是undefined。
fun2();//弹出undefined
fun2(12);//弹出12
fun2(11, 12, 13);//弹出11。12传进去方法但是没有用到,所以没有弹出。13没有弹出,因为13没有被某个形参接收,但是这里注意,虽然没有被形参接收,但是这个13被fun2这个对象的arguments对象接收了。
//定义方法可以有返回值。写在return后面就行了。方法名前面不用写返回类型。如下面这个例子:
/*
* 求两个数的和
*/
function add(a, b) {
return a + b;
}
var sum = add(1, 2);
alert(sum);//弹出3
//你是要是多传某个参数,那么函数对象就没有接收他吗?不是的,他还是被接收了。在函数对象里面有一个内置对象,叫arguments,这个对象类似java中的数组,这个对象会记录所有传进来的实参的值,看下面例子。
/**
* 求任意个数的和
*/
function add() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {//第一个实际参数放在arguments[0]里面、第二个实际参数放在arguments[1]中……
sum += arguments[i];
}
return sum;
}
var sum = add(1, 2, 3, 4);//弹出10。在js中一个变量可以被多次定义都没有关系,你看我们前面也定义了sum变量。但是这种不是对象的变量,你这样覆盖不会影响前面的变量的值,所以前面还是弹出了3。
alert(sum);//弹出10
script>
head>
<body>
body>
html>
Array:数组对象
创建:有三种方式
方法
属性
length:数组的长度
特点:
例子演示:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
//1.创建方式1
var arr1 = new Array(1, 2, 3);
var arr2 = new Array(5);//注意:这种方式创建,不是创建了一个数组里面只有一个元素5.而是创建了一个数组且里面有五个数据,这五个数据都是undefined类型的。
var arr3 = [1, 2, 3, 4];
var arr4 = new Array();//相当于创建了一个空的数组。
document.write(arr1 + "
");//打印了1,2,3
document.write(arr2 + "
");//打印了,,,,
document.write(arr3 + "
");//打印了1,2,3,4
document.write(arr4 + "
");//没有打印任何东西
document.write(typeof(arr2[0]) + "
");//显示undefined
var arr = [1,"abc",true];
document.write(arr +"
");//这里打印1,abc,true,说明js中的数组的元素可以不同的数据类型。
document.write(arr[0] +"
");//JS中访问数组的第一个元素也是用[0]这样来访问。这里打印1.
document.write(arr[1] +"
");//打印abc
document.write(arr[2] +"
");//打印true
document.write(arr[3] +"
");//打印undefined。前面你arr你给了3个值,所以他的长度就是3,但是你去访问第四个元素也不会出现错误,这里不像java那样,只是你去访问一个下标越界的数组的元素访问到的值是undefined而已。
document.write(arr +"
");//打印1,abc,true。但是这里你看还是显示了3个值
arr[10]=12;//你给值才相当于真正的扩容,前面只是访问其实并没有扩容。所以这样就可以让他显示出来了,看下面这个打印语句。你去给数组大于下标界线的位置赋值,那么这个arr这个数组就自动扩容了,不像java那样的数组的长度是固定的,js中的数组的长度是可变的。
document.write(arr +"
");//这样打印就是:1,abc,true,,,,,,,,12了。且不会影响前面var arr = [1,"abc",true];后面的document.write(arr +"
");的输出结果。
var arr5=[1,2];
document.write(arr5[5]+"
");//显示undefined
document.write(arr5.length+"
");//这个length表示数组的长度,这里显示2,说明你只是访问一个数组的越界的下标的元素不会把数组扩容。
document.write(arr.join()+"
");//打印:1,abc,true,,,,,,,,12。说明你没有给join一个参数,他默认以逗号分隔开地打印。
document.write(arr.join("--")+"
");//打印:1--abc--true----------------12。你给了这个参数就会用这个参数作为分割符来打印。
document.write(arr+"
");//打印:1,abc,true,,,,,,,,12。你这样写和document.write(arr.join()+"
");这样写是等价的。
document.write(arr.length+"
");//显示11,说明原来数组的长度是11
document.write(arr.push(11)+"
");//显示12,说明这个push方法既增加了一个元素,又能返回一个添加元素后的新数组长度。
document.write(arr.join("--")+"
");//显示1--abc--true----------------12--11。说明这个元素是在尾部增加的
script>
head>
<body>
body>
html>
Boolean
自己看https://www.runoob.com/jsref/jsref-obj-boolean.html和https://www.runoob.com/js/js-obj-boolean.html就行了
Date:日期对象
创建:var date = new Date();
方法:
例子演示:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
var date = new Date();//你创建的date对象,默认就是把你本机里面的时间封装起来。
document.write(date + "
");//打印:Sun Nov 13 2022 10:52:00 GMT+0800 (中国标准时间)。虽然默认打印的是中国的时间,但是显示是这样用英文的。
document.write(date.toLocaleString() + "
");//打印2022/11/13 10:54:33。这个打印的时间是根据你本机的操作系统的一些设置匹配的。
document.write(date.getTime() + "
");//显示:1668308258309。这个方法之后会经常使用,作为时间戳来使用,时间戳等讲到了再了解,现在不知道没事。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差。
script>
head>
<body>
body>
html>
Math:数学对象
创建:
Math对象不用创建,直接使用。使用格式:Math.方法名();
或者Math.属性;
方法:
属性:
PI:返回圆周率(约等于3.14159)。
例子演示:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
document.write(Math.PI +"
");//显示:3.141592653589793
document.write(Math.random() +"
");//显示:0.6735740240539512这个每次显示的值都不一样。返回一个[0,1)之间的整数。
document.write(Math.round(3.14) +"
");//显示3,四舍五入。
document.write(Math.ceil(3.14) +"
");//显示4,向下取整。
document.write(Math.floor(3.14) +"
");//显示3,向上取整。
/**
* 下面来做一个练习:取1~100之间的随机整数。
* 步骤:
* 1. Math.random()产生随机数:范围 [0,1)小数
* 2. 乘以 100 --> 得到[0,99.9999……] 小数
* 3. 舍弃小数部分 :floor --> 得到[0,99] 整数
* 4. +1 -->得到[1,100]的整数
*/
var number = Math.floor((Math.random() * 100)) + 1;
document.write(number);//打印:26。每次打印都不一样,但是都是[1,100]范围内的。
script>
head>
<body>
body>
html>
Number
自己看https://www.runoob.com/jsref/jsref-obj-number.html就行了
String
自己看https://www.runoob.com/jsref/jsref-obj-string.html和https://www.runoob.com/js/js-obj-string.html就行了
RegExp:正则表达式对象
正则表达式的定义:正则表达式就是定义字符串组成规则的表达式。使用场景比如,我们如果要做到对注册输入的信息进行校验就需要用到正则表达式。如果要验证我们写的正则表达式我们可以进入这个https://regex101.com/网址。这个网址的效果如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AT3Iitae-1669000887857)(javaScript/image-20221114091752821.png)]
正则表达式定义字符串的组成规则的语法如下:
1.直接输入字符,那么这个它会匹配包含这个字符的单词。比如上面那个截图输入的se,就能匹配出下面那些单词。
2.限定符?:?表示前面的那一个字符需要出现0次或者多次。比如你输入"used?"能匹配出use后面跟0个d或多个d的字符。比如这个"used?"就能匹配出“use”、“used”、“usedd”等等。
3.*,比如ab*c,表示匹配包含abc的字符,其中b可以出现0或多次。所以可以匹配aabcg、ac、abbbc等等.
4.+,比如ab+c,表示匹配包含abc的字符,其中b必须出现1或多次。所以它可以匹配kjabc、abbc、abc。但是不能匹配ac。
5.{XX},比如a{2}c,效果和aac一样。你也可以这样a{2,6}c表示匹配包含aac或者aaac或者aaaac或者aaaaac或者aaaaaac的字符。a{2,}表示匹配包含aa或者包含aaa或者包含aaaa……的字符(这个a可以是2-无穷多个)。a{,5}表示匹配包括a的个数不超过5的字符。下面举一个例子:就比如an{2,}oj{1}这个正则表达式可以匹配afaannnnnnojakf、jalkannnojal等等,但是这个jalannoaks就不能匹配到,它这个n{2,}会尽量去匹配最多的n字符,懂我意思吧。
6.(),比如(ab)+,表示这个ab这个整体必须出现1次或多次。你要是ab+表示匹配包含ab,且这里的b必须是1个以上的字符。所以(ab)+能匹配abc、ababc、kkabakj等。
7.或,比如你输入a (cat|dog),表示匹配包含“a空格cat”或包含“a空格dog”的字符。所以这个aa catjakl、fafaa dogjkl等能被匹配到。要是没有括号,比如a cat|dog,那么能匹配到aa catjakl、adfdogfa等,即包含a cat或者包含dog的字符。
8.[],比如[abc]表示匹配包含a或者包含b或者包含c的字符。[a-z]等同于写[abcde一直写到z]、[a-zA-Z0-9_]等同于写[abcde一直写到zABCD一直写到Z0123一直写到9_],即你匹配的字符里面至少得包含一个a到z或者A到Z或者0到9或者下划线。[a-zA-Z0-9_]也可以写为\w,他们效果是一样的。[^0-9]表示匹配所有不包含0到9的字符。
9.元字符:\d、\w、\s、\D、\W、\S等。\d等同于[0-9],\w等同于[a-zA-Z0-9_],\s表示匹配包含1到多个“空白符或tab制表符或换行符的组合”。\D表示匹配所有非数字字符。\W表示匹配所有不包含单词字符的字符。\S表示匹配所有非空白字符。\W、\D、\S的功能你不清楚可以用那个网站试一试,这里的描述可能不是很准确。
10..,“点”这个字符表示一个任意字符但是不包括换行符,包含制表符和空白符。比如a.t可以匹配到earths、wasting、constantly等。
11.^,匹配行首,比如^a只会匹配开头是a的字符。
12.$,匹配行尾,比如a$就只会匹配末尾是a的字符。注意一点:^a$想这样的开头是^且结尾是$的,表示整个字符串只能匹配字符串a,就算是前面后面都是a的字符串也不能被匹配到,比如这个ajafa就不能被匹配到,aa也不能被匹配到。^a{2,4}$能匹配到aa、aaa、aaaa,其他的都不能匹配到,比如a就不能被匹配到,aafjkaaa也不能被匹配到。aaaaaa也不能被匹配到。然后^w(6,12)$表示能匹配的字符串一定是6到12位的,且这个字符串里面的字符都是A-Z或者a-z或者0-9或者是下划线。
13.在这个正则表达式中那些可以包含多个的字符的那些正则表达式会尽可能吃下多的字符。比如<.+>匹配的范围是<span><b>this is example<b><span>,整个,即,你正则表达式中的小于对应了开头的<span>的小于,然后你的.+会尽可能的去吃下更多的字符,直到吃不下,但是这个.+什么都能吃,所以它直接吃到了末尾的大于了。所以你要不匹配这么多这么办呢,你可以用一个?把贪婪匹配转为懒惰匹配。比如:<.+?>就能匹配到<span><b>this is example<b><span>中的<span>、<b>、<b>、<span>了,不会把this is example也匹配进去。
想了解更多正则表达式的使用,看https://www.bilibili.com/video/BV1da4y1p7iZ/?spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=6c8703cbdfa7e6df8af2a7526767e928这视频,重点在视频的7.07之后的例子。
正则对象:
“正则对象”.test(某个字符串)
的作用就是判断这个字符串是不是符合这个正则对象封装的正则表达式定义的规则。要了解更多正则对象的使用,请参考https://www.runoob.com/jsref/jsref-obj-regexp.html这个网站。
例子:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
//创建方式1:
var reg = new RegExp("^\\w{6,12}");//因为这个字符串的反斜线会被当作是转移字符的\,所以这种方式写正则表达式我们就得把正则表达式中的一根反斜线的地方都换为为双反斜杆
//创建方式2:
var reg2= /^\w{6,12}/;
//把正则表达式对象直接弹出可以看到它的正则表达式内容。可以看出这两个正则对象都是表示\w{6,12}^这个正则表达式。
alert(reg);//显示/^\w{6,12}/
alert(reg2);//显示/^\w{6,12}/
//test(参数)方法:验证指定的字符串是否符合正则对象中的正则表达式定义的规范。符合返回true,不符合返回false
//比如我们要验证这个用户名username是否符合^\w{6,12}这个正则表达式定义的规范。我们可以这样:
var username = "zhangsan";
var flag = reg2.test(username);
alert(flag);//这个“zhangsan”符合reg2这个正则表达式的规则。所以弹出true
script>
head>
<body>
body>
html>
Global
特点:这个对象就是一种全局对象,什么意思?就是指这个Global对象中封装的方法不需要对象就可以直接调用。调用方式为:方法名();
URL编码:因为我们在浏览器里面进行数据传输的时候我们是用传输协议来传输数据的,比如http协议。然后因为这个协议是不支持中文的数据的,因此如果要把中文的数据传输到服务器端去,就需要把中文的数据进行转码,然后因为转码我们经常会用的是URL编码来完成。比如我们“传智播客”这四个字对应的URL编码就是:%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2。怎么看这个编码呢?假设我们看到“传智播客”是UTF-8的编码后显示的效果,我们先把这个“传智播客”变回为2进制的编码。因为一个UTF-8的汉字一个汉字大部分占3个字节。所以这四个字就是占12个字节。所以假设这四个汉字转回为二进制的结果如下图这串二进制数。然后它会把每一个字节都变为16进制数,然后前面加一个%。这样变为一串字符然后传输。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8DYpMXKc-1669000887859)(javaScript/image-20221113205520681.png)]
下图可以看到这个字符被传输的样子,下图这一串%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2就是“传智播客”对应的URL编码。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-650J1f6z-1669000887861)(javaScript/image-20221113205749159.png)]
我们要把中文的数据传输给服务器,我们就需要自己去做把中文转码为URL编码的形式,使用的方法就是下图这样:自己调用encodeURI()方法。这里要注意,看下面这个html的charset我们知道别人是用UTF-8格式来识别这个html的,所以你这个html文件里面写的代码它都认为是你用UTF-8格式来写的,就是它会把“传智播客”这个文字当作是utf-8的格式,然后把这个文字按utf-8的格式转为对应的二进制,然后把这个二进制数编码为url编码的格式。所以下面这个图就是展示了UTF-8格式下的“传智播客”变为对应的URL编码的格式是什么样的,看到这个打印结果和%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2是一致的,说明我们上面这个截图(网址的这个截图)实际上也就是我们把UTF-8格式下看到的“传智播客”这几个字转为对应URL编码的结果,即,黑马程序员他们做这个网页时他们写的html文件的meta标签的位置也是UTF-8。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X6Qe9f3Q-1669000887862)(javaScript/image-20221113210222169.png)]
代码演示:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Global对象title>
<script >
/*
Global
1. 特点:这个对象就是一种全局对象,什么意思?就是指这个Global对象中封装的方法不需要对象就可以直接调用。调用方式为:方法名();
2. 方法:
encodeURI():url编码
decodeURI():url解码
encodeURIComponent():url编码,编码的字符更多。就比如我们用encodeURI()不会把下面的"http://www.baidu.com?wd=传智播客"中的/编码但是用这个encodeURIComponent()就能把斜杆一起编码了。
decodeURIComponent():url解码,解码encodeURIComponent()编码的结果
parseInt():将字符串转为数字
* 这个转换和自动把字符串转换为数字的不同。它是逐一判断每一个字符是否是数字,直到不是数字为止,将字符串前边数字部分转为number。
isNaN():判断一个值是否是NaN
* NaN六亲不认,连自己都不认。NaN参与的比较全部都返回false
eval():把字符串转为JavaScript语句,并把它作为脚本代码来执行。
*/
var str = "http://www.baidu.com?wd=传智播客";
var encode = encodeURI(str);
document.write(encode +"
");//显示http://www.baidu.com?wd=%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
var s = decodeURI(encode);
document.write(s +"
");//显示http://www.baidu.com?wd=传智播客
var str1 = "http://www.baidu.com?wd=传智播客";
var encode1 = encodeURIComponent(str1);
document.write(encode1 +"
");//显示http%3A%2F%2Fwww.baidu.com%3Fwd%3D%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
var s1 = decodeURIComponent(encode);
document.write(s1 +"
");//显示http://www.baidu.com?wd=传智播客
var str = "134abc";
var number = parseInt(str);
alert(number + 1);//弹出135
alert(str++);//弹出Nan,因为这个自动转为数值失败会把那个str当作Nan,然后++,Nan参与的运算也都是Nan,所以结果是Nan
var str = "a134abc";
var number = parseInt(str);
alert(number + 1);//弹出Nan,因为那个字符串一开始不是数字。
var a = NaN;
document.write(a == NaN);//打印false。Nan六亲不认就是指,Nan和任何数比较都是false,Nan==Nan比较也是false。所以需要isNan()这个方法来判断一个值是不是Nan。
document.write(isNaN(a));//打印true。
var jscode = "alert(123)";
alert(jscode);//要是这样的话,就是弹出"alert(123)"这个字符串
eval(jscode);//这样的话,会把这个字符串转为js语句,然后执行。所以这一句语句执行会弹123.
script>
head>
<body>
body>
html>
想了解更多的Global的知识点,请查看https://www.runoob.com/jsref/jsref-obj-global.html网址。
笔记在javaScript高级里面
笔记在javaScript高级里面