技术标签: 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.5w次,点赞9次,收藏26次。简介一个创建某个文件到桌面快捷方式的BAT批处理.代码@echooff::设置程序或文件的完整路径(必选)setProgram=D:\Program Files (x86)\格式工厂.4.2.0\FormatFactory.exe::设置快捷方式名称(必选)setLnkName=格式工厂v4.2.0::设置程序的工作路径,一般为程序主目录,此项若留空,脚本将..._批处理创建桌面快捷方式
文章浏览阅读2k次。射频识别技术漫谈(6-10),概述RFID的通讯协议;射频ID卡的原理与实现,数据的传输与解码;介绍动物标签属性与数据传输;RFID识别号的变化等_芯片 ttf模式
文章浏览阅读1.1k次。今天小编心血来潮,为大家带来一个很有趣的项目,那就是使用 Python web 框架 Django 来实现支付宝支付,废话不多说,一起来看看如何实现吧。_django 对接支付宝接口流程
文章浏览阅读842次。Zabbix 5.0 LTS,跑了一年多了一直很稳定,前两天空间显示快满了,于是手贱清理了一下history_uint表(使用mysql truncate),结果折腾了一周。大概故障如下:然后zabbix论坛、各种群问了好久都没解决,最后自己一番折腾似乎搞定了。初步怀疑,应该是由于历史数据被清空后,zabbix需要去处理数据,但是数据量太大,跑不过来,所以来不及更新了(?)..._zabbix问题没有更新
文章浏览阅读296次。一、数据结构之字典 key-value
文章浏览阅读9.7k次,点赞3次,收藏13次。最近项目中遇到一个问题,是关于mybatis-plus的字段注解策略,记录一下。1问题调用了A组件(基础组件),来更新自身组件的数据,发现自己组件有个字段总是被清空。2原因分析调用的A组件的字段,属于基础字段,自己业务组件,对这个基础字段做了扩展,增加了业务字段。但是在自己的组件中的实体注解上,有一个注解使用错误。mybatis-plus封装的updateById方法,如果..._mybatisplus strategy
文章浏览阅读3.8k次。如何构建倒排索引,我们将这个过程叫做“索引构建”。如果我们的文档很多,这样索引就一次性装不下内存,该如何构建。硬件的限制 我们知道ram读写是随机的操作,只要输入相应的地址单元就能瞬间将数据读出来或者写进去。但是磁盘不行,磁盘必须有一个寻道的过程,外加一个旋转时间。那么只有涉及到磁盘,我们就可以考虑怎么节省I/O操作时间。【注】操作系统往往以数据块为单位进行读写。因为读一_为某一文档及集构件词项索引时,可使用哪些索引构建方法
文章浏览阅读836次。英特尔技术与制造事业部副总裁卞成刚7日在财富论坛间隙接受中新社记者采访时表示,该公司看好中国市场前景,扎根中国并以此走向世界是目前最重要的战略之一。卞成刚说,目前该公司正面临战略转型,即从传统PC服务领域扩展至所有智能设施领域,特别是移动终端。而中国目前正引领全球手机市场,预计未来手机、平板电脑等方面的发明创新将大量在中国市场涌现,并推向全球。持相同态度的还有英特尔中国区执行董事戈峻。戈峻
文章浏览阅读627次。https://blog.csdn.net/zrs19800702/article/details/53101213http://blog.csdn.net/lzw06061139/article/details/51445311https://my.oschina.net/linuxhunter/blog/654080rgw 概述Ceph 通过radosgw提供RES..._radosgw -c
文章浏览阅读3.7k次,点赞6次,收藏9次。我为什么选择ECharts ? 本周学校课程设计,原本随机佛系选了一个51单片机来做音乐播放器,结果在粗略玩了CN-DBpedia两天后才回过神,课设还没有开始整。于是懒癌发作,碍于身上还有比赛的作品没交,本菜鸡对硬件也没啥天赋,所以就直接把题目切换成软件方面的题目。写python的同学选择了一个时间序列数据的可视化曲线程序设计题目,果真python在数据可视化这一点性能很优秀。..._echarts 时间序列
文章浏览阅读1.6k次。事件类:/** * * * @className: EarlyWarnPublishEvent * * @description:数据风险预警发布事件 * * @param: * * @return: * * @throws: * * @author: lizz * * @date: 2020/05/06 15:31 * */public cl..._applicationeventpublisheraware
文章浏览阅读1.2k次。如需转载请注明出处!点击小图片转到图片查看的页面在Android开发中很常用到,抱着学习和分享的心态,在这里写下自己自定义的一个ImageView,可以实现类似微信朋友圈中查看图片的功能和效果。主要功能需求:1.缩放限制:自由缩放,有最大和最小的缩放限制 2居中显示:.若图片没充满整个ImageView,则缩放过程将图片居中 3.双击缩放:根据当前缩放的状态,双击放大两倍或缩小到原来 4.单指_imageview图片边界回弹