当前位置:文档之家› 实验3_JavaScript编程

实验3_JavaScript编程

实验三JavaScript编程一、实验目的1.掌握JavaScript的基本语法;2.掌握JavaScript的常用内置对象的作用、属性、方法的运用;3.掌握JavaScript的程序流程控制语句的运用;4.理解Javascrip中对象的基本概念;5.掌握常用的Javascrip内置对象及其属性、方法等;6. 掌握Javascrip中事件处理的方法;7. 掌握BOM和DOM模型中的常见对象及其属性、方法;8. 掌握JQuery框架的基本应用。

二、实习题目1. 编写JavaScript程序实现“九九乘法表”。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html lang="en"><head><meta http-equiv="Content-Type"content="text/html;charset=UTF-8"><title>Document</title></head><body><table ><tr><td></td></tr></table><script type="text/javascript">var x;var y;document.write("<table >");for(x=1;x<=9;x++){document.write("<tr>");for(y=1;y<=x;y++){document.write("<td>");document.write(x+"*"+y+"="+x*y);document.write("</td>");}document.write("</tr>");}document.write("</table>");</script></body></html>2. 编写函数实现生成指定行数和列数的表格(行数和列数通过函数参数传递)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title></head><body><script type="text/javascript">function myfun(x,y){var i;var j;document.write("<table border='1' > ");for (var i = 0; i <x ; i++) {document.write("<tr height='50px'>");f or (var j = 0; j <y ; j++) {document.write("<td width='200px'>");document.write("</td>");};document.write("</tr>");};document.write("</table>");}document.write(myfun(6,5));</script></body></html>3. 利用Date对象编写程序,判断并输出今天是开学的第几周,星期几。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title></head><body><script type="text/javascript">(function(){var startDay = new Date(2017,01,20);//根据指定的年月日时分秒设置开学时间为2017,1,20var startMs = startDay.getTime();//返回1970年至今的毫秒var startYear = startDay.getFullYear();//从Date对象以四位数字返回年份var startMonth = startDay.getMonth()+1;//从Date对象返回年份(0-11)var startDate = startDay.getDate();// 从Date对象返回一月中的某一天(1~31)var nowDay = new Date();var nowMs = nowDay.getTime();var nowYear = nowDay.getFullYear();var nowMonth = nowDay.getMonth()+1;var nowDate = nowDay.getDate();var startDays = parseInt(startMs/86400000);var nowDays = parseInt(nowMs/86400000);var totalDays = nowDays - startDays;var week = parseInt(totalDays/7)+1;var nowdate = nowDay.getDay();msg1 = "开学时间:" + startYear + " 年" + startMonth + " 月" + startDate + "日";document.write(msg1);document.write("<br>")msg2 ="现在时间:" + nowYear + " 年" + nowMonth + " 月" + nowDate + "日";document.write(msg2);document.write("<br>");msg3 = "第" + week + "周,星期" + nowdate;document.write(msg3);})();</script></body></html>4.编写程序,利用正则表达式输出待处理英文单词或词组的首字母。

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

说明:所谓“首字母”包括两种情况:第一种是边界(开头)的单词字符,一种是空格之后的单词的第一个字母。

<form><input type="text" value="" id="tt"><input type="button" id="btn" value="begin" onclick="myfun()"></form><script type="text/javascript">var s=document.getElementById('tt');//var s="Qasdasd iasdf uasdf Yasd uasd Sdf hdf easfasf nsdf gdsafasf";function myfun(){var regex=/\b[A-Za-z]/g;var arr=s.value.match(regex);var str="";for(var i=0;i<arr.length;i++)str=str+arr[i];alert(str);</script>5. 设计一个网页,输入一串用英文逗号分隔的数字字符串。

编写程序,输出找出该组数中的最大、最小值、和。

并按从大到小排序后的输出结果(以逗号分隔)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><script type="text/javascript">function fun(){var str=document.getElementById('in').value;var reg=/\d+/g;var num=str.match(reg);var sum=0;var max1=parseInt(num[0]);var min1=parseInt(num[0]);for (var j= 0; j< num.length; j++) {sum=sum+parseInt(num[j]);if (parseInt(num[j])<parseInt[num[0]]) { min1=num[j];}else{max1=num[j];}for(var i=0;i<num.length;i++){if(parseInt(num[i])>parseInt(num[i+1])) {temp=num[i];num[i]=num[i+1];num[i+1]=temp;}}}a.value=max1;b.value=min1;c.value=sum;bubble.value=num;}</script></head><body><form><label>输入数字:</label><input type="text" id="in"></br><input type="button" value="begin" onclick="fun()"> </br><label>最大值为:</label><input type="text" id="a" ></br><label>最小值为:</label><input type="text" id="b"></br><label>求和后为:</label><input type="text" id="c" ></br><label>排序后为:</label><input type="text" id="bubble" ></form></body></html>6. 要求用户在文本框中年份,点击判断按钮,用alert函数输出该年是否是闰年的结果。

相关主题