JavaScrip编程技术.ppt

javascript编程技术 内容摘要 理解javascript语言基本特征掌握如何将javascript嵌入到html中理解变量 数据类型和运算符掌握流程控制语句理解网页文档对象模型理解浏览器对象模型理解各种javascript典型应用 javascript是在浏览器端执行的脚本语言 嵌套在html程序中 通过控制网页中各种标记的样式变化增加网页动态效果 或对页面数据进行合法性验证 什么是javascript jeny jeny想创建一个电子邮件帐户 jeny 24us 帐户id 密码 年龄 国家 这样 javascript将验证数据并给出错误信息 如有 3 1javascript基本语法3 1 1javascript程序结构 和css与html文件结合方法类似 javascript文件可以通过三种途径和html文件结合 javascript独立脚本文件形式 标记块形式 具体的事件属性方式 1 独立js脚本文件形式如果有独立文件4 1 jsdocument write hellobits document代表浏览器中的当前html网页 write是输出到当前文档 文件4 1 html比特塞威斯欢迎光临比特塞威斯公司hellobits thisisbits通过标记引入外界js脚本文件 适用于js文件中的程序通用性较高的情况 所有页面都可调用 2 通过标记与html结合比特塞威斯欢迎光临比特塞威斯公司document write hellobits thisisbits适用于重用度不高的情况 当前页面中可以被重用 3 通过事件属性与html结合比特塞威斯欢迎光临比特塞威斯公司thisisbits事件处理性程序语句直接写在事件属性中 不需要标记 3 1 2javascript中的变量 变量是构成程序语言的基本元素 javascript中变量以var关键字声明 varstrname vari 0 类型后期确定机制 比特塞威斯欢迎光临比特塞威斯公司vari 1 varhead1 hellobits document write head1 i 2 head1 hellobits document write head1 varx 100 vary varz document write 竞拍sony数码相机600万像素 x 起价 y prompt 加多少银子 1 z x y alert 您最终的出价 n z n 用于换行显示 prompt函数返回输入的字符串 号的用法 10020 bug 字符串相连 100 200 200 varx 100 vary varz document write 竞拍sony数码相机600万像素 x 起价 y prompt 加多少银子 1 z x parsefloat y alert 您最终的出价 n z n 用于换行显示 parsefloat 函数将字符串转换为float数据parseint 函数将字符串转换为int数据如果转换失败 返回nan值 notanumber 验证上例varx 100 vary varz document write 竞拍sony数码相机600万像素 x 起价 y prompt 加多少银子 1 z x parsefloat y alert 您最终的出价 n z n 用于换行显示 变量练习 数组 1 声明数组var数组名 newarray 数组大小 例 varemp newarray 3 添加元素emp 0 aa emp 1 bb emp 2 cc emp 也可以声明数组并赋初值 例 varemp newarray aa bb cc 使用数组varemp newarray 3 emp 0 ryandias emp 1 grahambrowne emp 2 davidgreene document write 数组emp中的数据为 document write emp 0 document write emp 1 document write emp 2 数组 2 数组 3 常用属性length 返回数组中元素的个数常用方法 varemp newarray 3 emp 0 ryandias emp 1 grahambrowne emp 2 davidgreene emp sort document write 排序结果是 document write emp 0 document write emp 1 document write emp 2 数组 4 转义字符 和c语言一样 js也有转义字符 常用的就是 n 运算符 运算符对一个或多个变量或值 操作数 进行运算 并返回一个新值根据所执行的运算 运算符可分为以下类别 算术运算符比较运算符逻辑运算符 算术运算符 算术运算符 1 实现步骤 1 使用dreamweaver设计页面2 指定各个文本框的名称3 切换为代码视图 编写脚本代码4 浏览并调试 functioncalcu varnumb1 document calc num1 value varnumb2 document calc num2 value vartotal parsefloat numb1 parsefloat numb2 document calc result value total 计算总价并显示 添加单击事件 单击按钮时调用 calcu 函数 算术运算符 2 获取表单中输入的数据 document 表单名 表单元素名 value 定义calcu 计算函数 实现两个数相乘的功能 定义函数的语法 function函数名 参数列表 javascript语句 比较运算符 1 functioncalcu varnumb1 document calc num1 value varnumb2 document calc num2 value vartotal parsefloat numb1 parsefloat numb2 document calc result value total if total 500 alert 购买总价超过500 n支付时将赠送超级q币2枚 其他代码略 同上例 比较运算符 2 购买总价超过500 赠送超级q币2枚 逻辑运算符 1 functioncalcu varnumb1 document calc num1 value varnumb2 document calc num2 value vartotal parsefloat numb1 parsefloat numb2 document calc result value total if total 500 其他代码略 同上例 逻辑运算符 2 500 1000之间 赠送超级q币两枚 1000 2000之间 赠送ibm智能鼠标一只 2000以上 直接与贵宾台联系 3 1 3javascript流程控制 1 分支控制语句 条件语句 if 条件 javascript代码 语法 if语句 1 如果要执行多个语句 必须将这些语句放在一对大括号 内 但如果只要执行一个语句 则可以省略大括号 functioncalcu varnumb1 document calc num1 value varnumb2 document calc num2 value if numb1 其他代码略 同上例 if语句 2 如果输入框中的数据用户漏填了 出现nan的bug为什么呢 functioncalcu varnumb1 document calc num1 value varnumb2 document calc num2 value if numb1 if else语句 提示没有填写购买数量或者竞拍价格 functioncalcu varnumb1 document calc num1 value varnumb2 document calc num2 value if numb1 嵌套if语句 购买数量无意中输入负数 出现bug怎么办 switch语句 1 switch 表达式 case常量1 javascript语句 break case常量2 javascript语句 break default javascript语句 语法 switch语句 2 varf document calc pay value 支付方式代号vargrade 折扣率vartotal parsefloat numb1 parsefloat numb2 switch parseint f case1 grade 0 6 打6折优惠break case2 同理其他方式打7折 八折case4 grade 0 9 打9折优惠break default alert 请重新选择支付方式 return varmoney total grade 根据折扣率 计算实际总价document calc result value money alert 您享受了 grade 10 折优惠 银行转帐 打6折电话支付 打7折邮政汇款 打8折q币支付 打9折 下拉列表框pay的选项和值 2 循环语句 for循环do whilewhile for循环例 vari for i 0 i 10 i 语句 for循环 for循环演示document write 打印金字塔直线 for vari 0 i for循环 如何实现 当i 5时 while循环while 循环条件 语句 do while循环do 语句 while 循环条件 while和do while循环 先执行 后判断循环条件 myfont font size 150 color c99c96 font family webdings 产生埃及图像的特殊字体 document write 每个字符都对应一个漂亮的埃及图像 do varc prompt 输入一个字符 输入n或n停止 a document write c while c n while和do while循环 输入一个字符 直到n停止 用哪个循环 3 1 4javascript函数 内置函数eval函数 用于计算字符串表达式的值isnan函数 用于验证参数是否为nan 非数字 varstr1 prompt 输入一个表达式 我给您计算 1 1 varresult eval str1 document write str1 result varx prompt 输入一些数据 0 if isnan x alert x 不是一个数字 elsealert x 是一个数字 自定义函数 定义函数 function函数名 参数1 参数2 语句 调用函数 函数调用一般和表单元素的事件一起使用 调用格式为 事件名 函数名 functionsum one two varresult one two returnresult 表示单击此按钮时 调用函数sum 执行 函数的应用 num1 num2 result 定义函数 定义函数compute 完成计算的功能 op参数代表运算符号 调用函数 第一个数第二个数计算结果 javascript函数练习 验证教材p73示例 3 1 5javascript中的常用对象 对象是属性和 方法的组合属性是对象所拥有的一组外观特征 一般为名词方法是对象可以执行的功能 一般为动词例如 汽车 对象 汽车 属性 型号 法拉利颜色 绿色 方法 前进 刹车 倒车 1 date对象 date方法的分组 用作date方法的参数的整数 set方法 get方法 to方法 parse方法和utc方法 如何实现 varnow newdate varhour now gethours if hour 0 获得当前日期和时间 获得小时 即当前是几点 判断上午 下午还是晚上 月份数字0 11 注意 1 date对象应用实例 date对象应用实例 varmytime settimeout disptime 1000 设置定时器每隔1秒 1000毫秒 调用函数disptime 执行 刷新时钟 设置样式 无边框的文本框 onload 事件 页面加载就调用函数 disptime 显示时间 date对象练习 验证上例 2 math对象 math random 产生0 1的随机小数math round 四舍五入取整 如9 34取整为9 如何实现 自动刷新document write 2秒自动刷新 随机显示图片 vari 0 i math round math random 8 1 document write 假定随机产生的数字i 3 上述代码即为 显示第三幅图片 3 jpg 每隔2秒刷新网页 math round math random 8 1 产生1 9的数字 math对象方法练习 验证上例 3 string对象 创建字符串有两种不同方法 使用var语句varnewstr 这是我的字符串 创建string对象varnewstr newstring 这是我的字符串 string相关函数 属性 length方法 charatindexofsubstrtolowercaseeval string对象方法练习 验证上例 javascript事件 3 2网页事件处理 javascript事件处理程序 javascript事件处理程序就是一组语句 在事件 如点击鼠标或移动鼠标等 发生时执行 事件 处理事件 事件处理程序的基本语法是 事件名 javascript代码函数 表示鼠标按下时 将调用执行函数check onfocus和onblur事件 1 functionmyfun1 if document myform card value 请注意格式 10 xxxxxx document myform card value functionmyfun2 vara document myform card value if a substr 0 2 10 isnan a alert 格式错误 请重新输入 document myform card focus 文本框获得鼠标焦点时 onfocus 调用的函数 清空卡号文本框 文本框失去鼠标焦点时 onblur 调用的函数 判断格式是否正确 focus 方法再次获得焦点 即鼠标光标回到卡号文本框 卡号 密码 onfocus和onblur事件 2 添加事件处理 onmouseover和onmousedown事件 图片切换低价转让哈士奇弟弟移过来看看俺啊 添加事件处理 切换图片 onmouseover src dog2 jpg 表示本图片的图片名称替换为dog2 jpg 请注意 由于外面两端已有双引号 为区别起见 dog2 jpg改用为单引号括起来 网页事件练习 验证上例 3 3网页浏览器对象 window窗口对象 location地址对象 document文档对象 form表单对象 浏览器对象的分层结构 window document myform text1 浏览器对象的分层结构 window对象属性 1 window对象 window对象方法 window对象应用示例1 functionopenwindow window open google htm functionclosewindow window close 使用open方法打开新窗口 使用close方法关闭窗口 添加单击事件 因为window是最顶层的根 所以可以省略window open google htm 可简写为 open google htm 其他方法也是如此 window对象应用示例2 open 打开窗口的url 窗口名 窗口特征 窗口的特征如下 可以任意组合 height 窗口高度 width 窗口宽度 top 窗口距离屏幕上方的象素值 left 窗口距离屏幕左侧的象素值 toolbar 是否显示工具栏 yes为显示 menubar scrollbars表示菜单栏和滚动栏 resizable 是否允许改变窗口大小 yes或1为允许location 是否显示地址栏 yes或1为允许status 是否显示状态栏内的信息 yes或1为允许 我们需要预先制作好广告页面 假设为adv htm 打开广告窗口的语句如下 open adv htm toolbars 0 scrollbars 0 location 0 statusbars 0 menubars 0 resizable 0 width 650 height 150 functionopenwindow open adv htm toolbars 0 scrollbars 0 location 0 statusbars 0 menubars 0 resizable 0 width 650 height 150 看看和我一起打开的广告窗口 使用open方法打开广告新窗口 添加页面加载事件 document对象属性 2 document对象 document对象方法 getelementbyid id 返回指定元素的引用getelementsbyname elementname 返回name elementname 的所有xhtml元素对象的列表getelementsbytagname name 返回文档中所有匹配的元素的集合createcomment data 创建xhtml注释createelement name 创建指定类型的新元素createtextnode text 创建一个纯文本结点element方法 getattribute id 返回指定属性的值setattribute id value 给属性赋值removeattribute id 移除指定属性和它的值getelementsbytagname name 返回结点内所有匹配的元素的集合 document对象应用实例1 无标题文档functionchange color doc