Hello,world!
今天我们学习JSP以及JS相关内容!!!
宝剑锋从磨砺出,梅花香自苦寒来。
——《警世贤文》
🏔关于JSP:
JSP(全称JavaServer Pages)是由Sun Microsystems公司主导创建的一种动态网页技术标准。JSP部署于网络服务器上,可以响应客户端发送的请求,并根据请求内容动态地生成HTML、XML或其他格式文档的Web网页,然后返回给请求者。JSP技术以Java语言作为脚本语言,为用户的HTTP请求提供服务,并能与服务器上的其它Java程序共同处理复杂的业务需求。
是一种基于Java语言的Web开发,三个特点:安全,跨平台,动态。
Model 1:.jsp(页面)+JavaBean (数据存取)
Model 2: M(JavaBean)V(JSP)C(Servlet)模式
🏔 关于JS:
JavaScript(简称js) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。
相关内容:
JS是JavaScript的缩写,是客户端脚本语言,开发WEB程序的辅助语言之一,虽然说是辅助,但是其重要性也是很高的。
JSP是一种技术。通过JAVA语言实现的。
它们之间的关系:如果你用JSP开发WEB程序,那么其开发过程中使用的主要语言就是JAVA,JS是辅助语言。可以理解为主次关系。主:JAVA,次:JS
执行过程:JSP先翻译,翻译成Servlet执行
如: test.jsp 要变成 test_jsp.java 然后编译成 test_jsp.class
而 test_jsp.java 本身就是一个servlet.
所以 jsp只是servlet的一个变种,方便书写html内容才出现的。
servlet是根本,所有jsp能做的,servlet全能做。
JS:是一种基于对象的客户端脚本语言。目的是解决服务器端语言。
如:Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
JS可以直接嵌入到html代码中进行解析执行,
非常简单易学,可以产生很多动态的效果。
形象比较:JS是在客户端执行的,需要浏览器支持JavaScript。JSP是在服务器端执行的,
需要服务器上部署支持Servlet的服务器程序。JS代码能够直接从服务器
上download得到,对外是可见的,jsp(和翻译后的Servlet代码)是对外不可见的。
🐒设计要求:
(1)网站页面数量不少于3个,文件命名规范,网站结构要求层次清楚,目录结构清晰,代码缩进规整。(4分)
(2)采用HTML结构标记(或JSP标记 / JavaScript代码等)+CSS进行整体布局定位。(5分)
(3)网站首页栏目数量不能少于3个,各栏目要能正确链接到相应栏目子页面,同时各栏目页面也能正确返回到网站首页。(3分)
(4)网站页面标题、图片图标等要符合网站主题。(2分)
(5)网站页面中要含有表单(form)。(3分)
(6)网站使用if语句进行奖学金判定。(4分)
(7)网站存在JSP与JS交互。(3分)
(8)网站内容应具有原创性,内容充实。(7分)
(9)网站整体色系符合视觉习惯,布局合理美观。(4分)
————————————————
🐒主页——index.jsp
此页面主要使用了form表单,sublime按钮,if语句,以及function函数,包含输入用户名,三科成绩等内容。如下如所示:
根据图片可以看出,我们的index页面内容非常简单,但是话说,麻雀虽小五脏俱全,我们编写还是比较完整的。话不多说,上代码!
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="UTF-8"%> <%@ page import="java.util.*"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Insert title here</title> <!-- 在JSP中添加javascript代码,防止用户空提交 --> <script language="javascript"> function checkValidate() { //判断用户名是否为空 if (document.myform.username.value == "" || document.myform.username.value == null) { window.alert("用户名不能为空!!!"); return false; } //判断A01是否为空 if (document.myform.a01.value == "" || document.myform.a01.value == null || document.myform.a02.value == "" || document.myform.a02.value == null || document.myform.a03.value == "" || document.myform.a03.value == null) { window.alert("输入成绩不能为空!!!"); return false; } } </script> </head> <body> <form method="get" name="myform" action="Grade_a.jsp"> <p> 请输入你的姓名:</p> <p> 姓名: <input type="text" placeholder="请输入你的姓名" name="username"> </p> <p> 请分别输入你的成绩:</p> <p> A01: <input type="number" placeholder="请输入A01课程成绩" name="a01"> </p> <p> A02: <input type="number" placeholder="请输入A02课程成绩" name="a02"> </p> <p> A03: <input type="number" placeholder="请输入A03课程成绩" name="a03"> </p> <p> <input type="submit" value="提交" name="button1" onclick="return checkValidate();" /> <input type="reset" name="Reset" value="重置" /> </p> </form> </body> </html>
🐒分页——G_Error.jsp
此页面主要是输出了用户输入错误成绩时的提示信息,在if语句判断后进行跳转,如下图:
如上图,此页面内容比较简单。上代码!
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <% out.println("同学你好,你输入的成绩存在不实信息,请认真核对!"); %> <a href="index.jsp">返回主页面</a> </body> </html>
只有一个超链接,一个提示信息。大家可以和根据自己的题目要求进行相应更改。
🐒分页—— Grade_a.jsp
这将是我们的最后一个页面了,此页面内容主要是输出我们奖学金的等级评定,如一等,二等。
上代码!
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <% String username=request.getParameter("username"); String a01 = request.getParameter("a01"); String a02 = request.getParameter("a02"); String a03 = request.getParameter("a03"); int A01=Integer.parseInt(a01); int A02=Integer.parseInt(a02); int A03=Integer.parseInt(a03); int sum=A01+A02+A03; out.println(username+"_同学。你好,你的总成绩为: "+sum+"分"+"<br/>"); if(sum>270&&sum<=300){ out.println("恭喜你获得一等奖学金!🎇"); } else if(sum>250&&sum<=270){ out.println("恭喜你获得二等奖学金!☀"); } else if(sum>230&&sum<=250){ out.println("恭喜你获得三等奖学金!🌙"); } else if(sum>180&&sum<=230){ out.println("恭喜你成绩合格,准予毕业!"); } else if(sum>=0&&sum<=180){ out.println("成绩不及格,请努力学习!"); } else{ %> <jsp:forward page="G_Error.jsp"/> <% } %> <a href="index.jsp">返回主页面</a> </body> </html>
可以看出,此页面代码也是很简单的,都是基本内容,if语句,数据的接收等。
至此,我们的此篇博客就此结束了,写此篇内容的初衷是在初次尝试了在JSP页面中加入JavaScrpt代码,成功!但是,相应的,此篇博客内容相对简单,如果各位大佬发现内容错误,希望指出🙇!共同努力,后续还会继续更新!
部分内容来源 : javascript、JSP、JS有什么区别和联系_百度知道 (baidu.com)
JavaScript_百度百科 (baidu.com)