技术标签： 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>
以上使用了数组，代码执行后会在警告栏中弹出数组的数字直到数组结束为止。
感谢大家看完这篇文章，真心希望这篇文章可以给大家带来帮助，同时也祝愿大家成为真正的代码大神！
文章浏览阅读3.8k次。1、将下载好的萤石js插件，添加到SoringBoot项目中。位置可参考下图所示。（容易出错的地方，在将js插件在html页面引入时，发生路径错误的问题）所以如果对页面中引入js的路径不清楚，可参考下图所示存放路径。2、将ezuikit.js引入到demo-live.html中。（可直接将如下代码复制到你创建的html页面中）<!DOCTYPE html><html lan..._ezuikit 测试的url
文章浏览阅读322次。第二步，在弹出的对话框选择，设备驱动—>PLC—>莫迪康—>ModbusRTU—>COM,根据配置软件选择的协议选期期，这里以此为例，然后点击“下一步”。第四步，把使用虚拟串口打勾(GPRS设备)，根据需要选择要生成虚拟口，这里以选择KVCOM1为例，然后点击“下一步”设备ID即Modbus地址(1-255) 使用DTU时，为下485接口上的设备地址。第六步，Modbus的从机地址，与配置软件相同，这里以1为例，点击“下一步“第五步，Modbus的从机地址，与配置软件相同，这里以1为例，点击“下一步“_组态王ua
文章浏览阅读9.4k次，点赞22次，收藏19次。安装npm相当于安装node.js,Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西_npm安装配置
文章浏览阅读748次，点赞21次，收藏26次。大家好，小编来为大家解答以下问题，python基础训练100题，python入门100例题，现在让我们一起来看看吧！宝子们还在新手村练级的时候，不单要吸入基础知识，夯实自己的理论基础，还要去实际操作练练手啊！由于文章篇幅限制，不可能将100道题全部呈现在此除了这些，下面还有我整理好的基础入门学习资料，视频和讲解文案都很齐全，用来入门绝对靠谱，需要的自提。保证100%免费这不，贴心的我爆肝给大家整理了这份今天给大家分享100道Python练习题。大家一定要给我三连啊~
文章浏览阅读1k次。 为了在 Linux （ Ubuntu） 上安装sublime，一般大家都会选择常见的教程或是 sublime 官网教程，然而在国内这种方法可能失效。为此，需要用安装包安装。以下就是使用官网安装包安装的教程。打开 sublime 官网后，点击右上角 download， 或是直接访问点击打开链接，即可看到各个平台上的安装包。选择 Linux 64 位版并下载。下载后，打开终端，进入安装..._ubuntu 安装sumlime text打不开
文章浏览阅读563次，点赞13次，收藏6次。CrossOver24是一款类虚拟机软件，专为macOS和Linux用户设计。它的核心技术是Wine，这是一种在Linux和macOS等非Windows操作系统上运行Windows应用程序的开源软件。通过CrossOver24，用户可以在不购买Windows授权或使用传统虚拟机的情况下，直接在Mac或Linux系统上运行Windows软件和游戏。该软件还提供了丰富的功能，如自动配置、无缝集成和实时传输等，以实现高效的跨平台操作体验。
文章浏览阅读1.7k次。一个用聊天的方式让ChatGPT帮我写的线程安全的环形List_为什么gpt一写list就卡
文章浏览阅读336次。我们在前面的文章里曾写过Web应用中乱码产生的原因和处理方式，旧文回顾：深度揭秘乱码问题背后的原因及解决方式其中我们提到可以通过Filter的方式来设置请求和响应的encoding，来解..._filterconfig selectencoding
文章浏览阅读651次。转自：http://www.jb51.net/article/36480.htmencodeURI和decodeURI是成对来使用的，因为浏览器的地址栏有中文字符的话，可以会出现不可预期的错误，所以可以encodeURI把非英文字符转化为英文编码，decodeURI可以用来把字符还原回来_js encodeur decodeurl
文章浏览阅读1.9w次，点赞6次，收藏3次。前言在日常的Android开发当中，我们肯定要打包apk。但是今天我打包的时候遇到一个很奇怪的问题Android The destination folder does not exist or is not writeable，大意是目标文件夹不存在或不可写。出现问题的原因以及解决办法上面有说报错的中文大意是：目标文件夹不存在或不可写。其实问题就在我们的打包界面当中图中标红的Desti..._the destination folder does not exist or is not writeable
文章浏览阅读94次。一、配置代码编辑区的样式 <1>打开Eclipse，Help —> Install NewSoftware，界面如下： <2>点击add...，按下图所示操作： name：随意填写，Location：http://eclipse-color-th..._ecplise高大上设置
文章浏览阅读2.8k次。一，下载mysql:http://dev.mysql.com/downloads/mysql/； 打开页面之后，在Select Platform:下选择linux Generic，如果没有出现Linux的选项，请换一个浏览器试试。我用的谷歌版本不可以，换一个别的浏览器就行了，如果还是不行，需要换一个翻墙的浏览器。 二，下载完后解压缩并放到安装文件夹下： 1、MySQL-client-5.6.2_linux mysql 安装 mysql-5.6.24-1.linux_glibc2.5.x86_64.rpm-bundle