javascript实验

合集下载

实验十二 JavaScript基本语法

实验十二  JavaScript基本语法

实验十二 JavaScript基本语法一、实验目标1、掌握JavaScript的基本语法;2、掌握在见面中插入JavaScript脚本的方法;3、掌握JavaScript变量、函数及各类控制语句。

二、实验内容1、调用JS文件,输出欢迎信息2、自定义函数,通过按钮弹出欢迎对话框3、使用循环语句完成“JavaScript基本语法”文本h1到h6标题的输出三、实验参考步骤1、调用JS文件,输出欢迎信息,命名名JS1.html➢定义单独的JS文件,编写JS脚本-欢迎信息,注意HTML标签及属性的运用,可以考虑font标签及颜色属性的使用。

测试一下在JS中如何输出标签.➢新建HTML文档➢调用JS文件➢输出欢迎信息,测试,完成➢效果图如下:2、自定义函数,通过按钮弹出欢迎对话框,命名名JS2.html➢新建HTML文档➢在body中输入常用按钮➢定义JS脚本代码,定义函数,完成欢迎对话框功能;注意函数功能的完成及函数是否有参考传递,如果有返回值用return语句返回,➢通过按钮调用自定义的函数➢测试,完成.➢效果图如下:3、使用循环语句完成“JavaScript基本语法”文本h1到h6标题的输出,命名名JS3.html➢新建HTML文档➢选择一种循环语句,通过循环语句完成题目➢注意:所有的HTML标签都可以以字符形式输出➢效果图如下:4、事件的使用➢新建HTML文档,插入第一张灰度的图片:eg-mouse2.jpg,命名成img1➢编写鼠标经过及离开时函数,参考如下:function over(){document.img1.src ="img/eg_mouse.jpg"}//选择本地图片的路径➢通过img标签的鼠标经过和离开事件调用上述对应函数➢测试,完成四、实验课后习题1、字符串函数的使用2、数组函数的使用定义数组,完成春夏秋冬四季的换行输出.var theMonths = new Array("春","夏","秋","冬"),s;for(var i=0;i<=3;i++){s=theMonths[i];document.write(s+"<br/>");</script>3、根据系统时间显示今天星期几?预习249页Date对象的使用。

javascript程序设计正则表达式应用-实现表单验证实验总结

javascript程序设计正则表达式应用-实现表单验证实验总结

javascript程序设计正则表达式应用-实现表单验证实验总结JavaScript程序设计正则表达式应用实现表单验证实验总结在Web开发中,表单验证是一个非常重要的环节,它可以帮助我们确保用户输入的数据符合我们的预期和要求。

而JavaScript的正则表达式是一种强大的工具,可以用来对用户输入进行有效的验证和筛选。

本文将基于表单验证的实验,一步一步介绍如何利用JavaScript正则表达式来实现表单验证,并对实验过程进行总结和评估。

第一步:实验目标和准备工作在开始实验之前,我们需要明确实验的目标和准备相关的材料和环境。

实验目标:使用JavaScript正则表达式来实现表单验证,并确保用户输入的数据符合预期和要求。

准备工作:1. 一个Web开发环境,例如Apache服务器和一个支持JavaScript的浏览器。

2. 一个包含HTML表单元素的网页文件,例如一个注册表单。

第二步:了解正则表达式的基本语法和规则在开始实验之前,我们需要对正则表达式的基本语法和规则有一定的了解。

简要介绍一下正则表达式的基本语法和常用规则:1. 字符匹配- 字符:直接匹配字符本身。

- 转义字符:使用'\'来转义特殊字符的匹配。

2. 特殊字符- 点号(.):匹配任意字符。

- 加号(+):匹配一个或多个前面的字符。

- 星号(*):匹配零个或多个前面的字符。

- 问号(?):匹配零个或一个前面的字符。

- 花括号({}):用于指定匹配数量的范围。

3. 字符类和取反- 字符类([...]):匹配方括号中的任意一个字符。

- 取反([^...]):匹配除了方括号中的任意一个字符以外的字符。

4. 边界匹配- 开始边界(^):匹配字符串的开头。

- 结束边界():匹配字符串的结尾。

5. 数量限定- 数字(\d):匹配一个数字字符。

- 非数字(\D):匹配一个非数字字符。

- 字母(\w):匹配一个字母字符。

- 非字母(\W):匹配一个非字母字符。

js的综合实验案例

js的综合实验案例

js的综合实验案例下面是一个简单的JavaScript综合实验案例,该案例使用了数组、循环、函数和事件处理。

题目:创建一个简单的计算器,可以执行基本的四则运算(加、减、乘、除)。

```html<!DOCTYPE html><html><head><title>JavaScript 计算器</title></head><body><h1>简单计算器</h1><input type="text" id="input1" placeholder="输入第一个数字"> <select id="operator"><option value="add">+</option><option value="subtract">-</option><option value="multiply"></option><option value="divide">/</option></select><input type="text" id="input2" placeholder="输入第二个数字"> <button onclick="calculate()">计算</button><p id="result"></p><script>function calculate() {// 获取输入值和运算符var num1 = parseFloat(('input1').value);var num2 = parseFloat(('input2').value);var operator = ('operator').value;// 验证输入值是否为数字if (isNaN(num1) isNaN(num2)) {alert('请输入数字!');return;}// 执行计算并显示结果switch (operator) {case 'add':result = num1 + num2; break;case 'subtract':result = num1 - num2; break;case 'multiply':result = num1 num2; break;case 'divide':if (num2 != 0) {result = num1 / num2; } else {alert('除数不能为零!'); return;}break;default:alert('无效的运算符!');}('result').innerText = '结果是:' + result; }</script></body></html>```。

实验报告JavaScript验证表单

实验报告JavaScript验证表单
{
window.alert("两次密码不一致,请重新输入");
document.form1.zhmm1.value="";
document.form1.zhmm2.value="";
document.form1.zhmm1.focus();
return false;
}
if(document.form1.zhmm1.value.length<6|| document.form1.zhmm1.value.length>20)
在提交按钮的代码中加入事件驱动代码:
onclick="return check()"
4、编写check函数
在<head></head>中插入客户端验证代码,主要保证
(1)、“注册帐号”、“帐号密码”、“确认密码”非空;
(2)、“帐号密码”和“确认密码”一致;
(3)、“帐号密码”位数为6-20位
代码如下:
三、注意事项
1、JavaScript不容易调试,在写代码时需格外注意
2、JavaScript区分大小写
四、实验内容及步骤
1、演示使用JavaScript制作的客户端验证的网页
2、修改表单
建立如下表单
把注册帐号、帐号密码、确认密码对应的文本框名称分别改为:zczh、m1、zhmm2。
3、编写事件驱动代码
documentform1zhmm1valuelength20script五实验结果提交与成绩评定1提交用客户端验证的表单页面六教学后记表单客户端验证可以减轻服务器负担使得客户端反应更快
JavaScript验证表单实验
一、实验目的

javascript实验总结报告 -回复

javascript实验总结报告 -回复

javascript实验总结报告-回复Javascript 实验总结报告[JavaScript 实验总结报告]是一篇关于JavaScript 实验的总结和分析的文章。

本文将通过一步一步的回答来探讨实验的主题,以及实验的目标和重要性、实验的步骤与所使用的工具、实验结果的分析和总结。

1. 实验主题和目标本次实验的主题是JavaScript,它是一种用于编写网页前端交互的脚本语言。

JavaScript 主要用于增加网页的交互性、改善用户体验、处理数据等功能。

此实验的目标是教授学生如何使用JavaScript,并让他们理解JavaScript 在网页开发中的重要性。

2. 实验步骤与所使用的工具本次实验包括以下几个步骤:2.1 学习基本语法和概念:在这一步骤中,我们向学生介绍了JavaScript 的基本语法和概念,如变量、函数、条件语句、循环等。

2.2 编写第一个JavaScript 程序:学生需要根据所学的语法和概念,编写一个简单的JavaScript 程序,例如计算两个数的和。

2.3 实践应用:在这一步骤中,学生将应用他们所学的JavaScript 知识来改进一个已有的网页,比如添加表单验证、实现动态效果等。

在这个实验过程中,我们使用了以下工具:2.4 文本编辑器:学生可以使用任何他们喜欢的文本编辑器,如Sublime Text、Visual Studio Code 等,来编写JavaScript 程序。

2.5 Web 浏览器:学生需要使用Web 浏览器来运行和测试他们所编写的JavaScript 程序。

常用的浏览器有Chrome、Firefox 和Safari 等。

3. 实验结果的分析和总结在本次实验中,学生通过学习JavaScript 的基本语法和概念,成功地编写了自己的第一个JavaScript 程序,并将其应用到现有的网页中。

在这个过程中,他们深入理解了JavaScript 在网页开发中的重要性,和它对于用户体验的改善所起到的作用。

原版Javascript程序设计实验报告

原版Javascript程序设计实验报告

20—20学年第学期
Javascript程序设计实验
报告
系别:
专业:
班级:
姓名:
学号:
指导教师:
教务处制
实验项目:javascript基础实验
实验要求
1.请认真阅读下面的项目描述。

2.按照课程要求,每个班级分成若干个项目小组,每组人数大约2~3名同学,每个小组选出一名负责的同学。

请负责同学做好小组内分工。

项目描述
1.实验项目是围绕javascript综合实验平台展开,涉及到平台的外围设备。

2.要求熟练掌握javascript编程的基本流程。

3.要求熟练使用javascript编程软件平台。

4.项目实验内容由简单到复杂,采用循环渐进的引导方式,使学生在轻松的氛围中掌握javascript开发及软件的使用。

实验一Javascript基本页面操作
实验二Javascript基本功能控件练习
实验三文本框与函数参数传递练习
实验四HTML页面交互设计练习
实验五Javascript中text控件的设计练习
实验六Javascript中函数的简单应用
实验七Javascript控件交互设计
实验八新函数的学习与应用训练
实验九div与text的显示应用练习
实验十Javascript程序修改练习
实验十一Javascript中的函数应用练习
实验十二数字计算程序设计练习
实验十三数组程序设计练习
实验十四Javascript综合应用练习
实验十五选择结构程序设计练习
实验十六Javascript控件综合应用练习
实验十七循环结构程序设计练习
实验十八for结构程序设计练习。

JavaScript实习报告

JavaScript实习报告

实习四 JavaScript基本语法一、实习目的1.掌握 JavaScript 的基本语法;2.掌握 JavaScript 的常用内置对象的作用、属性、方法的运用;3.掌握 JavaScript 的程序流程控制语句的运用;4. 掌握 Firebug的基本用法。

二、实验内容1. 要求用户在文本框中年份,点击判断按钮,用 alert函数输出该年是否是闰年的结果。

2.利用复选框让用户选择其爱好,用alert 对话框输出用户所选的内容。

3.要求在文本框中输入用户名,点击“注册”按钮进行提交。

当文本框为空时,则弹出提示信息,并取消提交操作。

4.在网页上输出“九九乘法表”。

5.设计一个网页,允许输入表格的行数与列数,然后“生成”按钮后,在网页输出表格。

三、实验步骤1.利用对象document对象获得元素,并且取其中的值,进而判断是否为闰年,利用alert 输出结果。

2.利用对象document对象获得元素数组,遍历元素数组,利用Checked属性,将相应的值取出,利用alert输出。

3.利用对象document对象获得元素,判断其值是否为空,进而进一步操作。

4.利用for循环,利用document对象创建表格元素。

5.利用document对象的函数,如document.createElement(tagName),appendChild(appendNode)。

实习五 Javascrip高级应用一、实习目的1.理解 Javascrip中对象的基本概念;2.掌握常用的 Javascrip 内置对象及其属性、方法等。

3. 掌握 Javascrip中事件处理的方法。

二、实验内容1.编写程序,判断并输出今天是开学的第几周,星期几。

2.编写程序,利用正则表达式输出待处理英文单词或词组的首字母。

如 "blue idea"输出"bi","Asynchronous JavaScript And XML"输出"AJAX"(不包括引号)。

《JavaScript前端开发程序设计》实践教案

《JavaScript前端开发程序设计》实践教案

实验报告姓名:__________ 学号:______ 班级:___________实验成绩:_______实验 JavaScript语法基础1一、实验目的1、熟练掌握HTML文件中编写JavaScript程序的基本操作。

2、掌握JavaScript的基本数据类型。

3、掌握JavaScript常量的声明和使用。

二、实验仪器:微机(台)三、实验内容1、输入以下代码:思考:最后的显示结果是什么?后面两行为什么没有显示?如何修改将其显示出来?2、定义一个未赋值的变量a和一个进行重复赋值的变量b,并输出这两个变量的值。

3、设计一个程序,返回true的数据类型。

4、尝试输出1/0 ,-1/0 ,0/0的结果,并分别指出他们是什么数据类型5、输出如下的显示结果:6、分别输出数字456不同进制的输出结果(选做)编写一个JavaScript程序,效果如图所示。

按要求输入以下代码:补齐techy的赋值,输出如上图所示的结果。

四、实验要求认真上机,按照实验内容完成实验报告。

实验报告姓名:__________ 学号:______ 班级:___________实验成绩:_______实验 JavaScript语法基础2一、实验目的1、熟练掌握HTML文件中编写JavaScript程序的基本操作。

2、掌握JavaScript变量的声明和使用。

3、熟练掌握运算符和表达式的使用二、实验仪器:微机(台)三、实验内容1、按要求实现如下界面:其中var a=1;var b=2; var c=3;(alert弹出对话框)2、按要求输入以下代码:3、设计一个程序,小高今年22岁,应用条件判断语句,大于18岁就是成年人,否则为未成年人,并输出结果。

4、按要求实现如下界面:(alert弹出对话框)其中a=1+2*3, b=(1+2)*35、输入一个四位年份,判断是否为闰年能够被4整除但不能被100整除,或者能够被400整除year%4==0&&year%100!=0||year%400==06、将多个字符串进行连接,并将自己的个人信息结果显示在页面中四、实验要求认真上机,按照实验内容完成实验报告。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

长江职业学院Javascript语言程序设计实验指导书专业:学号:姓名:班级:指导老师:软件教研室编实验一 JavaScript基本操作一、实验目的熟练掌握在HTML文件中编写JavaScript程序的基本操作,及在Microsoft InternetExplorer浏览器和Netscape的Nevigator浏览器中调试JavaScript的基本操作。

二、实验内容1、用NotePad创建一个简单的.htm文件,在Microsoft Internet Explorer浏览器中浏览效果。

2、编写第1章中的实例源文件,并在Microsoft Internet Explorer浏览器中进行测试。

3、调试一段JavaScript程序,找出其中的错误。

三、实验步骤1、通过windows的文件管理器,在c盘下新建一个文件夹jsp_ex,用于保存实验中的文件,如图1-1所示。

2、在windows中打开“记事本”,(也可以用其他编辑html文件的工具软件,如Microsoft frontpage,Macromedia Dreamweaver等,编写例1-1的程序,然后将文件保存在C:\jsp_ex文件夹中。

3、用下述任意一种方法,在浏览器中显示,如图1-2。

A.在图1-1中双击“”文件名。

B.在图1-1中用鼠标右键单击“”,在打开的菜单列表中,如果有所需浏览器名就可以直接点击浏览器名。

C.现在windows中打开所需浏览器,然后按【ctrl】+【o】,在打开的对话框中找到文件。

4、再次编辑文件,将第21行中的“”改写为“”然后按第3步的操作,得到如图1-3的效果,不能显示“上一次网页更新日期”,这时,通过浏览器的调试工具查找出出错的位置,修改后再次测试。

5、按1-2的步骤,将例1-1改写为“”和“”两个文件即通过外部javascript 文件和html文件一起完成网页的制作。

四、思考练习1.为什么“上一次网页更新日期”在每一次打开都是同一个时间2.请写出你在程序编写中出现的错误和改正方法,并分析。

实验二 JavaScript编程基础一、实验目的熟练掌握JavaScript的基本编程概念和编程技术,熟练掌握JavaScript程序语言的数据类型、表达式、运算符及基本控制语句,并学习基本的对象概念和事件处理程序。

二、实验内容1、编写第2章中的实例源文件,并且在Microsoft Internet Explorer浏览器中测试。

2、编写一个显示学生成绩信息的网页,网页中有两个或更多的按钮,分别代表需要显示信息的学生,点击后可以得到该学生的总成绩、平均成绩、平均成绩的级别等,如图2-1所示,并在Microsoft Internet Explorer浏览器中测试。

三、实验步骤a)在c:\jsp_ex文件夹下新建一个。

b)改写例2-5,其功能不变,即输入参数的总和,但是函数名改为sum,函数的返回值是计算后的总和。

function sum() {var ret = 0;else if (score>=80)……else if (score>=70)……else……..return ret;}c)编写一个函数,函数名为msg,根据输入参数返回不同的信息:如果级别是“A”,返回“祝贺你去的了好成绩”;如果级别是“B”返回“成绩不错,继续加油”,如果级别是”C”,返回“必须加油啊”。

用 switch实现。

function msg(level) {var ret = ""; case ("B"):……default:……}return ret;}d)编写一个对象函数,函数名为student,输入参数共有6项,分别为:学生姓名 name数学成绩 math语文成绩 chinese英语成绩 english自然成绩 science体育成绩 gym对象的属性包括了上述的输入参数项,对象的方法共有5个,分别为:总成绩 sum平均成绩 average平均成绩的级别 level根据成绩返回的信息 msg总信息 toString()其中前4个对象方法已经在步骤2-5中完成,最后一个方法可以在对象函数中直接定义,它将返回最终需要显示的所有信息。

function student(name,math,chinese,english,science,gym) {= name;…….= function toString(){var s = + ":\n";var theSum = ,,,,;var theAve = ,,,,;var theLevel = (theAve);s += "你的总成绩是 " + theSum + "\n";s += "你的平均成绩是 " + theAve + "\n";s += "你的平均成绩级别是 " + theLevel + "\n";s += "\n" +(theLevel);return s;}7、最后制作HTML内容——两个按钮,然后分别应用于onclick事件调用对象student的方法toString()四、思考练习i.增加一个函数maxScore,返回6门成绩的最高分,并显示在对话框中。

ii.增加一个函数minScore, 返回6门成绩的最低分,并显示在页面上。

实验三 JavaScript常用内置对象一、实验目的熟练掌握JavaScript数组对象、字符串对象、数学对象及日期对象。

二、实验内容1、编写第3章中的实例源文件,并在Microsoft Internet Explorer浏览器中进行调试。

2、按下述要求编写常用的JavaScript函数。

trim(s):去掉s中的首尾空格及连续空格中的多余空格,返回处理后的字串。

replaceStr(inStr,oldStr,newStr):将字串inStr中的oldStr用newStr替换,返回替换后的新字串。

isEmptyString(s):如果去空格后的s长度为0,返回true,否则,返回false isValidString(s);给出有效字串,如果s在有效字串中,返回true,否则返回falseisNumber(s):使用isValidString(s)函数,其中有效字串为字数。

isFloat(s):使用isValidString(s)函数,其中有效字串为数字及“.”。

isMaxString(s,c);如果s长度小于等于c,返回true,否则,返回falseisRange(s,s1,s2);如果s长度大于等于c,返回true,否则,返回falseisRange(s,s1,s2):如果s大于等于s1,并且小于等于s2,返回true,否则返回falseisArray(o): 如果o的()中包含array,返回true,否则返回falseisEmail(s):如果s中包含“@”和“.”,返回true,否则返回falsecapFirst(s):将s中的第一个字符变为大写字符,返回处理后的字串。

indexOfArray(a,s):如果s为Array a中的一个元素,返回该元素的序列号,否则返回-1.3、编写一个“猜美国州名的游戏”的网页,如图3-1所示。

A:用户输入所猜的美国州名后,按回车。

B:如果猜错了,将会得到提示信息,一共有4次提示:第一个提示的是该州名的第1个字母,第2个提示的是该州名的最后一个字母,第3个提示的是该州名的长度,最后一个提示的是该州名第3个字母。

C:如果猜对了,将会得到祝贺信息,并显示回答问题的时间。

三、实验步骤第一:在c:\jsp_ex文件夹中新建一个文件。

第二:首先编写HTML文件。

a)<body>标记中应用onload事件,调用clearBox()的JavaScript程序,用于每次刷新网页时都清空用户输入域。

b)使用<h3>标记制作标题“猜美国州名游戏”。

c)制作一对<form>标记,名字为mForm,并且在<form>标记中应用onsubmit事件,该事件将调用一个guessit()中的JavaScript函数,然后return false,以保证用户输入完文字后按回车键将不会提交窗体,只是执行guessit()函数。

d)在<form>标记中制作一对<div>标记,其id为hint,内容为“输入你的答案,然后按回车键”。

e)再制作一对<div>标记,在其中使用<input>的文字框标记,用于用户的输入,其名字为guess。

f)接着再制作一个“重玩”按钮,在其中应用onClick事件,调用JavaScript的newGame()函数。

第三、在JavaScript程序中,按下述步骤操作。

(1)首先将50个美国州名保存在一个全局变量的字符串数组中,数组名为state.state[0]="ALABAMA";state[1]="ALASKA";state[2]="ARIZONA";state[3]="ARKANSAS";state[4]="CALIFORNIA";state[5]="COLORADO";state[6]="CONNECTICUT";state[7]="DELAWARE";state[8]="FLORIDA";state[9]="GEORGIA";state[10]="HAWAII";state[11]="IDAHO";state[12]="ILLINOIS";state[13]="INDIANA";state[14]="IOWA";state[15]="KANSAS";state[16]="KENTUCKY";state[17]="LOUISIANA";state[18]="MAINE";state[19]="MARYLAND";state[20]="MASSACHUSETTS";state[21]="MICHIGAN";state[22]="MINNESOTA";state[23]="MISSISSIPPI";state[24]="MISSOURI";state[25]="MONTANA";state[26]="NEBRASKA";state[27]="NEVADA";state[28]="NEW HAMPSHIRE";state[29]="NEW JERSEY";state[30]="NEW MEXICO";state[31]="NEW YORK";state[32]="NORTH CAROLINA";state[33]="NORTH DAKOTA";state[34]="OHIO";state[35]="OKLAHOMA";state[36]="OREGON";state[37]="PENNSYLVANIA";state[38]="RHODE ISLAND";state[39]="SOUTH CAROLINA";state[40]="SOUTH DAKOTA";state[41]="TENNESSEE";state[42]="TEXAS";state[43]="UTAH";state[44]="VERMONT";state[45]="VIRGINIA";state[46]="WASHINGTON";state[47]="WEST VIRGINIA";state[48]="WISCONSIN";state[49]="WYOMING";(2)设置全局变量猜的次数tries,开始时间startTime,结束时间endTime,随机产生一个0~49的随机数,变量名为sr,然后在state中设置第sr个数组为正确答案,保存在全局变量answer中。

相关文档
最新文档