手记

函数、表单验证

一、函数

1、函数是一段已经命名的代码块,函数中的代码块是做为一个整体被执行或引用的2、自定义函数位置一般情况下放在<head>与</head>之间,但有的情况下也可以放在<body>与</body>之间,一定要保证函数是先定义后使用3、自定义函数的语法function 自定义函数名(参数1,参数2){函数体代码块;...} 例:<head><script language="javascript" type="text/javascript">function hello(){window.alert("您好");} </script></head>4、调用函数(只有在调用函数时,函数体的内容才会被执行)A、在javascript代码中直接调用函数直接写:函数名();例:<body><script language="javascript" type="text/javascript">hello();</script></body>B、在事件的触发下调用函数可以把事件看成是XHTML标记的一个属性<XHTML标记 事件=“ 函数名1”>内容</XHTML标记>例:链接<a href="#"  说明:onclick 点击按钮 <input type="button" value="单击" id="hello" name="hello"  /> 5、常用事件onclick 单击  鼠标放在上面  鼠标离开

二、控制对象

1、得到控制对象document.getElementById("id名称");document.getElementsByName("name名称");2、控制对象的CSS属性document.getElementById("id名称").style.样式 = "CSS样式";说明:先有id和name名称,才能得到id ,name的控制对象,style(样式)例:<body><table name="table01" border="0" cellspacing="0" cellpadding="0"><tr><td id="content"  onmouseout="tdout()">ITET学校</td></tr></table><script language="javascript" type="text/javascript">document.getElementById("content").style.color = "#f00";document.getElementById("content").style.fontSize="12px";document.getElementById("content").style.border="1px solid #f00";document.getElementById("content").style.backgroundColor="#0f0";</script></body> 说明:font-size --- fontSize鼠标放上和离开的效果<head><script language="javascript" type="text/javascript">function tdover(){document.getElementById("content").style.color="#000";document.getElementById("content").style.border="1px solid #000";document.getElementById("content").style.fontSize="14px";document.getElementById("content").style.backgroundColor="#ccc";} function tdout(){document.getElementById("content").style.color="#f00";document.getElementById("content").style.border="1px solid #f00";document.getElementById("content").style.fontSize="12px";document.getElementById("content").style.backgroundColor="#0f0";} </script></head>

三、函数中参数的用法

1、定义函数时用形参function 自定义函数名(形参1,形参2,形参3){函数体代码块;...} 形参是定义函数时用的参数,称形式参数,简称形参,形参就是函数在执行过程中变化的量2、如果定义函数时有形参,那么调用函数时必须要传递“实参”(实际参数),实参是在函数执行过程中,真正执行的变量值函数名(实参1,实参2,实参3)例:<head><script language="javascript" type="text/javascript">function result(x,y){var sum=x+y;window.alert(sum); } </script></head><body><input type="button" name="sum" id="sum" value"计算"  /></body>例2:<head><script language="javascript" type="text/javascript">function over(mytd){document.getElementById(mytd).style.color = "#000";document.getElementById(mytd).style.fontSize="12px";document.getElementById(mytd).style.backgroundColor="#0f0";document.getElementById(mytd).style.border="1px solid #f00"; } </script></head><body><table border="0" cellsapcing="0" cellpadding="0"><tr><td id="td01" onmouseover="over('td01')">内容</td><td id="td02" onmouseover="over('td02')">内容</td></tr></table></body>说明:mytd为形参,将所有<td>的id都看成是变化的量mytd,得到mytd时无须用双引号应用参数时,实参要用单引号

四、函数可以有返回值 return 返回值

例:<head><script language="javascript" type="text/javascript">function maxnum(){var x,y;x=10;y=15;if(x>=y){return x; } else{return y; }} </script></head><body><script language="javascript" type="text/javascript">var result = maxnum();window.alert(result); </script></body>说明:result可加、减、乘、除

五、表单验证

1、对象的值(对象 . value)<head><script language="javascript" type="text/javascript">function checkform(){if(document.getElementById("username").value == ""){window.alert("用户名为必填项");return false; }} </script></head><body><form id="form01" name="form01" method="post" action="" onsubmit="return checkform()"><input type="text" id="username" name="username" /><input type="submit" id="submit" name="submit" value="提交" /></form></body>2、表单在提交到服务器时,会发生一个事件onsubmit事件(提交的意思)说明:表单在提交到服务器前先检查onsubmit的值是否为true;如果为true,则把表单提交给服务器,如果为false,则不提交表单,默认情况下,onsubmit的值为true<p id="one"><a href="#" id="two">内容</a></p>应用时#one a:link 在链接<a>外加id或类a#tow:link 在链接<a>里加id或类3、字符串对象 . length属性:取得字符串的长度(在string对象中)例:<head><script language="javascript" type="text/javascript">function checkform(){if(document.getElementById("username").value.length<6){window.alert("密码必须在六到十二位之间");return false; }} </script></head>

六、常用的运算符

1、算术运算符:+ - * /2、赋值运算符:=、+=、-=、*=、/=3、比较运算符:>、<、>=、<=、==、!=(不等于)、=!(非等于)4、逻辑运算符:连接两个结果为true或false的表达式A、表达式1&&表达式2(表达式1并且表达式2)&&(逻辑与)并且的意思只有表达式1和表达式2都为true时,结果才返回true,否则返回falseB、表达式1||表达式2(表达式1或者表达式2)||(逻辑或),只要一个表达式的值为true,结果就返回true,只有两个表达式的值同时为false时,结果才返回false例:确认密码if(document.getElementById("password").value != document.getElementById("repassword").value){window.alert("两次输入密码不一致,请重新输入");return false;document.getElementById("password").value="";document.getElementById("repassword").value="";}说明:清空输入框

0人推荐
随时随地看视频
慕课网APP