技术标签: 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>
以上使用了数组,代码执行后会在警告栏中弹出数组的数字直到数组结束为止。
感谢大家看完这篇文章,真心希望这篇文章可以给大家带来帮助,同时也祝愿大家成为真正的代码大神!
文章浏览阅读241次。目录[隐藏]1Loadavg分析1.1Loadavg浅述1.2Loadavg读取1.3Loadavg和进程之间的关系1.4Loadavg采样218内核计算loadavg存在的问题2.1xtime_lock解析2.2全局load读写分离解xtime_lock问题2.3几个关键点:2..._$load_avg_per_cpu.max.warn
文章浏览阅读1.2k次,点赞53次,收藏39次。快速排序整体的综合性能和使用场景都是比较好的,所以才敢叫快速排序时间复杂度:O(N*logN)空间复杂度:O(logN)稳定性:不稳定。
文章浏览阅读1.3k次。step1 :下载百度云链接https://pan.baidu.com/s/1luAFF8gGddWFqgbq-_X0cg提取码: 5xdj包含 git github forwindows githubforMac 以及notepad++step2:安装这个安装程序,是强制安装路径的,所以不要乱搞 下载之后直接点击就行。@基本情况就是这样..._下载了githubdesktop
文章浏览阅读4.7k次。要想让一个程序功能变得灵活起来,那么配置绝对是不可或缺的,通过合理的设计,将所有动态变量都配置化,可以最大程度上让程序变得灵活。可是在某些复杂的业务场景中,仅仅只是变量的配置化,往往还并不能满足需求,尤其是互联网这种业务需要快速更迭的行业。于是,做一个这样的功能:仅仅依靠配置,就能让程序的逻辑cover住所有的业务逻辑变化,就成为了程序员的终极梦想。然而,现实是残酷的,"write once run forevre",这几乎是不可能实现的梦想(如果真的出现了这样的技术,那可能会是我们职业生涯将要面对的最_nashorn
文章浏览阅读1.5w次,点赞4次,收藏28次。一道关于ctf的题,用python将rgb值转化为图片_ctf 三个坐标值转换图像
文章浏览阅读1.4k次。前言: 安防领域最近几年可谓暗流涌动,作为安防业的双寡头,大华股份与海康威视凭借行业的东风,两家公司的成长速度异常强劲,在国际市场上已经和应用厂家进行厮杀。 2015年两家公司双双晋升“全球安放50强”,海康排名第二,大华排名第五。以华为海思为代表国产芯片解决方案不断走强,在国际竞争中优势凸显,在后端NVR高端产品线先后推出了海思3531、海思3535、海思3536,同时针对低端的产品线也不..._海思hi35xx平台软件开发快速入门之背景知识
文章浏览阅读2k次。mathtype插入在WPS中出现The MathType DLL cannot be found问题_mathtype不能被发现
文章浏览阅读1.8k次,点赞2次,收藏3次。对于⽤vs作为开发⼯具的同学来说,可能常常会碰到“Lc.exe已退出代码为-1”的问题,造成这个结果的⼀般是因为加⼊了第三⽅的插件程序造成的,今天记录下如何解决。查看加载的程序项⽬,找到Properties⽂件夹licenses.licx⽂件,然后右键选择删除就可以了,调试运⾏正常了。可以使⽤⽂本编辑器打开上述⽂件,也可以使⽤其它的编辑器,在⽂件中查找licenses.licx字样,删除对应节点。找到你系统的*.csproj⽂件,这个⽂件是加载项⽬⽂件。c.exe已退出代码为-1问题解决⽅法。_lc.exe已退出 代码为-1
文章浏览阅读6.4k次,点赞7次,收藏29次。【代码】linux系统忘记登录密码怎么办。_linux忘记密码
文章浏览阅读1.4w次,点赞5次,收藏12次。Allegro软件经典报错解决方案Allegro经典报错解决方案初学者在用cadence画pcb的时候,偶尔会遇到像这样的问题。“Program has encountered a problem and must exit The design will besaved as a SAV file that can be recovered using dbdoctor (íf applic..._program has encountered a
文章浏览阅读1.7w次,点赞11次,收藏102次。Tomcat11、Tomcat10安装(详细)一、检查Java在Windows上的存在。二、查看tomcat版本规范,确定适合自己机器的tomcat版本。三、tomcat下载。下载目录里的文件分类类型说明。四、tomcat10安装。五、tomcat10安装不成功时解决方案。六、启动tomcat时运行界面乱码的解决方法。七、tomcat 相关配置文章............_tomcat10
文章浏览阅读134次。数据结构和算法的关系数据结构是一门研究组织数据方式的学科,程序=数据结构+算法数据结构是算法的基础数据结构结构:线性结构:数组,队列,链表,栈顺序存储结构链式存储结构非线性结构:二维数组,多维数组,广义表,树,图稀疏数组的概念当一个数组中大部分元素为0时,或者为同一个值的数组时,可以使用记录数组一共有几行几列,有多少个不同的数值把具有不同值的元素的行列及值记录在一个小规模的数组中,从而缩小程序的规模二维数组转为稀疏数组:遍历原始的二维数组,得到有效数据的个数sum_javal链表 top还是front