如何收集信息并将其显示在页面上--函数的应用
作为一个学生遇到学校收集自己个人信息的情况不少，但是学校也只是用别人做好的html有关进行应用，然后我就自己试着写了一个HTML进行这项工作。如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
学生姓名<input type="text" id="stuName"/><br />
密码<input type="password" id="passwd" /><br />
性别<input type="radio" name="gender" value="女" />女<input type="radio" name="gender" value="男" />男<input type="radio" name="gender" value="其他" />其他<br />
专业<select id="major">
<option>--请选择--</option>
<option>计算机科学与技术</option>
<option>通信工程</option>
</select><br />
爱好：<input type="checkbox" name="hobby" value="篮球"/>篮球 <input type="checkbox" name="hobby" value="乒乓球"/>乒乓球
<input type="checkbox" name="hobby" value="游戏"/>游戏 <input type="checkbox" name="hobby" value="都行"/>都行<br />
<input type="button" value="注册" onclick="regist();"/>
<input type="reset" value="重置"/>
<input type="button" value="显示学生信息" onclick="showStusInfo();"/>
<input type="button" value="清空" onclick="resetData();"/>
</form>
<script type="text/javascript">
function Student(){
this.stuName = "";
this.passwd = "";
this.gender = "";
this.major = "";
this.hobby = "";
this.output = function(){
return "<tr><td>" + this.stuName + "</td><td>" + this.passwd + "</td><td>" + this.gender + "</td><td>" + this.major + "</td><td>" + this.hobby + "</td></tr>"
}
}
var stuArray = new Array(10);
var dataIndex = 0;
function regist(){
var stu = new Student();
stu.stuName = document.getElementById("stuName").value;
stu.passwd = document.getElementById("passwd").value;
var genderInput = document.getElementsByName("gender");
for(var i = 0; i < genderInput.length; i++){
if(genderInput[i].checked){
stu.gender = genderInput[i].value;
break;
}
}
stu.major = document.getElementById("major").value;
var hobbyInput = document.getElementsByName("hobby");
var hobby = "";
for(var i = 0; i < hobbyInput.length; i++){
if(hobbyInput[i].checked){
if(hobby != ""){
hobby = hobby + ", " + hobbyInput[i].value;
}else{
hobby = hobbyInput[i].value;
}
}
}
stu.hobby = hobby;
if(dataIndex < stuArray.length){
stuArray[dataIndex] = stu;
}
dataIndex++;
}
function resetData(){
}
function showStusInfo(){
var startStr = "<div align='center'><table width='500px'><tr><th>学生姓名</th><th>密码</th><th>性别</th><th>专业</th><th>爱好</th></tr> ";
var stuDataStr = ""
for(var i = 0; i < dataIndex; i++){
stuDataStr += stuArray[i].output();
}
document.write(startStr + stuDataStr + "</table></div>");
}
</script>
</body>
</html>
在写这个HTML是我觉得最难的一点就是：如何将一个数组封装成对象然后将其当作一个元素输入到另一个数组中，其中要用到函数。并且作为初学者应注意document.write可用函数循环输出内容。this作为函数传输参数的重要部分，如何正确高效使用this是极为有意义的。 如我之前写到的一个函数，需要将类选择器形成的数组中的元素位数输出出来，一开始我选择用新的数组来重新表示原数组中的每一个元素，但是之后发现如果用this之后即使不用获取元素位数也是能达到自己目的，this就这次而言成功的简化了我的代码数量和思路。并且发现this用着已经越来越顺手了，也更能体会到this的重要性。
