当前位置：首页 > news >正文

学校网站系统管理宣传推广网络推广

news 2025/7/17 11:59:43

学校网站系统管理,宣传推广网络推广,余姚公司网站建设,做网站第三方登录怎么弄本篇文章给大家谈谈javascript教程完整版，以及javascript入门经典，希望对各位有所帮助，不要忘了收藏本站喔。一、JavaScript简介 1.JavaScript概述 JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释…

本篇文章给大家谈谈javascript教程完整版，以及javascript入门经典，希望对各位有所帮助，不要忘了收藏本站喔。

一、JavaScript简介

1.JavaScript概述

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式python for语句用法。

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。
以下为使用三元运算符定义两个变量比较大小。

		<>//需求:有两个变量,比较两个变量的最大值?//定义两个变量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则13 位或 |  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.Java的流程控制语句

1）顺序结构语句

这是流程控制语句中最简单的一种语句了。

java：代码由上而下一次加载。

以下则为顺序结构语句的实例

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><>document.write("我即将成为代码大神!"+"<br />")document.write("我要努力学习Java!")</></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><>var a = prompt("请输入一个数字")if(a>0){document.write("我要努力学习后端!")}</></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><>var a = prompt("请输入一个数字")if(a>0){document.write("我要努力学习后端!")}else{document.write("我要努力学习前端!")}</></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><>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("我要努力学习后端语言!")}</></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><>var week_day = prompt("请输入一个星期的值")week_day = parseInt(week_day)switch(week_day){case 1 :document.write("今天是周一")breakcase 2 :document.write("今天是周二")breakcase 3 :document.write("今天是周三")breakcase 4 :document.write("今天是周四")breakcase 5 :document.write("今天是周五")breakcase 6 :document.write("今天是周六")breakcase 7 :document.write("今天是周日")breakdefault:document.write("很抱歉，地球上没有这个星期")break	}</></head><body></body>
</html>

上述代码执行后弹出警告框，在里面输1则会的到”今天是周一“这个结果，依次输入就会得到其他结果，而输入1-7的其他数字则会得到”很抱歉，地球上没有这个星期“。

3）循环结构语句

当我们需要在浏览器上输出许多相关类型或者相同的语句时，单纯使用document.write（）会有代码冗余度过大，代码的重复度高等弊端，所以我们需要引进循环结构语句。

首先看for循环

for循环的格式：for（初始化语句;条件判断语句;控制体语句）{循环体语句}

for循环实例如下

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><>for(var i=1 ;i<=5;i++){document.write("我要成为代码大神!"+"<br />")}</></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><>var a=0while(a<10){a+=aa++}document.write(a)</></head><body></body>
</html>

上述代码使用while循环求1-5的和，取得结果为15。

*for循环和while循环的区别

for循环和while的区别?1)格式不同for(初始化语句; 条件表达式;控制体语句){循环体语句;}初始化语句;while(条件表达式){循环体语句;控制体语句;}2)内存角度考虑:优先使用forfor循环结束,里面的变量就会从内存中释放掉,节省内存资源while循环结束,依然能访问这个变量,初始化语句在外面定义的3)从应用场景:明确循环次数使用for不明确循环次数使用while举例:键盘录个字符串:给3次机会,判断用户是登录成功开发中,优先使用for循环

do while循环：

初始化语句;do{循环体语句;控制体语句(步长语句);}while(条件表达式) ;
执行流程：初始化语句赋值执行循环体控制体语句进行自增或者自减判断条件是否成立,成立,继续执行循环体,不成立,结束!

以下为do while的实例

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><>var i = 1;do{document.write("我要成为代码大神!<br/>") ;i++ ;}while(i<=5) ;</></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><>for(var i = 1;i<=9;i++){for(var j = 1;j<=i;j++){document.write(i+"*"+j+"="+i*j+"&ensp;")}document.write("<br />")}</></head><body></body>
</html>

上述代码使用for循环嵌套做一个99乘法表，执行结果如下图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tcKMwF9T-1689995733673)(C:\Users\12390\AppData\Roaming\Typora\typora-user-images\image-20230722103209060.png)]

6.Java的跳转控制语句

我们所学的跳转控制语句有两种，其一是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><>for(var i = 0 ; i < 10 ; i++){if(i==3){continue ;//结束当前这个循环,立即进入下一次循环}document.write(i+"<br/>") ;}</></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><>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 />")}}</></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.数组的定义如下：

数组:可以存储多个同一种类型元素的一个容器!在java语言中,数组可以存储不同类型的元素,但是开发中,数组存储的必须为同一类型的元素!

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><>var arr = [55,11,22,33,44] ;alert(arr.length) ;//遍历:一一获取元素for(var i = 0; i < arr.length;i++ ){ //i表示索引值alert(arr[i]) ;}</></head><body></body>
</html>

以上使用了数组，代码执行后会在警告栏中弹出数组的数字直到数组结束为止。