15、javascript脚本语言

来源：互联网发布：济南知豆电动汽车租赁编辑：程序博客网时间：2024/06/05 09:01

JavaScript是Netscape公司开发的一种基于客户端浏览器、面向对象、事件驱动的网页脚本语言

JavaScript特点：事件驱动式的脚本程序设计思想，动态交互式的操作

Javascript作用：交互操作，表单验证，网页特效，Web游戏，服务器脚本开发等

Java采用强类型变量检查，变量使用前必须声明；JavaScript采用弱类型，变量使用前不需要声明

Java采用静态编译，即Java的对象引用必须在编译时进行，以使编译器能够实现强类型检查，如不编译则就无法实现对象引用的检查。JavaScript采用动态联编，即JavaScript的对象引用在运行时进行检查。

JavaScript的格式：JavaScript区分大小写；JavaScript脚本程序必须嵌入在HTML文件中；每行一条脚本语句；语句末尾可以加分号；javaScript脚本程序可以独立保存为一个外部文件，但其中不能包含<script></script>标签

JavaScript的库：jQuery、dojo、extJs

JavaScript脚本程序的几种基本格式：

    - <script>
          document.write("hello");
        </script>

    - <script language="JavaScript">
          document.write("hello");
        </script>

    - <script language="JavaScript" type="text/JavaScript">
        document.write("hello");
       </script>
    - <script src="hello.js"></script>    注意：document.write("hello");必须保存为一个外部文件：hello.js

变量声明：var 变量名也可以省略var，函数中如果定义变量，且没有使用var则这个变量是全局变量，否则，如果使用了var，则是局部变量，定义在函数外的变量一定是全局变量

变量作用域：

with语句：

for...in语句：

对象：默认对象

- 日期对象：Date

- 数组对象：new Array（）；

        var fruit = new Array("苹果","鸭梨","苹果");
        var fruit = ["苹果","鸭梨","苹果"];
        var fruit = new Array(3);    fruit.push("苹果");

       数组对象的方法：join（[分隔符]）：数组元素组合为字符串
                                       toString（）：以字符串表示数组
                                       reverse（）： shuzufanzhuan
                                       valueOf（）：返回数组值

- 字符串对象：变量 = new String（）
变量 = "字符串"

      方法：charAt(索引) ：返回索引位置的字符串
                  indexOf（"字符串"[，索引]）：返回字符串在对象中的索引位置
                  lastIndexOf（"字串"[，索引]）：返回字串在对象中的索引位置（反向搜索）
                  replace（"字串1"，"字串2"）：字串2替换字串1
                  search（"字串"）：返回字串在对象中的索引位置
                  substring（索引|i[，索引j]）返回索引j到索引j-1的子串

自定义对象：构造函数定义对象类型；建立对象实例

动态的定义对象属性：构造函数定义

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

定时器：用于指定在一段特定的事件后执行某段程序。setTimeout（）：格式： [定时器对象名=] setTimeout（"<表达式>"，毫秒）    功能：执行<表达式>一次。
               setInterval（）：格式：  [定时器对象名=] setInterval（"<表达式>",毫秒）    功能：重复执行<表达式>，直至窗口、框架被关闭或执行clearInterval。
                clearInterval（）：终止定时器    格式：clearInterval（定时器对象名）

JavaScript内置对象：

    - 图像对象
    - 导航对象
    - 窗口对象
    - 屏幕对象
    - 事件对象
    - 历史对象
    - 文件对象
    - 锚点对象
    - 连接对象
    - 框架对象
    - 表单对象
    - 位置对象

alert（）窗口是一个模态的，就是说必须处理，否则无法继续输入

屏幕对象：screen

事件对象：在js中为某个对象（控件）绑定事件通常可以采取两种手段：
1）<input type="button" onclick="clickHandler();">
2）<input type="button" id="button1">

var v = document.getElementById("button1");

v.onclick = clickHandler;

</script>

当事件发生时，浏览器自动建立该对象，并包含该事件的类型、鼠标坐标等

历史对象：history

位置对象：用来代表特定窗口的URL信息 location

连接对象：网页中的链接均会被自动看做链接对象，并依顺序，分别表示为document.links[0],document.links[1]...；定义链接对象的格式：字串.link（属性）

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就销毁了。

举例：用javascript控制页面元素的显示与否：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>My JSP 'begin.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">function validate(){var num = document.getElementsByName("number")[0];if(num.value.length < 1){alert("不能为空");num.focus();return false;}for(var i = 0; i < num.value.length; i++){var param = "0123456789";if(param.indexOf(num.value.charAt(i)) == -1){alert("输入必须为数字");num.focus();return false;}}if(parseInt(num.value) < 5 || parseInt(num.value) > 15){num.value = 10;}return true;}</script>  </head>    <body>      <form action="js/end.jsp" name="form1" method="post" onsubmit="return validate();">    请输入数字（5——15）:<input type="text" name="number"><br/>    <input type="submit" value="submit">        </form>  </body></html><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <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">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></html>