JavaScript浅尝不辄止
学习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浅尝不辄止相关推荐
- 浅尝不辄止系列之试试腾讯云的 TUIRoom(上)
背景 昨天晚上因为和几个朋友约好了,喝了点酒,又不想因为这个断更,白天也实在是没空,就匆忙写了个开头,占了个位置,今天早上赶早赶紧补上~~ 近期公司准备要上一期直播活动,因为之前已经集成过腾讯云的 T ...
- 浅尝不辄止系列之试试腾讯云的 TUIRoom(下)
书接上回<浅尝不辄止系列之试试腾讯云的 TUIRoom(上)> 前提 上篇主要聊了一下集成 TURRoom 的前端部分. 涉及到的代码不是很多,主要是思路,因为我觉得思路和画面感对程序员来 ...
- 浅尝则止 - SciPy科学计算
21. 浅尝则止 - SciPy科学计算 SciPy以NumPy为基础,提供了众多数学.科学.工程计算用的模块,包括但不限于:线性代数.常微分方程求解.信号处理.图像处理.稀疏矩阵处理. 本章适合那些 ...
- python 三维凸包_浅尝则止 - SciPy科学计算 in Python
本文节选自作者的<Python编程基础及应用>视频教程.Python编程基础及应用_哔哩哔哩 (゜-゜)つロ 干杯~-bilibiliwww.bilibili.com 21. 浅尝则止 ...
- 浅尝key-value数据库(三)——MongoDB的分布式
浅尝key-value数据库(三)--MongoDB的分布式 测试了单机MongoDB的随机读和写入性能,这一节来讲一讲MongoDB的分布式. MongoDB的分布式分成两种,一种是Replicat ...
- 论文浅尝 | 利用多语言 wordnet 上随机游走实现双语 embeddings
论文笔记整理:谭亦鸣,东南大学博士生,研究方向为知识图谱问答. 来源:Knowledge Based System 链接:https://www.sciencedirect.com/science/a ...
- 论文浅尝 | 图神经网络综述:方法及应用
论文链接:https://arxiv.org/pdf/1812.08434.pdf GNN相关论文列表链接:https://github.com/thunlp/GNNPapers 近日,清华刘知远老师 ...
- 论文浅尝 | 当知识图谱遇上零样本学习——零样本学习综述
随着监督学习在机器学习领域取得的巨大发展,如何减少人工在样本方面的处理工作,以及如何使模型快速适应层出不穷的新样本,成为亟待解决的问题.零样本学习(Zero-Shot Learning, ZSL)的提 ...
- 论文浅尝 | 近期论文精选
本文转载自公众号 PaperWeekly, 对我们近期的论文浅尝进行了精选整理并附上了相应的源码链接,感谢 PaperWeekly! TheWebConf 2018 ■ 链接 | https://ww ...
最新文章
- markdown--入门
- 汇编语言 向内存0:200~0:23f依次传送数据0~63(3fh)
- 从实验室到山寨,技术发展的普遍道路
- /etc/services
- Libre OJ 「BalticOI 2013」非回文数 数位dp
- CenterNet:目标即点(代码已开源)
- spark内核揭秘-06-TaskSceduler启动源码解析初体验
- 初识C语言学习笔记 入门
- 团队项目(一)(江山代有才人秃队)
- java 集成 pageoffice 实现 word 文档的在线编辑以及流转
- maven引用公共包_maven怎么 引入(或引用/使用) 自定义(或本地/第三方) jar的三种方式 图文教程-Fun言...
- 成功项目策划“四要素”
- Anomaly Detection in Quasi-Periodic TimeSeries Based on Automatic Data Segmentation and Attentional
- Plugin JavaDoc was not installed: Cannot download 'https://plugins.jetbrains.com/pluginManager/?acti
- 简历制作 | 保研 | 考研复试
- time_expire时间过短,刷卡至少1分钟,其他5分钟
- 小高考三门计算机能报大专吗,美术生小高考的要求吗
- 京东商城CEO刘强东:赢在“后台”
- 【历史上的今天】6 月 11 日:蒙特卡罗方法的共同发明者出生;谷歌推出 Google 地球;谷歌收购 Waze
- 用爱思助手自签名ipa文件成功后安装失败
热门文章
- Qiko现代简单随意字体 for mac
- python实现客户端和服务端的文件夹传输
- ln怎么用计算机求,excel怎么算ln_如何使用excel做数据ln换算_excel怎么求ln
- 什么蓝牙耳机佩戴舒服?佩戴感舒适的蓝牙耳机推荐
- 开源作者突然去世,后面要怎么整?
- 你的计算机无法识别扫描仪,计算机无法检测到照相机或扫描仪,怎么处理呢?
- Python爬虫【批量】抓取某动态壁纸网站的视频
- 计算机键盘字母排列知识,电脑知识:键盘上的26个字母为何这样排列,你知道吗?...
- 弱引用理解及使用场景
- 【数据结构】带头节点双向循环链表