JavaWeb之JavaScript一

mac2022-06-30 95

作者：刘婧怡

时间：2019.03.07

主机环境：MacBookPro

JavaScript

1. JavaScript的简介

基本概念：是基于对象和事件驱动的语言，主要应用于客户端

** 基于对象：提供了许多对象，可以直接使用

** 事件驱动：html做的网站是静态效果，JavaScript可以实现动态效果

** 客户端：专指浏览器

特点：

** 交互性：信息的动态交互

** 安全性：js不能访问本地磁盘的文件

** 跨平台性：只要支持js的浏览器，就可以运行

JavaScript与Java的区别：没有任何关系！！

** JavaScript是基于对象，Java是面向对象的

** JavaScript是弱类型的语言，Java是强类型的语言。弱类型语言指数据类型可以被忽略的语言，强类型语言中，一旦一个变量被指定了某个数据类型，如果不经过强制转换，那么它就永远是这个数据类型了

** JavaScript只需解析就可以执行，Java需要先编译再执行

JavaScript的组成（三部分）

** ECMAScript：基本语法，语句等

- ECMA：欧洲计算机协会，制定JavaScript的一些语法，语句等

** BOM：浏览器对象模型（browser object model），比如对地址栏、关闭按钮等相应对象的操作

** DOM：文档对象模型（document object model），对内容进行操作

2. JavaScript和html的结合方式（两种）

第一种：使用标签，建议放在</body>后面

第二种：使用script标签，引入一个外部的js文件，首先需要创建一个js文件

html文件的代码如下：

注意：引入外部js文件后，在srcipt标签内写js代码（不会执行！！）

3. JavaScript的原始类型和声明变量

js的原始类型（五个），所有变量均使用关键字var

** String：字符串，var str = "abc";

** number：数字类型，var m = 123;

** boolean：布尔类型（true和false），var flag = true

** null：获取对象的引用，表示对象引用为空，所有对象的引用是object，如获取Date对象的空引用：var date = new Date();

** undefined：定义一个变量，但未赋值，var aa;

利用typeof(变量名称);可以查看数据类型

undefined和null的区别

** undefined：变量定义了未初始化或访问对象不存在的属性

** null：访问对象不存在

4. JavaScript的语句

js的语句写法与Java很相似，++与—和java一样

if语句

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> //if var a = 5; if(a == 5) alter(a); //alter()函数用于弹出页面 else alter(6); </script> </body> </html>

　　当前页面会弹出5

switch语句（所有类型都支持）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> //switch var a = 5; switch(a){ case 5:alert(5); break; case 6:alert(6); break; default:alert("other"); } </script> </body> </html>

　　当前页面会弹出5

while循环

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> //while var i = 5; while(i > 1){ alert(i); i--; } </script> </body> </html>

for循环

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> //for for(var m = 5;m > 1;m--){ alert(m); } </script> </body> </html>

5. JavaScript运算符

注意（其余大部分与java一样）：

** js不区分正数和小数，123/1000=0.123

** 字符串的相加相减操作：相加为字符串连接，当数字相减是为运算减，若不是数字则提示NaN

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> var str1 = "123"; alert(str1+1); // 页面弹出1231 alert(str1-1); // 页面弹出122，若str1不是数字会提示NaN </script> </body> </html> 　　** boolean的相加相减：true为1，false为0，加减为运算加减

　　　** ==与===的区别：==比较的是值，===比较的是值和类型

将内容显示在页面上：document.write(内容)，内容也为html代码或变量固定值

由于该内容需要使用双引号，若设置html中标签的属性需使用单引号

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> 　　document.write("aaaa");　　document.write("<hr/>"); 　　document.write("bbbb"); </script> </body> </html> 结果如下：

5. JavaScript的数组

数组中类型可以不同，下标从0开始

定义方式（三种）,

** 第一种：var arr = [1,2,3]; var arr = [1,2,"3"];

** 第二种：使用内置对象Array

var arr = new Array(5); //定义一个长度为5的数组 arr[0] = "1";

　　　** 第三种：使用内置对象Array

var arr = new Array(3，4，5); //定义一个内容为3，4，5的数组

数组有属性length，可以得到数组的长度

var arr = [1,2,3]; alert(arr.length); //该页面弹出3

6. JavaScript的方法（函数）

参数列表不需要写var，直接写变量名

定义方式（三种）

** 第一种：使用关键字function

//创建方法 function 方法名(参数列表){ 方法体; 返回值(可有可无); } //调用方法名(参数列表); //无返回值 var 变量名 = 方法名(参数列表); //有返回值　　** 第二种：匿名函数 //创建方法 var 名称 = function(参数列表){ 方法体；返回值(可有可无); } //调用名称(参数列表); 　　** 第三种：使用js的内置对象Function（用得少） //创建方法 var 名称 = new Function("参数列表","方法体和返回值"); //动态函数 //调用名称(参数列表);

7. JavaScript的全局变量和局部变量

全局变量：在script标签里定义一个变量，这个变量在页面中js部分都可以使用

代码如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> var aa = 10; document.write("在方法外部：" + aa); document.write("<br/>") function test(){ document.write("在方法内部：" + aa); document.write("<br/>") } test(); </script> <script type="text/javascript"> document.write("在另一个script中："+ aa); document.write("<br/>") </script> </body> </html> 结果如下：

局部变量：在方法内部定义一个变量，这个变量只能在方法内部使用

8. JavaScript的String对象

创建String对象：var str = "123";

String的属性（常用）：length表示字符串的长度

String的方法（常用）

** 与html相关的方法（设置数据样式）

bold()：加粗

fontcolor()：改变字体颜色

fontsize()：设置字体大小，范围为1-7

link()：将字符串显示为超链接，参数：地址

sub() & sup()：下标和上标

<!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Title</title> </head> <body> <scripttype="text/javascript"> //bold varstr1="abcd"; document.write(str1.bold()); document.write("<hr/>"); //fontcolor varstr2="efgh"; document.write(str2.fontcolor("red")); document.write("<hr/>"); //fontsize varstr3="ijkl"; document.write(str3.fontsize(4)); document.write("<hr/>"); //link varstr4="超链接"; document.write(str4.link("乘法表-06.html")); document.write("<hr/>"); //sup & sub varstr5="100"; document.write(str5.sub() +"100"+str5.sup()); </script> </body> </html> 结果如下：

　　** 与java相似的方法

concat()：连接两个字符串

charAt()：返回指定位置的字符串，若位置不存在返回空字符串

indexOf()：检索字符串，若字符串不存在返回-1

spilt()：把字符串切分为字符串数组

replace()：替换字符串，两个参数，第一个参数为原始字符串，第二个参数为替换成的字符串

substr() & substring()：substr(n,m)是从第n位开始往后截取m位，substring(n,m)是从第n位开始截取到第m位（不包含第m位）

代码如下：

<!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Title</title> </head> <body> <scripttype="text/javascript"> //concat varstr1="abc"; varstr2="def"; document.write(str1.concat(str2)); document.write("<hr/>"); //charAt varstr3="abcd"; document.write(str3.charAt(0)); document.write("<hr/>"); //indexOf varstr4="efghlm"; document.write(str4.indexOf("ef")); document.write("<hr/>"); //split varstr5="a b c d"; vararr1=str5.split(" "); document.write("length: "+arr1.length); document.write("<hr/>"); //replace varstr6="abcedfgh"; document.write(str6+"替换为"); document.write(str6.replace("abc","def")); document.write("<hr/>"); //substr & substring varstr7="abcdefgh"; document.write("原始: "+str7); document.write("<br/>"); document.write("substr(5,3): "+str7.substr(5,3)); document.write("<br/>"); document.write("substring(5,3): "+str7.substring(5,3)); </script> </body> </html> 结果如下：

9. JavaScript的Array对象

创建数组（三种）

** var arr = [1,2,3];

** var arr = new Array(3); //数组有三个值

** var arr = new Array(1,2,3); //数组中的元素是1，2，3

** 创建空数组：var arr = []; var arr = new Array();

Array的属性（常用）：length表示数组长度

Array的方法（常用）

concat()：连接两个数组

join()：根据指定字符分隔字符串

push()：向数组末尾添加元素，返回数组的新的长度，若参数为数组，则该数组相当于一个元素

pop()：删除最后一个元素，并返回该元素

reverse()：颠倒数组中元素的顺序

<!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Title</title> </head> <body> <scripttype="text/javascript"> //concat vararr1=[1,2,3]; vararr2=[4,5,6]; document.write("数组的连接："+arr1.concat(arr2)); document.write("<hr/>"); //join vararr3=["a","b","c"]; document.write("原始分隔用逗号："+arr3); document.write("<br/>"); document.write("现在改用短线分隔："+arr3.join("-")) document.write("<hr/>"); //push vararr4=[1,2,3]; document.write("原始数组的长度："+arr4.length); document.write("<br/>"); document.write("原始数组: "+arr4); document.write("<br/>"); document.write("增加新的元素后长度为："+arr4.push([1,2])); //[1,2]这个数组为一个元素 document.write("<br/>"); document.write("新数组："+arr4); document.write("<hr/>"); //pop vararr5=[1,2,3,4,5]; document.write("原始数组: "+arr5); document.write("<br/>"); document.write("删除最后一个元素："+arr5.pop()); document.write("<br/>"); document.write("新数组："+arr5); document.write("<hr/>"); //reverse vararr6=[1,2,3,4]; document.write("原始数组："+arr6); document.write("<br/>"); document.write("颠倒后的数组："+arr6.reverse()); </script> </body> </html>

结果如下：

10. Javascript的Date对象

获取当前时间：var date = new Date(); 并利用toLocaleString()方法转换格式

getFullYear()：得到当前年

getMonth()：得到当前月，返回值范围为0-11，需要加一

getDay()：得到当前星期，返回值范围为0-6，其中星期天用0表示

getDate()：得到当前天，返回值范围为0-31

getHours()：得到当前的小时

getMinutes()：得到当前分钟

getSeconds()：得到当前秒

getTime()：返回1970年1月1日至今的毫秒数，使用毫秒数处理缓存的效果

代码如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> //获取当前时间 var date = new Date(); document.write(date); document.write("<br/>"); document.write(date.toLocaleString()); document.write("<hr/>"); //getFullYear，得到当前年 document.write("year: " + date.getFullYear()); document.write("<hr/>"); //getMonth，得到当前月 document.write("month: " + (date.getMonth() + 1)); document.write("<hr/>"); //getDay，得到当前星期 document.write("week: " + (date.getDay() + 1)); document.write("<hr/>"); //getDate，得到当前天 document.write("day: " + date.getDate() ); document.write("<hr/>"); //getHours，得到当前小时 document.write("hour: "+ date.getHours()); document.write("<hr/>"); //getMinutes，得到当前分钟 document.write("minute: "+ date.getMinutes()); document.write("<hr/>"); //getSeconds，得到当前秒 document.write("second: "+ date.getSeconds()); document.write("<hr/>"); //getTime，得到毫秒数 document.write("毫秒数：" + date.getTime()); </script> </body> </html>

结果如下：

11. JavaScript的Math对象

Math对象：做一些数学运算，并且Math里都是静态方法，不需要new，直接使用Math.方法()

cell()：向上舍入

floor()：向下舍入

round()：四舍五入

random()：得到0-1直接的伪随机数

代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> var m = 10.4; var n = 10.7; document.write("原始: " + m + " " + n); document.write("<hr>") //ceil document.write("ceil: " + Math.ceil(m) + " " + Math.ceil(n)); document.write("<hr>"); //floor document.write("floor: " +Math.floor(m) + " " + Math.floor(n)); document.write("<hr>"); //round document.write("round: " +Math.round(m) + " " + Math.round(n)); document.write("<hr>"); //random document.write(Math.random()); </script> </body> </html> 结果如下：

12. JavaScript的全局函数

全局函数不属于任何一个对象，直接使用即可

eval()：执行js代码

encodeURI()：对字符进行编码

decodeURI()：对字符进行解码

encodeURIComponent()：对字符进行编码

decodeURIComponent()：对字符进行解码

isNaN()：检查字符串是否为数字，是数字返回false，不是数字返回true

parseInt()：将字符串转换为number类型

代码：

<!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Title</title> </head> <body> <scripttype="text/javascript"> //eval varstr="document.write('123')"; eval(str); document.write("<hr>"); //encodeURI varstr1="测试中文aaaaa111"; document.write(encodeURI(str1)); document.write("<br>"); //decodeURI document.write(decodeURI(str1)); document.write("<hr>"); //isNaN varstr2="123"; document.write(isNaN(str2)); document.write("<hr>"); //parseInt varstr3="123"; document.write(parseInt(str3) +1); </script> </body> </html> 结果如下：

13. JavaScript的重载

js不存在重载，但可以通过其他方式模拟重载，将传递的参数保存到arguments数组中，利用arguments数组模拟重载

代码：

<!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Title</title> </head> <body> <scripttype="text/javascript"> functionadd() { varsum=0; for(vari=0;i< arguments.length;i++){ sum+=arguments[i]; } returnsum; } document.write(add(1,2)); document.write("<br/>"); document.write(add(1,2,3)); </script> </body> </html> 结果如下：

转载于:https://www.cnblogs.com/jyliu/p/10485463.html