JavaScript简介



JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样也是一种解释性语言,由浏览器解释运行。
  JavaScript是一种基于对象的语言,它能即运用已有的HTMLDOM对象,也能创建新对象,但没有继承特性。

JavaScript是一种安全性语言,它不允许访问本地的硬盘,并不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。
   JavaScript是动态的,它可以在浏览器端直接对用户或客户输入做出响应,无须经过Web服务器。它对用户的反映响应,是采用以事件驱动的方式进行的。
  JavaScript依赖于浏览器本身,与操作系统无关,只要能支持JavaScript的浏览器就可正确执行。从而实现了编写一次,到处运行
  虽然JavaScript语法和 Java 很类似,但并不一样。Java 是一种比 JavaScript 更复杂的程序语言,所以许多 Java 的特性在 Java Script 中并不支持。




3.1JavaScriptJava的主要区别是:
  基于对象和面向对象
  Java是一种真正的面向对象的语言,即使是开发简单的程序,必须设计对象。而JavaScript操纵的对象如果是DOM对象时,无需实例化对象,因为DPM对象是自动实例化的。自建新对象时需要实例化对象(先写类再实例化),但JavaScript对象没有继承性。
  解释和编译
  两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前,必须经过编译,因而客户端上必须具有相应平台上的JAVA虚拟机,它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。
  JavaScript是一种解释性编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文本格式的字符代码发送给客户编由浏览器解释执行。

    强类型和若类型
  两种语言所采取的类型是不一样的。
 
 Java采用强类型变量检查,即所有变量在编译之前必须作声明。如:
    Integer x;
    String y;
  JavaScript中变量声明,采用其弱类型。即变量在使用前不需作声明,而是解释器在运行时检查其数据类型,如:
  x=1234;
  y"4321";
  前者说明x为其数值型变量,而后者说明y为字符型变量。
 
   

    嵌入方式不一样
  两种编程语言都可以嵌入到HTML文档中,但标识不同。


JavaScript使用<Script>...</Script>来标识,


JavaASP的服务器端使用<%......%>
   
Java在客户端使用<applet>...</applet>标识,可以使用JAVAAPI,比JavaScript功能多。


 


   运行机制不一样


这一点很重要。注意区分WEB客户端技术和服务器端技术,实际上网页都是存在服务器上的,但有些网页中的代码需要在服务器上执行,然后将结果以HTML的形式返回客户端,这是服务器端技术。但有些网页中的代码不需要服务器上执行,只是按用户的请求将代码返回客户端,在客户端浏览器上执行,这就是服务器端技术。传统的技术(比如JSP.ASP)在同一个网页中可以同时包含服务器端和客户端代码,先执行服务器端部分,然后将执行结果与客户端代码一起下载到客户端浏览器上。


JavaScript以客户端应用为主,旨在通过操纵DOM对象丰富网页的表现能力。JavaScript随同HTML网页一起下载到库户端,在浏览器上解释执行,其标签是<Script>...</Script>


JavaScript也可以用于服务器端(比如在老式的、微软公司ASP网页),旨在执行服务器端计算,其标签是<%......%>。被括在标签内的代码先在服务器上运行,然后将运算结果以HTML的形式返回客户端浏览器,
   Java
语言以服务器端应用为主,主要用在JSP及相关的框架中,在JSP中,其标签为<%......%>


Java语言在客户端主要是编写java applet使用<applet>...</applet>标识,它比JavaScript的功能强的多,比如可以使用JAVA API,可以访问本地文件,相应的也带来安全问题。JAVA90年代的崛起,与applet有很大关系,但现在applet已经不重要了,微软的ActiveXflash及其它富客户端技术已逐渐将其取代。


 


 


下面是一个JavaScript程序例子,通过它可说明JavaScript的脚本是怎样被嵌入到HTML文档中的。


<html>
<head>
<Script Language ="JavaScript">
// JavaScript Appears here.use DOM
window.alert("
这是第一个JavaScript例子!");
       alert("
欢迎你进入JavaScript世界!");
       alert("
今后我们将共同学习JavaScript知识!");
</Script>
</Head>
</Html>


Internet Explore中运行后的结果见下图所示。


 
 

 


 


 


 


 


 

alert()window对象的方法,其功能是弹出有“确定”按钮的对话框并显示()中的字符串。









l  3.2 JavaScript语法


 


3.2.1 数据类型


JavaScript基本数据类型、变量、常量、表达式、运算符、语句等与JAVA语言基本一样,不做介绍。


 


3.2.2 函数:JavaScript函数定义:
function
函数名 (参数)


{
函数体;.
return
表达式;


}


函数原型的声明比Java语言简单,而且JavaScript的函数是可以独立存在的,不需要依附于某个类。


 


3.2.3 事件与事件处理函数
  JavaScript主要有以下几个事件,这些事件应写在HTML中(而不是script代码段内):


(1)单击事件onClick
  当用户单击某个DOM对象时,可产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生:
   button
(按钮对象)
   checkbox
(复选框)或(检查列表框)
   radio
(单选钮)
   reset buttons
(重置按钮)
   submit buttons
(提交按钮)

例:可通过下列按钮激活change()函数:


<Form>
<Input type="button" Value=“ ” onClick="change()">
</Form>


上述代码在点击按钮后,调用JavaScript 编写的change()函数。


 


在“onClick=”后,可以使用自己编写的函数作为事件处理程序,也可以使用JavaScript中内部的函数。还可以直接使用JavaScript的代码等。


 


例如:
<Input type="button" value=" " onclick=alert("
这是一个例子";


这行代码当单击按钮button时,弹出一个对话框,对话框中的文字是“这是一个例子”。



(2)onChange改变事件
  当利用texttexturea元素输入字符值改变时发该事件,同时当在select表格项中一个选项状态改变后也会引发该事件。
例:


<Form>
<Input type="text" name="Test" value="Test"   onCharge="check(this.test)">
</Form>


上述代码在文本框内容变化后后,调用JavaScript 编写的check()函数。


 


 


(3)选中事件onSelect
  当TextTextarea对象中的文字被加亮后,引发该事件。
(4)获得焦点事件onFocus
  当用户单击Texttextarea以及select对象时,产生该事件。此时该对象成为前台对象。
(5)失去焦点onBlur
  当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时,引发该文件,他与onFocas事件是一个对应的关系。
(6)载入文件onLoad
  当文档载入时,产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值,并用一个变量为其赋值,使它可以被源代码使用。
(7)卸载文件onUnload
  当Web页面退出时引发onUnload事件,并可更新Cookie的状态。


 


下例程序是一个自动装载和自动卸载的例子。即当装入HTML文档时调用loadform()函数,而退出该文档进入另一HTML文档时则首先调用unloadform()函数,确认后方可进入。


<HTML>
<HEAD>
<script Language="JavaScript">
function loadform(){
   alert("
这是一个自动装载例子!");
   }
function unloadform(){
    alert("
这是一个卸载例子!");
      }
</Script>
</HEAD>
<BODY OnLoad="loadform()" OnUnload="unloadform()">
<a href="test.htm">
调用</a>
</BODY>
</HTML>


 

3.2.4 JavaScript内部对象
  JavaScript为我们提供了一些有用的常用内部对象和方法。
  在JavaScript提供了string(字符串)、math(数学计算)和Date(日期)三种对象和其它一些相关的方法。从而为编程人员快速开发脚本程序提供了有利的条件。

3.2.5 JavaScript
内部方法
  JavaScript中有些内置的方法,实际上是个较小的、预先写好的函数库,这些内部方法又称系统函数,使用这些函数不需创建任何实例,可直接用。比如:
  
返回字符串表达式中的值:
     方法名:eval(字串表达式),例:
         test=eval("8+9+5/2");
   
返回字符串ASCI码:
     方法名:unEscape (string)
  
返回字符的编码:
     方法名:escape(character)
  
返回实数:
      parseFloat(floustring);





3.3JavaScript操纵HTML DOM对象


   JavaScript的主要作用就是操纵HTML DOM对象,以实现动态效果,下面举几个例子:


<HTML>
<Head>
<script languaga="JavaScript">
 var test=window.prompt("
请输入数据:");
 document.write(test+"JavaScript
输入输出的例子");
</script>
</Head>
</HTML>

其中window.prompt()是一个HTML DOM窗口对象的方法,其基本作用是,当装入Web页面时在屏幕上显示一个具有确定取消的对话框,让你输出数据。document.write()是document对象的方法,它的基本功能,是实现Web页面的输出显示。

 

 

















你可能感兴趣的:(JavaScript,html,dom,网页设计)