Html和JavaScript编程实战!

 Html和JavaScript编程实战

 

1998年,我在学校图书馆里借了一本讲Html语法的书。那时候html和web出现还没多久,中国能够上网也才是刚刚开始的事情。

那时,我的大学所在的城市只有一个地方能够上网:市里的电信局。一个小时上网费好像是8元,还是12元。那时,坐车到电信局,就是为了上网1、2个小时,浏览一些信息。

Html语法是十分简单的,但是也很繁琐。之后,我对这门“语言”就失去了兴趣。我的大学时代,大把的时间还是苦苦的陪伴着C++度过的。

大学毕业以后,学过一阵子很短的ASP,当然JavaScript语法也就蕴含在其中了。不过,我对不能称之为“语言”的html和JavaScript根本没有兴趣。所幸,不久之后,.net问世了,我也就投入了Asp.net的怀抱中。我欣喜地彻底告别了Html标签和javaScript语法,投身到VisualStudio.net拖拉式的编程中。

再一次见到javaScript和HTML是今年,我转到了Java的世界,投身于J2EE的开发。这样,丑陋的Html和JavaScript又回到了我的生活中。

我欣赏于Java完美的语法,但有对html和javaScript丑陋的语法嗤之以鼻。

我不明白,为什么Java不能够有ASP.NET那样的开发环境,今天,我已经接受了这个现实:java的世界,Html和JavaScript永远都是Java在Web开发领域之友!至少在可预见的将来!

好吧,既然如此。那就让我直面Html和JavaScript吧!让她们成为我的朋友和武器!

 

我以前使用JSP开发页面,现在使用Struts开发。当然,这些仅仅是标签库。相当于自定义的html标签库,而且我未来准备使用的Tapestry也是这样一种Html标签的扩展标签库。

这样,html元素就不可避免要使用了。DreamWeave可以帮助我们进行Html页面的布局。但是,要注意一点,由于DreamWeave不认识struts这样的自定义扩展元素,所以可能会出现乱码。

1,                我们可以直接把代码copy到DreamWeave新建的空白JSP页面中,这可以避免乱码。

2,                此时,仍然可能会出现实际页面布局不同于DreamWeave的设计视图。出现这种情况,我们仍要手工调整一下布局。

比如,td单元框的width百分比等。

 

二、Html主要元素

1,table表格,这是主要的html展现形式。因为form表单通常是这种方式提供的。

3,                其中的tr行

4,                Td单元格,这是最小的单元。

 

 

                   第二部分   JavaScript

 

1,客户端Script脚本语言

JavaScript的标准是ECMAScript标准。ECMAScript有两个实现,网景公司的JavaScript----最早和最标准的JavaScript。还有微软的Jscript。

 微软还自己开发了VBScript这种客户端脚本语言。

JavaScript代码由 <Script  Language ="JavaScript">...</Script>说明。在标识<Script Language ="JavaScript">...</Script>之间就可加入JavaScript脚本。

 

JScript有一些非ECMAScript的扩展,这对于IE浏览器是可用的,对于非IE浏览器,可能是不支持的。

 

 

2,Script脚本语言的新战场Server端

 

注意,ASP是一种微软开发的动态Server端页面,以.asp作为扩展名。它可以使用Jscript和VBScript两种脚本语言编写。

JScript 脚本只能在某个解释器或“宿主”上运行,如 Active Server Pages(ASP)、Internet 浏览器或者 Windows 脚本宿主。

微软将Jscript和VBScript引入了Active Server Pages(ASP)环境中,这是微软自己的扩展,与网景的JavaScript无关。这实际上只是利用了JavaScript的语法。

 

看一下以下的声明语法:

< SCRIPT  LANGUAGE=Jscript  RUNAT=Server>
function PrintDate()
{
var x
x = new Date()
Response.Write(x.getDate())
}
// This is a definition for the procedure PrintDate.
// This procedure will send the current date
// to the client-side browser.
< /SCRIPT>

 

多了RUNAT=Server,表示这是工作在服务器端的。而服务器端使用了ASP技术,提供了一些ASP对象。

 

还可以指定整夜使用的Script语言。

< %@ LANGUAGE = ScriptingLanguage %> 其 中 , ScriptingLanguage 代 表 你 想 设 置 的 主 脚 本 语 言 。

<%@ LANGUAGE=VBScript %>

<%@ LANGUAGE=JScript CODEPAGE=932 %>

 

<%       %>  这种方式是所有Servlet服务器端小语言共通的标记。JSP也使用这种标记。

 

另外,JavaScript的战场不止Html页面和ASP。任何提供了解释器的地方都可以运行她们。比如SR(一个Java的Html报表工具),他也在其服务器端集成了JavaScript语法,供开发者简单的进行二次开发。

 

3,Html的二次开发工具,最初的JavaScript。

JavaScript最初是网景公司在NetScapse浏览器中提供的,目的是提供一个动态的Html页面。

 

我们知道,任何一种语言,光有语法是不行的。 必须要有强大的类库,或者方法库的支持。  JavaScript在Html中就是使用了Html提供的诸多对象:比如说,Window对象,Document对象等诸多对象。利用这些对象,我们可以在JavaScript中使用Html页面中的元素、数据,以及事件。实现动态显示页面的功能。

 

<table align="center" bordercolordark=#ffffff bordercolorlight=#cccccc border=cellpadding=cellspacing=1width="96%">

    <tr>

      <td width="24%" align="right" class="bg_table02"><html:select property="forecastYear1"disabled='false'>

    

         <html:option value="2004">2004</html:option>

         <html:option value="2005">2005</html:option>

         <html:option value="2006">2006</html:option>

         <html:option value="2007">2007</html:option>

         <html:option value="2008">2008</html:option>

          <html:option value="2009">2009</html:option>

          <html:option value="2010">2010</html:option>

       

          </html:select> 年 </td>

      <td width="24%" align="left" class="bg_table02">

        第

        <html:select property="forecastQuarter1Name" disabled='false' onchange="javascript:updateYear();">

          <html:option value="">--请选择--</html:option>

          <html:option value="1">1</html:option>

          <html:option value="2">2</html:option>

          <html:option value="3">3</html:option>

          <html:option value="4">4</html:option>

        </html:select>

        季度

        <font color="red">*</font>

      </td>

      <td width="24%" align="right" class="bg_table02">预计新增ADSL用户数:</td>

      <td width="24%" align="left" class="bg_table02">        <html:text property="forecastQuarter1UserNum"size="20" maxlength="20" styleClass="txtinput"/>

        <font color="red">*</font>

      </td>

    </tr>

  </table>

  <table align="center" border=cellpadding="1" cellspacing=width="96%">

    <tr align="center">

      <td class="bg_table01">

        <font color="black">

          <b>下下季度 预计新增ADSL用户数</b>

        </font>

      </td>

    </tr>

  </table>

  <table align="center" bordercolordark=#ffffff bordercolorlight=#cccccc border=cellpadding=2cellspacing=width="96%">

    <tr>

      <td class="bg_table02" align="right" width="24%"><div id="year2"></div></td>

      <td class="bg_table02" align="left" width="24%"><div id="ji2">第季度</div></td>

      <td width="24%" align="right" class="bg_table02">预计新增ADSL用户数:</td>

      <td width="24%" align="left" class="bg_table02">        <html:text property="forecastQuarter2UserNum"size="20" maxlength="20" styleClass="txtinput"/>

        <font color="red">*</font>

      </td>

    </tr>

  </table>

 

<script language="javascript">

function updateYear()

{

//alert('进入');

var objYear2 = document.all("year2");

var objJi2 = document.all("ji2");

//  obj.innerHTML="正在上传文件,请耐心等待......";

var frm = document.Od1AdslUserForecastModelForm;

var year2=null;

var ji2=null;

//frm.forecastYear1.value

if(frm.forecastQuarter1Name.value=="4"){

   ji2="1";

   //parseInt(frm.forecastQuarter1Name.value)+

   year2=parseInt(frm.forecastYear1.value)+1;

}else{

   ji2=parseInt(frm.forecastQuarter1Name.value)+1;

    year2=frm.forecastYear1.value;

 

}

   objYear2.innerHTML=year2+"年";

   objJi2.innerHTML="第"+ji2+"季度";

 

}

</script>

 

 

本例,在onChange改变季节选择框的事件发生时,执行这个JavaScript Html版的方法,然后利用 objYear2.innerHTML=year2+"年";

   objJi2.innerHTML="第"+ji2+"季度";   改变html页面上的文字,  直接改变了客户端浏览器中的文字,  与服务器端无关。

 

JavaScript只与浏览器有关,只控制浏览器本身,不能够影响服务器端。所以,它是与服务器端无关的。当然,Server技术也可以依靠浏览器执行一些对Server有意义的计算。

比如说,1,动态更改Html外观。

  2,对用户操作时间实时相应。

3,执行输入验证。

5,                   为服务器提供一些计算功能,提交表单时,直接将结果存入form元素,直接返回给服务器。

 

     但是,注意,对于安全性高的操作,不应该委派给JavaScript,因为JavaScript执行在客户端,而且客户端浏览器完全可以关闭JavaScript功能。

 

     好了,Html和JavaScript本身很简单。但是,他们的语法是不严谨的,他们的元素、类库、方法需要学习。这对于不经常使用他们的用户来说,是陌生的工具。

在本文中,我们初次接触到了Web开发必不可少的工具:Html和JavaScript。我不是JavaScript高手,但是借助于JavaScript参考手册,我可以完成任务,这就足够了。

在实践的过程中,我们会越来越能把握Html和JavaScript,让她们为我所用!

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值