从31到32,在PHP中调用JavaScript脚本

09927306 · 发表于 2011-1-3 12:19:47

在前面几篇博文中我们了解了关于JavaScript的相关基础知识，这一节我们将一起学习关于JavaScript在PHP编程中的具体应用。在《从28到29,PHP与JavaScript交互（一）》一文中Zero就提到了JavaScript在PHP编程中的重要性。但是三篇博文过去了，却一直没有提到JavaScript在PHP中是如何工作的，JavaScript在PHP编程中到底起到什么样的作用呢？下面我们就通过两个实例来了解如何在PHP中调用JavaScript脚本以及JavaScript是如何帮助提高PHP程序运行效率的。
一、应用JavaScript脚本验证表单元素是否为空
在程序开发过程中，要经常应用JavaScript脚本来控制表单提交的数据是否为空，或者判断提交的数据是否符合标准等。当然我们还可通过一些其它方法进行判断（在学习mysql后，Zero再为广大朋友详述）。
1.1、设计表单页，添加一个用户名文本框命名为“user”，添加一个密码域并命名为“pwd”。
2.2、在登录按钮的表单元素中添加一个onclick()鼠标单击事件，调用自定义函数mycheck()。
2.3、在form表单元素外应用function定义一个函数mycheck()，用来验证表单元素是否为空，如果为空则弹出提示消息。

实例代码：

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>

<title>应用JavaScript脚本验证表单元素是否为空</title>

</head>

<script language=”javascript”>

function mycheck(){

if(myform.user.value==”")

{alert(“用户名称不能为空！！”);myform.user.focus();return false;}

if(myform.pwd.value==”")

{alert(“用户密码不能为空！！”);myform.pwd.focus();return false;}

}

</script>

<body>

<form name=”myform” method=”post” action=”">

  <table width=”532″ height=”183″ align=”center” cellpadding=”0″ cellspacing=”0″ bgcolor=”#CCFF66″>

<tr>

   <td height=”71″ colspan=”2″ align=”center”> </td>

</tr>

<tr>

   <td width=”249″ height=”30″ align=”center”> </td>

   <td width=”281″ align=”left”>

  用户名：<input name=”user” type=”text” id=”user” size=”20″> <br><br>

  密  码：<input name=”pwd” type=”password” id=”pwd” size=”20″>

</td>

</tr>

<tr>

   <td height=”43″ align=”center”> </td>

   <td height=”43″ align=”center”>

  <input type=”submit” name=”submit” onClick=”return mycheck();” value=”登录”>

  <input type=”reset” name=”Submit2″ value=”重置”>

</td>

</tr>

  </table>

</form>

</body>

</html>

复制代码

在不输入任何内容的情况下，单击登录按钮：

JavaScript判断表单元素是否为空

   二、应用JavaScript脚本制作二级导航菜单
   相信对于二级导航菜单大部分朋友都不会陌生，因为大部分网站都有用到。但是二级导航菜单是如何实现的，我想大部分朋友还和Zero一样一头雾水。不过没关系通过下面的实例，你和我都能解决这个问题。
   2.1、在网页中适当的位置添加一个一级菜单，本例中的一级导航菜单是由一系列空的超级链接组成，这些空的超级链接执行的操作是调用自定义的JavaScript函数Lmenu（）显示对应的二级菜单，在调用时需要传递一个标记，即主菜单项的参数。
   2.2、在网页中显示二级菜单的指定位置添加一个名为submenu的div层。
   2.3、编写自定义的JavaScript函数Lmenu()，用于鼠标移动到某一个一级菜单时，根据传递的参数值在页面中指定的位置显示对应的二级菜单，并设置二级菜单的名称及链接文件。
   2.4、在IE浏览器中打开，并将鼠标移动到相应的一级菜单。
实例代码：

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title>应用JavaScript脚本制作二级导航菜单</title>
</head>
<body>
<table width=”761″ height=”218″ border=”1″ cellpadding=”1″ cellspacing=”1″ bordercolor=”#FFFFFF” background=”images/bg.jpg” bgcolor=”#3F8701″>
<tr>
<td valign=”top”><table width=”761″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td height=”48″ colspan=”2″> </td>
</tr>
<tr>
<td height=”27″ colspan=”2″ align=”right”><table width=”761″ height=”20″ border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td width=”396″> </td>
<td width=”67″ align=”center”><a href=”index.php”>首页</a></td>
<td width=”75″ align=”center”><a href=”#” onMouseMove=”Lmenu(‘新品’)”>新品上架</a></td>
<td width=”75″ align=”center”><a href=”#” onMouseMove=”Lmenu(‘购物’)”>购物车</a></td>
<td width=”74″ align=”center”><a href=”#” onMouseMove=”Lmenu(‘会员’)”>会员中心</a></td>
<td width=”61″ align=”center”><a href=”index.php”>在线帮助</a></td>
<td width=”13″> </td>
</tr>
</table> </td>
</tr>
<tr>
<td width=”226″ height=”20″ align=”right”> </td>
<td width=”535″ align=”right”> <div id=”submenu”> </div></td>
<script language=”javascript”>
function Lmenu(value){
switch (value){
case “新品”:
submenu.innerHTML=” <a href=’#\'>商品展示</a> | <a href=’#\'>销售排行榜</a> | <a href=’#\'>商品查询</a> “;
break;
case “购物”:
submenu.innerHTML=” <a href=’#\'>添加商品</a> | <a href=’#\'>移出指定商品</a> |<a href=’#\'>清空购物车</a> | <a href=’#\'>查询购物车</a> | <a href=’#\'>填写订单信息</a> “;
break;
case “会员”:
submenu.innerHTML=” <a href=’#\'>注册会员</a> | <a href=’#\'>修改会员</a> | <a href=’#\'>账户查询</a> “;
break;
}
}
</script>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

复制代码

运行结果：

JavaScript二级菜单

月之海洋 · 发表于 2011-6-19 14:59:59

顶的就是你

暗夜的烟火 · 发表于 2011-6-21 13:59:57

顶的就是你

D_hong · 发表于 2011-6-22 03:00:16

真的有意思！

夕梨二世 · 发表于 2011-6-22 05:02:53

真的有意思！

nancybingling · 发表于 2011-6-23 12:02:00

不错不错，我喜欢