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

迈不过友情╰ 2023-09-30 15:39 7阅读 0赞

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

**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()在经过指定的时间后执行代码**

**实战效果如下**

![6bf04264152945ce8279abb4d45b13d1.png][]

![a796b797a4c8426fa4ac8df05ece017f.png][]

**代码如下**

<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() 返回这个节点的副本**

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

[6bf04264152945ce8279abb4d45b13d1.png]: https://img-blog.csdnimg.cn/6bf04264152945ce8279abb4d45b13d1.png
[a796b797a4c8426fa4ac8df05ece017f.png]: https://img-blog.csdnimg.cn/a796b797a4c8426fa4ac8df05ece017f.png