DHTML和JavaScript教程.pptVIP

DHTML和JavaScript简易教程 Amos 2005.8 学习要点 框架 表格 表单 样式 取值 对象 语法 框架 Web页面的基本结构要素 HTMLHEADBODY ScriptLink Frame框架 一般的Frame 常用的IFrame 参见例子 自己动手 自己动手（1） 做一个只有左右两个Frame的框架页面。并且其中右边的页面中有2个从上到下排列，各占50%的IFrame页面。并在各页面上显示出页面的逻辑名称。（分别是left.html,main.html(list.html,detail.html) 动手要点：理解Frame框架的原理和实现方式 把这个框架页面放到一个web项目的根目录下，通过启动服务器访问 表格 表格是最重要的web编程要素。表格的组成主要是tablethtd 理解表格的占位符colspan,rowspan,nowrap 参见例子 自己动手 自己动手 （2） 将第一个例子中的(List.html)中增加1个表格（5 cols* 2 rows) 列名为(WLXXID,WLBH,WLMC,WLMS,WLDW)。值分别为1，2，3，4，5 表单 表格是table，表单是Form. 表单是用来获取数据的，而表格一般是为了展现数据的 表单主要对应的元素为inputForm 表单的重要属性为submit和action Input元素的常用类型:参见例子 样式 理解样式表的概念 CSS的基本介绍 可以通过一些传统的Web编辑工具，如Dreamwaver DIV层可以用来显示或者隐藏 取值 JavaScript是真正完全面向对象的语言 掌握如何在Javascript中获取DHTML对象的值非常重要，是学习DHTML的重点。 下面我们就按照几种最常见的方式来让大家练习如何取值 自己动手3 首先编写一个HTML页面，页面上有一个Form元素，name=“form1”,然后放置3个input元素，type=“text”，name分别为input1,input2,input3 ，再放置一个select类型（内为+，-，*，/）。,然后放置一个按钮。当输入input1,input2各2个数字后，选择select任意一个值，点击按钮计算出结果，并把结果赋给input3. 对象 JS和DHtml都是完全按照对象设计的。对象的核心理念就是把我们所能看到的和不能看到的都封装成一个个原子，用不同的层次构建起复杂的模型。 JS和DHtml常用的对象非常多，有时候需要借助一些资料来查询。不要试图记住所有知识，而要掌握在需要的时候如何最快的获知。 自己动手4 学习如何查询JS帮助 学习如何查询DHTML帮助 如何在线获取支持（google,msdn) 语法 JavaScript的语法类似于Java，但稍有不同。例如JS是泛类型的语言。具体可以参考帮助文档 一些简要的注意事项：JS的安装调试器 双引号和单引号的层次关系 JS可以嵌套的地方。 Html执行的顺序 练习5 用HTML来实现循环10次，在一个select类型空间中增加option 实现一个Form，Form中包含3个文本输入框，要求当点击按钮提交的时候，检查文本输入框的输入值都不能为空，并且弹出提示框，并把输入的焦点定位到输入值为空的那个文本输入框上。 总结 学习没有窍门，只能依靠自己的不断努力积累，在日常的编程中要注意把自己不会实现的代码不断积累下来，整理成自己的小知识库。只有这样JS编程的水平才能不断提高。实现灵活的Web交互 本课程只能为大家开一个小头，下面需要大家自己不断努力。我们也会在以后的课程随时补充和回顾这些知识点 * *