一、实验目的
理解JavaScript脚本放置与运行的方法。
掌握JavaScript基本构成和基础语法。
掌握自定义函数定义与引用。
二、实验环境
Windows10系统下的H Builder X
三、实验步骤
项目一：改变网页字号大小
本实验中通过利用JavaScript来实现对网页字号大小的改变
1、建立网页基本格式：
2、在head中定义所需的style：
将标题加粗，并给文字以灰色背景阴影。
3、定义函数：
此处通过对函数的定义，实现了对字体大小的修改。
4、编写body内容
在body中编写内容，并使用链接调用已编写好的函数从而实现对字体大小的改变
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>项目一</title> <style> #div1 { text-align: center; font-size: 16px; } #content { font-size: 12px; line-height: 2em; padding: 10px; background-color: #C0C0C0; color: black; border: 2px groove #FCFF57; } p { text-indent: 2em; } </style> <script type="text/javascript"> function $(id) { return document.getElementById(id); } function setFont(size) { $("content").style.fontSize = size; } </script> </head> <body> <h2 align="center">用JavaScript改变新闻网页中的字号</h2> <div id="div1">选择字号【 <a href="javascript:setFont('12px')">小</a> <a href="#" onclick="javascript:setFont('18px')">中</a> <a href="#" onclick="javascript:setFont('24px')">大</a>】 </div> <div id="content"> <p>JavaScript是一种能让我们的网页更加生动活泼的程序语言，也是目前网页设计中 最容易学又最方便的语言，我们利用JavaScript可以轻易地做出亲切的欢迎讯息、 漂亮的数字钟、有广告效果的跑马灯还可以显示浏览器停留的时间，这些特殊效果 可以提高网页的可观性。 </p> </div> </body> </html>
选择字号为“小”：
选择字号为“中”：
选择字号为“大”：
项目二：求圆面积
1、建立网页基本格式：
2、在head中定义所需的style：
在此处实现对整个窗口及窗口中文字的定义
3、使用JavaScript编写函数：
由于要实现清屏和计算两个功能，则要编写两个函数，其中第一个函数实现了对圆面积的计算功能，获取输入的半径之后在textarea中写入计算的结果
清屏函数则是将两个id中输入框的内容写为空
4、编写body
此处使用前面定义好的函数对圆的面积进行计算：
5、完整源码及展示效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>项目二</title> <style type="text/css"> .circle { border: 5px solid #FF6A6A; background: #ADD8E6; width: 500px; height: 300px; text-align: center; } h3 { text-align: center; margin-top: 40px; } p { margin: 20px 110px; } .button { width: 250px; height: 30px; margin: 40px 110px; } .button1 { width: 50px; margin-left: 50px; } .button2 { width: 50px; margin-left: 40px; } </style> <script type="text/javascript"> function show() { var radius = parseFloat(document.getElementById("radiustext").value); var area = 3.14 * radius * radius; console.log(area); document.getElementById("areatext").value = area; console.log(document.getElementById("areatext").value); return; }; function reset() { document.getElementById("radiustext").value = ""; document.getElementById("areatext").value = ""; return; }; </script> </head> <body> <form class="circle" id="form1" name="form1" method="post" align="center" rules="all"> <h3>计算圆的面积</h3><br> <p>输入半径：<input type="text" id="radiustext" name="radiustext"></p> <p>圆的面积：<input type="text" id="areatext" name="areatext" readonly="readonly"></p> <div class="button"> <a href="#" onclick="show();return false;"><input class="button1" type="button" value="计算"></a> <a href="#" onclick="reset();"><input class="button2" type="button" value="清空"></a> </div> </form> </body> </html>
展示效果：
1、未使用时：
2、输入数值并运行：
项目三：消息对话框使用
本项目需使用JavaScript脚本编程并事件调用自定义函数inputName()。使用JavaScript消息对话框语法,并根据用户的选择进行相关代码是编写。
1、建立网页基本格式
2、在head中定义所需的style：
在此处实现对整个窗口及窗口中文字的定义，需要注意的是此处使用了域标记。
3.编写body
此处先对表单进行编写，并使用inputName进行输入，再对JavaScript进行编写
此处即定义JavaScript，通过编写inputName函数来实现姓名的回显及错误信息提示。
4.完整源代码及展示效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>项目三</title> <style type="text/css"> fieldset { background: #99ff99; border: 8px ridge #3333cc; width: 300px; height: 150px; } legend { color: #0000cc; } form { margin: 20px; padding: 20px; } </style> </head> <body> <fieldset> <legend> 消息框函数 </legend> <form method="POST" action=""> 你的姓名：<input type="text" name="" id="name1" maxlength="10" readonly><br><br> <input type="button" value="输入姓名" onclick="inputName();"> <input type="reset" name="clear" value="清空"> </form> <script type="text/javascript"> function inputName() { var name = prompt("请输入你的姓名：", "你好！"); if (name != null) { alert("你的姓名是：" + name); document.getElementById("name1").value = name; } else { alert("请你输入姓名！") } } </script> </fieldset> </body> </html>
运行结果：
未输入时：
点击输入姓名按钮，此时弹出对话框：
点击确定后弹出确认窗口并回显：
如果未输入或输入空白，则弹出错误信息提示：
点击清空按钮，可以清除内容，并恢复初始状态：
项目四：消息对话框使用
本项目需要使用6个JavaScript系统内部函数来进行实验。
1、建立网页基本格式
2、在head中定义所需的style：
设置背景，小标题及字体。
3.编写body
每个题头为一个小标题，下面仅以第一个为例进行展示，其余几个与所展示任务相同
4.全部源代码及运行结果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>项目四</title> <style type="text/css"> div { background: #000099; color: white; width: 800px; font-size: 20px; font-weight: bolder; /* text-align: center */ } h4 { text-align: center; } b { color: red; font-size: 18px; } </style> </head> <body> <div> <h4>系统函数使用</h4> <b>1.eval("字符串")<br></b> <script type="text/javascript"> var rel = eval("1000+3/5"); document.write(" " + "1000+3/5=" + rel); document.write("<br />"); document.write(" " + "x=10,y=20,x*y="); eval("x=10;y=20;document.write(x*y)"); document.write("<br/> 2+2=" + eval("2+2")); document.write("<br />"); var x = 10; document.write(" " + "x=10,x+17=" + eval(x + 17)); document.write("<br />"); </script> <b>2.escape("字符串")<br></b> <script type="text/javascript"> document.write(" " + "escape('&')=" + escape("&")); document.write("<br/>"); result = escape(" " + "my name is 张华"); document.write(" " + "escape('my name is 张华')=" + result); document.write("<br/>"); </script> <b>3.unecspe(string)<br></b> <script type="text/javascript"> document.write(" " + "unescape('%26')=" + unescape("%26")); document.write("<br/>"); result = unescape(" " + "my%20name%20is%20%u5F20%u534E "); document.write(" " + "unescape('my%20name%20is%20%u5F20%u534E')=" + result); document.write("<br/>"); </script> <b>4.parseFloat(string)<br></b> <script type="text/javascript"> document.write(" " + "parseFloat('3.14')=" + parseFloat("3.14")); document.write("<br />") document.write(" " + "parseFloat('314e-2')=" + parseFloat("314e-2")); document.write("<br />") document.write(" " + "parseFloat('3.14ab')=" + parseFloat("3.14ab")); document.write("<br />") document.write(" " + "parseFloat('FF2')=" + parseFloat("FF2")); document.write("<br />") </script> <b>5.parseInt(numberstring,radix)<br></b> <script type="text/javascript"> document.write(" " + "32:" + parseInt("32")); document.write("<br />") document.write(" " + "032:" + parseInt("032")); document.write("<br />") document.write(" " + "0x32:" + parseInt("0x32")); document.write("<br />") document.write(" " + "parseInt('15*3',10)=" + parseInt("15*3", 10)) document.write("<br />") </script> <b>6.isNaN()<br></b> <script type="text/javascript"> document.write(" " + "isNaN(\"5454g\")=" + isNaN("5454g")); document.write("<br />") document.write(" " + "isNaN(\"789\")=" + isNaN("789")); document.write("<br />") </script> </div> </body> </html>
四、结果与分析
以上四个实验项目的结果完全符合预期，JavaScript程序代码编写及CSS样式编写完全正确。
五、心得体会
通过对JavaScript基础的实验，我理解了JavaScript脚本放置与运行的方法，掌握了JavaScript基本构成和基础语法，掌握了自定义函数定义与引用。此外也学会使用域标记<fieldset>和域标题标记<legend>，通过样式设置域标记的样式
JavaScript作为一种脚本语言，在HTML编程过程中常常起到了锦上添花的作用，很多动画，消息弹出，人机交互，很多都可以通过JavaScript来实现，而对JavaScript的充分利用，更是大大的提高了页面的交互性。使得简单的HTML页面变得不简单。
