JAVA Web学习笔记6

最新推荐文章于 2024-05-13 21:50:21 发布

lei727197212

最新推荐文章于 2024-05-13 21:50:21 发布

阅读量414

点赞数

分类专栏： Java Web开发文章标签： java web javascript

本文链接：https://blog.csdn.net/u012303755/article/details/53611034

版权

Java Web开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、JavaScript脚本语言
1、JavaScript 是网景（ Netscape）公司开发的一种基于客户端浏览器、基于面向对象、事件驱动式的网页脚本语言。JavaScript语言的前身叫作Livescript。
2、JavaScript的特点：
• 简单、易学、易用；
• 跨平台； IE、 Navigator
• 符合ECMA（欧洲计算机制造协会）标准，可移植；
• 事件驱动式的脚本程序设计思想；
• 动态、交互式的操作方式。
3、JavaScript的作用：
• 交互式操作；
• 表单验证；
• 网页特效；
• Web游戏
• 服务器脚本开发等。
4、JavaScript与Java的区别
（1）首先，它们是两个公司开发的不同的两个产品， Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；而JavaScript是Netscape公司的产品，其目的是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的面向对象和事件驱动的解释性语言。
（2）两种语言在其浏览器中所执行的方式不一样。 Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户，由浏览器解释执行。
（3）两种语言所采取的变量是不一样的。 Java采用强类型变量检查，即所有变量在编译之前必须作声明。 JavaScript中变量声明，采用其弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型。
（4）代码格式不一样。 Java是一种与HTML无关的格式，必须通过像HTML中引用外媒体那么进行装载，其代码以字节代码的形式保存在独立的文档中。JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。编写HTML文档就像编辑文本文件一样方便。
（5）静态绑定和动态绑定。 Java采用静态编译，即Java的对象引用必须在编译时的进行，以使编译器能够实现强类型检查，如不经编译则就无法实现对象引用的检查。 JavaScript采用动态联编，即JavaScript的对象引用在运行时进行检查。
5、JavaScript的格式：
• JavaScript区分大小写；
• JavaScript脚本程序须嵌入在HTML文件中；
• 每行写一条脚本语句；
• 语句末尾可以加分号；
• JavaScript脚本程序可以独立保存为一个外部文件，但其中不能包含<script></script>标签。
6、JavaScript脚本程序的几种基本格式：
•<script> document.write("Hello World!!!"); </script>
• <script language="JavaScript"> document.write("Hello World!!!"); </script>
• <script language="JavaScript" type="text/JavaScript"> document.write("Hello World!!!"); </script>
• <script language="JavaScript1.2"> document.write("Hello World!!!"); </script>
• <script src="hello.js"></script>
注意： document.write(“Hello World!!!”); 必须保存为一个外部文件： hello.js
7、变量声明
• var stdId;
• var name,sex;
• var total=3721;
• var notNull=true;
• var i=j=0;
也可以省略var：
• m = 9;
8、
• 变量作用域：（方式、位置）
• 全局变量：在函数外声明
• 局部变量：在函数内声明
• 全局变量可在整个脚本中被使用，可在不
同的窗口中相互引用（指定窗口名）
9、JavaScript：定义在函数外的变量一定是全局变量；定义在函数内的变量，如果声明了 var，那该变量就是局部变量；如果不声明 var，那该变量就是全局变量。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>js1.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">--
    <script type="text/javascript">
    var globe = "javascript"; //globe是全局变量
    test();
    function test()
    {
        local = "vbscript"; //local是局部变量
        document.writeln(globe);
        document.writeln(local);
    }
    document.writeln(globe);
    document.writeln(local);
    </script>
  </head>
  <body>

  </body>
</html>

10、with语句：（对象操作语句）

    <script type="text/javascript">
    with(document)
    {
        write("<ul>");
        write("<li>hello</li>");
        write("<li>world</li>");
        write("<li>hello world</li>");
        write("</ul>");
    }
    </script>

11、for…in语句：重复执行指定对象的所有属性

   <script type="text/javascript">
   function member(name, gender) //构造函数
   {
       this.name = name;
       this.gender = gender;
   }

   function showProperty(obj, objString)
   {
       var str = "";
       for(var i in obj){
           str += objString + "." + i + " = " + obj[i] + "<br>";
       }
       return str;
   }
   var obj = new member("刘德华", "男"); //建立对象实例
   document.writeln(showProperty(obj,"person"));
   </script>

12、日期对象的方法
• getYear()返回年份数
• getFullYear()返回年份数
• getMonth()返回月份数（ 0–11）
• getDate()返回日期数（ 1–31）
• getDay()返回星期数（ 0–6）
• getHours()返回时数（ 0–23）
• getMinutes()返回分数（ 0–59）
• getSeconds()返回秒数（ 0–59）
• 等等

    <script type="text/javascript">
    var date = new Date();
    var day = date.getDay();
    if(0 == day){
        day = "日";
    }
    document.writeln("现在时刻：" + (date.getYear() + 1900) + "年 " + (date.getMonth() + 1) + "月" + date.getDate() + "日" + " 星期" + day + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds())
    </script>

13、建立数组对象：
格式１：数组对象名称=new Array([元素个数])
格式２：数组对象名称=new Array([[元素1][，元素2， …]])
格式３：数组对象名称=[元素1[，元素2，…]]

fruit=new Array(3);// fruit=new Array();
fruit[0]="苹果";
fruit[1]="梨子";
fruit[2]="橘子";

fruit=new Array("苹果"， "梨子"， "橘子");

fruit=["苹果"， "梨子"， "橘子"];

14、数组对象的方法：
格式：数组对象名称.方法([参数])
• join([分隔符])数组元素组合为字符串
• toString()以字符串表示数组
• reverse()数组反转–（会导致数组本身的顺序发生反转）
• valueOf()返回数组值

    <script type="text/javascript">

    var fruit = ["苹果", "香蕉", "桔子"]
    with(document)
    {
        write("<ul>");
        write("<li>" + fruit.join() + "</li>");
        write("<li>" + fruit.join(":") + "</li>");
        write("<li>" + fruit.toString() + "</li>");
        write("<li>" + fruit.reverse().join() + "</li>");
        write("<li>" + fruit.valueOf() + "</li>");
        write("</ul>");
    }
    </script>

这里写图片描述

15、二维数组

    <script type="text/javascript">
    var fruit = new Array(3);
    fruit[0] = new Array("苹果", 2);
    fruit[1] = new Array("桔子", 3);
    fruit[2] = new Array("西瓜", 4);

    for(var i = 0; i < fruit.length; i++){
        for(var j = 0; j < fruit[i].length; j++){
            document.write("fruit[" + i + "][" + j + "] = " + fruit[i][j] + "<br>");
        }
        document.write("<br>");
    }
    </script>

这里写图片描述

16、字符串对象；
建立字符串对象：
格式：字符串对象名称=new String(字符串常量)
格式：字符串变量名称="字符串常量"
字符串对象的属性：
格式：字符串对象名称.属性
属性： length 字符串长度
字符串对象的方法：
格式：字符串对象名称.方法
• charAt(索引)返回索引位置的字符
• indexOf(“字串” [,索引]) 返回字串在对象中的索引位置
• lastIndexOf(“字串” [,索引]) 返回字串在对象中的索引位置（反向搜索）
• replace(“字串1”,”字串2”) 字串2替换字串1
• search(“字串” ) 返回字串在对象中的索引位置
• substring(索引i[,索引j]) 返回索引i倒索引 j-1 的子串

    <script type="text/javascript">
    var str = "javascript";
    var num = 1234;

    with(document){
        write(str.toUpperCase() + "<br>");
        write(num.toString().charAt(2), "<br>", "<br>");
        write(str.substring(0,4), "<br>");
    }
    </script>

这里写图片描述

  <head>
    <title>js9.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <script type="text/javascript">
    function isEmail()
    {
        var emailValue = document.getElementsByName("email")[0].value;
        //indexOf用于判断用户输入的是否包含@符号
        if(emailValue.indexOf("@") == -1){
            alert("请填写正确的Email地址");
        }
        else{
            alert("ok");
        }
    }
    </script>
  </head>

  <body>
    <form>
    email: <input type="text" name="email"> <input type="button" value="check" onclick="isEmail();">
    </form>
  </body>

17、自定义对象
（1）构造函数定义对象类型；

    <script type="text/javascript">
    function member(name, gender)
    {
        this.name = name;
        this.gender = gender;
    }

    var m1 = new member("zhangsan", "m");
    var m2 = new member("lisi", "m");
    var m3 = new member("wangwu", "f");

    with(document)
    {
        write(m1.name + ":" + m1.gender + "<br>");
        write(m2.name + ":" + m2.gender + "<br>");
        write(m3.name + ":" + m3.gender + "<br>");
    }
    </script>

（2）建立对象实例。

    <script type="text/javascript">
     function member(name, gender)
     {
         this.name = name;
         this.gender = gender;

         this.display = display; //指定member对象的display方法
     }

     function display()
     {
         var str = this.name + " : " + this.gender;
         document.writeln(str + "<br>");
     }

     var m1 = new member("zhangsan", "f");
     var m2 = new member("lisi", "f");
     var m3 = new member("wangwu", "m");

     m1.display();
     m2.display();
     m3.display();
    </script>

12、JavaScript事件处理
• 事件处理程序：浏览器响应某个事件，实现用户的交互操作而进行的处理（过程）。
• 事件处理程序的调用：浏览器等待用户的交互操作，并在事件发生时，自动调用事件处理程序（函数），完成事件处理过程。

 <head>
    <title>js12.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <script type="text/javascript">
    function mOver(object)
    {
        object.color = "red";
    }

    function mOut(object)
    {
        object.color = "blue";
    }

    </script>
  </head>

  <body>
    <font style="cursor:hand" 
    onclick="window.location.href='http://www.baidu.com'" 
    onmouseover="mOver(this)" onmouseout="mOut(this)">欢迎访问</font>
  </body>

13、定时器
（1） setTimeout()
用以指定在一段特定的时间后执行某段程序。
• 格式：[定时器对象名=] setTimeout(“<表达式>”，毫秒)
功能：执行<表达式>一次。

    <script type="text/javascript">
    function count()
    {
        setTimeout("alert('执行成功');", 5000);
    }
    </script>

（2）setInterval()
重复执行<表达式>，直至窗口、框架被关闭或执行clearInterval。
• 格式：[定时器对象名=] setInterval(“<表达式>”，毫秒)

（3）clearInterval()
终止定时器
• 格式：clearInterval(定时器对象名)

  <head>
    <title>js15.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
    var sec = 0;
    var timeId = setInterval("count();", 1000);

    function count()
    {
        //innerHTML可以获得所有的HTML文本，在此可以获取到num的值
        document.getElementById("num").innerHTML = sec++;
    }

    function stopCount()
    {
        clearInterval(timeId);
    }
    </script>
  </head>

  <body>
    <font color="red" id="num">0</font>秒钟
    <input type="button" value="停止" onclick="stopCount();">
  </body>

实现每秒数字自动加1.

14、窗口对象
• 格式窗口名称.方法（参数）
[window.]属性
[window.]方法（参数）
opener.属性
opener.方法（参数）
窗口名称.属性
self.属性
self.方法（参数）
parent.属性
parent.方法（参数）
top.属性
top.方法（参数）

15、屏幕对象
– 描述屏幕的显示及颜色属性。
• 屏幕对象的属性：screen.属性

  <script type="text/javascript">
  with(document)
  {
      write("屏幕设定值<br>");
      write("实际高度：" ,screen.availHeight, "<br>");
      write("实际宽度：" ,screen.availWidth, "<br>");
      write("屏幕区域高度： " ,screen.height, "<br>");
      write("屏幕区域宽度:", screen.width, "<br>");
  }
  </script>

19、事件对象
当事件发生时，浏览器自动建立该对象，并包含该事件的类型、鼠标坐标等。
格式：event.属性
在 js 中为某个对象（控件）绑定事件通常可以采取两种手段：
（1）<input type=”button” onclick=”clickHandler();”>
（2）

<input type=”button” id=”button1”>
<script type=”text/javascript”>
var v = document.getElementById("button1");
v.onclick = clickHandler;
</script>

例子：

    <input type="button" value="click" id="button1">
    <script type="text/javascript">
     var v = document.getElementById("button1");
     v.onclick = clickHandler;

     function clickHandler()
     {
         alert(event.type);
     }
    </script>

这里写图片描述

20、历史对象
用以存储客户端最近访问的网址清单。

history.属性
history.方法（参数）

单击可以返回到之前访问的页面。

  <body>
    <a href="#" onclick="window.history.back(-1);return false;">返回</a>
  </body>

21、位置对象
用来代表特定窗口的URL信息。

location.属性
location.方法（参数）

设置定时器，5秒后前往百度主页

  <head>
    <title>js22.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <script type="text/javascript">
    var timerId;

    function loadPage()
    {
        timerId = setInterval('countDown()', 1000);
    }

    </script>
  </head>

  <body onload="loadPage();">
    <script type="text/javascript">
    var sec = 5;

    function countDown()
    {
        if(sec > 0){
            document.getElementById("num").innerHTML = sec--;
        }
        else{
            clearInterval(timerId);
            location.href = "http://www.baidu.com";
        }
    }
    </script>

    5秒钟后前往<br>
    <font id="num" size="7">5</font>
  </body>

22、文件对象
代表当前HTML对象，是由标签组构成的，对每个HTML文件会自动建立一个文件对象。
格式：

document.属性
document.方法（参数）

23、链接对象
网页中的链接均会被自动看作链接对象，并依顺序，分别表示为document.links[0]，document.links[1]…
格式：字串.link(属性)

  <head>
    <title>js23.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">

    function linkGetter()
    {
        //alert(document.links.length + "个搜索引擎");
        for(var i = 0; i < document.links.length; i++)
        {
            alert(document.links[i]);
        }
    }
    </script>
  </head>

  <body>
    <h1>常用的搜索引擎</h1>
    <a href="http://www.sohu.com">Sohu</a><br>
    <a href="http://www.baidu.com">Baidu</a><br>
    <a href="http://www.yahoo.com">Yahoo</a><br>
    <a href="http://www.sogou.com">Sogou</a><br>
    <a href="http://www.bing.com">Bing</a><br>

    <input type="button" value="Address" onclick="linkGetter();">
  </body>

24、表单对象
文件对象的子对象， Javascript的runtime engine自动为每一个表单建立一个表单对象。
格式：

document.forms[索引].属性
document.forms[索引].方法（参数）
document.表单名称.属性
document.表单名称.方法（参数）

用户输入数字，满4个字符则跳到下一个输入框，输入完毕后，点击“显示”按钮，弹出用户输入的所有字符串。

  <head>
    <title>js24.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <script type="text/javascript">
    function moveNext(object, index)
    {
        if(object.value.length == 4){
            document.forms[0].elements[index + 1].focus();
        }
    }

    function showResult()
    {
        var f = document.forms[0];
        var result = "";
        for(var i = 0; i < 4; i++){
            result += f.elements[i].value;
        }
        alert(result);
    }
    </script>
  </head>

  <body onload="document.forms[0].elements[0].focus();">

    <form>
    <input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 0);">-
    <input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 1);">-
    <input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 2);">-
    <input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 3);">
    <input type="button" value="显示" onclick="showResult();" >
    </form>

  </body>

这里写图片描述

25、Cookie对象
是一种以文件（ Cookie文件）的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息（Cookie数据）。 Cookie文件由所访问的Web站点建立，以长久的保存客户端与Web站点间的会话数据，并且该Cookie数据只允许被所访问的Web站点进行读取。
Cookie文件的格式：

NS： Cookie.txt
IE：用户名@域名.txt

写入Cookie格式：

document.cookie = " 关键字 = 值 [ ;expires = 有效日期 ] [;...]"

有两种类型的 cookie
（1）持久性 cookie，会被存储到客户端的硬盘上。
（2）会话 Cookie：不会存储到客户端的硬盘上，而是放在浏览器进程所处的内存当中，当浏览器关闭则该会话 cookie 就销毁了。

例子：

    <script type="text/javascript">
    var today = new Date();
    var expireDay = new Date();
    var msPerMonth = 24 * 60 * 60 * 1000 * 31;
    expireDay.setTime(today.getTime() + msPerMonth);

    document.cookie = "name=zhang;expires=" + expireDay.toGMTString();

    document.writeln("cookie已经写到硬盘上了");
    document.writeln("内容是：" + document.cookie);
    document.writeln("有效日期是：");
    document.writeln(expireDay.toGMTString());
    </script>

26、利用JavaScript与JSP进行动态页面编程

  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'end.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

    <script type="text/javascript">
    var value = <%= request.getParameter("number")%>;
    alert(value);

    function checkAll()
    {
        var s = document.getElementsByName("check");
        var m = document.getElementsByName("all")[0];
        if(m.checked){
            for(var i = 0; i < s.length; i++){
                s[i].checked = true;
            }
        }
        else{
            for(var i = 0; i < s.length; i++){
                s[i].checked = false;
            }
        }
    }

    function turn()
    {
        with(document)
        {
            var m = getElementById("change");
            var n = getElementById("table");
            if(m.value == "收缩"){
                n.style.display = "none";
                m.value = "展开";
            }
            else{
                n.style.display = "block";
                m.value = "收缩";
            }
        }
    }
    </script>
  </head>

  <body>
    <table border="1" align="center" width="60%">
    <tr>
        <td>
            <input type="checkbox" name="all" onclick="checkAll();">全选
        </td>

        <td>
            <input type="button" value="收缩" id="change" onclick="turn();">
        </td>
    </tr>
    </table>

    <% int number = Integer.parseInt(request.getParameter("number")); %>

    <table border="1" align="center" width="60%" id="table">
    <% for(int i = 1; i <= number; i++)
    {%>
    <tr>
        <td>
            <input type="checkbox" name="check">
        </td>

        <td>
            <%= i %>
        </td>
    </tr>
    <%} %>

    </table>
  </body>

27、
（1）在 JavaScript 中，函数（ function）就是对象。
（2）在 JavaScript 中，没有方法（函数）重载的概念。
（3）在 JavaScript 中有一个 Function 对象，所有自定义的函数都是Function 对象类型的。Function 对象接收的所有参数都是字符串类型的，其中最后一个参数就是要执行的函数体，而前面的参数则是函数真正需要接收的参数。

        var add = new Function("number", "number1", "alert(number + number1);");

        var add = new Function("number", "alert(number + 20);");

（4）在 JavaScript 中，每个函数都有一个隐含的对象 arguments，表示给函数实际传递的参数。

        function add(number1, number2)
        {
            alert(arguments.length);            
            alert(arguments[0]);
            alert(arguments[1]);
            alert(arguments[2]);
        }   
        add2(3, 4);

（5）每一个函数对象都有一个 length 属性，表示该函数期望接收的参数格式。它与函数的 arguments 不同， arguments.length 表示函数实际接收的参数格式。

        var add = function(num, num2, num3)
        {
            alert(num + num2 + num3);
        }   
        alert(add.length);

（6）JavaScript 中有五种原始数据类型： Undefined、 Null、 Boolean、Number 以及 String。
– Undefined 数据类型的值只有一个： undefined。
– Null 数据类型的值只有一个： null。
– Boolean 数据类型的值有两个： true 和 false。
– JavaScript 中没有 char 数据类型。

（7）typeof 是一元运算符，后跟变量的名称，用于获取变量的数据类型，其返回值有 5 个： undefined、 boolean、 number、 string 以及object。

  var s = "hello"; // s是原始类型2016/12/15
  alert(typeof s);

（8）
在 JavaScript 中，如果函数没有声明返回值，那么会返回 undefined。
null 与 undefined 的关系： undefined 实际上是从 null 派生出来的。

（9）强制类型转换
在 JavaScript 中有 3 种强制类型转换：Boolean(value)，Number(value)， String(value)。

（10）在 JavaScript 中，对于函数中定义的变量来说，加 var 表示局部变量，不加 var 表示全局变量。

（11）在 JavaScript，所有对象都是从 Object 对象继承过来的。 Object 中的属性是不可枚举的(propertyIsEnumerable 返回 false)，因此无法通过 for…in 语句得到其中的属性。

  var object = new Object();

  for(var v in object)
  {
    alert(v);
  }

  alert(object.propertyIsEnumerable("prototype"));

（12）在 JavaScript 中，可以动态添加对象的属性，也可以动态删除对象的属性。

  var object = new Object();

  //alert(object.username);

  object["username"] = "shengsiyuan";

  alert(object.username);

  delete object.username; // username属性已经从object对象中删除

  alert(object.username);

（13）在 JavaScript 中定义对象的第二种方式：

  var object = {username: "zhangsan", password: 123};

  alert(object.username);
  alert(object.password);

（14）对于 JavaScript 数组的 sort 方法来说，它会先将待排序的内容转换为字符串（调用 toString()方法），按照字符串的先后顺序进行排序。

var array = [1, 3, 25];
array.sort();
alert(array);

按照字符串的顺序进行排序，以上代码段结果为 [1,25,3]。
a.可使用以下代码进行正确排序：

function compare(num1, num2)
{
    var temp1 = parseInt(num1);
    var temp2 = parseInt(num2);

    if(temp1 < temp2){
        return -1;
    }
    else if(temp1 == temp2){
        return 0;
    }
    else{
        return 1;
    }
}

var array = [1, 3, 25];
array.sort(compare); //函数名是对象引用
alert(array);

b.使用匿名排序的方法

var array = [1, 3, 25];
// 匿名函数
array.sort(function(num1, num2)
{
    var temp1 = parseInt(num1);
    var temp2 = parseInt(num2);

    if(temp1 < temp2){
        return -1;
    }
    else if(temp1 == temp2){
        return 0;
    }
    else{
        return 1;
    }
});
alert(array);

（15）JavaScript 中定义对象的几种方式（JavaScript 中没有类的概念，只有对象）
1）基于已有对象扩充其属性和方法：

<script type="text/javascript">
var object = new Object();

object.name = "zhangsan";
object.sayName = function(name)
{
    this.name = name;
    alert(this.name);
}
object.sayName("lisi");
</script>

2）工厂方式
a. 不带参数的构造方法

//工厂方式创建对象
function createObject()
{
    var object = new Object();
    object.username = "zhangsan";
    object.password = "123";

    object.get = function()
    {
        alert(this.username + ", " + this.password);
    }
    return object;
}
var object1 = createObject();
var object2 = createObject();
object1.get();

b. 带参数的构造方法

function createObject(username, password)
{
    var object = new Object();
    object.username = username;
    object.password = password;

    object.get = function()
    {
        alert(this.username + ", " + this.password);
    }
    return object;
}
var object1 = createObject("zhangsan", "123");
object1.get();

c. 让一个函数对象被多个对象所共享（可以节约内存空间，避免多次调用产生多个函数对象，函数对象只有一份），而不是每一个对象拥有一个函数对象。

function get()
{
    alert(this.username + ", " + this.password);
}

function createObject(username, password)
{
    var object = new Object();
    object.username = username;
    object.password = password;
    //指向同一个get函数
    object.get = get;
    return object;
}

var object = createObject("zhangsan", "123");
var object2 = createObject("lisi", "456");
object.get();
object2.get();

3）构造函数方式
a. 不带参数的构造方法

function Person()
{
    //在执行第一行代码前，js引擎会为我们生成一个对象
    this.username = "zhangsan";
    this.password = "123";
    this.getInfo = function()
    {
        alert(this.username + ", " + this.password);
    }
    //此处有一个隐藏的return语句，用于将之前生成的对象返回
}

var person = new Person();
person.getInfo();

b. 带参数的构造方法

function Person(username, password)
{
    this.username = username;
    this.password = password;

    this.getInfo = function()
    {
        alert(this.username + ", " + this.password);
    }
}
var person = new Person("zhangsan", "123");
person.getInfo();

4）原型（” prototype”）方式

function Person()
{
}

Person.prototype.username = "zhangsan";
Person.prototype.password = "123";

Person.prototype.getInfo = function()
{
    alert(this.username + ", " + this.password);
}

var person = new Person();
var person2 = new Person();

person.username = "lisi";
person.getInfo();
person2.getInfo();

Person.prototype.username = new Array();
Person.prototype.password = "123";
Person.prototype.getInfo = function()
{
    alert(this.username + ", " + this.password);
}

var person = new Person();
var person2 = new Person();
person.username.push("zhangsan");
person.username.push("lisi");
person.password = "456";

person.getInfo();
person2.getInfo();

如果使用原型方式对象，那么生成的所有对象会共享原型中的属性，这样一个对象改变了该属性也会反应到其他对象当中。
单纯使用原型方式定义对象无法在构造函数中为属性赋初值，只能在对象生成后再去改变属性值。

5)使用原型+构造函数方式来定义对象
对象之间的属性互不干扰，各个对象间共享同一个方法。

<script type="text/javascript">
//使用原型+构造函数方式来定义对象
function Person()
{
    this.username = new Array();
    this.password = "123";
}

Person.prototype.getInfo = function()
{
    alert(this.username + ", " + this.password);
}

var p = new Person();
var p2 = new Person();

p.username.push("zhangsan");
p2.username.push("lisi");

p.getInfo();
p2.getInfo();
</script>

6）动态原型方式：在构造函数中通过标志量让所有对象共享一个方法，而每个对象拥有自己的属性。

function Person()
{
    this.username = "zhangsan";
    this.password = "123";
    if(typeof Person.flag == "undefined")
    {
        alert("invoked");
        Person.prototype.getInfo = function()
        {
            alert(this.username + ", " + this.password);
        }
        Person.flag = true;
    }
}
var p = new Person();
var p2 = new Person();

p.getInfo();
p2.getInfo();

16、JavaScript中的继承
（1）对象冒充

function Parent(username)
{
    this.username = username;
    this.sayHello = function()
    {
        alert(this.username);
    }
}

function Child(username, password)
{
    //下面三行代码是最关键的代码
    this.method = Parent;
    this.method(username);
    delete this.method;

    this.password = password;
    this.sayWorld = function()
    {
        alert(this.password);
    }
}

var parent = new Parent("zhangsan");
var child = new Child("lisi", "1234");
parent.sayHello();
child.sayHello();
child.sayWorld();

（2）call方法方式
call 方法是 Function 对象中的方法，因此我们定义的每个函数都拥有该方法。可以通过函数名来调用 call 方法， call 方法的第一个参数会被传递给函数中的 this，从第 2 个参数开始，逐一赋值给函数中的参数。

//继承的第二种实现方式，call方法方式,Function对象中的方法
function test(str, str2)
{
    alert(this.name + ", " + str + ", " + str2);
}

var object = new Object();
object.name = "zhangsan";
//test.call相当于调用了test函数
test.call(object, "shengsiyuan", "hello"); //将object赋给了this

//使用call方式实现对象的继承
function Parent(username)
{
    this.username = username;
    this.sayHello = function()
    {
        alert(this.username);
    }
}

function Child(username, password)
{
    Parent.call(this, username);
    this.password = password;
    this.sayWorld = function()
    {
        alert(this.password);
    }
}

var parent = new Parent("zhangsan");
var child = new Child("lisi", "123");
parent.sayHello();
child.sayHello();
child.sayWorld();

（3）apply方法方式

//使用apply方法实现对象继承
function Parent(username)
{
    this.username = username;
    this.sayHello = function()
    {
        alert(this.username);
    }
}

function Child(username, password)
{
    Parent.apply(this, new Array(username));
    this.password = password;
    this.sayWorld = function()
    {
        alert(this.password);
    }
}
var parent = new Parent("zhangsan");
var child = new Child("lisi", "123");
parent.sayHello();
child.sayHello();
child.sayWorld();

（4）原型链方式（无法给构造函数传参数）

//使用原型链（prototype chain）方式实现对象继承
function Parent()
{
}

Parent.prototype.hello = "hello";
Parent.prototype.sayHello = function()
{
    alert(this.hello);
}

function Child()
{
}

Child.prototype = new Parent();
Child.prototype.world = "world";
Child.prototype.sayWorld = function()
{
    alert(this.world);
}
var child = new Child();

child.sayHello();
child.sayWorld();

（5）混合方式（推荐）

//使用混合方式实现对象继承(推荐)
function Parent(hello)
{
    this.hello = hello;
}

Parent.prototype.sayHello = function()
{
    alert(this.hello);
}

function Child(hello, world)
{
    Parent.call(this, hello);
    this.world = world;
}

Child.prototype = new Parent();
Child.prototype.sayWorld = function()
{
    alert(this.world);
}

var child = new Child("hello", "world");
child.sayHello();
child.sayWorld();

17.例题：运用继承计算三角形和平行四边形的面积

<script type="text/javascript">
function Shape(edge)
{
    this.edge = edge;//定义边
}

Shape.prototype.getArea = function()//定义方法
{
    return -1;
}

Shape.prototype.getEdge = function()
{
    return this.edge;
}

function Triangle(bottom, height)//定义两个子对象（底、高）
{
    Shape.call(this, 3);

    this.bottom = bottom;
    this.height = height;
}

Triangle.prototype = new Shape();

Triangle.prototype.getArea = function()
{
    return 0.5 * this.bottom * this.height;
}

var triangle = new Triangle(10, 4);

function Rectangle(bottom, height)
{
    Shape.call(this, 4);

    this.bottom = bottom;
    this.height = height;
}

Rectangle.prototype = new Shape();

Rectangle.prototype.getArea = function()
{
    return this.bottom * this.height;
}

var rectangle = new Rectangle(20, 40);

alert(rectangle.getEdge());
alert(rectangle.getArea());

</script>

lei727197212

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVA Web学习笔记6

一、JavaScript脚本语言 1、JavaScript 是网景（ Netscape）公司开发的一种基于客户端浏览器、基于面向对象、事件驱动式的网页脚本语言。JavaScript语言的前身叫作Livescript。 2、JavaScript的特点： • 简单、易学、易用； • 跨平台； IE、 Navigator • 符合ECMA（欧洲计算机制造协会）标准，可移植； • 事件驱动式的
复制链接

扫一扫