WEB程序设计之javascript

关注

原创最新推荐文章于 2026-10-26 19:48:31 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

《Java Web程序设计》实验报告五 Java Script学习汇报本文介绍了一个关于JavaScript及相关技术的实验项目。实验内容包括了解JavaScript的背景、发展历史与特点，研究ECMAScript标准与JavaScript的关系，比较ES5与ES6特性差异，探讨Node.js、TypeScript与jQuery的概念及其联系。实验采用分组协作，4名成员分工查阅资料并汇总分析，解决了编码乱码、服务器端口冲突等问题。最终完成了JavaScript技术体系的梳理，深化了对JavaScript语言及其生态的理解，掌握了相关技术的基本概念与应用方法。阅读详情

WEB程序设计之javascript

一、javascript的使用

1、在页面中放置javascript脚本方法

1）将javascript脚本放置在<script> 与 </script> 标签之间，script标签可以放置在页面任何地方，但通常我们会放置在页头或页脚中。

2）外部javascript：将脚本保存为单独的javascript文件（扩展名为js），然后通过<script src='js'文件位置></script>来将脚本引入页面。要注意外部脚本不能包含 <script> 标签

2、注意事项：

1）每句后面使用分号结束

2）大小写敏感

二、变量

1、声明

javascript变量可以不声明直接使用，但是使用前先声明，将是一个良好的习惯。

var username; //声明后未赋值的变量，其值为undifined

如果重复声明变量，该变量的值不会丢失

2、变量作用域

全局变量：在函数外声明的变量是全局变量或在函数内没有用var声明的变量，网页上的所有脚本和函数都能访问它。

局部变量：在函数内声明的变量(使用var)是局部变量，只能在函数内部访问它。

3、变量的生存期

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

4、运算符

+ 字符串连接，如果把数字与字符串相加，结果将成为字符串。

==等于，值相等即为true

===全等，值相等，类型相同才为true

五、数据类型

javascript是弱类型语言，变量具有动态类型

1、undefined：表示变量不含有值，未声明的变量或者用var声明但未初始化的变量

2、null：空，可以将变量的值设置为null来清空变量

3、数字：isNaN()判断是否为数值、parseInt()、parseFloat()

4、布尔：true（非空字符串、非零数值、非空对象）、false（空字符串、0、null和undefined）

5、字符串：使用单引号或双引号包括

六、String对象

属性：

length：字符串长度

方法：

charAt(index)：返回指定位置的字符

indexOf(searchvalue,fromindex)：返回某个指定的字符串值在字符串中首次出现的位置，未找到返回-1

lastIndexOf(searchvalue,fromindex)：反向检索

replace(regexp/substr,replacement)：在字符串中用一些字符替换另一些字符

split(separator,howmany)：把一个字符串分割成字符串数组

substr(start,length)：在字符串中抽取从 start 下标开始的指定数目的字符

toLowerCase()：把字符串转换为小写

toUpperCase()：把字符串转换为小写

七、数组

1）创建数组

<span style="font-family:FangSong_GB2312;font-size:18px;">    var city=new Array();
    city[0]='北京';
    city[1]='上海';
    city[2]='广州';</span>

<span style="font-family:FangSong_GB2312;font-size:18px;">var city=new Array('北京','上海','广州');

</span>

<span style="font-family:FangSong_GB2312;font-size:18px;">    var city=['北京','上海','广州'];</span>

2）增加数组元素：使用"[ ]"运算符置顶一个新下标

（1）push() ：在数组末尾添加元素

（2）unshift()：在数组头部添加元素

（3）concat()：合并数组

3）删除数组元素：delete 数组名[下标];

（1）pop() ：删除并返回数组最后一个元素

（2）shift()：删除并返回数组第一个元素

3）遍历数组

（1）for(var i=0;i<arr.length;i++){}

（2）for(var 数组元素变量 in 数组)

4）获取数组片段

slice(start,end)：从数组中返回选定的元素

splice() ：方法向/从数组中添加/删除项目，然后返回被删除的项目

删除任意数量的项：splice(要删除的起始下标,要删除的项数)

在指定位置插入指定的项：splice(起始下标, 0 , 要插入的项)

替换任意数量的项：splice(起始下标, 要删除的项数 , 要插入的项)

5）其他

join(separator)：把数组中的所有元素放入一个字符串

reverse() ：颠倒数组中元素的顺序

sort(sortby)：方法用于对数组的元素进行排序。

八、对象

<span style="font-family:FangSong_GB2312;font-size:18px;">var stu={id:"20120101", name:"胡悦"};</span>

九、javascript的使用

1、在页面中放置javascript脚本方法

1）将javascript脚本放置在<script> 与 </script> 标签之间，script标签可以放置在页面任何地方，但通常我们会放置在页头或页脚中。

2、注意事项：

1）每句后面使用分号结束

2）大小写敏感

十、网页特殊显示效果制作

1）改变HTML内容

        var header=document.getElementById('header');
        header.innerHTML='新内容'

2）改变HTML属性

       var img=document.getElementById('image');
       img.src='new.jpg';

3）改变HTML样式

header.style.color='blue';

十一、浏览器对象的调用

window.open('http://www.baidu.com');

十二、浏览器事件的触发

   var header=document.getElementById('header');
   header.onclick=function(){alert('你好!');}
   header.onmouseover=function(){header.innerHTML='鼠标移入!';}
   header.onmouseout=function(){header.innerHTML='鼠标移出!';}

十三、表单验证：

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

被 JavaScript 验证的这些典型的表单数据有：

1）用户是否已填写表单中的必填项目？

2）用户输入的邮件地址是否合法？

3）用户是否在数据域 (numeric field) 中输入了文本？

1、在表单的onsubmit事件中验证

<form name="myform" action="abc.asp" method="post" onsubmit="return checkdata()">
    <label for="username">
        <input type="text" name="username" id="username" />
    </label>
    <input type="submit" value="提交">
    <input type="button" value="提交2" onclick='checkdata2()'>
</form>
<script>
    function checkdata(){
        with(document.myform){
            if (username.value.length==0) {
                alert('用户名不能为空！');
                username.focus();
                return false;
            }else{
                return true;
            }
        }
        
    }
</script>

2、在按钮的click事件中进行验证，验证通过后使用form.submit()发送

<input type="button" value="提交2" onclick='checkdata2()'>
 
    function checkdata2(){
        with(document.myform){
            if (username.value.length==0) {
                alert('用户名不能为空！');
                username.focus();
                return false;
            }else{
                myform.submit();
            }
        }
    }

常用验证：

1、必填（或必选）项目

 //if(value==null||value=="")
 if(value.length==0){
    alert('必须输入')；
 }

2、长度验证

if(value.length>50){
    alert('不能超过50个字符');
}

3、是否全是数字

function  isNumber(String){ 
    var  Letters  =  "1234567890";  //可以自己增加可输入值
    var  i;
    var  c;
    for(  i  =  0;  i  <  String.length;  i++){ 
        c  =  String.charAt(  i  );
        if  (Letters.indexOf(  c  )  <  0)
        return  false;
    }
    return  true;
}

4、email验证

function isEmail(value){
    apos=value.indexOf("@")
    dotpos=value.lastIndexOf(".")
    if (apos<1||dotpos-apos<2) {
        return false}
    else {return true}
}