JavaScript语言应用

最新推荐文章于 2021-06-07 10:49:10 发布
最新推荐文章于 2021-06-07 10:49:10 发布
阅读量365 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38896466/article/details/75090133
版权

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>应用算术计算符计算商品金额</title>
<script language="javascript">
var price=992;
var number=10;
var sum=price*number;
alert(sum);
</script>
</head>
<body>


</body>
</html>

JavaScript语法的基本应用,应用算术运算符来进行计算，然后利用alret方法将结果用提示对话框显示出来

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

a>b?a:b  如果a>b为真，返回a的值，如果a>b为假，返回b的值

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户登录</title>
<script language="javascript">
function check(){
if(form1.user.value==""){//判断用户名是否为空
alert("请输入用户名！");form1.user.focus();return;
}else if(form1.pwd.value==""){//判断密码是否为空
alert("请输入密码！");form1.pwd.focus();return;
}else{
form1.submit();//提交表单
}
}
</script>
</head>
<body>
  <center>
  <form name="form1" method="post" action="">
    <table width="221" border="1" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF" bordercolordark="#CCCCCC" bordercolorlight="#FFFFFF">
      <tr>
        <td height="30" colspan="2" bgcolor="#eeeeee">用户登录</td>
      </tr>
      <tr>
        <td width="59" height="30">用户名：</td>
        <td width="162"><input name="user" type="text" id="user"></td>
      </tr>
      <tr>
        <td height="30">密&nbsp;&nbsp;码：</td>
        <td><input name="pwd" type="text" id="pwd"></td>
      </tr>
      <tr>
        <td height="30" colspan="2" align="center"><input name="Button" type="button" class="btn_grey" value="登录" onClick="check()">
          &nbsp;
        <input name="Submit2" type="reset" class="btn_grey" value="重置"></td>
      </tr>
    </table>
  </form>
</center>
</body>
</html>

使用JavaScript语法，应用if语句编写函数check()，用来验证用户登录吧信息是否错误或不规范

method="post"：表单数据以post方法传递到服务器，get方法是从服务器获取数据

action：表示向何处发送表单数据

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>应用switch语句输出今天是星期几</title>
<script language="javascript">
var now=new Date(); //获取系统日期
var day=now.getDay(); //获取星期
var week;
switch (day){
    case 1:
        week="星期一";
break;
case 2:
        week="星期二";
break;
case 3:
        week="星期三";
break;
case 4:
        week="星期四";
break;
case 5:
        week="星期五";
break;
case 6:
        week="星期六";
break;
default:
        week="星期日";
  break;
}
document.write("今天是"+week); //输出中文的星期
</script>
</head>
<body>
</body>
</html>

获取系统日期和系统星期来使用switch语句输出今天是星期几，document.write来输出具体的值

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>从身份证号码中获取出生日期</title>
<script language="javascript">
function checkRealName(){
var str=form1.realName.value;
if(str==""){
alert("请输入真实姓名！");form1.realName.focus();return;
}else{
var objExp=/[\u4E00-\u9FA5]{2,}/;
if(objExp.test(str)==true){
alert("您输入的真实姓名正确！");
}else{
alert("您输入的真实姓名不正确！");
}
}
}
</script>
  </head>
  
  <body>
  <center>
  <form name="form1" method="post" action="">
  请输入真实姓名：<input name="realName" type="text" id="realName">
  <input name="Button" type="button" onClick="checkRealName()" value="检测">
  </form> 
  </center>  
</body>
</html>

通用function关键字构造函数来检测姓名是否正确

---------------------------------------------------------------------------------------------------------------------------------------------------------------------


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>open方法和close方法</title>
</head>
<body>
<form id="form4" name="form4" method="post" action="">
<label> </label>
<table width="353" height="140" border="0">
<tr>
<td width="104" align="right">用户名：</td>
<td width="233" align="left"><label for="textfield"></label>
<input type="text" name="textfield" id="textfield"/></td>
</tr>
<tr>
<td align="right">密码：</td>
<td align="left"><label for="textfield2"></label>
<input type="password" name="textfield2" id="textfield2"></td>
</tr>
<tr>
<td align="right">确认密码：</td>
<td align="left"><label for="textfield3"></label>
<input type="password" name="textfield3" id="textfield3"/></td>
</tr>
<tr>
<td colspan="2" align="center"><label>
<input type="submit" name="Submit" value="提交" onclicj="mysubmit()"/>
</label>
<label>
<input type="reset" name="Submit2" value="重置"/>
</label>
<label>
<input type="button" name="Submit3" value="关闭" οnclick="window.close()"/>
</label></td>
</tr>
</table>
<label><br></label>
</form>
</body>
</html>

使用window对象的close方法设定关闭按钮的功能

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>去掉字符串中的首尾空格</title>
<script language="javascript">
function trim(){
var str=form1.oldString.value;
if(str==""){
alert("请输入原字符串");
form1.oldString.focus();
return;
}else{
var objExp=/(^\s*)|(\s*$)/g;
str=str.replace(objExp,"");
}
form1.newString.value=str;
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
原字符串：
<textarea name="oldString" cols="40" rows="4"></textarea>
转换后的字符串：
<textarea name="newString" cols="40" rows="4"></textarea>
<input name="Button" type="button" class="btn_grey"  οnclick="trim()" value="去掉字符串的首尾空格">
</form>
</body>
</html>

通过String对象中的replace()方法来去除字符串中的首尾空格

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>实时显示系统时间</title>
<script language="javascript">
function realSysTime(clock){
var now=new Date();
var year=now.getFullYear();
var month=now.getMonth();
var date=now.getDate();
var day=now.getDay();
var hour=now.getHours();
var minu=now.getMinutes();
var sec=now.getSeconds();
month=month+1;
var arr_week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
var week=arr_week[day];
var time=year+"年"+month+"月"+date+"日"+week+""+hour+":"+minu+":"+sec;
clock.innerHTML="当前时间："+time;
}
window.οnlοad=function(){
window.setInterval("realSysTime(clock)",1000);
}
</script>
</head>
<body>
<div id="clock"></div>
</body>
</html>

利用Date对象中的相关方法获取了系统时间和日期，并用realSysTime()函数来实现实时显示的功能

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>一个简单的文档</title>
<script language="javascript">
   var elementList="";
   function getElement(node){
  var total=0;
  if(node.nodeType==1){
  total++;
  elementList=elementList+node.nodeName+"、";
  }
  var childrens=node.childNodes;
  for(var m=node.firstChild;m!=null;m=m.nextSibling){
  total+=getElement(m);
  }
  return total;
   }
   function show(){
  var number=getElement(document);
  elementList=elementList.substring(0,elementList.length-1);
  alert("该文档中包含："+elementList+"等"+number+"个标记！");
  elementList="";
   }
</script>
</head>
<body οnlοad="show()">
        欢迎访问明日科技网站！
   <br>
   
   <a href="http://www.mingribook.com">http://www.mingribook.com</a>
</body>
</html>

通过Node对象的各种方法来遍历文档，再编写show()方法来显示文档中的标记和标记总数

---------------------------------------------------------------------------------------------------------------------------------------------------------------------


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>留言板</title>
<script type="text/javascript">
function addElement(){
var person=document.createTextNode(form1.person.value);
var content=document.createTextNode(form1.content.value);
var td_person=document.createElement("td");
var td_content=document.createElement("td");
var tr=document.createElement("tr");
var tbody=document.createElement("tbody");
td_person.appendChild(person);
td_content.appendChild(content);
tr.appendChild(td_person);
tr.appendChild(td_content);
tbody.appendChild(tr);
var tComment=document.getElementById("comment");
tComment.appendChild(tbody);
form1.person.value="";
form1.content.value="";
}
function deleteFirstE(){
var tComment=document.getElementById("comment");
if(tComment.rows.length>1){
tComment.deleteRow(1);
}
}
function deleteLastE(){
var tComment=document.getElementById("comment");
if(tComment.rows.length>1){
tComment.deleteRow(tComment.rows.length-1);
}
}
</script>
</head>
<body>
<table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#666666" bordercolordark="#FFFFFF" id="comment">
  <tr>
    <td width="18%" height="27%" align="center" bgcolor="#E5BB93">评论人</td>
    <td width="82%" align="center" bgcolor="#E5BB93">评论内容</td>
  </tr>
</table>
<form name="form1" method="post" action="">
评&nbsp论&nbsp人&nbsp：&nbsp<input name="person" type="text" id="person" size="40"><br>
评论内容：<textarea name="content" rows="6" cols="60" id="content"></textarea><br>
<input name="Button" type="button" class="btn_grey" value="发表" onClick="addElement()">
<input name="Reset" type="reset" class="btn_grey" value="重置">
<input name="Button" type="button" class="btn_grey" value="删除第一条评论" οnclick="deleteFirstE()">
<input name="Button" type="button" class="btn_grey" value="删除最后一条评论" οnclick="deleteLastE()">
</form>
</body>
</html>

通过DOM对象提供的Node对象常用方法来实现留言板功能


学习这些语法知识之后我认识到，JavaScript与JavaSE有很多相似的地方，比如他们有一样的语法表达语句和一样的函数定义以及事件处理操作方法，但是JavaScript语法的涵盖量更广，方法更全面


Rotten_man
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript语言开发桌面应用
科技向善
12-21 3495
不得不说JavaScript实在太强大，连电脑桌面应用都能开发出来，下方这个框架叫Electron。 在VS Code新建一个文件夹，然后在文件夹下方再新建一个文件夹，右键文件夹，打开终端，运行以下命令： # 克隆示例项目的仓库 $ git clone https://github.com/electron/electron-quick-start # 进入这个仓库 $ cd electron-...
JavaScript的应用浅谈
lilei2013的专栏
03-31 666
1、JavaScript的正式名称是ECMAScript，JS的应用最为人所熟知 的莫过于在网页前端中开发的应用了，它和HTML、CSS并称为 网页“网页三剑客”，貌似JS的用武之地就只能是在前端开发中作为 一种处理业务逻辑的脚本语言，但是别忘了，JS的出现可不是仅 仅为了网页开发而出现的，今年出现了一个叫CommonJS的非营利 组织，在试图制定一些标准，让JS不仅仅能够用于网页开发，也
JS语法应用
YYYYH520的博客
06-07 107
一、JavaScript 简介： JavaScript 是目前最流行脚本语言，简称 JS； JavaScript 编写在 HTML 页面中，由浏览器负责解释和执行
JS实现多语言方式
weixin_30645617的博客
02-10 909
应用场景： 在不同移动平台（IOS，Android）上，建立一套与HTML页面通讯框架；主要业务逻辑使用HTML开发；想支持多语言开发。 动机： 通过主动发消息的方式，在页面完成初始化前，获取当前语言选项，并且根据该语言选项，调用对应的JS文件（每种语言对应一个JS文件）解析页面。 实现细节： 向本地语言框架发请求获取语言种类； [javascript]v...
JavaScript学习（三十一）——图像处理
苦作舟的空城机
02-16 2646
图像是Web页面的一大组成部分，如果一个网页只存在文本、表格以及单一的颜色来表达是不够的。JavaScript提供了图像处理的功能。 Image对象 在网页中使用图片非常普遍，只需要在HTML文件中使用&lt;img&gt;标记，并将其中的src属性设置为希望显示图片的URL即可。 图片的属性表： 属性 说明 border 表示图片边界宽度，以像素为单位 height ...
JavaScript语言精粹.pdf
02-03
本书通过对JavaScript语言的分析，甄别出好的和坏的特性，从而提取出相对这门语言的整体而言具有更好的可靠性、可读性和可维护性的JavaScript的子集，以便你能用它创建真正可扩展的和高效的代码。 雅虎资深...
编程语言发展史：JavaScript语言的发展和应用
05-21
JavaScript 语言的发展和应用 JavaScript 语言是一种广泛应用于网页前端开发的脚本语言，具有非常重要的意义。JavaScript 语言的发展历程可以分为多个阶段，自从 1995 年发布第一版以来，不断地扩展了语言的功能和...
JavaScript语言与Ajax应用第二版_JavaScript语言与Ajax应用_JavaScript应用_javascri
10-01
JavaScript语言与Ajax应用（第二版）-源代码-董宁-51704128
JavaScript 语言翻译应用程序源代码
最新发布
02-29
语言翻译应用程序是使用 JavaScript 编程语言开发的。这是一个用户友好的应用程序，可以自由定制。它的目的是帮助您将不同语言的单词翻译成您的母语。该应用程序为不同国家/地区提供了多种可用语言。它还包括一个...
JavaScript语言教程
02-06
JavaScript是一种高级的、解释型的编程语言，主要用于Web开发。它被嵌入到HTML中，可以用于创建动态网页、交互式特效和Web应用程序。JavaScript是一门客户端脚本语言，意味着它在用户的浏览器中运行。
web 页面用户名检测
a741504174的博客
05-03 484
<html> <head> <title>用户名合法性检测</title> <script language="javascript"> function checkRealName(){ var str=form1.realName.value; //获取输入的真实姓名 if...
jquery选择器的使用
wu964521的博客
10-23 195
jQuery的工厂函数 jQuery的工厂函数为“ ”,在jQuery中，无论使用那一种类型的选择符都需要从一个“”, 在jQuery中，无论使用那一种类型的选择符都需要从一个“”,在jQuery中，无论使用那一种类型的选择符都需要从一个“”符号和“0 ”开始。 在参数中使用标记名。 $(:"div"): 用于获取文档中全部的<div> 在参数总使用ID $("#usernam...
2019常用的几种编程语言的简单介绍和特点以及应用领域
热门推荐
Hu1510592894的博客
03-26 1万+
常用编程语言的特点以及应用 编程语言有很多种，以下就是对一些常用的编程语言的简单介绍和特点以及他们的一些应用领域。希望对你能有所帮助。
javascript脚本语言学习笔记
weixin_43849954的博客
05-03 448
javascript的引入 1.嵌入javascript：加在head部分。例：弹出欢迎访问网站的对话框 javascript <html> <head><title>在页面中直接嵌入javascript</title></head> <script language="javascript"> var now=new Da...
【JS API】脚本语言-设备控制接口说明-关闭指定 app
lemon5814的博客
10-22 439
设备控制接口说明-关闭指定 app closeApp 原型： closeApp(packageName) 是否支持多设备： 支持 对应的 REST API: 关闭指定包名的app 描述： 通过 App 包名称关闭 App 参数： packageName：字符串，App 包名称，如： com.android.settings 返回值： 整型。0：成功；-1：app 未安装 ...
学习JS语言，先了解JS语言是什么？
CHENxx_zw的博客
08-23 1万+
学习JS语言，先了解JS语言是什么？ 1.什么是js语言？ JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。 2.js语言的组成成分： javascript组成一个完整的 ...
JS是世界上最好的语言—— 使用Electron开发桌面应用(一)
weixin_33670786的博客
05-12 3242
Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个专注于桌面应用的 Node. js 的变体，而不是 Web 服务器。 我的学习动机 前阵子用Node+Vue搞了一个小程序的发布系统，开发期间一直在本地跑直到完成全部功能准备部署到服务器才发现了一个问题，根据官方的api小程序想要发布必须要依赖开发者工具！微信开发者...
网页特效之弹出窗口控制
DOUZHENG8433的博客
12-22 776
1.控制弹出窗口居中显示  主要代码：用于获取当前屏幕的分辨率，进而居中显示 function manage() { var hdc=window.open('Login_M.htm','','width=322,height=206'); width=screen.width; height=screen.height; hdc.moveTo((wid
Javascript语言
03-31
JavaScript是一种用于Web开发的动态脚本语言，由于其能够在网页上实现交互和动态效果而广泛应用于网页开发中。JavaScript可以用于编写客户端脚本，也可以用于编写服务器端脚本。 JavaScript是一种基于对象和事件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值