HTML,CSS,JAVASCRIPT基础篇讲解.ppt

讲解要点： 讲解要点： 讲解要点： JavaScript程序是由Unicode字符集编写的，每个字符和汉字都是采用2个字节进行编码 ASCII码由大小写英文字母、数字、英文符号等组成，采用1个字节中的低7位进行编码，是Unicode编码的子集 Unicode是一种国际编码，可以表达几乎任何书写语言，它是采用16位编码的字符集 JavaScript程序是由Unicode字符集编写的，每个字符和汉字都是采用2个字节进行编码 ASCII码由大小写英文字母、数字、英文符号等组成，采用1个字节中的低7位进行编码，是Unicode编码的子集 Unicode是一种国际编码，可以表达几乎任何书写语言，它是采用16位编码的字符集 制作改变按钮背景图片的特效-1 如何实现如下图所示 ，按钮的图片背景效果？ 鼠标移入按钮文字变色 Js 操作样式的两种常用方式： 1 、元素对象.style.样式属性=“值” 2、元素对象. className=“类样式名” 层的显示/隐藏特效-1 显示属性display 参数值 描述 block 默认值。按块显示，换行显示. 用该值为对象之后添加新行 none 不显示 ，隐藏对象。与visibility属性的hidden值不同，其不为被隐藏对象保留其物理空间。 inline 按行显示，和其他元素同一行显示。 显示属性display适用于所有HTML标签，常用于层DIV、图片Img的显示和隐藏 层的显示/隐藏特效-2 如何实现如下图所示的页面上广告层的效果？ 显示广告层 隐藏广告层 练习 编写如下图所示，图片的显示隐藏特效 练习答案 综合案例2 Web前端的表单验证技术 为什么需要表单验证 服务器 IE 脚本在客户端执行，减轻服务器端的压力 客户端 用户输入 客户端 用户输入 …… 客户端 用户输入 …… 发送请求 返回响应 发送请求 返回响应 发送请求 返回响应 表单验证的内容-1 不能为空且不能有数字 不能为空且不能有数字 不能为空，且只能包括字母数组、数字和下划线字符 密码不能为空并且最少为6位，还要求两次输入的密码要一致 表单验证的思路-1 如何编写脚本验证表单？ 1、获取表单元素的值（String类型），然后进行判断 2、触发表单（FORM）的提交事件（onSubmit） 综合案例3 省市级联功能 实现简单的省市级联功能 如何实现省市级联的效果？ 页面效果 1、利用省份下拉框的选项改变事件onChange 2、根据用户选择的省份，动态添加城市下拉框的值 onChange 选项/内容改变事件 动态添加 城市选项Option 实现简单的省市级联功能 小结下拉框控件SELECT： 常用属性 length value options selectedIndex 常用事件 onChange onBlur onFocus 选项数组 1、每个选项Option可以动态创建 new Option(“显示内容”) 2、动态添加选项 selCity.options.add(newOption1）或者 selCity.options[i]=newOption1; 3、清除选项 selCity.options.length=0 读取或设置被选项的索引号，第一个为0，其他类推 选项改变事件 使用数组优化省市级联功能 用数组解决省市级联问题： 0 1 2 一维数组: cityList 数组索引号 1 下拉框索引号selectedIndex 0 1 2 3 1、用数组存放每个省份包含的城市 2、根据用户选择的省份索引号，找到对应的数组索引号 3、根据对应的数组内容，添加城市选项到城市下拉框中 cityList[0] cityList[1] cityList[2] 练习 用数组优化学期、选修课程的级联。 各学期对应课程 第一学期：HTML、SqlServer基础、C# 第二学期：JavaScript、SqlServer高级、.Net 第二学年：ASP.NET、Ajax 练习答案 综合案例4 动态创建页面标记 方法1： 当动态显示的内容较少时，使用 myDiv.innerHTML=“HTML代码”； 方法2： 当动态显示的内容较多，并相对固定时，则预先制作好DIV内容， 然后使用 myDiv.style.display=“none/block”； 动态改变页面标记 动态改变页面内容 方法3： 利用Dom创建节点并操作节点。完成动态改变页面内容。 利用dom技术实现。 扩展知识 如何定义一个类型 在JS中每一个function就相当于一个类型 function HelloWorld(){??? alert(hello world!);}