PHP与JavaScript交互.doc

PHP与JavaScript交互一、了解javascriptJavascript是脚本编程语言，支持WEB应用程序的客户端和服务器端构件的开发，在WEB系统中得到了非常广泛的应用。1、 什么是javascriptJavascript是由netscape communication corporation (网景公司)开发的，是一种基本对象和事件驱动并具有安全性能的解释型脚本语言。它不但可用于编写客户端脚本程序，由WEB浏览器解释执行;而且还可以编写在服务器端执行的脚本程序，在服务器端处理用户提交的信息并动态地向浏览器返回处理结果。2、 Javascript的功能Javascript是比较流行的一种制作网页特效的脚本语言，它由客户端浏览器解释执行，可以应用在PHP、ASP、JSP和ASP.NET网站中。同时目前比较热门的ajax就是以javascript为基础，由此可见，熟练掌握并应用javascript对于网站开发人员非常重要。主要应用于以下几个方面：（1）、在 ，便于网站与用户间的沟通，及时响应用户的操作，对提交的表单做即时检查，如验证表单元素是否为空，验证表单元素是否是数值型、检测表单元素是否输入错误等。（2）、应用js脚本制作网站特效，如动态的菜单、浮动的广告等，为页面增添绚丽的动态效果，使用网页内容更加丰富、活泼。（3）、应用JS脚本，建立复杂的网页内容，如打开新窗口载入网页。（4）、应用JS脚本，可以对用户的不同事件产生不同的响应。（5）、应用JS脚本，制作各种各样的图片、文字、鼠标、动画和页面的效果。（6）、应用JS脚本，制作一些小游戏。二、avascript语言基础JS脚本语言与其他语言一样，有其自身的基本数据类型、表达式和运算符以及程序的基本框架结构。1、JS的数据类型主要有6种数据类型：字符串型：使用单引号或双引号括起来的一个或多个字符。 如”php”等。数值型：包括整数或浮点数(包含小数点的数或科学记数法的数) 如-128、12.9、6.98e6等布尔型：布尔型常量只有两种状态，即true或false 如event.return value=false对象型：用于指定JS程序中用到的对象。 如网页表单元素NULL值：可以通过给一个变量赋null值来清除变量的内容。 如a=nullUndefined：表示该变量尚未被赋值。 如var a1、JS的变量变量是指程序中一个已经命名的存储单元，它的主要作用就是为数据操作提供存放信息的容器。在使用变量前，必须明确变量的命名规则、变量的声明方法及变量的作用域。 （1）、变量的命名规则必须以字母或下划线开头，中间可以是数字、字母或下划线。变量名不能包含空格或加号、减号等符号。JS的变量名是严格区分大小写的。不能使用JS中的关键字。JS的关键字如下表：Abstract,continue,finally,instanceof,private,this,boolean,default,float,int,public,throw,break,do,for,interface,return,typeof,byte,double,function,long,short,true,case,else,goto,native,static,var,catch,extends,implements,new,super,void,char,false,import,null,switch,while,class,final,in,package,synchronized,with注意：虽然JS的变量可以任意命名，但为了在编程时使用代码更加规范，最好使用便于记忆、且有意义的变量名称，以增加程序的可读性。 （2）、变量的声明与赋值在JS中，一般使用变量前需要先声明变量，但有时变量可以不必先声明，在使用时根据变量的实际作用来确定其所属的数据类型。所有的JS变量都由关键字var声明。语法如下： Varexample;在声明变量的同时也可以对变量进行赋值： Varexample=100;建议读者在使用变量前就对其声明，因为声明变量最大好处就是能及时发现代码中的错误。由于JS是采用动态编译的，而动态编译是不易于发现代码中的错误的，特别是变量命 名方面的错误。声明变量时所遵循的规则如下： 可以使用一个关键字var同时声明多个变量，例如：Var I,j; 可以在声明变量的同时对其进行赋值，即为初始化：例如：Var i=1;j=100; 如果只是声明了变量，并未对其赋值，则其值默认为undefined.在JS中，可以使用分号代表一个语句的结束，如果每个语句都在不同的行中，那么分号可以省略，如果多个语句在同一行中，那么分号就不能省略。建议大家，不省略分号，以养成良好的编程习惯。例：Var i=100;Var str=”有一条路，走过总会想起。”;Var content=true;在程序开发过程中，可以使用var语句多次声明同一个变量，如果重复声明的变量已经有一个初始值，那么此时的声明变就相当于对变量重新赋值。2、JS的注释在JS中，采用的注释方法有2种： （1）、单行注释单行注释使用 / 进行标识。/ 符号后面的文字都不能被程序解释执行。 （2）、多行注释多行注释使用“/* */”进行标识。“/* */”符号中间的文字不被程序解释执行。多行注释中可以嵌套单行注释，但不能嵌套多行注释。因为第一个 /* 会与其后面第一个 */ 相匹配，从而使后面的注释不起作用，甚至引起程序出错。另外，JS还能识别HTML注释的开始部分 .这种现象存在的主要原因是：在JS中，如果第一行以 结束，那么其间的程序就包含在一个完整的HTML注释中，会被不支持JS的浏览器忽略掉，不能被显示。如果第一行以 结束，JS会将两行都忽略掉，而不会忽略这两行之间的部分。用这种方式可以针对那些无法理解JS的浏览器而隐藏代码，而对那些可以理解JS的浏览器则不必隐藏。三、自定义函数自定义函数就是由用户自己命名并且书写的能实现特定功能的程序单元。用户使用的自定义函数必须事先声明，不能直接使用没有声明过的自定义函数.JS用function来定义函数，语法如下： Function 函数名(参数) Return var;自定义函数的调用方法是：函数名();其中的括号一定不能省略。例： function chengji(a,b) return a*b; document.write(输出的结果是：+chengji(15,3);执行后的结果是：输出的结果是：45在同一个页面不能定义名称相同的函数，另外，当用户自定义函数后，需要对该函数进行引用，否则自定义函数将失去意义。四、Javascript流程控制语句所谓流程控制语句就是对语句中不同条件的值进行判断，从而根据不同的条件执行不同的语句。在JS中，流程控制语句可以分为条件语句、循环语句和跳转语句。1、 条件语句在条件控制语句中主要包括两种：一种是IF条件语句，另一种是Switch多分支语句。2、 循环语句3、 跳转语句五、Javascript事件JS是基于对象的语言。它的一个最基本的特证就是采用事件驱动。事件是某此动作发生时产生的信号，这些事件随时都可能发生。引起事件发生的动作称之为触发事件。鼠标键盘事件 Onclick 鼠标单击时触发此事件 Ondblclick 鼠标双击时触发此事件 Onmousedown 按下鼠标时触发此事件 Onmouseup 鼠标按下后松开鼠标时触发此事件 Onumoseover 鼠标移动到某对象范围上方时触发 Onumosemove 鼠标移动时触发此事件 Onmoseout 鼠标离开某个对象范围时触发此事件 Onkeypress 当键盘上的某个按键被按下并且释放时触发 Onkeydown 当键盘上的某个按键被按下时触发此事件 Onkeyup 当键盘上的某个按键被按下后松开时触发页面相关事件 onabort 图片在下载时被用户中断时触发此事件 Onload 页面内容完成时触发此事件(页面加载事件) Onresize 当浏览器的窗口大小被改变时触发此事件 Onumload 当前页面将被改变时触发此事件表单相关事件 onblur 当前元素失去焦点时触发此事件 Onchange 当前元素失去焦点且无素的内容发生改变时 Onfocus 当前元素获得焦点时触发此事件 Onreset 当表单中reset的属性被激活时触发些事件 Onsubmit 一个表单被递交时触发此事件滚动字幕事件 onbounce 在marquee内的内容移动到marquee显示范围之外时触发此事件 Onfinish 当marquee元素完成需要显示的内容后触发 Onstart 当marquee元素开始显示内容时触发此事件在PHP中应用js脚本中的事件调用自定义函数是程序开发过程中经常使用的方法。六、调用javascript脚本1、 在HTML中嵌入JS脚本JS作为一种脚本语言，可以嵌入到HTML文件中。在HTML中嵌入JS脚本的方法是使用.语法结构： 如果在该标记中没有使用language属性，IE和Netscape浏览器将默认使用JS脚本语言。例： 在HTML中嵌入js脚本 alert(我很想学习PHP编程，请问如何才能学好这门语言？); 在之间调用js脚本语言window对象的alert方法，向客户端浏览器弹出一个提示对话框。这里需要注意的是，jS脚本通常写在标记和标记之间。写在head标记中间一般是函数和事件处理函数。定在body标记中间的是网页内容或调用函数的程序块。 在HTML中嵌入js脚本 2、应用JS事件调用自定义函数刚讲过，在这里不在重复。3、在PHP动态网页中引用JS文件在网页中，除了在标记之间编写JS脚本代码，还可以通过中的src属性指定外部的js文件（即JS文件，以 .js 为扩展名）的路径，从而引用对应的JS文件。语法： 使用外部JS文件的优点如下：使用JS文件可以将JS脚本代码从网页中独立出来，便于代码的阅读。一个外部JS，可以同时被多个页面调用。当共用的JS脚本代码需要修改时，只需要修改一个JS文件中的代码即可，便于代码的维护。通过标记中的src属性不但可以调用同一个服务器上的JS文件，还可以通过指定路径来调用其他服务器上的JS文件。例： 或： 或： 例： 在HTML中嵌入js脚本 W3.js文件的代码如下：function check() alert(您单击了这个按钮！);注意事项：在JS文件中，只能包含JS脚本代码，不能包含标记和HTML代码。在引用JS文件的标记之间不应存在其他的JS代码，即使存在JS代码，浏览器也会忽略此脚本代码，而只执行JS文件中的JS脚本代码。例： 在HTML中嵌入js脚本 function check()alert(dfadfadf); W3.js的代码如下：function check() alert(您单击了这个按钮！);那么最终我们点击后是会弹出“您单击了这个按钮！”这句话。4、解决浏览器不支持JS的问题虽然大多数浏览器都支持JS脚本，但仍有少部分浏览器不支持。如果遇到不支持JS脚本的浏览器，网页会达不到预期效果或出现错误。解决这个问题可以使用3个方法：1、开启IE浏览器对JS的支持目前有些支持JS的浏览器为了安全问题关闭了对JS的支持。这时，浏览者可以启动对JS脚本的支持来解决这一问题。具体操作步骤如下：打开一个页面文件工具internet选项安全自定义级别java小程序脚本和活动脚本两个选项设置为启用状态。即可开启IE浏览器支持javascript脚本的功能。 2、开启IE浏览器对本地JS的支持IE浏览器将网页分为internet、本地intranet、受信任的站点和受限制的站点4个区域，但不包括本地网页。通常在windows XP操作系统中，打开IE浏览器中包含JS脚本的网页，会弹出安全提示对话框. 允许阻止的内容就可以了。但此选项仅针对当前网页。若要永久地消除IE浏览器的这种安全提示，需要对IE浏览器做如下设置： 打开一个页面文件工具internet选项高级允许活动内容在我的计算机上的文件中运行和允许来自CD的活动内容在我的计算机上运行 选中。此选项仅适用于windowsxp操作系统。 3、应用注释符号验证浏览器是否支持JS脚本功能 4、应用标记验证浏览器是否支持JS脚本如果用户不能确定浏览器是否支持JS脚本，可以使用标记进行验证。 如果当前浏览器支持JS脚本，那么该浏览器将会忽略标记之间的任何内容。如果浏览器不支持JS脚本，那么浏览器将会把标记之间的内容显示出来。通过此标记可以提醒浏览者当前使用的浏览器是否支持JS脚本。例： alert(呵呵，您的浏览器支持JS脚本程序！); 您的浏览器不支持JS脚本程序！ 执行结果没有显示内的内容，证明浏览器支持JS脚本。我们将把浏览器进行如下设置：打开一个页面文件工具internet选项安全自定义级别java小程序脚本和活动脚本两个选项设置为禁用状态。执行结果显示了内的内容，证明浏览器不支持JS脚本。当解释程序遇到标记时会终止当前脚本。要显示“”本身，请将“”改写成“>”即可。倘若要使用document.write 输出标记时，需要将闭合标记通过反斜杠进行转义即可，如.七、在PHP调用javascript脚本1、应用JS脚本验证表单元素是否为空在程序开发过程中，经常要应用JS脚本来控制表单提交的数据是否为空，或者判断提交的数据是否符合标准等。例： function check(form1) if(form1.txt_user.value=) alert(用户名不能为空！); form1.txt_user.focus(); return false; if(form1.txt_pwd.value=) alert(密码不能为空！); form1.txt_pwd.focus(); return false; 用户名： 密码： 或者： function check(form1) if(form1.txt_user.value=) alert(用户名不能为空！); form1.txt_user.focus(); return false; if(form1.txt_pwd.value=) alert(密码不能为空！); form1.txt_pwd.focus(); return false; return true; 用户名： 密码： 2、应用JS脚本制作二级导航菜单应用JS脚本不仅可以用来验证表单元素，而且可以制作各式各样的网站导航菜单。例：制作二级导航菜单 *border:0px; margin:0px; padding:0px; .menu a:link,.menu a:visitedcolor:#000000; ; display:block; .menu a:hovercolor:#FFFF00; text-decoration:underline; .boxwidth:761px; height:500px; background-color:#00FF00; margin:0px auto; .menuwidth:761px; height:40px; background-color:#FF6600; .menuullist-style-type:none; .menu lifloat:left; line-height:40px; width:130px; margin-left:20px; margin-right:10px; text-align:center; .submenuwidth:761px; height:50px; background-color:#FFCC99; function Lmenu(value) switch (value) case 新品: var h1= 商品展示| 销售排行榜| 商品查询; submenu.innerHTML=h1; break; case 购物: submenu.innerHTML=添加商品| 移出指定商品|清空购物车| 查询购物车| 填写订单信息; break; case 会员: submenu.innerHTML=注册会员| 修改会员| 账户查询; break; function Lout() submenu.innerHTML=; 新品上架 购物车 会员中心 在线帮助 3、应用JS脚本控制输入字符串的长度在动态网站的开发过程中，经常需要限制用户输入字符串的长度。这样能够使网站更加规范化。例：检测用户名的长度 function checkstr(str,digit) var n=0; for(i=0;i255) n+=2; else n+=1; if(ndigit) return true; else return false; function check(form1) if(form1.txt_user.value=) alert(用户名不能为空！); form1.txt_user.focus(); return false; if(checkstr(form1.txt_user.value,6) alert(用户名长度不能超过6个字节，请重新输入。); form1.txt_user.focus(); return false; if(form1.txt_pwd.value=) alert(密码不能为空！); form1.txt_pwd.focus(); return false; alert(恭喜您，数据输入正确！); 用户注册 用户名： 用户名不能超过6个字符 密 码： 四、滑动门特效1漂亮滑动门效果，收集。 body font-size:12px; .normal list-style: none; float: left; padding: 5px 2px 2px 2px; width: 90px; text-align :center ; vertical-align :middle ; cursor :pointer ; border-bottom :solid 1px #9cd9f5; border-right :solid 1px #9cd9f5; background-color: #dee7f5; border-collapse :separate ; .selected list-style: none; float: left; padding: 5px 2px 2px 2px; width: 90px; text-ali