学习java web,则虽然小编是后台忠实程序猿,但是再刚开始练习时也是不得不接触js,因为
作为一个人的学习者,没了前端何来测试后台,所以我们刚开始入门从js开始,实现几个也许我们早已从java学过的几个知识,知识几个语法规范和几个功能,而且小编相信,有着深厚的java功底的你,这一章会很轻松的过去,毕竟我们不用和繁琐的HTML,CSS打交道,也许它们并不繁琐,对于后台工程师来说,小编确实比较厌烦,调用一个任性肆意家伙的话,我讨厌一切和H5有关的任何东西,看看还是可以的。
现在我们用eclipse建立web project,在index里面动手脚
什么!!!index,对的就是自动生成的index.jsp,什么!!里面的东西完全看不懂,不知何物?没关系我们全部删掉,让它成为一个空白页,这样是不是看起来清爽多了?对的,一切从空白开始,现在我们来做个简单的乘法,并用弹出警告窗来显示结果,代码只有几行,有java基础完全能够看懂:
<script language="javascript"> var price=992; //定义商品单价 var number=10; //定义商品数量 var sum=price*number; //计算商品金额 alert(sum); //显示商品金额 </script>
这里</script>已经申明了接下来我要使用js啦,快把它包起来
这里我们使用alert(sum)显示商品价格
然后启动tomcat运行,这里需要把tomcat配置好,具体教程自己网上搜,当然如果是跟我一样用Myeclipse就可以不用了,这款软件自带。
然后我们看下网页自动效果:
这个价钱算出来了,然后我们加上一句太贵了。代码就成了这个样子:
<script language="javascript"> var price=992; //定义商品单价 var number=10; //定义商品数量 var sum=price*number; //计算商品金额 alert(sum); //显示商品金额 alert("too expensive"); </script>
然后启动run as application server,出来效果是:
然后我们点击一下确定,反馈一下,商品太贵啦!!!!!
再次弹出就是这个效果了。
接下来我们稍微对登录界面做一下小小的尝试,这时候我就和小伙伴合作了,我让那位小伙伴负责H5部分,我负责处理事件响应,其实根本上我们都在一个界面写,只不过我写js部分,他写html部分,然后商量好各自的命名规范,其实这个时候你们就会觉得这种方式的负责了,到后面我们学习MVC模式就会完美解决这个问题现在先痛苦吧:
具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link href="style.css" rel="stylesheet"> <script language="javascript"> function check() { if (form1.user.value == "") { alert("please input the username"); form1.user.focus(); return; } else if (form1.pwd.value = "") { alert("please input the password"); } else { form1.submit; } } </script> </head> <body> <form name="form1" method="post" action=" "> user:<input name="user" type="text" id="user" maxlength="20"> password:<input name="pwd" type="password" id="pwd" maxlength="20"> <input name="button" type="button" class="btn_grey" value="login" onClick="check()"> <input name="reset" type="reset" class="btn_grey" value="reset" > </form> </body> </html>
其中
红色部分是归我管的,黑色号html部分h5是归队友管的,这里有个初步的分工,虽然前端后台还不算明显。
显示效果如下:
点击login后提示没有输入账户名
到这里简单的一个登陆判断界面完成小伙伴可以玩玩更加复杂的啦
opps:因为还不支持中文,下次讲如何解决中文显示问题
相关推荐
JavaScript 全选全不选 JavaScript 全选全不选 JavaScript 全选全不选 JavaScript 全选全不选 JavaScript 全选全不选 JavaScript 全选全不选 JavaScript 全选全不选
javascript特效javascript特效javascript特效javascript特效javascript特效javascript特效javascript特效javascript特效
本书是一本全面、深入介绍JavaScript语言的学习指南。本书共分四个部分,第1部分帮助读者快速入手,掌握基本的JavaScript编程要点;第2部分介绍JavaScript的发展和技术背景;第3部分深入探索JavaScript,介绍了语法...
JavaScript\JavaScript教程JavaScript\JavaScript教程JavaScript\JavaScript教程JavaScript\JavaScript教程
javascript效果javascript效果javascript效果javascript效果
javascript帮助文档javascript帮助文档javascript帮助文档javascript帮助文档javascript帮助文档javascript帮助文档javascript帮助文档javascript帮助文档javascript帮助文档javascript帮助文档
javascript笔记javascript笔记javascript笔记
ie不执行javascript修复ie不执行javascript修复ie不执行javascript修复 当IE不能正常运行时,打开该工具就可以了,自动修复
Author David Herman, with his years of experience on Ecma’s JavaScript standardization committee, illuminates the language’s inner workings as never before—helping you take full advantage of ...
javascriptAPI,javascript参考资料,javascript
JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)...
JavaScript简单教材JavaScript简单教材JavaScript简单教材JavaScript简单教材JavaScript简单教材JavaScript简单教材JavaScript简单教材JavaScript简单教材JavaScript简单教材
《JavaScript权威指南(第6版)》主要讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增...
JavaScript课堂习题答案JavaScript课堂习题答案JavaScript课堂习题答案JavaScript课堂习题答案JavaScript课堂习题答案JavaScript课堂习题答案JavaScript课堂习题答案JavaScript课堂习题答案JavaScript课堂习题答案...
JavaScript5,JavaScript 5文档,JavaScript 5资料
在不支持 JavaScript 的浏览器中将不执行相关代码 3。浏览器不支持的时候显示 <noscript> Hello to the non-JavaScript browser. 4 链接外部脚本文件 ”JavaScript” src="/”filename.js"”> 5 注释脚本
JavaScript 语法集锦 JavaScript语法 JavaScript语法集锦 JavaScript
中文名: JavaScript权威指南 (第6版) 原名: JavaScript: The Definitive Guide: Activate Your Web Pages, 6th edition 作者: David Flanagan 版本: 英文文字版-pdf/EPUB + 完整书中源代码 出版社: O'Reilly 书号: ...
JavaScript手册 JavaScript手册 JavaScript手册
本实例是关于JavaScript 浏览页面窗口不关闭的问题。 很实用,在J2EE中用的很多。