资源描述
广州大学华软软件学院°inuth china Institute of Snftmare bngineBring.GU
实验报告封面
任课老师：潘正军实验指导老师：潘正军
实验报告名称：实验2开始JavaScript编程学生姓名：马增群
学号：学40112124教学班：J\AQ
递交日期：201472^28签收人：
我申明，本报告内的实验已按要求完成，报告完全是由我个人完成，并没有抄袭行为。我已经保存了这份实验报告的副本。
申明人（签名）：马增群
实验报告评语与评分:
评阅老师签名:
实验题目实验2开始JavaScript编程
实验地点及组别U206 1人/组实验时间2014-2-27实验目的
• 掌握JavaScript的开发工具掌握简单的JavaScript编程
• 掌握HTML文档与JavaScript的整合实验要求
完成以下实验内容：
1 .分别使用记事本、Editplus、Dreamweaver编写一个含有JavaScript脚本代 码的页面，比拟它们之前的异同。
2 .编写一个针对用户的调查表单，主要用来收集用户的性别、年龄以及针对不 同性别的一些日常习惯，功能流程图如下。具体要求见p36o
3 .制作一个计数器的简单网页，只有加、减、乘、除4种运算法。 提示：考虑使用JavaScript输出各种计算结果。
二、实验环境(本实验的硬件和软件环境及使用仪器等)
硬件：PC电脑一台；
配置：内存，2G及以上硬盘250G及以上
Editplus 编辑器或者 Dreamweaver (DW) 三、实验实现过程
注：实现过程的关键代码，注重实现思路实验 1： <body>
使用 visibility:
<br>1.正常输入框
<hr><input style="visibility:visible“name="txtl"id="txt2”>
<hr>1.隐藏输入框
<hr><input style="visibility:hidden"id="txt2"name="txt2">
<hr>使用 display:
<br>.正常输入框
<hr><input style=z'display:block/zname=/ztxt3/zid="ztxt3/z>
<hr>.隐藏输入框
<hr><input style="display:none"name="txt4"id="txt4">
<hr><br>
</body>实验2：
<script type=，ztext/JavaScriptz，>
<! —
function
clickSex(ctype){ if(ctype=="miss"){
document. getElementByld(^miss^). style. display="block”;
document. getElementByld("man")・ style. display="none";
)if(ctype=="man"){ document. getElementByld("miss")・ style, d isplay="none";
document. getElementByld("man")・ style. display="block”;
)-4
〃一>
</script>
<div id="miss"style="display:none")
月美容花费:<br>
<input type="text"name="yourface"id="yourface“value=""Xbr>
月购衣花费:<br>
<input type="text"name="yourcloth"id="yourcloth“value=""><br>
</div>
<div id="man"style="display:none"〉
月吃饭花费:<br>
<input type="text"name="yourfood"id="yourfood"value="">
<br>
月喝酒费用：<br>
<input type= text name= yourwme id= yourmme value= ><br>
</div>实验 3:<script type="text/JavaScript”>
function clickO() {document. getElementByld (z，resultz，). value=document. getElementById(/?result/z). valu e+"0〃>
}function clickl () { document. getElementByld("result")・ value=document, getElementByld(^resu It"). valu e+T;
}function click2()
(document. getElementByld("result")・ value=document. getElementByld("result")・ valu e+〃2”;.
)function
click3 () { document. getElementByld("result")・ value=document. getElementByld(^resu It").valu e+'3";}
functionclick4(){ document. getElementByld("result"). value=document. getElementByld(^resu It").valu e+"4";
}function click5() { document. getElementByld("result")。 value=document. getElementByld(^resu It").valu e+"5";
}function click6()—Jdeeefflent. getElementByld ("result"), value=document. getElementByld■(与. valu e+〃6〃； )
functionclick?() { document, getElementByld(z，result，z). value=document. getElementByld(z，resu lt，z). valu e+"7";
)function
click8() { document. getElementByld("result")・ value=document. getElementByld(^resuIt").valu e+"8";
}function click9()
{document. getElementByld("result")・ value=document. getElementByld("result"). valu e+"9〃;
)function
clickJiaO { document. getElementByld("result")・ value=document. getElementByld(z，re suit"), valu e+"+";}
functionclickjian(){ document. getElementByld("result")。 value=document. getElementByld(^r esult^). valu
}function clickChengO
(document. getElementByld ("result"). value=document. getElementByld ("result")・ valu e+〃*“；.
)function clickChu()
(document. getElementByld("result")・ value=document. getElementByld("result")・ valu
}function
clickMo0 { document. getElementByld("result")・ value=document. getElementByld(^resul )function
clickDeng() { document. getElementByld("result"), value=eval(document. getElementByld("result")・ value); )
functionclickClear(){ document. getElementByld("result"), value="0";
)function clickBS(){
var
temp=document. getElementByld("result")， value;document. getElementByld (z/resultz/). value二temp, substring= (0, temp, length-1) function
clickTop () { document. getElementByld("result")・ value=document. getElementByld(，zre)
</script>编写JavaScript代码，后引用，通过表单的形式，形成页面！
四、实验结果、分析、总结实验结果如下（可截图）：
^ javascript, htal - 记事本g文件但)编辑盘)格式炒
i|<htinl><head>
</head><body>
使用 visibility:
<br>.正常的输入框
<hr><input style="uisibility :uisible,,name=",txt1,,id="txt1">
<hr>.隐藏的输入框
<hr><input style="uisibility:hidden,,id="txt2"nane="txt2">
<hr><br>
使用 display:
<br>1 .正常的输入框
<hr><input style="display:block"id="txt3''name="txt3”>
Ln 1, Col 1
Dw 文件（E 罗 罗霆｝ 妇心 修改心 氐式g 妇心 知点（幻 亩DO 和瑾妇I：勾必t,霆, 蜒杰：..（；•:岛.：.惟工社热.这.玄..：端 蛇卷,§生，•心.泛.,：$考H .：
!、父心动，$宁, ｝器.造森1 1 ,泌包居1 trt：也，心T! | ；：3］妒|翻就媚蠲
懒些CSS尽性.
之.院商的描，入框使用也西：
1正常的锁入框2.隐寂的铺入但
取划
所造标签次有应庠屈性
:仁气
敬拓引蠢者F 士J |诩S福 JS桌见. I桌沪N Ed^P^s
[C: \D o cuaents \ Ad>ini st r at o r \Loc^^ J ・扇件（卫）据捐俚） 视图（y_）探索（J）列标记也.）
管理工程郎读文本（I）字体道）‘排列&）
帮助（如.
怪笆…长| Aa卜K 1+ = ;g
Oan d%2OSel lings/Admini s Ir al ol
/勺7 u逾I宅祜守@ j奄自刈 夺I p ；：/ :5T7g1区］岱 25气「丘i仑. / / / C:/ Doc叩如笠
使用vi si bi 1 i t y:
1 .正常的输入框
2 .隐藏的输入框
使用 di spl ay :
1 .正常的输入框
?
2 .隐蕨的输入框
佳男」：［金旦 姓名：
0 多
年龄：
I
月症U攵入：
月吃1在花费；；一
月亟至T匹费日：一
小退文। I君巨二।，。男o女
尸
月薪收入：
I
月吃饭花费：
I
月喝酒费用：
I
口—
巴 旦实验3:
11958+841|尸^ I[ Backspace J几三丁
尸尸门厂『尸厂尸
厅亡了亡实验结果分析和实验总结：（注：这里填写你的实验到达的预期效果，是否按时完成，遇到 哪些问题？如何解决的？还需要学习和提高的地方？下一步的计划和打算？）
在＜1仲111 ＞中要引用JavaScript,通过onclick实现功能，实验时我对理论应用与实践还不 是很好，所以，我要多加实践！
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
