计算机的语言
js是一种计算机语言
计算机语言是指人与计算机之间的通讯的语言,计算机语言是人与计算机传递信息的媒介,计算机系统最大的特征,是通过一种语言传达给机器,为了是电子计算机进行各种工作,就需要一套用以编写的计算机程序的数字,字符和语法法则,有这些字符和语法规则组成计算机各种指令(或各种语句)这些就是计算机能接受的语言
JavaScript
JavaScript是一种直译式脚本语言,它和Java语言不一样,Java语言是介于解释型和编译型语言之间的一种语言,在虚拟机上运行,必须经过编译,通过相应平台上的解释器,实现独立于某个特定的平台编译代码的束缚。而JavaScript语言是一种解释性编程语言,其源代码在发往客户执行之前不需经过编译,而是将文本格式的字符代码发送给客户编由浏览器解释执行。
1.1.1 JavaScript的历史
JavaScript最初在1995年,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成,那时的名字还是叫LiveScript。但是当时Java语言非常的热门,为了搭上它的顺风车,这门新出现的语言改为了JavaScript,并一直沿用到了现在。
js的案例(helloword)
问题:
js是在什么地方去写的
是怎么运行起来的
在页面中的表现行为
对话框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的helloword案例</title>
<!-- 在scrip标签里面写代码 -->
<!-- 对话框的代码 -->
<script>
alert("helloword")
</script>
</head>
<body>
</body>
</html>
执行结果:
在页面中展现内容
document:1,是一个对象,2,代表整个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的helloword案例</title>
<!-- 在scrip标签里面写代码 -->
<!-- 对话框的代码 -->
<script>
document.write("hello word")
</script>
</head>
<body>
<!-- 在这个地方同样也可以展示相同的效果
但是区别是:这个地方是写死的
document是动态的,通常情况下是用于欢迎xxx
-->
<div>hello word</div>
</body>
</html>
后台打印效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的helloword案例</title>
<!-- 在scrip标签里面写代码 -->
<!-- 对话框的代码 -->
<script>
/* 给开发者方便做调试使用,就比如说我们执行出来的结果是否正确 */
console.log("hello word")
</script>
</head>
<body>
</body>
</html>
第一步,在空白的地方右键
----检查
第二步
还有一些网站的招聘信息就是在这个地方隐藏比如百度网
,京东
等等
js的语法:
1,js严格区分大小写
2,每个js的代码对分号;不太敏感,但是如果不写分号浏览器会自动添加,但是会消耗一些资源,但是浏览器会加错分号,
所以通常情况下我们会添加分号,(就像警察对讲机)
3,js会中会忽略多个空格和换行,随意我们可以利用多个空格和换行进行格式化,但是为了美观代码不允许这样写
<script>
alert
(
"欢迎xxx"
)
</script>
js的书写的位置
和css一祥,我們的js也可以有多秤方式ギ写在頁面上沚其生效 · js也有多秤方式ギ写,分为行内式,内嵌式,外链式
4-1行内式JS代码(不推荐)
写在标签上的js代码需要依靠事件(行カ)来触友
<!--写在a标签的href属性上-->
<a hrefo"javascript:alert('我是一个弾出层'); ">点街一下試試</a>
<!--写在其他元素上-->
<div onclick"alert('我是一个弾出层')”>点-下状試看</div>
<!--
注r onc1ick 是一↑事件〈点鹵事件〉,盲点舌元素的吋候抉行后画的js代丹
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 在这里alert需要添加为''单引号
规则:在双引号里面想要在输出一句话,那么这句话就要使用单引号
-->
<button onclick="alert('hello word')">点我</button>
<a href="javascript:alert('hello word')">点我</a>
</body>
</html>
4-2内嵌式JS代码
●内嵌式的js代码会在页面打开的时候直接触发
<!--在htm1 页面书写一个script 标签。标签内部书写js代码-->
<script>
console.log("hello word")
</script>
<!--
注: script 标签可以放在head里面也可以放在body里面
通常情况下,是要放在head标签里面要么放在body最下面,因为在执行script标签从上往下执行的时候,会卡住script标签后面的代码
-->
4-3外链式JS代码(推荐)
。外链式js代码只要引入了html页面,就会在页面打开的时候直接触发
。新建一个.js后缀的文件,在文件内书写js代码,把写好的js文件引入html页面
//我是index.js 文件
alert('我是一个弹出层')
<!--我是一个htm1 文件-->
<!--通过script 标签的srC属性,把写好的js 文件引入页面-->
<script src="index. js"></script>
<!--一个页面可以引入多个js文件-->
<script srcm"index1.js"></script> cscript srcm"index2. js"></script> <script src="index3.js"></script>
编写js文件
js的代码
/* 这个文件是一个js文件,所以就不需要再次添加script标签
注意:不要忘记保存
*/
alert("hello word")
html的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/hello.js"></script>
</head>
<body>
</body>
</html>
js的注释和规范
问题
我们在写的js代码没有添加;分号
1):在实际开发当中我们会写上千行代码有很大可能会忘记,所以使用注释作为标记和说明,
2):其次就是调试的时候使用代码调试,如果调试完成之后,就需要将调试的代码注释掉,
3):在写代码的时候还有可能给别人看
ctrl+/ 注释的快捷键
//单行注释。
alrt + shirft + a
/* */。 多行注释
在esa6的版本中是不建议写;
分号
字面量和变量
字面量:1,2,3,4,5
字面量都是不可变的量12345,都是直接使用的值,但是我们一般都不会使用字面量
alert(123456)
变量
概念:就像我们所学的函数x是自变量,x=100,1000,10000
所以变量是用来保存我们的字面量,而且我们的变量值是可以改变的,而且更加方便使用,所以在开发当中我们都是通过变量来保存字面量,在实际的开发中很少使用字面量
在数学的函数中我们一般情况下是都需要先声明,
对字面量进行描述
在js中我们使用var 关键字来声明一个变量
<script>
//如果我们注释掉这句话大家可以看看会有什么样情况
var a;
a=1223;
alert(a)
//在双击开发当中我们是声明和赋值同时进行
var b=1223;
alert(b)
//变量在取名字的时候是见名知义
var age=23;
alert(age)
</script>
```
会出现为定义udifined
6-1定义变量及赋值
```java
/定又一个变量 var变量类型 nun变量名;
//给一个变量赋值
/定又一个变量的网时给其献值 var num2 =200:
●注意:
1.一个变量名只能存储一个值
2.当再次给一个变量赋值的时候,前面一次的值就没有了
<script>
var a=123;
a=234
alert(a)
</script>
小案例
<script>
var a=10;
var c=21;
var b=a;
var a=c;
console.log("a的值是"+a)
alert("a的值是"+a)
alert(b)
</script>
3.变量名称区分大小写(35严格区分大小写)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var x = 10 //定义变量直接赋值
console.log(x+200)
var y=20
console.log(x+y)
var z //定义变量先不赋值
z=100
console.log(z)
var a,b,c
a=1
b=2
c=3
//注意:当不加双引号的时候才会当成变量进行打印,如果添加了双引号就会当成字符打印
console.log(a)
console.log(b)
console.log(c)
var d=3,e=6,f=2
console.log(d)
console.log(e)
console.log(f)
</script>
</head>
<body>
</body>
</html>
变量名字是不允许随意起的
标识符
在js中我们可以自己起名的称为标识符,
例如:变量名,函数名,属性名都可以成为标识符;
命名一个标识符需要遵守以下规则
6-2变量的命名规则和命名规范
。规则:必须遵守的,不遵守就是错
1.一个变量名称可以由数字、字母。英文下划线_
.美元符号($) 组成
2严格区分大小写
3.不能由数字开头
4.不能是js保留字或者关健字:https://blog.csdn.net/ZSZ1805355272/article/details/126400297
5.不要出现空格
6.变量名尽量有意义(语义化)
7遵循驼峰命名规则,由多个单词组成的时候,首字母小写从第二个单词开始首字母大写helloWorld
8.中文可以作为变量名,但是通常不要使用中文
字符串
除了可以给变量赋值一个数字是否还可以赋值其他类型
在js中有六种数据类型 string number。boolean。 null。 undefined。 object对象
其中 string number。boolean。 null。 undefined。属于基本类型,而object属于饮用类型
string:在js中需要使用引号引起来的都是字符串。使用单引号和双引号都可以,
但是不能混着使用
var str='hello"
但是有特殊情况引号不能嵌套
这种情况不能使用
var str="我说:"你吃饭了?""
但是单引号可以里面可以使用双引号,双引号里面可以使用单引号
var str='我说:"你吃饭了?"'
但是如果必须要使用嵌套引号,那么就要使用\转义字符
\"表示"
\'表示'
\n 表示换行
\t 表示制表符,就相当于按了table键
var str="我说:\"你吃饭了?\""
但是\如何打印出来 \\表示\
number
在js中所有的数值都是整数类型,包括整数和浮点数(有点大数例如小数)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 标题 -->
<title>js的学习</title>
<!-- 在学习css我们使用的是style标签 我们在学习js但时候使用script标签-->
<!-- <style></style> -->
<script>
var a=123;
a=234.222
/* 这种的就会不认识就无法识别 */
//=234.222.111
alert(a)
/* b和c是不一样的c是数值,b是字符串 */
var c=123
var b="123"
alert(b)
//可以使用运算符typeof,来检查变量类型
//语法:typeof 变量
console.log(typeof c)
</script>
</head>
<body>
</body>
</html>
//检查变量类型
console.log(typeof c)
js表示数值的最大值
console.log(Number.MAX_VALUE)
1.7976931348623157e+308
表示正负1.7976931348623157乘以10的308次方
当我们使用数字number超过了最大值的时候则会返回Infinity无穷的
console.log(Number.MAX_VALUE*Number.MAX_VALUE)
当我们使用一个变量a=Infinity就是字面意义
当我们使用typeof检查会出现number
Infinity表示正无穷-Infinity表示负无穷
字符串乘以字符串
var e="sdcss"*"jlj"
alert(e)
字符串乘以字符串的值是NaN,not anumber不是一个数字计算机不会算了
字符串乘以字符串的值是NaN
var f=NaN
alert(typeof f)
使用typeof检查NaN的类型结果是number类型
最小值
var h=Number.MIN_VALUE
alert(h)
结果是5e-324,表示正数的最小值
计算
var n=123+345
alert(n)
在js中整数基本都可以与运算正确
小数计算
var m=0.1+0.2
alert(m)
结果是0.30000000000000004
如果使用js进行小数进行计算可能出现运算不精确,因为数字是需要转换成二进制,二进制是不能表示十分之一
所以千万不要使用js使用对精确度较高的进行计算
boolean 布尔值。
boolean 布尔值只有两个用来做逻辑判断,在代码中主要用作,如果条件是真执行哪一行代码,如果条件为假执行另一行代码
true表示真。 false 表示假
var bool=true
console.log(typeof bool)
返回的类型是boolean
var boolf=false
console.log(typeof boolf)
返回的类型是boolean
null类型的值只有一个null
null这个值专门用来表示为空的对象
var v=null
console.log(typeof v)
undefined类型的值只有一个,undefined(未定义,声明了没有赋值)
var k;
console.log(typeof k)
当我们生命一个变量不给它赋值时它既是一个undefined
var k=undefined;
console.log(typeof k)
当使用typeof检查是也会返回undefined
数据类型(重点)
●是指我们存储在内存中的数据的类型
●我们通常分为两大类基本数据类型和复杂数据类型
基本数据类型
1.数值类型(number)
一切数字都是数值类型(包括: 二进制,十进制,十六进制等) 和NaN (not a number) 一个非数字
NaN:至少有一个参数是NaN的运算
不定式
下列除法运算:0/0、∞/∞、∞/−∞、−∞/∞、−∞/−∞
下列乘法运算:0×∞、0×−∞
下列加法运算:∞ + (−∞)、(−∞) + ∞
下列减法运算:∞ - ∞、(−∞) - (−∞)
2.字符串类型(string):被引号包裹的所有内容(可以是单引号也可以是双引号)
3.布尔类型(boolean):只有两个(true成者false)
- null类型(null)
运算符
运算符也叫操作符
通过运算符可以对一个值或者多个值进行运算并获取运算结果 比如+。其实typeof也是运算符,可以获得值得类型
<script>
var a=123
var res=typeof a
/* 这两种的输出是一样的 */
console.log(res)
console.log(typeof a)
</script>
运算符都是返回结果的
算数运算符:+ — * / % 这五个运算符
+ 对两个进行加法运算,并将结果返回
var b=2+3;
console.log(b)
var c=3;
var a= c+6;
console.log(a)
var d=a+c;
console.log(d)
当非number类型的值进行运算的时候,会将这些值转换为number ,然后在进行运算
var e=true+1;
console.log(e)
var f=true+false;
console.log(f)
var f=1+null;
console.log(m)
·var m=1+NaN;
console.log(m)
/* 如果两个字符串进行加法则会拼接成一个字符串,并进行返回 */
var k="123"+"456"
console.log(k)
var kd="你好"+"大帅哥"
console.log(kd)
var kdf="李白乘舟将欲行⑵,"+
"忽闻岸上踏歌声⑶。"+
"桃花潭水深千尺⑷,"+
"不及汪伦送我情⑸。"
console.log(kdf)
/* 任何的值和字符串做加法运算,都会先转换为字符串,在和字符串进行拼接运算 */
var kdg="你好"+1
console.log(kdg)
///* 我们可以利用这一特点,来讲任意的数据类型转换为string 我们只需要任意一个数据类型+ ”“。即可转换为string
这是一种隐士类型转换,有浏览器自动完成*/
var ad=123;
ad=ad+""
console.log(ad)
问题:
var abc=1+2+"3"
console.log(abc)
值是多少
— 将我们的两个值进行减法运算,并将结果返回
var result =100-5
result =100-true
/* 注意:只有加法会将字符串转换成字符串进行拼接。其余的会将字符串转换为number */
result=100-"1"
console.log(result)
* 将我们的两个值进行乘以运算,并将结果返回
var result =2 * 2
result =2 * "8"
//任何和nan运算
result =2 * undefined
result =2 * null
console.log(result)
var result =4/2
result =3/2
//任何和nan运算
result =2 * undefined
result =2 * null
console.log(result)
/* 任何字符串在使用—— * /都会转换成number */
//我们可以通过这一特点做一个类型转换,通过-0 *1 /1将string类型转换为number类型
var ag="123";
ag=ag-0
console.log("年龄是"+ag)
//%去模运算(取余数)
var agg=9 % 3;
agg=9 % 4
console.log("年龄是"+ag)
一元运算符
概念:只需要一个操作数。 + 正号。-负号。所以上面的运算符是二元运算符
<script>
var a=123
/* 正号不会对结果产生任何影响 */
a=+a
/* 负号就是对我们对结果取反 */
a=-a
/* 对于非number值会首先转换为number在进行运算 */
a=true
a=-a
//对其数据类型转使用+转换为number
a="189"
a=-a
console.log(a)
a=2+ +"1" +6
console.log(a)
</script>
自增++和自减–
自增++
在原始的基础上加1或者减1
<script>
var a=1
//对一个变量自增以后,原变量会自动对增1
/* 相同点:
无论a++还是++a都会使原变量的值增1
不同点:
*/
//第一种a++
a++
a++
a++
//第二种++a
++a
++a
++a
/*
a++表示的是自增之前的值,++a是自增后的值
*/
console.log(a++)
console.log(++a)
console.log(a)
var c=10;
c++;
console.log(c)//11
var cb=20
++cb
console.log(cb)//11
var d=10;
//20 22 22
var rsult=d++ + ++d + d
console.log(rsult)
d=d++;
console.log(rsult)
</script>
自减–
可以通过在原始的基础上减1
//--
//自减分为两种a-- 和--a
无论是a-- 和--a都会立即减1
var num=10;
--num;
console.log(--num)
console.log(num--)
逻辑运算符
js为我们提供了三种逻辑运算符(!非 && 与||或)
!非 :可以对一个值进行非运算
&& 与||或)
<script>
var a=true;
//所谓的非运算就是对boolean取反操作true变false true变false变true
//如果对一个值取两次反对值没有作用
//如果对非boolean取反,会首先转换为boolean,在进行取反
a=!a
a=!!a
console.log(a)
//如果对非boolean取反,会首先转换为boolean,在进行取反
var b=10;
b=!b
var c=0;
c=!c
console.log(c)
console.log(typeof b)
/* 我们可以利用这一特点进行类型转换,
可以为任意对数据类型进行转换为boolean值
*/
var d=20;
d=!!d
console.log(d)
console.log(typeof d)
var e="hello";
e=!!e
console.log(e)
console.log(typeof e)
</script>
&& 与:可以对两侧 的值进行与运算并返回结果
运算规则
<script>
/* && and 的意思:同时两个都为true的时候才会为true,只要有一个为false 则为false
在js中&&只有是短路与:当地一个中是false 那么第二值就不再运算,第一个值为true则才会计算第二个值
*/
var a=true && true
a=true && false
a=false && true
a=false && false
console.log()
//true && alert("hello")
false && alert("hello")
</script>
||或):可以对符号两侧进行或运算,并返回结果
<script>
/*
||当两个都是false才会返回false,只要有一个true就会返回true
*/
var a=false || false
a=true && false
a=false && true
a=false && false
console.log()
//在js 中属于短路||如果第一个中为true则不会检查第二个值,如果第二个值是false 则会检查第二个值
//true && alert("hello")
false && alert("123")
</script>
非布尔值的与 运算
<script>
//&& ||的运算
/* 对于非boolean的运算
会先将其转换为true,在进行运算,但是会返回原值
*/
/* 如果连个值都为true,则返回第二个值 */
var a=1 && 2
console.log(a)
//如果有false则返回false
var b=0 && 2//返回false 所以返回0
var b=0 && 2
console.log(b)
</script>
非布尔值的与运算
<script>
//如果第一个值是true则返回第一个值
var a=1||2
console.log(a)
//如果第一个值是false 则直接返回第二个值
var b=0||1
console.log(b)
//"是一个false",则返回则第二个值
var b="" ||"hello"
console.log(b)
</script>
条件运算符(三元运算符)
三元原算符:也称为条件运算符
语法:条件表达式 ?语句1 :语句2
执行流程:
条件运算符在执行时,首先对条件表达式进行求值、
如果值为true 则执行语句1,并返回执行结果
如果值为false 则执行语句2,并返回执行结果
<script>
true ?alert("语句1"):alert("语句2")//语句1
true ?alert("语句1"):alert("语句2")//语句2
var a=10;
var b=20;
a>b ?alert("a大"):alert("b大")
//当
var a=30;
var b=20;
a>b ?alert("a大"):alert("b大")
//获取a或b中当最大值
var max=a>b ?a :b;
console.log(max)
//获取a或b 、c中当最大值
var max >c ?max :c;
//这种方式不推荐使用,不方便阅读
var max =a>b ?(a>c ?a:c):(b>c ?b:c)
console.log("max="+max)
//如果条件表达式求值结果是一个非boolean值,那么会先将其转为boolean值在进行运算
//"hello"是true “”是false
"hello" ? alert("语句1"):alert("语句2")
</script>
类型转换
<script>
/*
强制类型转换
强制类型转换指讲一个数据类型转换为其他的类型数据
类型主要是指将其他类型数据转换为string unmber boolean
*/
//将其他的类型数据转换为string
var a=123;
console.log(typeof a);
console.log(a);
//如何将其转换为string类型
/*
方式一:调用转换类型的tostring方法
调用什么方法就直接使用. 调用xxxx的方法yyy方法.就是xxx.yy方法
*/
// 调用a的tostring方法
//他不会影响原变量,他会将转换的结果返回
a=a.toString()
console.log(typeof a);
console.log(a);
//但是注意null是没有tostring方法
a=null;
//a=a.toString();
console.log(typeof a);
console.log(a);
//但是注意undefined是没有tostring方法
a=undefined;
//a=a.toString();
console.log(typeof a);
console.log(a);
//问题如何将null和undefined转换为string
//调用string方法,将被转换的数据作为参数使用
var a=123;
//使用string转换为字符串
a=String(a);
console.log(typeof a);
console.log(a);
a=null;
a=String(a)
console.log(typeof a)
console.log(a)
a=undefined;
a=String(a)
console.log(typeof a)
console.log(a)
/* 使用string强制类型转换时
对于number和boolean实际上就是调用了tostring
对于null直接转换为字符串的null
对于undefined直接转换为字符串的undefined
*/
//将其他的数据类型转换为number
//使用number方法
var a="123";
a=Number(a);
console.log(typeof a)
console.log(a)
//但是如果定一个变量是字母number 会转换成。。
//会转换成nan不是一个数字
var a="abc";
a=Number(a);
console.log(typeof a)
console.log(a)
//会转换成nan不是一个数字
var a="";
a=Number(a);
console.log(typeof a)
console.log(a)
/*
总结:1,如果是纯数字的字符串,则将其转换为数字
2,如果字符串中有非数字的内容则转换为nan
3, 如果自妇产是一个空串或者是一个全部都是空格,则会转换为0
4,boolean转换为数字 true 1 false0
*/
var a=true;
a=Number(a);
console.log(typeof a)
console.log(a)
var a=false;
a=Number(a);
console.log(typeof a)
console.log(a)
var a=null;
a=Number(a);
console.log(typeof a)
console.log(a)
var a=undefined;
a=Number(a);
console.log(typeof a)
console.log(a)
//在含有数字和字母的如何支行数字转换
/*
转换方式二:
这种方式专门用来对付字符串
parseint 把一个字符串转换为一个整数
parsefloat把一个符串转换为一个浮点数
*/
var a="123px";
a=parseInt(a);
console.log(typeof a)
console.log(a)
/*
parseInt可以将一个字符串中的整数数字内容
取出来然后转换为number
*/
var a="123.456px";
//a=parseInt(a); //如果使用parseInt只能取出整数部分的123
//parseFloat的作用和类似不同的是他可以获取有效的小数
a=parseFloat(a);
console.log(typeof a)
console.log(a)
//使用数据类型转换为boolean
var a=123;
//调用boolean函数来将a转换为boolean值
/*
数字转boolean
除了0和nan其余的都是true
*/
var a=-123;
var a=0;
var a=Infinity;
a=Boolean(a);
console.log(typeof a)
console.log(a)
//字符串转boolean
/*
除了""其余的都是true
*/
var a="hello";
a=Boolean(a);
console.log(typeof a)
console.log(a)
// null和undefined都会转为false
var a=null;
var a=undefined;
a=Boolean(a);
console.log(typeof a)
console.log(a)
</script>
正则表达式1
正则表达式的了解
<script>
/* 通常情况下
正则表达式是用来对邮箱格式或者手机号对格式规定;
如果不满足则提示用户,请输入正确格式对邮箱或者手机号
正则表达式就是为了检查格式是否正确
比如邮箱规则
前面可以是:任意的数@xx.com
*/
//正则表达式用于定义一些字符串规则,
//js可以根据正则表达式来检查是否符合规则
//将符合规则的字符串提取出来
/*
//创建正则表达式的对象
语法:
var 变量名 =new RegExp(“正则表达式”,“匹配模式”)
使用typeof检查类型
*/
var reg =new RegExp("a");
console.log(reg);
console.log(typeof reg);
//doing一这个值是用来判断是否符合reg的规则
var str="a";
//如何比较是否正确
/*
正则表达式的方法
test()使用这个方法可以用来检查字符串是否符合正则表达式的规则
如何符合就返回true,如果不符合就返回false
*/
var result=reg.test(str);
console.log(result);
//正则表达式可以用来检查字符串是否含有a
//如果有a则返回true 没有a则返回false
console.log(reg.test("adc");
//严格区分大小写
console.log(reg.test("Adc");
//我们可以匹配一个匹配模式,
/*
作为第二个参数
如果该参数是一个i 忽略大小写
g真个html文件的匹配模式
*/
</script>
正则表达式的语法1
<script>
/*
使用这种的需要new RegExp()对计算机的效率降低
var reg=new RegExp("a","i")
使用正则表达式的新语法
var 变量名 =/正则表达式/匹配模式
*/
var reg=/a/i;
console.log(reg.test("abc"));
console.log(typeof reg);
//创建一个正则表达式,检查是否有a或b
/*
打印出来的值是false因为 reg =/ab/;必须是ab挨着才会打印true
所以这种的不灵活
var reg=new RegExp("a","i")虽然效率比较低但是灵活
reg =/a|b/; a或者b这种可以实现
*/
reg =/a|b/;
console.log("acd")
//创建一个表达式是否包含字母
reg=/a|b|c|d|e|f|g/
console.log(reg.test("a"));
//[]也是或的意思
reg=/[abcdefhlmn]/
console.log(reg.test("a"))
//任意的小写字母
reg=/[a-z]/
console.log(reg.test("a"))
//任意的大写字母
reg=/[A-Z]/
console.log(reg.test("a"))
//任意大小写
reg=/[A-Z]/i
console.log(reg.test("a"))
///[A-z]/
reg=/[A-z]/i
console.log(reg.test("a"))
//检查一个字符串是否含有abc,adc,aec
reg=/abc|adc|aec/
console.log(reg.test("abc"))
reg=/a[bde]c/
console.log(reg.test("abc"))
//[^ab] 除了 , [^ab]除了ab
reg=/[^ab]/
console.log(reg.test("ab"))
//[0-9]任意的数字
reg=/[0-9]/
console.log(reg.test("ab"))
//[^0-9]除了数字
reg=/[^0-9]/
</script>
<script>
//创建一个正则表达式含有aaaaaaaaaaaaaaaaaa
//这种写法比较繁琐
var reg=/aaaaaaaaaaaaaaaa/
console.log(reg)
//可以通过量词可以设置一个内容出现的次数
//a{3} {n}正好出现n次
var reg =/a{3}/;
console.log(reg.test(("aaabc")))
//这种执行的为false,下面那种执行的是true
var reg =/ab{3}/;
console.log(reg.test(("ababab")))
//
var reg =/(ab){3}/;
console.log(reg.test(("ababab")))
var reg =/ab{3}c/;
console.log(reg.test(("abbbc")))
//找是否有3个b
var reg =/b{3}/;
console.log(reg.test(("bbbbb")))
//ab1到3次c {m,n} m到n次
var reg =/ab{1,3}c/;
console.log(reg.test(("abbbc")))
//{3,} {m,} m次以上
var reg =/ab{3,}c/;
console.log(reg.test(("abbbc")))
//+至少一个相当于{m,} m次以上
var reg =/ab+c/;
console.log(reg.test(("ac")))
//* 表示又没有都行
var reg =/ab+c/;
console.log(reg.test(("ac")))
//0个或者1个
var reg =/ab?c/;
console.log(reg.test(("ac")))
//^检查字符串a是否开头
var reg =/^a/;
console.log(reg.test(("ac")))
//^检查字符串a是否结尾
var reg =/a$/;
console.log(reg.test(("ac")))
//^a$只能有一个a
var reg =/^a$/;
console.log(reg.test(("ac")))
//^a|a$ a开头a结尾
var reg =/^a|a$/;
console.log(reg.test(("aa")))
</script>
正则表达式语法2
<script>
/*
正则表达式是否含有.(点)/./意义是匹配任意字符单独点表示任意字符
但是想要表示.(点)要使用转义字符\
*/
var reg=/\./
console.log(reg.test("ds.jdks"))
//检查是否有/(斜杠)
//两个斜杠\\表示一个字符
var reg=/\\/
//但是在写点时候也要写两个
console.log(reg.test("d\\"))
//打印查看会打印几个|
console.log("d\\")
//注意使用对象时,它的参数是一个字符串,而|是一个转义字符
//如果要使用\则需要使用\\
//在对象里使用\\相当于上面的\(转义字符)
var reg =new RegExp("\\.")
console.log(reg)
/*
\w(小写)数字、字母、_
\W(大写) 除了数字、字母、_
\d(小写)任意的的数字
\D(大写) -除了任意的数字
\s(小写)空格
\S(大写) 除了空格 这个除了空格是里面一个值也没有
\b(小写)单词边界
\B(大写) 除了单词边界
*/
reg=/\s/
console.log(reg.test(""))
//创建一个正则表达式检查一个字符串是否含有child
//\b(小写)
//\B(大写)除了单词边界
reg=/\bchild\b/
console.log(reg.test("hello child"))
//接受用户的输入
var str=prompt("请输入你的用户名")
//console.log(str)
//当用户不小心输入了空格,如何处理空格
//去掉字符串的空格
//使用“”替换空格
//注意g全局匹配,即这里面替换的是所有的空格
//str=str.replace(/\s/c,"")
//console.log(str)
//^开头,*0格或者多个这种的是替换开头的空格
str=str.replace(/^\s*/,"")
console.log(str)
//^这种的是替换结尾的空格
//str=str.replace(/\s$/,"")
//console.log(str)
//整合:开头和结尾的空格都去除
//开头或者结尾的空格去除,在添加g全局即开头和结尾都去除
str=str.replace(/^\s*|\s*$/g,"")
</script>
赋值运算符
<script>
/*
= 赋值运算符
可以将符号右侧的值赋给符号左侧的变量
+=
*/
var a=123;
console.log(a)
/*
+=
a+=5 相当于 a=a+5
*/
a=a+5;
a+=5;//这个和上面的一样
console.log(a)
/*
-=
a=a-5;
a-=5 相当于 a=a-5
*/
a=a-5;
a-=5;//这个和上面的一样
console.log(a)
*=
/*
*=
a=a*5;
a*=5 相当于 a=a*5
*/
a=a*5;
a*=5;//这个和上面的一样
console.log(a)
/*
/=
*/
/*
%=
*/
a=a%5;
a%=5;//这个和上面的一样
</script>
关系运算符
/*
通过关系运算符可以比较两个值之间的大小关系
如果关系成立他会返回true 如果关系不成立则返回false
>
判断左侧的值是否大于右侧
如果关系成立则返回true 如果关系不成立则返回false
*/
var res=5>10;
console.log(res)
var res=5>4;
console.log(res)
var res=5>5;
console.log(res)
/*
>= 大于或等于
判断左侧的值是否大于或等于右侧
如果关系成立则返回true 如果关系不成立则返回false
*/
/*
非数值进行比较时会将其转换为数字然后在进行比较
*/
console.log(1>true)
console.log(1>=true)
console.log(1>="0")
console.log(10> null)
console.log(10> undefined)
//字符串会将他转换为nan,任何值和NaN进行比较都是false
console.log(10> "hello")
</script>
相等运算符
<script>
/*
相等运算符是不叫两个值是否相等
如果相等则返回true ,如果不相等则返回发生false
==来做相等运算符
*/
console.log(1==1);
var a=10;
console.log(a==4)
/*
如何将string类型与number进行比较
当时有==来比较两个值时,如果值的类型不同
则会自动进行类型转换,将其转换为相同的类型在进行比较
大部分情况会转换成数字
*/
console.log("1"==1)
console.log("1"==true)
console.log("hello"==true)
console.log(null=0)
/*
undefined 衍生字null
所以这连个值在做相等判断时则会返回为true
*/
console.log(null= undefined)
/*
nan不和任何值相等,包括它本身
*/
console.log(null= NaN)
console.log(NaN= NaN)
console.log(NaN= undefined)
//如何判断是否为NaN
var b=NaN
/*
可以通过isNaN 函数来判断是否为NaN
*/
console.log(isNaN(b))
/*
不相等
不相等用来判断两个值是否不相等,如果不相等则返回为true ,否则返回false
使用!=作为不相等
*/
console.log(10!=5)
console.log(10!=10)
// 也会对变量进行自动对类型转换转换后如果相等组会返回false
console.log(1!="1")
/*
===
全等判断两个值是否相等,他和相等类型,不同的是不会进行类型转换
如果两个值的类型不同则直接返沪false
*/
console.log(123==="123")
console.log(null===undefined)
/*
!==
用来判断连个值是否全等和不等类似
不同的是它不会类型转换,如果两个转换类型不同
则直接返回true
*/
console.log(1!="1")
</script>
if条件语句
语句:就是我们写的每一行的代码成为语句
条件语句:是根据一定的条件来进行选择执行、
条件判断语句
条件分支语句
循环语句
条件判断语句
使用条件判断语句,在执行某个语句之前进行判断;
如果条件成立则执行语句,如果条件不成立则不执行
语法 if()
<script>
/*
if(条件语句){}
if语句在执行时,会对条件表达式进行判断,如果条件表达式为true,则 执行if后面的语句
如果条件表达式为false,则 不会执行if后面的语句
*/
if(true) alert("hello")
if(false) alert("hello")
/* 通常情况下 */
var a=10;
var a=11;
//if 只能控制紧随其后的语句
if(a>10)
alert("如果出来了就说明比10大")
alert("谁也管部了我")
//如果想要if控制多条语句,那就将它放到代码快里
var c=11;
/* if代码快不是必须的,但是在开发中尽量要写,即使是一条语句 */
//这种的是那么就执行要么都不执行
if(c>10)
alert("如果出来了就说明比10大")
alert("谁也管部了我")
var d=25;
if(c>10 && a<=20)
{
alert("d的值比10大,但是比20小")
}
//我们的程序有一条语句构成的,也就是一行代码为一条语句
/* 语句是按照自上向下一条一条执行 使用{}来为我们的语句分组
同一个{}成为一组要么都执行要么都不执行,一个{}成为一个代码块
在代码跨的后面就不再使用分号了,js的代码快指具有分组的作用
*/
alert("hello")
console.log("word")
</script>
if条件语句二
<script>
/* if语句
语法:
if(条件表达式){
语句
}else
if....else...语句,当该语句执行时会先对id后对条件表达式,进行秋装判断
如果为true则执行if 条件语句
如果为false则执行else 条件语句
*/
//如果大于60则退休。小于60则不退休
var age=60;
if(age>=60){
alert("已经退休了")
}
/*
语法三:
if(条件表达式){
语句
}else if( ){
}else if( ){
}else {
}
当语句执行时会从商代下依次对表达式进行求值判断
如果值为true 则执行当前语句
如果值为false 则继续向下 判断
代码冲上往下执行
该语句中只会有一个代码快被执行,一旦代码快被执行了则直接结束语句
注意:条件大对写在最上面
*/
if(age > 100){
alert("已经退休了")
} else if(age >80){
alert("我现在80多岁了")
}else if(age >70){
alert("我现在70多岁了")
}else if(age >60){
alert("我现在60多岁了")
}}else if(age >50){
alert("我现在50多岁了")
}else {
//如果所有条件都不满足则执行最后一个
alert("我现在青壮年")
}
if(age > 10 && age <=50){
alert("请战年")
} else if(age >50){
alert("我现在50多岁了")
}else if(age >60){
alert("我现在60多岁了")
}else if(age >70){
alert("我现在70多岁了")
}}else if(age >80){
alert("我现在80多岁了")
}else {
//如果所有条件都不满足则执行最后一个
alert("我现在青壮年")
}
</script>
if 的练习案例
在网页中动态的输入数值的函数
prompt()可以弹出一个提示框,早提示框中有一个文本框
用户可以在文本框输入一段内容,该函数需要一个字符串作为参数
该字符串将会作为提示文字
用户输入的内容 将会作为函数的返回值返回,可以定义一个来接受所选的的内容
*/
//通过键盘动态的输入分数
alert("请输入分数")
//alert只负责展现,而不能动态的输入成绩,但是如何获取数据,可以通过变量来进行定义
var score =prompt("请输入成绩")
alert(score);
if综合案例
<script>
/* 当小明考试期末考试为100时 奖励bwm
但成绩为80-99是奖励iphone
当成绩为60-80时奖励一本书
其他时候什么奖励也没有
prompt()可以弹出一个提示框,早提示框中有一个文本框
用户可以在文本框输入一顿啊内容,该函数需要一个字符串作为参数
该字符串将会作为提示文字
*/
var score =prompt("请输入成绩0-100")
//判断值是否合法,是字符串的处理,字符串底层会处理成NaN所以需要添加isNaN
if(score>100 || score<0 || isNaN(score)){
alert("数值不合法")
}else{
if(score==100){
alert("宝马")
}else if(score>=80){
alert("iphone")
}else if(score>=60){
alert("参考书")
}else{
alert("被揍")
}
}
</script>
条件分支语句
也叫switch语句
根据num的值输出对应的中文
var num =1;
if ( num ==1){
console.log("一")
}else if (num==2){
console.log(二)
}else if (num==3){
console.log(二)
}
//上面这些可以使用switch代替
/*
switch语法:
switch(条件表达式){
case 表达式
语句。。。
break;
case 表达式
语句。。。
break;
case 表达式
语句。。。
break;
case 表达式
语句。。。
break;
case 表达式
语句。。。
break;
default
语句。。。。
break;
}
*/
//具体代码实现
var num =1;
console.log(num)
switch (num){
case 1:
console.log("十一");
}
switch…case…语句解释一
/*
switch....case...语句
在执行 时会依次将case 后的表达式的值和switch后的表达式进行全等比较;
如果比较结果为true,则从当前开始执行代码
如果比较结果为false,则继续向下比较
*/
switch(num){
case 1:
console.log("1");
}
var num =2;
switch(num){
case 1:
console.log("1");
case 2:
console.log("2");
}
### 解释二
num =1;
//如果比较结果为true,则从当前开始执行代码当前后面的代码都执行
switch(num){
case 1:
console.log("1");
case 2:
console.log("2");
case 3:
console.log("3");
}
解释三
var num =1;
/*
switch....case...语句
在执行 时会依次将case 后的表达式的值和switch后的表达式进行全等比较;
如果比较结果为true,则从当前开始执行代码
如果比较结果为false,则继续向下比较
*/
switch(num){
case 1:
console.log("1");
}
var num =2;
switch(num){
case 1:
console.log("1");
case 2:
console.log("2");
}
num =1;
//如果比较结果为true,则从当前开始执行代码当前后面的代码都执行
switch(num){
case 1:
console.log("1");
case 2:
console.log("2");
case 3:
console.log("2");
}
//使用break退出switch语句
num =1;
//如果比较结果为true,则从当前开始执行代码当前后面的代码都执行
switch(num){
case 1:
console.log("1");
//break只会作用与break前面的语句,一般情况都要跟一个break
break;
case 2:
console.log("2");
break;
case 3:
console.log("2");
}
//假设是一个string类型
num ="abc";
//如果比较结果为true,则从当前开始执行代码当前后面的代码都执行
switch(num){
case 1:
console.log("1");
//break只会作用与break前面的语句,一般情况都要跟一个break
break;
case 2:
console.log("2");
break;
case 3:
console.log("2");
case "abc":
console.log("字母");
//使用default
//如果所有的比较结果都为false,则执行default后的语句
default:
console.log("都可以执行");
}
/* 总结:switch 和if 语句在功能上书记是有重复的,使用switch可以实现if的功能
同样,使用if可以实现switch的功能,但是效率上使用switch多,但是实际开发当中使用if 多所以在使用时可以根据自己的习惯来进行选择
*/
switche的案例
大于60为合格,否则为不合格
<script>
var score=60;
//score/10只对整数有效,但是对99确不有效所以使用parseInt(取整),比如9.9取整为9
switch(parseInt(score/10)){
//我们直接使用多个case即可使用
case 6:
case 7:
case 8:
case 9:
case 10:
console.log("合格")
break;
default;
alert("不合格");
break;
}
//同一个案例的第二种用法
switch(true){
case score>=60;
console.log("合格")
break;
default:
console.log("不合格")
break;
}
</script>
while
解释一:想页面中输出连续的数字
/* 想页面中输出连续的数字
*/
//想要将每一个数据占一行使用br进行换行
document.write(1+"<br />")
document.write(2)
document.write(3)
document.write(4)
//上面写比较麻烦所以使用下面的使用
var n=1;
document.write(n++ +"<br />")
document.write(n++ +"<br />")
document.write(n++ +"<br />")
document.write(n++ +"<br />")
document.write(n++ +"<br />")
document.write(n++ +"<br />")
document.write(n++ +"<br />")
document.write(n++ +"<br />")
document.write(n++ +"<br />")
document.write(n++ +"<br />")
document.write(n++ +"<br />")
document.write(n++ +"<br />")
解释二
这样写重复的代码比较冗余,写相同的大量的代码成为冗余
//这样写重复的代码比较冗余,写相同的大量的代码成为冗余
/*
循环语句:我们只需要写简答的代码,js底层会动态的反复循环执行一段代码
while循环:
语法:
while(条件表达式){
语句。。。。。 (也称为循环体)
}
while语句在执行时
先对条件表达式进行判断
如果为true则继续执行循环体一次类推
如果值为false则终止循环
*/
var n=1;
//像这种将表达式写死为true的循环,焦作死循环。
//该循环不会停止,除非浏览器关闭,死循环,在开发中慎用
//可以使用break,终止循环
while(true){
alert(n++);//这种已知满足条件所以会一直执行
//退出循环
//使用条件
if(n==10){
break;
}
}
</script>
解释三
使用新的循环表达式
<script>
//创建一个循环,只需要三步
//创建一个初始化变量
var i=0;
//在循环中设置条件表达式
while(i<10){
//alert(i)第一次这样定义这个地方和写在最后面的区别
//定义一个跟新表达式
i++;
//alert(i)第二次这样定义这个地方和写在最后面的区别
document.write(i +"<br />")//第二次这样定义这个地方和写在最后面的区别
}
</script>
do。。。while的使用
<script>
//创建一个循环,只需要三步
//创建一个初始化变量
var i=0;
/*
do。。while。。。
语法:do{
语句。。。
}while (条件表达式)
*/
do{
document.write(i++ +"<br />")
}while(i<=10){
}
/*
do...while 执行流程
do...while语句会先执行循环体,循环执行完毕以后,在对while后面对表达式进行判断
如果结果为true ,则继续执行循环体,执行完毕则继续判断,以此类推,
如果结果为false,则终止循环
do...while 和while 的区别,在功能上都一样,不同的是while是先判断在执行,
do...while先执行在判断,可以保证至少执行一次,而while不能,即当i=11的时候
*/
</script>
for
for循环
<script>
/*
for 循环,也是一个循环语句,成为循环语句
创建一个循环10次的循环
*/
//初始化表达式
var i=0;
//创建一个循环,定义条件表达式
while(i<10){
//设置跟新表达式
alert(i++)
}
/*
在for 循环中为我们提供了专门的位置来放三个表达式
1,初始化表达式
2,条件表达式
3.更新表达式
for循环语法
for(初始化表达式;条件表达式;跟新表达式){
语句。。
}
*/
//for循环结构更加的清晰,所以for循环使用的更多一些
for(var i=0; i<10;i++){
alert(i);
}
/*
for循环执行流程
1.执行初始化表达式,初始化变量var i=0
2.执行条件表达式,判断是否执行循环
如果为true 则执行循环
如果为false 终止循环
3,执行更新表达式,更新表达式执行完毕,继续重复第二步
但是注意:初始化表达式只执行了一次
*/
/*
for循环的三个部分都可以省略,都可以写在外面
*/
var i=0;
for(;i<10;){
alert(i++)
}
/*
如果咋我们的for循环中不写任何表达式,只写两个分号;
此时循环是一个死循环,会一直执行下去,慎用
*/
for(;;){
alert("hello")
}
</script>
写一个1-100之间的所有奇数之和
<script>
/*
写一个1-100之间的所有奇数之和
分为一下几步:
第一步:打印1-100的所有数
*/
var sum=0;//这个必须定义在外面,否则都是0
for(var i=1;i<=100;i++){
//console.log(i);//打印1-100的所有数
//只打印奇数,不能被2整除的为奇数
if(i%2!=0){
console.log(i)//此处打印1-100的所有奇数
//如果i/2由余数,证明i是奇数
//在这个时候创建一个变量用来存储奇数之和
sum=sum+i;
}
}
console.log("奇数之和是:"+sum)
</script>
嵌套for循环
<script>
/*
提供程序在页面当中打印由*组成的长方形
使用js向网页中输出内容
*/
document.write("*****<br/>")
document.write("*****<br/>")
document.write("*****<br/>")
document.write("*****<br/>")
document.write("*****<br/>")
document.write("*****<br/>")
</script>
打印长方形(使用嵌套for循环)
//使用for循环写出使用*组成的长方形
/*
for循环执行几次,图形的高就是多少,他是控制高度的
i<5 想要打印多少行就i小于多少
*/
for(var i=0;i<5;i++){
//通过使用循环来进行动态的控制
//document.write("*****<br/>")
/* 通过使用循环来进行动态的控制,即嵌套for循环
使用for循环来控制宽度。
当外部的for循环执行1次,内部的循环执行5次
*/
for(var j=0;j<5;j++){
//如果字这里添加<br/>就会竖着展现,所以要在下面下<br/>换行
//让横着的每个*之间的距离大一些使用
document.write("* ")
}
document.write("<br/>")
}
打印三角形(使用嵌套for循环)
//使用for循环写出使用*组成的三角形
让下面的i都加1
/*
* 1 i=0
* * 2 i=1
* * * 3 i=2
* * * * 4 i=3
* * * * * 5 i=4
for(var i=0;i<5;i++){
//打印三角形只需要将内部for变为j<i+1
for(var j=0;j<i+1;j++){
document.write("* ")
}
document.write("<br/>")
}
break和continue
break的使用
/*
break关键字是退出switch或for循环语句 ,但是不能使用if
*/
for(var i=0;i<5;i++){
console.log(i)
break;
break;//当时有break据只能执行0
}
break语句不能单独使用在
/* //break语句不能单独使用在 if语句中
if(true){
console.log("hello")
break;
} */
if和break都在for里面如何使用
//if和break都在for里面如何使用
for(var i=0;i<5;i++){
console.log(i)
if(i==2){
break;
}
break;//当时有break据只能执行0
}
break只对离它最近的for起作用
//break只对离它最近的for起作用
for(var i=0;i<5;i++){
console.log("外层循环"+i)
for(var j=0;j<=5;j++){
break;
console.log("内层循环"+j)
}
}
使用break结束指定的for循环,
/* 可以为循环语句创建一个label,来标识当前循环,
label循环语句:
使用break语句时,可以在break后面跟着一个label,这样break将会结束指定循环,而不是最近的
*/
//使用break结束指定的for循环,
outer:
for(var i=0;i<5;i++){
console.log("外层循环"+i)
for(var j=0;j<=5;j++){
break outer;
console.log("内层循环"+j)
}
}
continue的使用,
/* continue的使用,
continue可以用来跳过当前循环
默认continue也是只会对最近对循环起作用
*/
for(var i=0;i<5;i++){
if(i==2){
continue;
}
console.log(i)
}
默认continue也是只会对最近对循环起作用
//默认continue也是只会对最近对循环起作用
for(var i=0;i<5;i++){
for(var j=0;j<5;j++){
if(j==1){
continue;
}
console.log("这是内部循环"+j);
}
console.log("这是外部循环"+i);
}
//label对continue同样使用
测试程序对性能,在程序执行前开启计时
<script>
/*
测试程序对性能,在程序执行前开启计时
console.time("计时器对名字")可以使用开启一个计时器
它需要一个字符串参数,这个字符将作为计时器对标识
*/
console.time("test")
//这个地方对值不要太大,否则hi已知卡顿
for(var i=0;i<500000;i++){
for(var j=0;j<5;j++){
if(j==1){
continue;
}
console.log("这是内部循环"+j);
}
console.log("这是外部循环"+i);
}
/*
终止计时器
console.timeEnd()用来停止一个计时器,需要一个计时器对名字作为参数
停止谁这个名字就写谁
*/
console.timeEnd("test")
</script>
break和continue的练习
第一种
for(var a=1;a<=100;a++){
var b = +prompt("请输入一个1-100数字");
if(b==88){
alert("恭喜你猜对了")
break;
}else if(a!=88){
alert("请继续猜")
continue;
}
}
第二种
for(var a=1;a<=100;a++){
var b = +prompt("请输入一个数字");
if(b==88){
alert("恭喜你猜对了")
break;
}else if(b > 88){
alert("猜大了")
continue;
}else if(b < 88){
alert("猜小了")
continue;
}
}
while
while的认识
<script>
/*
while语句也是循环语句
语法:while(条件表达式){
语句
}
while语句先对条件表达式进行求值判断
如果值为true 则执行循环体
如果循环体执行完毕以后,继续对表达式进行判断
如果为true 则继续执行循环体以此类推
如果这个值为false值终止循环
*/
//像这种讲条件表达式写死为true为死循环
//该循环会一直执行,不会停止。只有关闭浏览器才会终止
//同时还可以使用break退出循环
var n=1;
while (true){
alert(n++)
}
var n=1;
while (true){
if(n==10) {
break;
}
}
//创建一个循环往往需要三个步骤
//初始化变量
var i=0
//在循环中设置一个表达式
while (i<=10){
alert(i)
//更改表达式
i++;
}
/*
do。。。while循环
do{
语句
}while(条件表达式);
*/
do{
document.write(i++)
}while(i<=10);
/*
while和do。。while的执行流程
do。。while在执行时会先执行循环体,
循环体执行完成以后,
在对while后的表达式进行判断
如果结果为true则继续执行循环体
执行完毕之后则继续判断条件以此类推
如果为false则终止循环
这两个循环功能一样,区别
do while可以保证循环体至少执行一次
而while则不能
*/
</script>
while的练习
<script>
/*
假如投资的年利率为5%,试求从1000块增长到5000,需要话费多长时间
第一年:1000 1000*1.05
第二年 1050 1050*1.05
。。。。。
*/
//创建一个变量表示钱数
var money=1000;
//第一年
/* money=money*1.05
//第二年
money=money*1.05
//第三年
money=money*1.05
//第四年
money=money*1.05
console.log(money) */
//定义一个while训话来计算我们的钱数
//定义一个计数器
var count=0
while(money<5000){
money=money*1.05
//每执行一次就自增一次
count++;
}
console.log("执行的年数是:"+count)
/*
从键盘输入小明的期末成绩:
当成绩为100时," 奖励-辆BMW'
当成绩为[80-99]时,. 奖励一台iphone15s
当成读为[60-80]时,‘奖励一本参考书
其他时,什么奖励也没有
如果输入的数字合法就不用再次进行输入,
如果输入错误就需要在次输入
*/
while(true){
var score=prompt("请输入1-100的数字")
//判断是否输入合法
if(score>=0 && score<=100){
//如果满足这个条件证明输入合法就不需要再次输入
break;
}
alert("请输入有效的数字")
}
</script>
数组的遍历和foreach
<script>
/*
一般情况下都是使用for便利数据,但是在js中还未我们提供了一个for each便利数组
for each()这个方法只支持ie9以上的 浏览器
*/
//创建一个数组
//foreach需要一个函数定义一个参数
var arr=["孙悟空","猴子","猪八戒","唐僧"];
//foreach需要一个函数定义一个参数
//像这种函数有我们创建,我们不需要调用成为回调函数
arr.forEach(function(){
//数组中有几个元素就会执行几次,每次执行数组时,浏览器会讲便利到到元素
//会议参数到形式传递进来,我们可以定义参数来获取参数
//浏览器会传三个参数便利数组:1,第一个元素据说正在遍历到的元素
2,第二个参数:就是遍历的索引
3,第二个参数:就是正在遍历的数组
console.log("hello")
});
正则表达式
正则表达式的了解
<script>
/* 通常情况下
正则表达式是用来对邮箱格式或者手机号对格式规定;
如果不满足则提示用户,请输入正确格式对邮箱或者手机号
正则表达式就是为了检查格式是否正确
比如邮箱规则
前面可以是:任意的数@xx.com
*/
//正则表达式用于定义一些字符串规则,
//js可以根据正则表达式来检查是否符合规则
//将符合规则的字符串提取出来
/*
//创建正则表达式的对象
语法:
var 变量名 =new RegExp(“正则表达式”,“匹配模式”)
使用typeof检查类型
*/
var reg =new RegExp("a");
console.log(reg);
console.log(typeof reg);
//doing一这个值是用来判断是否符合reg的规则
var str="a";
//如何比较是否正确
/*
正则表达式的方法
test()使用这个方法可以用来检查字符串是否符合正则表达式的规则
如何符合就返回true,如果不符合就返回false
*/
var result=reg.test(str);
console.log(result);
//正则表达式可以用来检查字符串是否含有a
//如果有a则返回true 没有a则返回false
console.log(reg.test("adc");
//严格区分大小写
console.log(reg.test("Adc");
//我们可以匹配一个匹配模式,
/*
作为第二个参数
如果该参数是一个i 忽略大小写
g真个html文件的匹配模式
*/
</script>
正则表达式的语法1
<script>
/*
使用这种的需要new RegExp()对计算机的效率降低
var reg=new RegExp("a","i")
使用正则表达式的新语法
var 变量名 =/正则表达式/匹配模式
*/
var reg=/a/i;
console.log(reg.test("abc"));
console.log(typeof reg);
//创建一个正则表达式,检查是否有a或b
/*
打印出来的值是false因为 reg =/ab/;必须是ab挨着才会打印true
所以这种的不灵活
var reg=new RegExp("a","i")虽然效率比较低但是灵活
reg =/a|b/; a或者b这种可以实现
*/
reg =/a|b/;
console.log("acd")
//创建一个表达式是否包含字母
reg=/a|b|c|d|e|f|g/
console.log(reg.test("a"));
//[]也是或的意思
reg=/[abcdefhlmn]/
console.log(reg.test("a"))
//任意的小写字母
reg=/[a-z]/
console.log(reg.test("a"))
//任意的大写字母
reg=/[A-Z]/
console.log(reg.test("a"))
//任意大小写
reg=/[A-Z]/i
console.log(reg.test("a"))
///[A-z]/
reg=/[A-z]/i
console.log(reg.test("a"))
//检查一个字符串是否含有abc,adc,aec
reg=/abc|adc|aec/
console.log(reg.test("abc"))
reg=/a[bde]c/
console.log(reg.test("abc"))
//[^ab] 除了 , [^ab]除了ab
reg=/[^ab]/
console.log(reg.test("ab"))
//[0-9]任意的数字
reg=/[0-9]/
console.log(reg.test("ab"))
//[^0-9]除了数字
reg=/[^0-9]/
</script>
<script>
//创建一个正则表达式含有aaaaaaaaaaaaaaaaaa
//这种写法比较繁琐
var reg=/aaaaaaaaaaaaaaaa/
console.log(reg)
//可以通过量词可以设置一个内容出现的次数
//a{3} {n}正好出现n次
var reg =/a{3}/;
console.log(reg.test(("aaabc")))
//这种执行的为false,下面那种执行的是true
var reg =/ab{3}/;
console.log(reg.test(("ababab")))
//
var reg =/(ab){3}/;
console.log(reg.test(("ababab")))
var reg =/ab{3}c/;
console.log(reg.test(("abbbc")))
//找是否有3个b
var reg =/b{3}/;
console.log(reg.test(("bbbbb")))
//ab1到3次c {m,n} m到n次
var reg =/ab{1,3}c/;
console.log(reg.test(("abbbc")))
//{3,} {m,} m次以上
var reg =/ab{3,}c/;
console.log(reg.test(("abbbc")))
//+至少一个相当于{m,} m次以上
var reg =/ab+c/;
console.log(reg.test(("ac")))
//* 表示又没有都行
var reg =/ab+c/;
console.log(reg.test(("ac")))
//0个或者1个
var reg =/ab?c/;
console.log(reg.test(("ac")))
//^检查字符串a是否开头
var reg =/^a/;
console.log(reg.test(("ac")))
//^检查字符串a是否结尾
var reg =/a$/;
console.log(reg.test(("ac")))
//^a$只能有一个a
var reg =/^a$/;
console.log(reg.test(("ac")))
//^a|a$ a开头a结尾
var reg =/^a|a$/;
console.log(reg.test(("aa")))
</script>
正则表达式语法2
<script>
/*
正则表达式是否含有.(点)/./意义是匹配任意字符单独点表示任意字符
但是想要表示.(点)要使用转义字符\
*/
var reg=/\./
console.log(reg.test("ds.jdks"))
//检查是否有/(斜杠)
//两个斜杠\\表示一个字符
var reg=/\\/
//但是在写点时候也要写两个
console.log(reg.test("d\\"))
//打印查看会打印几个|
console.log("d\\")
//注意使用对象时,它的参数是一个字符串,而|是一个转义字符
//如果要使用\则需要使用\\
//在对象里使用\\相当于上面的\(转义字符)
var reg =new RegExp("\\.")
console.log(reg)
/*
\w(小写)数字、字母、_
\W(大写) 除了数字、字母、_
\d(小写)任意的的数字
\D(大写) -除了任意的数字
\s(小写)空格
\S(大写) 除了空格 这个除了空格是里面一个值也没有
\b(小写)单词边界
\B(大写) 除了单词边界
*/
reg=/\s/
console.log(reg.test(""))
//创建一个正则表达式检查一个字符串是否含有child
//\b(小写)
//\B(大写)除了单词边界
reg=/\bchild\b/
console.log(reg.test("hello child"))
//接受用户的输入
var str=prompt("请输入你的用户名")
//console.log(str)
//当用户不小心输入了空格,如何处理空格
//去掉字符串的空格
//使用“”替换空格
//注意g全局匹配,即这里面替换的是所有的空格
//str=str.replace(/\s/c,"")
//console.log(str)
//^开头,*0格或者多个这种的是替换开头的空格
str=str.replace(/^\s*/,"")
console.log(str)
//^这种的是替换结尾的空格
//str=str.replace(/\s$/,"")
//console.log(str)
//整合:开头和结尾的空格都去除
//开头或者结尾的空格去除,在添加g全局即开头和结尾都去除
str=str.replace(/^\s*|\s*$/g,"")
</script>
正则表达式邮箱格式
对象
对象的简介
<script>
/*
在js的数据类型中
string字符串
number数值
null
undefined
boolean
上面这5种是基本的数据类型
object是引用数据类型
基本数据类型的值都是单一的值 string number boolean
在js中表示一个人的信息
var name=“xxx”
var gender=“xxx”
var age=“xxx”
对象属于符合的数据类型,可以保存多个不同的数据类型的属性
对象的分类
1,内建对象
有es标准定义的对象,在任何的es的实现中都可以使用
math ,string number,boolean,function,object。。。
2,宿主对象
由js的运行环境提供的对象,目前情况下值的是由浏览器提供的对象
比如,document˙这个对象我们直接拿来使用,我们并且没有创建
3,自定义对象
由开发人员自定义对象
*/
</script>
对象的基本操作
//创建对象
/*
使用new关键字调用函数(对象),是构造函数,构造函数是专门用来创建函数(对象)的
使用new关键字创建函数
*/
var obj =new Object();
/* console.log(obj)
console.log(typeof obj) */
//想对象中添加属性
//在对象中保存的值为属性
//语法:对象.属性 = 属性值
/*
向obj中添加name属性
*/
obj.name="名字";
obj.gender="男";
obj.age=19;
console.log(obj)
/*
获取对象的属性值
语法:对象.属性名
*/
console.log(obj.name)
console.log(obj.gender)
console.log(obj.age)
//如果读取对象中没有的属性,不会报错,而是会返回undefined
console.log(obj.hello)
//修改对象的属性值
/*
语法:
对象.属性名=新值
*/
obj.name="tom"
console.log(obj.name)
//删除对象值
/*
语法:
delete 对象.属性名
*/
delete obj.name;
console.log(obj.name)
对象的基本和引用数据类型
基本数据类型存储方式
引用数据类型存储方式
当obj2=null的时候
在使用不同的对象的时候
<script>
/*
基本数据类型:
string number boolean null undefined
引用数据类型
object
*/
var a=123;
var b=a;
console.log("a ="+ a)
console.log("b ="+ b)
a=a+10;
//第一个值会随着改变而改变,第二个值不会随着值的改变而改变
console.log("a ="+ a)//133
console.log("b ="+ b)//123
var obj =new Object();
obj.name="长大了";
//当obj的name属性值发生改变时
obj.name="还可以"
var obj2=obj
console.log(obj.name)
console.log(obj2.name)
/*
js中的变量是保存到栈内存的
基本数据类型的值直接在栈内存中存储
当第一次定义var a=123和var b=a这个时候内存中,在b会复制a的值,
但是当你修改a的值, 但是b的值就等于123,所以这个时候,b的值不会发生改变
这个时候值与值之间是独立存在的,修改一个变量值不会改变其他变量值
对象(引用类型):在堆内存中,一旦开始new 就会在堆内存中开辟一块新的空间,
用来保存对象的,在堆堆内存空间中是没有名字,它是根据地址值来区分,
开辟的这一块空间,堆内存和占内存如何建立关系,在栈内存中存的是变量名和地址值
在定义变量的属性值的时候,是将属性名和属性值存在堆内存中,在使用两个变量时,
而两个变量指向的是一个地址值,所以当一个发生改变时两一个也会随之改变
*/
obj2=null;
console.log(obj2)
console.log(obj)
var c=10;
var d=10;
//console.log(c==d)
var obj3=new Object();
var obj4=new Object();
obj3.name="沙和尚"
obj4.name="沙和尚"
/* console.log(obj3)
console.log(obj4) */
console.log(obj3==obj4)
/*
当比较两个基本数据类型时,就是比较值
当时当比较两个引用类型时,它比较的是内存的地址值
如果两个对象一摸一样,但是两个内存的地址值不一样,返回的还是false
*/
</script>
dom
文档对象模型(Document Object Model,简称DOM
DOM可以随心所欲的操作网页即各种标签html
DOM,全称Document Object Mode|文档对象模型。
●JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。
●文档
-文档表示的就是整个的HTML网页文档
●对象I
-对象表示将网页中的每一个部分都转换为了一个对象。
每一个东西都转换成对象为了简单世界通过对象操作数据
●模型,
-使用模型来表示对象之间的关系.这样方便我们获取对象。比如:如果讲一个学校的每一个学生都当成一个对象,但是将学校的锁哟学生都放到一个班级里就不容易管理;所以使用模型分开管理
节点
●节点Node ,是构成我们网页的最基本的组成部分,网页中的每一个部分都可以称为是一个节点。
●比如: htm|标签、 属性、文本、注释、整个文档等都是一个节点。
●虽然都是节点,但是实际上他们的具体类型是不同的。
。比如:标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。
●节点的类型不同,属性和方法也都不尽相同。
节点
节点: Node 杓成HTML文档最基本的単元。
·常用芍点分カ四炎
文档节点:整个HTL文档
-元素节点;HTML文档中的HTM标签
-属性节点:元素的属性
-文本节点: HTML标签中的文本内容