JavaWeb之JavaScript一

作者：刘婧怡

时间：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 type="text/javascript">
    js代码
</script>

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

html文件的代码如下：

<script type="text/javascript" src="js文件的路径">
</script>

注意：引入外部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相关的方法（设置数据样式）
1. bold()：加粗
2. fontcolor()：改变字体颜色
3. fontsize()：设置字体大小，范围为1-7
4. link()：将字符串显示为超链接，参数：地址
5. 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的方法（常用）
1. concat()：连接两个数组
2. join()：根据指定字符分隔字符串
3. push()：向数组末尾添加元素，返回数组的新的长度，若参数为数组，则该数组相当于一个元素
4. pop()：删除最后一个元素，并返回该元素
5. 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>

结果如下：

相关阅读:
tomcat-01-配置文件组成
 Mysql的批量导入
 Mysql优化
 没有处理的问题
 Java 实现一个带提醒的定时器
 Java 端口扫描器 TCP的实现方法
 Java 多态方法构造器执行方法
 JavaWeb 基于Session的用户登陆注销实现
 Java 访问权限控制小结
 Java FTP下载文件以及编码问题小结
原文地址：https://www.cnblogs.com/jyliu/p/10485463.html