技术标签： javascript 开发语言 ecmascript
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
1.嵌入动态文本于HTML页面。
2．对浏览器事件做出响应。
3.读写HTML元素。
4．在数据被提交到服务器之前验证数据。
5.检测访客的浏览器信息。控制cookies，包括创建和修改等。
6.基于Node.js技术进行服务器端编程。
内嵌式的 js 代码会在页面打开的时候直接触发
外链式代码是书写在一个 .js 的文件内
外链式 js 代码只要引入到了 html 页面中，就会在页面打开的时候直接触发（解析）
新建一个 .js 后缀的文件，在文件内书写 js 代码，把写好的 js 文件引入 html 页面
使用prompt可将信息输入，格式为prompt（“需要输入的语句”）
JavaScript的输出方式有三种。
第一种：alert（）
使用alert （）输出时，是以警告框的形式输出。
第二种：document.write( 文档输出内容)
使用document.write(文档输出内容) 就是输出到网页上
第三种：console.log(‘no’) 控制台输出
使用console.log(‘no’) 输出则是在网页的控制台（按F12或者鼠标右键检查可找到控制台）上进行输出。
顾名思义，变量就是在程序执行的过程中，其值在不断发送改变的量。
1)定义变量的三要素 :var 变量名 = 初始化值;
2)定义所有的变量都是var,而且var可以省略不写!
3)js中,变量可以重复定义的,后面的值将前面的值覆盖!
//查看一个变量的数据类型的行数:typeof(变量名)
//基本数据类型划分:
//1)无论是整数还是小数,数据类型number类型
//2)布尔类型 :boolean :用于逻辑判断:要么true(真) false(假)
//3)字符串类型:string :无论变量值"字符串"还是'字符':结果都是string
//4)未定义类型:undefined(没有意义的)
//5)引用数据类型:object类型:对象类型
这个运算符，带有一定逻辑判断。
(表达式)?执行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)]
下图为上代码所执行的结果。
常用的位运算符有四个，分别是位与&，位或|，位异或^，反码~。计算机在对数据进行计算的时候,
需要将这些数据进行"补码"操作 (原码–反码—补码:有符号的数据表示法)
如下述代码就是位与的相关计算
document.write（（3 & 4）+“<br/>”）
解法： 3 位与 & 4 --补码进行运算
00000011
& 00000100
------------------
00000000
根据有0则0的特点计算出（3 & 4）=0
如下述代码就是位或的相关计算
document.write((3 | 4)+"<br/>")
解法如下
位或|:有1则1
3 位或 | 4 --补码进行运算
00000011
| 00000100
------------------
00000111
有二进制转换为十进制可得（3 | 4）= 7
如下述代码就是位异或的相关计算
document.write((3 ^ 4)+"<br/>")
解法如下
位异或^:
3 位异或 ^ 4 --补码进行运算
00000011
^ 00000100
------------------
00000111
可得结果同上都为7
如下述代码就是反码的相关计算
document.write((~3)+"<br/>") ;
解法如下：
~3:
3的原码 :
00000011 ---反码---补码
补码
~ 00000011(全部都按位取反:不分最高符号位)
11111100 ------补码 ---反码--->原码
最高符号位 数值位
1 1111100 补码
- 1
---------------------
1 1111011 反码
---------------------------------
1 0000100 原码
- 4
可得结果为4
这是流程控制语句中最简单的一种语句了。
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)]
选择结构语句有两种，一种为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的其他数字则会得到”很抱歉，地球上没有这个星期“。
当我们需要在浏览器上输出许多相关类型或者相同的语句时，单纯使用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的区别?
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>
上述代码运行后可得
五次”我要成为代码大神！“
它和for,while最大的区别:
循环体至少执行一次!
(开发中,用的很少)
底层源码使用多:js前端框架(Jqeury)
后端语言:java语言(面向对象)
集合/后面常用类的方法中见到源码:涉及到do-while
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)]
我们所学的跳转控制语句有两种，其一是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)]
在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乘法表，也就是输入一个数就可以看到那个数的乘法表
函数使用时可以用到三元运算符和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/>") ;
上述代码运行后可以进行一个简单的三数比较从而选取最大值。
函数名以及变量名:遵循小驼峰命名法
单个单词:字母全部小写
多个单词:第一个单词全部小写,从第二个单词开始首字母大写,其余小写
1)定义函数的时候,形式参数上不能携带var。
2)函数定义的格式不能省略{},否则不是一个函数,浏览器中js引擎是无法识别的。
3)如果这个函数没有返回结果,那么赋值调用的是undefined(未定义)。
4)无论任何语言中,有右括号的地方不能有分号,否则函数是没有"函数体"，没有函数体的方法是没有意义的。
数组:
可以存储多个同一种类型元素的一个容器!
在javascript语言中,数组可以存储不同类型的元素,
但是开发中,数组存储的必须为同一类型的元素!
固定格式:
(动态初始化:不给定元素)
var 数组名称 = new Array() ;//不指定长度
var 数组名称 = new Array(size); //指定数组长度
(静态初始化:给定具体元素)
var 数组名称 = new Array([元素1,元素2,...]) ;
可以简写为
var 数组名= [元素1,元素2,...] ;
<!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>
以上使用了数组，代码执行后会在警告栏中弹出数组的数字直到数组结束为止。
感谢大家看完这篇文章，真心希望这篇文章可以给大家带来帮助，同时也祝愿大家成为真正的代码大神！
文章浏览阅读1.1w次，点赞7次，收藏34次。vue-grid-layout的使用、实例、遇到的问题和解决方案_vue-grid-layout
文章浏览阅读218次。然后连接一个数据源，就会在下面自动产生一个添加附件的组件。把这个控件复制粘贴到页面里，就可以单独使用来上传了。插入一个“编辑”窗体。_powerapps点击按钮上传附件
文章浏览阅读264次。(1) Abstraction (抽象)(2) Polymorphism (多态)(3) Inheritance (继承)(4) Encapsulation (封装)_"object(cnofd[\"ofdrender\"])十条"
文章浏览阅读133次。删除node_modules，重新npm install看是否成功。在 package.json 文件中的 scripts 中加入。修改你的第三方库的bug等。然后目录会多出一个目录文件。_修改 node_modules
文章浏览阅读883次。【代码】【】kali--password:su的 Authentication failure问题，&sudo passwd root输入密码时Sorry, try again._password: su: authentication failure
文章浏览阅读1w次，点赞13次，收藏97次。整理5个优秀的微信小程序开源项目。收集了微信小程序开发过程中会使用到的资料、问题以及第三方组件库。_微信小程序开源模板
文章浏览阅读128次。Centos7最简搭建NFS服务器_centos7 搭建nfs server
文章浏览阅读1.2k次，点赞2次，收藏3次。前言mybatis在持久层框架中还是比较火的，一般项目都是基于ssm。虽然mybatis可以直接在xml中通过SQL语句操作数据库，很是灵活。但正其操作都要通过SQL语句进行，就必须写大量的xml文件，很是麻烦。mybatis-plus就很好的解决了这个问题。..._mybaitis-plus ruledataobjectattributemapper' and 'com.picc.rule.management.d
文章浏览阅读325次。EECE 1080C / Programming for ECESummer 2022Laboratory 4: Global Functions PracticePlagiarism will not be tolerated:Topics covered:function creation and call statements (emphasis on global functions)Objective:To practice program development b_eece1080c
文章浏览阅读53次。被同机房早就1年前就学过的东西我现在才学，wtcl。设要求的数为\(x\)。设当前处理到第\(k\)个同余式，设\(M = LCM ^ {k - 1} _ {i - 1}\) ，前\(k - 1\)个的通解就是\(x + i * M\)。那么其实第\(k\)个来说，其实就是求一个\(y\)使得\(x + y * M ≡ a_k(mod b_k)\)转化一下就是\(y * M ...
文章浏览阅读1.3k次。首先，问题是如何出现的？晚上复查代码，发现一个activity没有调用自己的ondestroy方法我表示非常的费解，于是我检查了下代码。发现再finish代码之后接了如下代码finish();System.exit(0);//这就是罪魁祸首为什么这样写会出现问题System.exit(0);////看一下函数的原型public static void exit (int code)//Added ..._android 手动杀死app,activity不执行ondestroy
文章浏览阅读894次。Q: SylixOS 版权是什么形式, 是否分为<开发版税>和<运行时版税>.A: SylixOS 是开源并免费的操作系统, 支持 BSD/GPL 协议(GPL 版本暂未确定). 没有任何的运行时版税. 您可以用她来做任何 您喜欢做的项目. 也可以修改 SylixOS 的源代码, 不需要支付任何费用. 当然笔者希望您可以将使用 SylixOS 开发的项目 (不需要开源)或对 SylixOS 源码的修改及时告知笔者.需要指出: SylixOS 本身仅是笔者用来提升自己水平而开发的_select函数 导致堆栈溢出 sylixos