一、JavaScript简介
1.JavaScript概述
JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。
2.主要功能
1.嵌入动态文本于HTML页面。
2.对浏览器事件做出响应。
3.读写HTML元素。
4.在数据被提交到服务器之前验证数据。
5.检测访客的浏览器信息。控制cookies,包括创建和修改等。
6.基于Node.js技术进行服务器端编程。
3.使用方式
内嵌式 JS 代码
内嵌式的 js 代码会在页面打开的时候直接触发
外链式 JS 代码
-
外链式代码是书写在一个 .js 的文件内
-
外链式 js 代码只要引入到了 html 页面中,就会在页面打开的时候直接触发(解析)
-
新建一个 .js 后缀的文件,在文件内书写 js 代码,把写好的 js 文件引入 html 页面
二、JavaScript基础内容
1.JavaScript的输入与输出
(1)JavaScript的输入
使用prompt可将信息输入,格式为prompt(“需要输入的语句”)
(2)JavaScript的输出
JavaScript的输出方式有三种。
第一种:alert()
使用alert ()输出时,是以警告框的形式输出。
第二种:document.write( 文档输出内容)
使用document.write(文档输出内容) 就是输出到网页上
第三种:console.log(‘no’) 控制台输出
使用console.log(‘no’) 输出则是在网页的控制台(按F12或者鼠标右键检查可找到控制台)上进行输出。
2.变量
顾名思义,变量就是在程序执行的过程中,其值在不断发送改变的量。
1)定义变量的注意事项:
1)定义变量的三要素 :var 变量名 = 初始化值;
2)定义所有的变量都是var,而且var可以省略不写!
3)js中,变量可以重复定义的,后面的值将前面的值覆盖!
2)基本数据类型
//查看一个变量的数据类型的行数:typeof(变量名)
//基本数据类型划分:
//1)无论是整数还是小数,数据类型number类型
//2)布尔类型 :boolean :用于逻辑判断:要么true(真) false(假)
//3)字符串类型:string :无论变量值"字符串"还是'字符':结果都是string
//4)未定义类型:undefined(没有意义的)
//5)引用数据类型:object类型:对象类型
3.三元运算符
这个运算符,带有一定逻辑判断。
(表达式)?执行true的结果:执行false的结果;
表达式无论简单还是复杂,结果是boolean类型,true或者false。
以下为使用三元运算符定义两个变量比较大小。
<script>
//需求:有两个变量,比较两个变量的最大值?
//定义两个变量
var a = 10 ;
var b = 25 ;
//(表达式)?执行true的结果:执行false的结果;
var max = (a>b)?a:b ;
document.write("两个数据的最大值是:"+max) ;
document.write("<hr/>") ;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iaKHhrpZ-1689995733667)(C:\Users\12390\AppData\Roaming\Typora\typora-user-images\image-20230721202551829.png)]
下图为上代码所执行的结果。
4.位运算符
常用的位运算符有四个,分别是位与&,位或|,位异或^,反码~。计算机在对数据进行计算的时候,
需要将这些数据进行"补码"操作 (原码–反码—补码:有符号的数据表示法)
1)位与&它的特点是有0则0
如下述代码就是位与的相关计算
document.write((3 & 4)+“<br/>”)
解法: 3 位与 & 4 --补码进行运算
00000011
& 00000100
------------------
00000000
根据有0则0的特点计算出(3 & 4)=0
2)位或|它的特点有1则1
如下述代码就是位或的相关计算
document.write((3 | 4)+"<br/>")
解法如下
位或|:有1则1
3 位或 | 4 --补码进行运算
00000011
| 00000100
------------------
00000111
有二进制转换为十进制可得(3 | 4)= 7
3)位异或^它的特点是相同则为0,不同则为1
如下述代码就是位异或的相关计算
document.write((3 ^ 4)+"<br/>")
解法如下
位异或^:
3 位异或 ^ 4 --补码进行运算
00000011
^ 00000100
------------------
00000111
可得结果同上都为7
4)反码~的特点是全部按位取反,0变1,1变0
如下述代码就是反码的相关计算
document.write((~3)+"<br/>") ;
解法如下:
~3:
3的原码 :
00000011 ---反码---补码
补码
~ 00000011(全部都按位取反:不分最高符号位)
11111100 ------补码 ---反码--->原码
最高符号位 数值位
1 1111100 补码
- 1
---------------------
1 1111011 反码
---------------------------------
1 0000100 原码
- 4
可得结果为4
5.Javascript的流程控制语句
1)顺序结构语句
这是流程控制语句中最简单的一种语句了。
javascript:代码由上而下一次加载。
以下则为顺序结构语句的实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
document.write("我即将成为代码大神!"+"<br />")
document.write("我要努力学习Java!")
</script>
</head>
<body>
</body>
</html>
下图则为上述代码运行的结果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o32sWuhq-1689995733668)(C:\Users\12390\AppData\Roaming\Typora\typora-user-images\image-20230722091325564.png)]
2)选择结构语句
选择结构语句有两种,一种为if,另一种为switch。
if语句有三种格式:
if语句格式1:
if(表达式){
语句;
}
执行流程:如果表达式成立,则执行语句,否则不执行。
if语句格式1示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var a = prompt("请输入一个数字")
if(a>0){
document.write("我要努力学习后端!")
}
</script>
</head>
<body>
</body>
</html>
上述代码运行后结果如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dGILGlop-1689995733669)(C:\Users\12390\AppData\Roaming\Typora\typora-user-images\image-20230722092036426.png)]
在警告栏中输入一个大于0的数字
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vYL3svYI-1689995733669)(C:\Users\12390\AppData\Roaming\Typora\typora-user-images\image-20230722092104213.png)]
最终得到
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JJyDEVf8-1689995733669)(C:\Users\12390\AppData\Roaming\Typora\typora-user-images\image-20230722092120496.png)]
if语句格式2:
if(表达式){
语句1;
}else{
语句2;
}
相较于格式1,格式二多了一个输出。
执行流程:如果表达式成立,则执行语句1,否则执行语句2。
if语句格式2的实例如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var a = prompt("请输入一个数字")
if(a>0){
document.write("我要努力学习后端!")
}else{
document.write("我要努力学习前端!")
}
</script>
</head>
<body>
</body>
</html>
上述代码执行后与格式1相同先会跳出一个警告框,不同的是格式1在警告框中输入小于等于0的数什么也不会输出,而在格式2中输入小于等于0的数则会输出else里的语句,既"我要努力学习前端!"
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kbvfup3h-1689995733670)(C:\Users\12390\AppData\Roaming\Typora\typora-user-images\image-20230722092650093.png)]
if语句格式3:
if(表达式){
语句1;
}else if(表达式2){
语句2;
}else if(表达式3){
语句3;
}
...
}else{
语句n
}
相比于格式1.2,格式3能做的选择更多
执行流程先判断表达式1是否成立,成立则执行语句1,
如果不成立,继续判断表达式2是否成立,成立,则执行语句2
如果都不成立,最终执行else中的语句;
if语句格式3实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var a = prompt("请输入一个数字")
if(a==0){
document.write("我要努力学习java!")
}else if(a==1){
document.write("我要努力学习python!")
}else if(a==2){
document.write("我要努力学习c++!")
}else{
document.write("我要努力学习后端语言!")
}
</script>
</head>
<body>
</body>
</html>
上述代码运行后同样会出现警告框,此时可以在警告框中输入0,1,2以及其他数字共计四种情况,当输入0时会出现”我要努力学习java!“,当输入1时会出现”我要努力学习python!“,当输入2时会出现”我要努力学习c++!“当输入其他数字时则会出现”我要努力学习后端语言!“
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-icgpxjI8-1689995733670)(C:\Users\12390\AppData\Roaming\Typora\typora-user-images\image-20230722093504027.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jcoSYG8x-1689995733671)(C:\Users\12390\AppData\Roaming\Typora\typora-user-images\image-20230722093520308.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j73NFjrq-1689995733671)(C:\Users\12390\AppData\Roaming\Typora\typora-user-images\image-20230722093529554.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-31ytrk5g-1689995733672)(C:\Users\12390\AppData\Roaming\Typora\typora-user-images\image-20230722093547912.png)]
switch语句:
switch格式
switch(表达式或者某个变量){
case 值1:
语句1;
break ;
case 值2:
语句2;
break ;
...
...
default:
语句n;
break ;
}
执行流程:
使用switch后面的变量值和case的值1进行匹配,
如果匹配,执行语句1,break语句结束;
如果值1不匹配,判断case后面的值2是否和switch后面的值进行匹配
如果匹配,则执行语句2,break语句结束;
如果也不匹配,...上面都不匹配,执行default的语句n,遇见break语句结束!
switch语句实例如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var week_day = prompt("请输入一个星期的值")
week_day = parseInt(week_day)
switch(week_day){
case 1 :
document.write("今天是周一")
break
case 2 :
document.write("今天是周二")
break
case 3 :
document.write("今天是周三")
break
case 4 :
document.write("今天是周四")
break
case 5 :
document.write("今天是周五")
break
case 6 :
document.write("今天是周六")
break
case 7 :
document.write("今天是周日")
break
default:
document.write("很抱歉,地球上没有这个星期")
break
}
</script>
</head>
<body>
</body>
</html>
上述代码执行后弹出警告框,在里面输1则会的到”今天是周一“这个结果,依次输入就会得到其他结果,而输入1-7的其他数字则会得到”很抱歉,地球上没有这个星期“。
3)循环结构语句
当我们需要在浏览器上输出许多相关类型或者相同的语句时,单纯使用document.write()会有代码冗余度过大,代码的重复度高等弊端,所以我们需要引进循环结构语句。
首先看for循环
for循环的格式:
for(初始化语句;条件判断语句;控制体语句){
循环体语句
}
for循环实例如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
for(var i=1 ;i<=5;i++){
document.write("我要成为代码大神!"+"<br />")
}
</script>
</head>
<body>
</body>
</html>
上述代码执行成功时会输出”我要成为代码大神!“重复5次
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z3JePavc-1689995733672)(C:\Users\12390\AppData\Roaming\Typora\typora-user-images\image-20230722095653778.png)]
while循环:
while循环的格式:
初始化语句
while(条件表达式){
循环体语句;
控制体语句;(步长语句)
}
以下为while循环的实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var a=0
while(a<10){
a+=a
a++
}
document.write(a)
</script>
</head>
<body>
</body>
</html>
上述代码使用while循环求1-5的和,取得结果为15。
*for循环和while循环的区别
for循环和while的区别?
1)格式不同
for(初始化语句; 条件表达式;控制体语句){
循环体语句;
}
初始化语句;
while(条件表达式){
循环体语句;
控制体语句;
}
2)内存角度考虑:优先使用for
for循环结束,里面的变量就会从内存中释放掉,节省内存资源
while循环结束,依然能访问这个变量,初始化语句在外面定义的
3)从应用场景:
明确循环次数使用for
不明确循环次数使用while
举例:
键盘录个字符串:给3次机会,判断用户是登录成功
开发中,优先使用for循环
do while循环:
初始化语句;
do{
循环体语句;
控制体语句(步长语句);
}while(条件表达式) ;
执行流程:初始化语句赋值
执行循环体
控制体语句进行自增或者自减
判断条件是否成立,成立,继续执行循环体,不成立,结束!
以下为do while的实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var i = 1;
do{
document.write("我要成为代码大神!<br/>") ;
i++ ;
}while(i<=5) ;
</script>
</head>
<body>
</body>
</html>
上述代码运行后可得
五次”我要成为代码大神!“
*do while循环和while循环以及for循环的差别
它和for,while最大的区别:
循环体至少执行一次!
(开发中,用的很少)
底层源码使用多:js前端框架(Jqeury)
后端语言:java语言(面向对象)
集合/后面常用类的方法中见到源码:涉及到do-while
*for循环嵌套:
for(初始化语句1;条件表达式1;控制体语句1){
//循环体:for循环
for(初始化语句2;条件表达式2;控制体语句2){
循环体语句;
}
}
for循环嵌套示例如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
for(var i = 1;i<=9;i++){
for(var j = 1;j<=i;j++){
document.write(i+"*"+j+"="+i*j+" ")
}document.write("<br />")
}
</script>
</head>
<body>
</body>
</html>
上述代码使用for循环嵌套做一个99乘法表,执行结果如下图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tcKMwF9T-1689995733673)(C:\Users\12390\AppData\Roaming\Typora\typora-user-images\image-20230722103209060.png)]
6.Javascript的跳转控制语句
我们所学的跳转控制语句有两种,其一是break,其二是continue。注:二者都不能单独使用。
break:
break的作用是中断,结束,一般用于switch语句与循环语句,都是起到终止作用。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wJTmJFOn-1689995733673)(C:\Users\12390\AppData\Roaming\Typora\typora-user-images\image-20230722104824164.png)]代码如上述所示时会输出5行5列*
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-msRLmzmo-1689995733673)(C:\Users\12390\AppData\Roaming\Typora\typora-user-images\image-20230722104855879.png)]
将if(j==2){break nc}取消注释后
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xk30opse-1689995733673)(C:\Users\12390\AppData\Roaming\Typora\typora-user-images\image-20230722104935637.png)]
会输出两行两列*,这就是break起了效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VBTk0zbn-1689995733674)(C:\Users\12390\AppData\Roaming\Typora\typora-user-images\image-20230722105029997.png)]
而continue语句则是跳出当前循环进入下一次循环,并不会结束循环。
以下为continue语句的实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
for(var i = 0 ; i < 10 ; i++){
if(i==3){
continue ;//结束当前这个循环,立即进入下一次循环
}
document.write(i+"<br/>") ;
}
</script>
</head>
<body>
</body>
</html>
上述代码会输出除了3以外的0-9的数字
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M4ik7S3D-1689995733674)(C:\Users\12390\AppData\Roaming\Typora\typora-user-images\image-20230722105236214.png)]
三、函数
1.如何定义并且调用函数:
在js中定义函数的格式
function 函数名(参数名1,参数名2,....){
完成的函数的逻辑
return 结果; //返回结果
}
调用函数:
赋值调用:
var 变量名= 函数名(实际参数1,实际参数2..)
以下为简单的函数实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var m = prompt("请输入一个数")
var n
m = parseInt(m)
n = parseInt(n)
princfb(m,n)
function princfb(m,n){
for(var i=1;i<=m;i++){
for(var j=1;j<=i;j++){
document.write(j+"*"+i+'='+i*j+" ")
}
document.write("<br />")
}
}
</script>
</head>
<body>
</body>
</html>
上述用函数写出了一个nn乘法表,也就是输入一个数就可以看到那个数的乘法表
2.有返回结果的函数的使用
函数使用时可以用到三元运算符和if语句的格式2嵌套,结构如下。
function 函数名(形式参数1,参数参数2...){
//三元/if语句
return 最大值;
}
实例如下
function getMax(a,b,c){//形参
//三元嵌套:
//var max = (a>b)?((a>c)?a:c):((b>c)?b:c) ;
//三元:分步完成
//中间变量
//var temp = (a>b)?a:b;
//var max = (temp>c)?temp:c ;
//if格式2嵌套
var max ;
if(a>b){
if(a>c){
// document.write(a+"是最大值");
max = a;
}else{
max = c ;
}
}else{
if(b>c){
max = b ;
}else{
max = c ;
}
}
return max ;
}
//键盘录入
var first = prompt("请输入第一个数据:") ;
var second = prompt("请输入第二个数据:") ;
var third = prompt("请输入第三个数据:") ;
first = parseInt(first) ;
second = parseInt(second) ;
third = parseInt(third) ;
//赋值调用
var max = getMax(first,second,third) ;
document.write("三个数据最大值是:"+max+"<br/>") ;
上述代码运行后可以进行一个简单的三数比较从而选取最大值。
3.函数以及变量的命名
函数名以及变量名:遵循小驼峰命名法
单个单词:字母全部小写
多个单词:第一个单词全部小写,从第二个单词开始首字母大写,其余小写
4.函数使用的注意事项
1)定义函数的时候,形式参数上不能携带var。
2)函数定义的格式不能省略{},否则不是一个函数,浏览器中js引擎是无法识别的。
3)如果这个函数没有返回结果,那么赋值调用的是undefined(未定义)。
4)无论任何语言中,有右括号的地方不能有分号,否则函数是没有"函数体",没有函数体的方法是没有意义的。
四、数组
1.数组的定义如下:
数组:
可以存储多个同一种类型元素的一个容器!
在javascript语言中,数组可以存储不同类型的元素,
但是开发中,数组存储的必须为同一类型的元素!
2.数组的格式:
固定格式:
(动态初始化:不给定元素)
var 数组名称 = new Array() ;//不指定长度
var 数组名称 = new Array(size); //指定数组长度
(静态初始化:给定具体元素)
var 数组名称 = new Array([元素1,元素2,...]) ;
可以简写为
var 数组名= [元素1,元素2,...] ;
3.数组的用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var arr = [55,11,22,33,44] ;
alert(arr.length) ;
//遍历:一一获取元素
for(var i = 0; i < arr.length;i++ ){ //i表示索引值
alert(arr[i]) ;
}
</script>
</head>
<body>
</body>
</html>
以上使用了数组,代码执行后会在警告栏中弹出数组的数字直到数组结束为止。
五、结语
感谢大家看完这篇文章,真心希望这篇文章可以给大家带来帮助,同时也祝愿大家成为真正的代码大神!