Html和JavaScript编程实战！

来源：互联网发布：外设天下淘宝店怎么样编辑：程序博客网时间：2024/05/20 18:54

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页面中的元素、数据，以及事件。实现动态显示页面的功能。

<tr>

<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>

第

<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>

季度

</td>

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

</td>

</tr>

</table>

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

</font>

</td>

</tr>

</table>

<tr>

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

</td>

</tr>

</table>

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，让她们为我所用！

0 0