JAVA Web入门之脚本语言javaScript的详细介绍及实战

最新推荐文章于 2023-03-01 18:27:22 发布

showswoller

最新推荐文章于 2023-03-01 18:27:22 发布

阅读量1.1k

点赞数 7

分类专栏： JAVA Web 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/jiebaoshayebuhui/article/details/127086976

版权

JAVA Web 专栏收录该内容

34 篇文章 3 订阅

订阅专栏

创作不易觉得有帮助请点赞关注收藏~~~

JavaScript与JAVA在语法上有些相似但也不完全相同主要应用与web开发中

下面有几点注意事项

1:javascript区分大小写这一点与JAVA是相同的

2：与java不同 javascript每行结尾的分号可有可无如果没有分号编译器会自动添加

3：变量是弱类型的即定义变量时用 var变量初始化为任意的值不用非要int float 等等

4：使用大括号标记代码块

5: 注释与java和C++相同

其余运算符、循环语句等等的使用与java c++基本相同

6：函数的定义 函数由关键字function 函数名加一组参数等等组成语法如下

function name(参数...){

statements;

return expressions;

}

函数调用与java和C++类似

7：事件处理 JavaScript是事件驱动的 即可以以事件驱动的方式直接对客户端的输入作出相应而不用经过服务器端。常用事件如下

onabort 对象载入被中断时触发

onblur 元素或窗口本身失去焦点时触发

onclick 单机鼠标左键时触发

ondblclick 双击鼠标左键时触发

onfocus 任何元素或窗口获得焦点时触发

onkeydown 键盘上的按键被按下

在JavaScript事件处理程序的调用代码如下首先需要获得要处理对象的引用然后将要执行的处理函数赋值给对应的事件

<input name="bt_save" type="button" value="保存">
 <script language="javascript">
 var b_save=document.getElementByld("bt_save");
b_save.onclick=function(){
 alert("单击了保存按钮");
}
</script>

8:常用对象

window对象即浏览器窗口对象是一个全局对象是所有对象的顶级对象直接使用对象名.成员的格式来访问它的属性或方法常用属性如下

document 对窗口或框架中含有文档的Document对象的只读引用

frames 表示当前窗口中所有frame对象的集合

location 用于代表窗口或框架的location对象

length 窗口或框架包含的框架个数

name 用于存放窗口对象的名称

常用方法如下

alert() 弹出一个警告对话框

confirm() 显示一个确认对话框单击确认按钮时返回true 否则false

prompt() 弹出一个提示对话框并要求输入一个简单的字符串

close()关闭窗口

open()打开一个新窗口

setTimeout()在经过指定的时间后执行代码

实战效果如下

代码如下


<html>
    <head>
          <title>JavaScript脚本</title>
    </head>
    <body>
         <b>
             应用记事本编写HTML代码
          </b>
     </body>
<form name="form1" method="post" action="">
用户名：<input name="user" type="text" id="user">
密码:<input name="pwd" type="text" id="pwd">
<input name="button" type="button" class="btn_grey" value="登录">
<input name="submit2" type="reset" class="btn_grey" value="重置">
</form>
<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>
<input name="Button" type="button" class="btn_grey" value="登录" onclick="check()">
<script language="javascript">
var now=new Date();
var day=new.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;
case 7:
week="星期日";
break;
}
document.write("今天是"+week);
alert("今天是"+week);
</script>

<form name="form2" method="post" action="">
请输入真实姓名:<input name="realName" type="text" id="realName" size="40">
<br><br>
<input name="Button" type="button" class="btn_grey"  onclick="checkRealName()" value="检测">
</form>

<input name="Button" type="button" class="btn_grey"  onclick="checkRealName()" value="检测">
<script language="javascript">
function checkRealName(){
var str=from2.realName.value;
if(srt==""){
alert("请输入真实姓名");form2.realName.focus();return;
}
else{
var objExp=/[\u4E00-\u9FA5]{2,}/;
if(objExp.test(str==true){
alert("您输入的真实姓名正确");
}
else{
alert("您输入的真实姓名不正确)";
}
}
}
</script>














</html>

第二张图片代码如下


<html>
    <head>
          <title>用户注册页面</title>
    </head>
    <form id="form4"  method="post" aciton="">
<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="提交" onclick="mysubmit()"/>
</label>
<label>
<input type="reset" name="Submit2" value="重置"/>
</label>
<label>
<input type="button" name="Submit3" value="关闭" onclick="window.close()"/>
</label></td>
</tr>
</table>
<label><br/>
</label>
</form


</html>

8：包括还有String对象 方法与JAVA 和C++中类似此处不再赘述

9：Date对象 用于对日期和时间进行操作创建Date对象语法如下

date=new Date()

10:DOM技术 DOM是文档对象模型的简称是表示文档和访问文档的API

在DOM中文档的层次结构以树形表示树是倒立的树根在上枝叶在下树的结点表示文档中的内容

DOM树的根节点是个Document对象

对于文档的操作最常见的是遍历文档下列代码是遍历JSP文档并且获取该文档中的全部标记以及标记总数

jsp文件如下

<%@page language="java" pageEncoding="GBK"%>
<html>
<head>
<title> 一个简单的文档</title>
</head>
欢迎访问明日科技网站
<br>
<a href="http://www.mingribook.com">http://www.mingribook.com</a>
</body>
</html>

JavaScript代码如下


<html>
<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
<body onload="show()">

</html>

获取文档中的指定元素可以通过

1：getElementId通过id属性

2：getElementByName和name属性

操作文档通过以下方法可以操作文档

insertbefore() 在现有节点之前插入新节点

replaceChild() 将子节点列表中的子节点换成新节点

removeChild() 将子节点删除

hasChildNodes() 返回一个布尔值表示节点是否有子节点

cloneNode() 返回这个节点的副本

创作不易觉得有帮助请点赞关注收藏~~~