web程序设计基础实验之JavaScript内置对象与事件驱动

@小冯@

于 2023-08-16 16:24:34 发布

阅读量122

点赞数

分类专栏：本科实验报告文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_52052302/article/details/132322286

版权

本科实验报告专栏收录该内容

63 篇文章 54 订阅

订阅专栏

web程序设计基础实验之 JavaScript内置对象与事件驱动

实验目的和要求
实验内容
主要仪器设备
实验记录
遇到的问题和解决方法
心得体会

实验目的和要求

1．掌握JavaScript技术,基本掌握JavaScript的基础；
2．利用文本编辑器建立JavaScript脚本语言进行简单编程。
3．独立完成实验，根据实验内容书写实验报告书。

实验内容

1．设计页面中显示一个动态的时钟
编写程序，实现在页面中显示动态的实时时间，显示的时间格式为：
××：××：××
2. JavaScript事件驱动
设计一个包含学生处、研究生院、教务处、科技处等选项的下拉菜单，当下拉菜单的选项改变时转向对应的页面内容。（其中各部门的主页分别为：xuesheng.htm ,yanjiusheng.htm, jiaowu.htm，keji.htm）。

主要仪器设备

计算机、Windows操作系统、JDK环境

实验记录

实验代码

<html>
    <head>
        <script lang="javascript">
            var timer=null
            function stop(){
                clearTimeout(timer)
            }
            function getDate(){
                var time=new Date()
                var hour=time.getHours()
                var min=time.getMinutes()
                var sec=time.getSeconds()
                hour=((hour<10)? "0":"")+hour
                min=((min<10)? "0":"")+min
                sec=((sec<10)? "0":"")+sec
                var clock=hour+":"+min+":"+sec
                document.forms[0].display.value=clock
                timer=setTimeout("getDate()")
            }
        </script>
    </head>
    <body onLoad="getDate()" onUnload="stop()">
        <form>
        <input type="text" name="display" size="20">
        </form>
    </body>
</html>

运行结果
实验代码

<html>
    <head>
        <script language="javascript">
            function go(form){
            location=form.selectmenu.value}
        </script>       
    </head>
    <body>
        <form>
            <select name="selectmenu" onChange="go(this.form)">
                <option>--Select page--</option>
                <option value="xuesheng.html">学生处</option>
                <option value="yanjiusheng.html">研究生院</option>
                <option value="jiaowu.html">教务处</option>
                <option value="keji.html">科技处</option>
            </select>
        </form> 
    </body>
</html>

运行结果

遇到的问题和解决方法

问题一：Javascript基于事件驱动
解决方法：
事件处理：
1.发生事件
2.启动事件处理程序（通过 事件处理器触发）
3.事件处理程序作出反应

问题二：事件驱动
解决方法：
事件：用户和web页面交互产生的动作，包括：鼠标触发、键盘触发、页面触发、表单触发。
鼠标触发：
onclick：单击鼠标触发；
Onblclick：双击鼠标触发；
Onmousedown：按下鼠标触发；
Onmouseup：按下后松开鼠标触发；
Onmouseover：鼠标移动到某对象范围上方触发
Onmousemove：移动鼠标触发
Onmouseout：鼠标离开某对象范围触发
键盘触发：
onkeypress：某个键被按下且释放时触发
Onkeydown：某个键被按下时触发
Onkeyup：某个键按下后松开时触发
页面触发：
onabort：图形未加载完，用户点击了超链接或“停止”时触发
Onerror：加载文件或图像错误时触发
Onload：页面加载晚时触发
Onresize：窗口大小被改变时触发
Onunload：页面关闭或退出时触发
表单触发：
onblur：对象失去焦点时触发
Onchange：对象失去焦点，元素内容发生改变时触发
Onfoucus：对象获得焦点时触发
Onreset：表单的reset属性被激活时触发
Onsubmit;表单被提交时触发

事件驱动:当事件被触发后，执行事件处理程序，执行处理事件的程序或函数。
事件处理程序调用方法：

1、作为HTML标记的属性
把事件驱动程序，作为HTML标记中事件属性的属性值传入
<!--嵌入body标记，onload事件：页面加载完成触发-->
<body onload="alert(&apos;页面加载完成&apos;)">

2、作为对象的属性值
事件作为对象的属性，事件驱动程序作为该属性的属性值
<!--document对象的onLoad属性-->
<!--事件onLoad作为对象的属性-->
<script>
    document.onLoad=alert("对象被加载");
</script>

心得体会

通过对JavaScript的学习,知道它是由C语言演变而来的，而且在很大程度上借用了Java的语法，而Java又是由C和C++演生而来的，所以JavaScript和C有许多相似的语法特点。JavaScript的出现，可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交互的表达能力。从而基于CGI静态的HTML页面将被可提供动态实时信息，并对客户操作进行反应的Web页面取代。JavaScript 脚本正是满足这种需求而产生的语言。它深受广泛用户的喜爱和欢迎，它是众多脚本语言中较为优秀的一种。
其实学习一门编程语言并不难，当初我在学校学习C语言的时候，是被C语言的兴趣吸引了，所以才把能C语言学习好，还加上当时我的坚持，基本每天都练习打代码，所以，这件事情告诉了我“世界上没有最难的东西，只有最懒的人”（包括工作、学习）；因此，以后再学任何东西，如果只是单纯的看语法规则是永远写不出代码的，一定要多实践多读多写，这样才能学好。
完整版javaweb实验报告