做移动网站首页软,wordpress标签样式,芸志建站怎么建立网站,珠海网站建设防第12章#xff1a;Javascript的函数和事件
本章目标
函数的概念掌握常用的系统函数掌握类型转换掌握Javascript的常用事件
课程回顾
Javascript中的循环有那些#xff1f;Javascript中的各个循环特点是什么#xff1f;Javascript中的各个循环语法分别是什么#xff1f;…第12章Javascript的函数和事件
本章目标
函数的概念掌握常用的系统函数掌握类型转换掌握Javascript的常用事件
课程回顾
Javascript中的循环有那些Javascript中的各个循环特点是什么Javascript中的各个循环语法分别是什么
讲解内容
1. 函数概念 为什么要使用函数 思考我们写了一段代码实现了一个功能如果其他地方还是要实现这个功能我们怎么办以前的思路 重新写一段重复的代码实现同一个功能代码冗余。重复代码太多可阅读性太差。如果功能要修改每段重复代码都要修改维护性差。 用函数实现可以解决以上问题 函数概念 函数就是完成特定任务的代码语句块。 对于JS来说我们可以把函数理解为任意一段代码放在一个盒子里在我们想要让这段代码执行的时候直接执行这个盒子里的代码就行。专业一点来讲js函数就是由事件驱动的可执行课重复只用的代码块。 函数的分类 自定义函数系统函数
2. 声明式函数 无参函数 语法 function 函数名(){函数体;
}函数的组成部分 声明函数关键字function。函数名和变量命名规则一样。参数列表括号里面的变量如果没有参数括号为空叫无参函数。函数体{}里面的代码块则表示函数实现的具体功能。 实例通过函数方式实现输出hello Javascript~ 第一步声明函数实现具体功能 function showHello(){console.log(hello Javascript~);
}第二步函数调用 input typebutton value调用函数 onclickshowHello()/代码说明onclick为点击事件当点击按钮时则会调用showHello()函数。 注意 函数必须要调用才能被执行通常情况是在事件中调用。 函数中的代码将在其他代码调用该函数时执行 当事件发生时当用户点击按钮时当 JavaScript 代码调用时自动的自调用 有参数的函数 语法 //函数声明
function 函数名(参数1,参数2… ){ JavaScript代码;
}
//函数调用
函数名(参数1值,参数2值,....);参数说明 形参声明函数时的参数为形参类似于变量名没有具体的值只是一个参数变量此变量只能在函数中使用。 function 函数名(参数1,参数2… ) 实参调用函数时传入的值为实参则为要传入到声明函数的具体值按顺序赋值必须注意顺序。 函数名(参数1值,参数2值,....); 案例通过函数方式实现输出N次“hello javascript~” 第一步编写函数 function showHello(count){ //count为形参for(var i0;icount;i){console.log(hello javascript~);}
}第二步调用函数 input typebutton value调用函数 onclickshowHello(5)/ //5为传入的具体值则为实参
input typebutton value调用函数2 onclickshowHello(prompt(请输入显示HelloWorld的次数,))/案例2带多个参数通过函数传入输入内容和次数实现打印功能 第一步编写函数 /*
context:要输出的内容
count:要输出的次数
*/
function showText(context,count){for(var i 0; icount; i){//根据count来决定输出次数console.log(context);//传入的内容是什么则输出什么}
}第二步调用函数 //直接调用
showText(你好张三,10);//将会输出10次“你好张三”
//事件调用
input typebutton value调用参数函数 onclickshowText(你好张三~,10) / //注意事件用双引号调用函数时的字符串必须用单引号带返回值的函数 语法 //函数声明
function 函数名(参数1,参数2… ){ JavaScript代码; return 返回值;//将函数里面的值返回
}
//函数调用
var 变量函数名(参数1值,参数2值,....);//可以接收函数返回的值关键字return 当 JavaScript 到达 return 语句函数将停止执行。 如果函数被某条语句调用JavaScript 将在调用语句之后“返回”执行代码。 函数通常会计算出返回值。这个返回值会返回给调用者 案例传入二个数字实现加法运算将结果返回 第一步定义带返回类型的函数 function jia(num1,num2){//定义带二个参数的函数var resultnum1num2;//实现加法运算将结果保存在变量中return result;//返回结果
}第二步调用 var resultjia(10,20);//可获取结果然后保存在变量中
console.log(结果result);函数特点 函数就是对一段代码的封装在我们想调用的时候调用函数的几个优点 封装代码使代码更加简洁复用在重复功能的时候直接调用就好代码执行时机随时可以在我们想要执行的时候执行 **现场作业**用函数方式实现以下功能简单计算器实现加减乘除功能。
3. 匿名函数 语法 var 变量名function(参数1参数2...){函数体;
}网上常见匿名写法 方式一事件名function(){…} 方式二 (function (){ JavaScript代码;}()) 直接运行函数 window.οnlοadfunction(){…} 案例通过匿名方法实现加法功能 var jiafunction(num1,num2){return num1num2;
}//调用
var resultjia(10,20);
或
input typebutton value调用匿名方法 onclickjia(10,20)/声明式函数和匿名函数的区别 声明式函数 调用可以在 定义之前或者定义之后 // 可以调用
fn()
// 声明式函数
function fn() {console.log(我是 fn 函数)
}
// 可以调用 fn函数
fn()赋值式函数只能在定义之后 // 会报错
fn()
// 赋值式函数
var fn function() {console.log(我是 fn 函数)
}
// 可以调用
fn()4. 系统函数 什么是系统函数 则为系统已经定义好完成一个具体功能的函数用户直接调用则可 常用的系统函数 parseInt (“字符串”) 将字符串转换为整型数字 如: parseInt (“86”)将字符串“86”转换为整型值86 parseFloat(“字符串”) 将字符串转换为浮点型数字 如: parseFloat(“34.45”)将字符串“34.45”转换为浮点值34.45 isNaN() 用于检查其参数是否是非数字
课堂案例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescriptfunction fun1(){alert(这是提示信息);}function fun2(){var nameprompt(请输入姓名);alert(姓名name);}function fun3(){var rconfirm(你确定要删除吗?);if(r)alert(删除成功);}function fun4(){open(http://www.baidu.com);}function fun5(){close();}function fun6(){var numprompt(请输入一个数字);if(isNaN(num)){alert(你输入的不是数字);}else{alert(你输入的是数字);}}function fun7(){var num1parseInt(prompt(请输入一个数字));var num2parseInt(prompt(请输入二个数字));var resultnum1num2;alert(两数之和为:result);}/script
/head
bodybutton onclickfun1()警告框/buttonbutton onclickfun2()输入框/buttonbutton onclickfun3()确认框/buttonbutton onclickfun4()打开百度/buttonbutton onclickfun5()关闭当前/buttonbutton onclickfun6()验证数字/buttonbutton onclickfun7()类型转换/button/body
/html5. Javascript事件 Javascript中的事件 HTML 事件是发生在 HTML 元素上的事情。 当在 HTML 页面中使用 JavaScript 时 JavaScript 可以触发这些事件。 HTML中的事件 HTML 事件可以是浏览器行为也可以是用户行为。 以下是 HTML 事件的实例 HTML 页面完成加载HTML input 字段改变时HTML 按钮被点击 通常当事件发生时你可以做些事情。 在事件触发时 JavaScript 可以执行一些代码。 HTML 元素中可以添加事件属性使用 JavaScript 代码来添加 HTML 元素。 HTML中事件语法
body onload加载事件()input typebutton value点击我吧 onclick函数() /
/body常用的事件 Javascript事件可以做什么呢 事件可以用于处理表单验证用户输入用户行为及浏览器动作: 页面加载时触发事件页面关闭时触发事件用户点击按钮执行动作验证用户输入内容的合法性等等 … 可以使用多种方法来执行 JavaScript 事件代码 HTML 事件属性可以直接执行 JavaScript 代码HTML 事件属性可以调用 JavaScript 函数你可以为 HTML 元素指定自己的事件处理程序你可以阻止事件的发生。等等 …
6. 常用事件
鼠标事件 课堂案例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/head
body button idbtn1单击事件/buttontextarea idtxt1 rows10 cols50test/textareainput typetext idtxt2 /script//单击事件document.getElementById(btn1).onclickfunction(){alert(被单击了);}//快捷 菜单事件(鼠标右键)document.oncontextmenufunction(){alert(在文档中按了鼠标右键);}//双击事件txt1.ondblclickfunction(){alert(双击了文本框);}//鼠标移入事件txt1.onmouseoverfunction(){txt1.value鼠标移入;}//鼠标移出事件txt1.onmouseoutfunction(){txt1.value鼠标移出;}txt2.onmousedownfunction(){txt2.value鼠标按下;}txt2.onmouseupfunction(){txt2.value鼠标释放;}/script
/body
/html键盘事件 事件参数
属性描述key按键值keyCode按键哈希值ctrlKey是否是ctrl键altKey是否是alt键shiftKey是否是shift键
课堂案例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyletextarea{position: absolute;}/style
/head
bodytextarea idtxt1 rows10 cols50 /textareascript// txt1.οnkeydοwnfunction(e){// txt1.valuee.keyCode;// }var x0;var y0;document.onkeydownfunction(e){var txtdocument.getElementById(txt1);//初始化xtxt.offsetLeft;ytxt.offsetTop;if(e.ctrlKey){alert(按了ctrl键);}else if(e.altKey){alert(按了alt键);}else if(e.shiftKey){alert(按了shift键);}else if(e.keyCode37){x-50;}else if(e.keyCode38){y-50;}else if(e.keyCode39){x50; }else if(e.keyCode40){y50; }txt.style.leftxpx;txt.style.topypx;}//产生内容时document.onkeypressfunction(e){//按键哈希码//txt1.valuee.keyCode;//按键值txt1.valuee.key; }/script
/body
/html对象事件 课堂案例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title页面、窗口事件/titlescriptfunction fun1(){console.log(页面加载完成);}function fun2(){console.log(页面卸载完成);}function fun3(){console.log(用户访问页面);}function fun4(){console.log(用户离开页面);}function fun5(){console.log(调整了窗口的大小);}function fun6(){console.log(用户滚动了页面);}/script
/head
body onloadfun1() onunloadfun2() onpageshowfun3() onpagehidefun4() onresizefun5() onscrollfun6()h1今天有方式电风扇暴雨/h1hr/div styleheight: 900px;/div
/body
/html表单事件 课堂案例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title表单事件/titlestyle#ms1{display: none;}/stylescriptfunction fun1(isView){//获取到目标元素var targetdocument.getElementById(ms1);//判断if(isView)target.style.displayinline; //显示elsetarget.style.displaynone; //隐藏}function fun2(obj){//alert(obj.value);document.getElementById(msg).innerTextobj.value;}function fun3(obj){var indexobj.selectedIndex;var optobj.options[index];//document.getElementById(msg).innerTextopt.text;document.getElementById(msg).innerTextopt.value;}function fun4(obj){document.getElementById(msg).innerTextobj.value;}function fun5(){console.log(用户重置了表单);}function fun6(){console.log(用户提交了表单);}function fun7(){var contentwindow.getSelection();alert(选中了文本content);}/script
/head
bodyform actionhttp://www.baidu.com methodget onresetfun5() onsubmitfun6()p用户名input typetext onchangefun2(this) onselectfun7() //pp密码input typepassword onfocusfun1(true) onblurfun1(false) /span idms1密码有6-10位数字、字母组成/span/pp年龄input typetext oninputfun4(this) //pp城市select onchangefun3(this)option valuesz深圳/optionoption valuedg东莞/optionoption valuegz广州/option/select/ppinput typesubmit/input typereset //p/formhrdiv idmsg/div
/body
/html课后作业
作业1定义一个盒子div通过wasd键让他左右上下移动用css定位来控制它的移动效果 给div加上一个css样式“position: absolute;” 作业2当我们按下a键文本框里面就显示手机当释放该键则文本框清空。 作业3下拉菜单鼠标经过的时候显示鼠标离开就隐藏。 作业4在目标元素上按下鼠标按键则背景颜色变红当释放则变黄。 作业5鼠标移出文本框时文本框显示123456最后双击按钮显示两个输入框随便输入两个数值最后相加起来和是多。 作业6实现从第一个框复制到第二个框粘贴CtrlA:复制CtrlB粘贴。 作业7.有一个文本框需要输入年龄在失去焦点时判断气质是否符合要求如果不符合要求则给出相应提示如果符合要求则提示提交成功。条件为必须是数字且为1-100
作业8.有一个文本框需要输入姓名要求在其获得焦点时设置其样式: A.虚线边框 B.红色背景颜色
作业9.有一个登录表单页面要求实现登录判断 如果用户名为admin,且密码为gckj123456,则提示登录成功且跳转到目标页面 如果错误则给出相应提示。
作业10.有一个文本框要求编程实现复制、粘贴所选中的内容。(CtrlA:复制,CtrlB:粘贴)
作业11.获得焦点如果是默认文字就清空表单内容 并且字体为黑色 并且把类型换为文本框 this.type ‘text’ 失去焦点如果为空则表单改为默认字 并且字体为灰色 并且把类型换为密码框 this.type ‘password’
作业12.登录系统由一个文本框两个密码框和登录按钮组成用户输入账号密码确认密码两个密码必须相同才可以登录否则登录按钮处于禁用状态。
作业13.创建一个页面包含一个文本框、跟一个按钮和一个显示结果的div. 默认情况下在文本框输入内容时字体颜色为黑色 当单击以一下旁边的按钮后则在文本框输入内容时字体颜色为红色 当双击一下旁边的按钮后则在文本框输入内容时字体为黄色. 无论是单击还是双击如果文本框中有内容则将其写入到下方的div中。
作业14.有一个表单包含一个输入框和一个按钮。用户输入一个数字点击按钮后如果该数字是偶数则在页面上显示“偶数”否则显示“奇数”。
作业15.实现一个选择菜单包含三个选项 A、B 和 C。 当用户选择选项 A 时显示一个输入框。 当用户选择选项 B 时显示一个单选框 当用户选择选项 C 时隐藏其他输入框和单选框。
