JSP与JavaScript交互之(一)成绩信息输入的奖学金评定

简介: JSP与JavaScript交互之(一)成绩信息输入的奖学金评定

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>&nbsp;请输入你的姓名:</p>
    <p>
      &nbsp;姓名: <input type="text" placeholder="请输入你的姓名" name="username">
    </p>
    <p>&nbsp;请分别输入你的成绩:</p>
    <p>
      &nbsp;A01: <input type="number" placeholder="请输入A01课程成绩" name="a01">
    </p>
    <p>
      &nbsp;A02: <input type="number" placeholder="请输入A02课程成绩" name="a02">
    </p>
    <p>
      &nbsp;A03: <input type="number" placeholder="请输入A03课程成绩" name="a03">
    </p>
    <p>
      &nbsp;<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)

相关文章
|
4月前
|
Java 数据安全/隐私保护
JavaBean组件<jsp:forward>动作<jsp:param>动作登录页面输入用户名和密码,然后进入检查页面判断是否符合要求,符合要求跳转到成功界面,不符合要求返回登录界面,显示错误信息。
该博客文章通过JavaBean组件和JSP动作元素`<jsp:forward>`与`<jsp:param>`的使用示例,演示了用户登录流程,包括登录信息的提交、验证以及根据验证结果进行的页面跳转。
JavaBean组件<jsp:forward>动作<jsp:param>动作登录页面输入用户名和密码,然后进入检查页面判断是否符合要求,符合要求跳转到成功界面,不符合要求返回登录界面,显示错误信息。
|
4月前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
50 5
|
4月前
|
存储 前端开发 JavaScript
javascript 异常问题之为自定义异常提供丰富的上下文信息如何实现
javascript 异常问题之为自定义异常提供丰富的上下文信息如何实现
|
1月前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
46 4
|
2月前
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式(行内、内部、外部)和基础语法,包括变量、数据类型、运算符、数组、函数和对象等内容。同时,文章还详细讲解了 jQuery 的基本语法和常用方法,如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等,以及如何插入和删除元素。通过示例代码和图解,帮助读者更好地理解和应用这些知识。
27 1
【JavaScript】网页交互的灵魂舞者
|
2月前
|
机器学习/深度学习 自然语言处理 JavaScript
信息论、机器学习的核心概念:熵、KL散度、JS散度和Renyi散度的深度解析及应用
在信息论、机器学习和统计学领域中,KL散度(Kullback-Leibler散度)是量化概率分布差异的关键概念。本文深入探讨了KL散度及其相关概念,包括Jensen-Shannon散度和Renyi散度。KL散度用于衡量两个概率分布之间的差异,而Jensen-Shannon散度则提供了一种对称的度量方式。Renyi散度通过可调参数α,提供了更灵活的散度度量。这些概念不仅在理论研究中至关重要,在实际应用中也广泛用于数据压缩、变分自编码器、强化学习等领域。通过分析电子商务中的数据漂移实例,展示了这些散度指标在捕捉数据分布变化方面的独特优势,为企业提供了数据驱动的决策支持。
101 2
信息论、机器学习的核心概念:熵、KL散度、JS散度和Renyi散度的深度解析及应用
|
2月前
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
64 1
|
2月前
|
前端开发 JavaScript Go
JS基础:输出信息的5种方式详解
JS基础:输出信息的5种方式详解
37 1
|
2月前
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
41 0
|
4月前
|
存储 Java
JSP中实现留言页面的编写并将留言信息展示出来
这篇文章介绍了如何在JSP中编写留言页面,并通过JavaBean类存储用户留言信息,同时展示了留言信息的展示方法。
JSP中实现留言页面的编写并将留言信息展示出来