JavaScript

1.JavaScript的应用

• 使用表单元素(输入域、文本区、按钮、单选钮、复选框、选择列表)使Web页面直接响应用户
• 发布类似于数据库信息的小量数据集，并提供友好的数据界面
• 需要控制多框架导航、插件、或基于用户在HTML文档中选择的Java applet
• 提交给服务器之前，预处理客户端的数据
• 在现代的浏览器上动态和实现改变内容和风格以响应用户的交互

2.JavaScript脚本

• 每当在HTML文档中包含JavaScript时，必须使用附有标记对的命令行。
• type=”text/javascript”：表明脚本所用的语言，使得浏览器能够正确解析

• JavaScript是对大小写敏感的，在使用JavaScript文字输入时要有正确的大小写

  HTML标记语言(包括
  

  • type属性告诉浏览器要把标记中的代码用javascript语言来解析

• 标记的位置

  • 一般来说是,脚本是放在标签中的，如：

  • 也可以放置在body中，如：

  • 其他脚本语句调用时

  • 在Javascript中，数据常见的形式是数字、文本(称做字符串)、对象(对象模型中的对象、脚本创建的对象)、以及true和false(称作Boolean)

5.程序设计

• JavaScript数值(数据)类型
  
  • String：引号内一系列字符
    
    • 如：”Hello”
  • Number：不在引号内的任何数字
    
    • 如：4.5
  • Boolan：逻辑真或假
    
    • 如：true
  • Null：空值
    
    • 如：null
  • Object：通过属性和方法定义的软件对象(数组也是对象)
  • Function：函数定义
• JavaScript属于弱类型语言，其中的变量使用var关键字来声明，如：var str，变量可以存放任何类型的值
• 变量名的命名要求：
  
  • 不能使用任何保留的关键字、词
  • 不能包含空格字符，有多个词时可以使用其他两种方式，如：last_name或lastName
  • 除下划线之外不要用任何标点符号
  • 首字母不能是数字

• 表达式的特殊问题：

  • 若初始myAge等于45，yourAge是myAge-15，则在后面myAge改变时不会影响yourAge的值，即：

    var myAge = 45;
    var yourAge = myAge - 15;   //yourAge=30
    //修改myAge的值
    myAge = 30;             //yourAge的值仍为30
    

  • 注意下面表达式的的值：

    var str1 = "求值：" + 1 + 2；   //str1=求值：12
    var str2 = 1 + 2;               //str2=3
    var str3 = 1 + 2 + "是结果";       //str3=3是结果
    

• 数据转换

  • 在JavaScript中整数和浮点数：
    
    • 整数：没有小数点或小数点后没有数值
    • 浮点数：小数点后面可以有数值

  • 字符串—>数值

    • 两个方法：parseInt()与parseFloat()，如：

      //注意：传入的字符串必须是数值型的
      parsetInt("32");        //结果为32
      parseIndt("32.5");      //结果为32 
      parseFloat("33");       //结果为33
      parseFloat("33.5");     //结果为33.5
      

  • 数值—>字符串

    • 通过加入空字符串的方式实现,如：

      ("" + 32);              //结果为:"32"
      ("" + 36).length;       //结果为:2
      

• 操作符

  • 算数操作符(+、-、*、/、%(求余))

    +：在字符串之间表示连接符,在数值之间表示加法
    

    • 作为字符串的连接符时,不区分字和空格

  • 比较操作符：

    • 返回类型：Boolean类型(true或者false)

    • 操作符类型

      ==、!=、>、>=、<、<=
      

• 控制结构

  • 基本结构：if、if…else、for结构

• 函数

  • 函数能返回一个值给调用它的语句，但并不是必须的，当函数返回值时，调用语句把函数作为表达式处理，在函数调用出插入返回值
  • 创建函数应尽量保证函数处理的内容越少越好

  • 函数的参数不用var关键字来初始化，函数调用时他们自动进行相应的初始化，如：

  • 在JavaScript语言中，同一个JavaScript数组的不同行可以包含不同的数据类型

  • 数组

    • 创建

      var strs = new Array(5);    //5指定数组要使用的元素个数
      

    • 赋值

      strs[0] = "djh";
      strs[2] = "Tom";
      ...
      

    • 存取数据

      • 通过数组名和方括号中的下标获取或改变指定数组位置的数据

    • 数组中的document对象

      • 浏览器会为文档中相同的对象创建一个数组，如：用户的页面含有两个form表单，则可以使用数组引用表单

        document.forms[0];
        document.forms[1];
        

6.window与document对象

• window对象的子元素
  
  • navigator
  • screen
  • document
  • history
  • location

• 访问窗口属性与方法

  • 方式一：

    window.propertyName
    window.methodName([prameters])
    

  • 方式二：(用于复杂的、涉及多框架和窗口的脚本中使用)

    self.propertyName
    self.methodName([prameters])
    

• 创建窗口

  • open()方法，带有三个参数：URL、 HTML标记语言属性引用、窗口大小，如：

    
    
        
        
    
    
        打开子窗口
        关闭子窗口
    
    
    

• window对象的属性与方法

  • window.alert()方法

    alert("调用了窗口的alert()方法...");
    

  • window.confirm()方法：确认对话框,有返回值：单击OK返回true，单击Calcel返回false

  • window.prompt()方法：提示对话框，有两个参数

    • 第一个参数为提示信息

    • 第二个参数为输入框的默认值，不传递或者传递传递空字串

      //点击确认键,返回的为输入的数据,点击取消键返回null
      
      
          
          
      
      
      
      
      

  • load事件
    
    • 它确保所有document对象都存在于浏览器文档对象模型中

• location对象

  • 表示载入窗口的URL
  • URL定义了一个文件的地址和数据传输方法，包括协议(如:http:)和主机名(如:www.baidu.com)
  • href属性定义了完整的URL

  • 设置location.href属性是脚本导航到其他页面的基本方法，如：

• navigator对象
  
  • navigator.userAgent属性返回浏览器名
  • navigator.appVersion属性返回浏览器版本

• document对象

  • document.forms[]属性：属性值是一个文档中所有form元素对象的数组

    • length属性查看多少个form对象，如：

      var count = document.forms.length;
      //访问文档中的第一个表单,方式如下
      document.forms[0];
      //也可以通过表单的name属性值来引用，如：
      document.forms["formName"];
      //按名称引用form对象的第二种方式是将名称附加为document对象的属性,如:
      document.forName
      

    • document.images[]属性：以\标记方式插入到文档的图像的集合(数组)

      • document.images属性的存在表名浏览器支持图像交换，如：

        //可以防止不支持图像的浏览器显示错误信息
        if(document.images){
            //处理img对象的语句
        } 
        

  • document.write()方法

    • 页面载入后，浏览器输出流自动关闭，该方法打开一个新的输出流，并清除当前页面的内容

    • 写完内容后必须关闭输出流，调用document.close()，在最后一个write()方法后必须包含有document.close()方法，否则不能显示图像与表单，且中间的内容都是追加的形式，而不会覆盖，如：

      document.write("Hello JS!" + "
      ");
      document.write("javascript是一门弱语言");
      document.close();
      

  • documen.createElement()和document.createTextNode()方法

    • documen.createElement()：用户在浏览器的内存中创建一个全新的元素对象，字符串参数传递给方法，如将元素的标记名作为：

      var newElem = document.createElement("p"); 
      

    • document.createTextNode()方法生成一个全新的文本节点并用所需文本填充节点，如：

      var newText = document.createTextNode("Hello, create new text node.");
      

    • document.getElementById()方法，唯一的参数是一个用引号括起来的字符串，如：

      var btn = document.getElementById("btn");   
      

      • 该方法返回一个值，通常将该值保存在一个变量中以便随后的脚本语句使用

  • 子节点的添加：appendChild()方法，如：

    • 添加元素节点

      //创建节点
      var liNode = document.createElement("li");
      //获取元素节点
      var ulNode = document.getElementsByTagName("ul")[0];
      //向获取的ulNode元素节点添加创建的liNode子节点
      ulNode.appendChild(liNode);
      

    • 添加文本节点

      //创建文本节点
      var textNode = document.createTextNode("汕尾");
      //获取元素节点
      var addNode = document.getElementsByTagName("li")[4];
      //向元素节点添加文本子节点
      addNode.appendChild(textNode);
      

7.表单及表单元素

• form对象

  • form表单层次结构

    form---text---textarea、password
        ---radio---checkbox、hidden
        ---button---result、submit
        ---select---option
    

  • 访问表单属性

    • 用户可以为name、target、action、method、enctype设置属性，如：

      document.forms[0].action;   //获取
      document.forms[0].action = "http://www.baidu.com";  //设置属性
      

    • form.elements[]属性

  • 表单属性的方法引用，

    • 格式：

      documen.formName.controlName;   //formName：form表单name值，controlName：表单元素的name属性值
      

    • 如：

• 文本输入改变事件，如：

• 复选框对象
  
  • 复选框的关键属性是checked，属性取值有两种ture或者false，是一个Boolean值
  • 复选框一般不会作为触发器，而是作为选择设置器

• 单选按钮对象

  • 同一组的按钮，属性name的值必须是相同的

  • 读取组中的按钮数方式：

    //通过访问相应表单的按钮组名下的length属性
    document.forms[0].groupName.length;
    

  • 查询按钮是否被选中的方式：

    //必须一个一个按钮的查询
    document.forms[0].groupName[0].checked; //查看属性是否为true
    

• select对象

  • 一个包含option对象数组的对象
  • 用来在弹出列表或者滚动列表中显示对象

  • select对象的重要属性为seletedIndex,访问方式：

    document.forms[0].selectName.selectedIndex;
    

  • selectedIndex值是用户访问选项属性的关键，其中两个重要的选项属性是text及value，访问格式：

    var sel = document.forms[0].selectName;
    //text属性是select对象显示在屏幕的字符串
    var text = sel.options[sel.selectedIndex].text;     //options属性
    var val  = sel.options[sel.selectedIndex].value;    //options属性
    

  • 如：

    
    
        
        
    
    
        
    
            Choose a place to go:
            
            
                Home Page
                Stop Our Store
                Shipping Policies
                Search the Web
            
        
    
    
    

• this关键字向函数传递表单数据及元素

  • this通常指向对象，对象包含使用该关键字的脚本，利用this作为函数的参数，如：

  • this访问同一表单的其他元素，使用”this．”的形式，如：

  • 如：

    
    
        
        
    
    
    
        
    
        Choose your favorite Beatles:
        Jhon
        Paul
        George
        Ringo
        
        
    
        Enter the name of your favorite Beatles song:
    
        
        
        
    
    
    
    

• 表单的submint()方法与onsubmit事件

  • submit()方法不会引起表单的onsubmit事件

  • onsubmit事件必须加入关键字return，如：

8.String、Math与Date对象

• String对象
  
  • 两种复制方式：
    
    • var str = “Hello, JScript”;

• 字符串方法：

  • 转换大小写：
    
    • toUpperCase()
    • toLowerCase()

  • 字符串搜索：

     string.indexOf()
    

    • 确定一个字符串是否包含在另一个中
    • 返回值，存在，则返回短字符串在长字符串中起始位置的下标值(0开始)；不存在，返回-1

    • 长字符串在引用中位于方法名的左边，短字符串以参数的形式传入方法中，如：

      var str1 = "djh";
      var str2 = "abcdrfgoinfhdjheioe";
      var pos = str2.indexOf(str1);
      

      • 如：

    • 提取字符副本与子字符串：

      • charAt():从字符串指定位置提取单个字符
      • 参数为要提取字符的下标号(0开始)
      • 不会对原字符串产生任何影响

      • 格式：

        var str1 = "djhabdc";
        var str = str1.charAt(5);       //str="d"
        

    • substring():用于提取一个连续的字符串
    • 参数为子字符串在原字符串中的起始与终止位置
    • 提取的字符不包括结束位置的字符

    • 如：

      var str1 = "abscdhfjh";
      var str = str1.substring(2,6);      //str="scdh"
      

• Math对象:

  • Math对象的属性通常是常数，如：

    Math.PI     //π
    Math.SQRT2  //2的平方根
    

  • pow(num1, num2)：求数num1的num2次方
  • round(num)：四舍五入的整数
  • 随机数的产生(0~1的浮点数)：random()

• Date对象：

  • 每个窗口一个Date对象
  • 静态Date对象与Date对象实例,后者包含一个实际的日期值

  • 如：

    var today = new Date();     //不带参数的的调用
    

  • 在内部，Date对象实例的值是时间，以毫秒为单位，从1970年1月1日0时开始计算

  • 格式化时间显示，如：

    var date = new Date("Month dd, yyyy hh:mm:ss");
    var date = new Date("Month dd, yyyy");
    var date = new Date(yyyy, MM, dd, hh, mm, ss);
    var date = new Date(yyyy, MM, dd);
    var date = new Date(GMT milliseconds from 1/1/1970);
    

  • Date对象的方法：

    getTime()：返回1970年1月1日0时至当前时间的毫秒数，数值区间：0-…
    getYear()：特定年份减去1900,2000年后为4为年份，数值在区间：70-…
    getMonth()：年中的月份(0-11)
    getDate():：月中的日期(1-31)
    getDay()：星期几(0-6,星期日为0)
    getHours()：24小时制小时(0-23)
    getMinutes()：特定小时内的分钟(0-59)
    getSeconds()：特定分钟内的秒(0-59)
    setTime(val)、setYear(val)、setMonth(val)、setDate(val)、seyDay(val)、setHours(val)、setMinutes(val)、setSeconds(val)
    

  • 设置Date对象值的方法不返回值，而是直接修改调用方法的Date对象的值
  • 执行日期计算要求在Date对象的毫秒值上进行处理

  • 如：

    
    
        
        
    
    
        Today is:
        
        
    
        Next week will be:
        
    
    
    

JavaScript的案例

• 广告悬浮(source code from book)

      
      
      
          
          
          
          
      
      
          
  Advertisement
      
      
  

• 页面悬浮控件拖动(source code from book)