漏洞测试作业九：Javascript实践

web开发
javascript

题目：

搭建PHPNOW的开发环境，然后制作一个Html页面，并利用Javascript实现页面元素是否输入的校验，如果没有输入，则将焦点设置在该页面元素上

解答

PHPNOW环境搭建

系统：windows xp

将压缩包解压后，粘贴到虚拟机内，点击setup,选择需要的Apache和MySql版本，我这里选择的是20和50，执行解压

输入y，进行初始化，设置mysql密码，这里设置为123456
设置完成：

输入密码，点击连接，测试成功

点击phpMyAdmin,进入数据库管理页面，输入用户名root,密码123456

安装成功

制作Html页面

内容学习

安装Dreamweaver
htdocs文件夹为当前网站工作的根目录，在该目录先新建文件js.htm,并用Dreamweaver打开

一个简单的html：

<html>
<head>
<title>Javascript example!</title>
</head>
<body>
1111
</body>
</html>

document.write()函数

<html>
	<head>
    	<title>Javascript简单示例</title>
		<script language="javascript">
            for(i=1;i<=100;i++){
                num=Math.floor(Math.random()*100);//0-99之间的随机数
                document.write(num," ");//向body区域写入内容
            }
		</script>
	</head>
	<body>
    </body>
</html>

函数调用

<html>
	<head>
    	<title>Javascript简单示例</title>
		<script language="javascript">
            function func1()
			{alert("function1 has been called");}
			function func2()
			{alert("function2 has been called");}
		</script>
	</head>
	<body>
	<input name="click" type="button" id="click" onclick="func1(),func2()" />
    </body>
</html>

利用设计界面插入按钮

更改按钮名称

效果：

声明对象

<html>
	<head>
		<title>Javascript example</title>
	</head>
	<body>
		<script language="javascript">
			function student(name,school,grade){
				this.name=name;
				this.school=school;
				this.grade=grade;
			}
			hui=new student("nothing_gonna","xx school","seconde grade");
			with(hui)
			{	document.write(name+":"+school+","+grade+"<br/>");}
			if(window.hui){
				document.write("object hui exists");
			}
			else
				document.write("object hui doen't exists");
		</script>
	</body>
</html>

验证文本框输入内容

<html>
	<head>
		<title>Javascript example</title>
	</head>
	<body>
		<script language="javascript">
			function getLoginMsg()
			{
				loginMsg=document.LoginForm;
				alert("id:"+loginMsg.userID.value+"\n"+"password:"+loginMsg.password.value);
			}
			function setLoginMsg(Object){
				alert(Object.id);
				}
		</script>
<form id="LoginForm" name="form1" action="1.php" method="get">
  <label>userID:
  <input type="text" name="userID" />
  <br />
  password:
  <input type="text" name="password" />
  <br />
  </label>
  <p>
    <label>
    <input type="button" value="login" onclick="getLoginMsg()"/>
    </label>
  <label>
    remember me 
  <input type="checkbox" name="checkbox" value="checkbox" onclick="setLoginMsg()"/>
  </label>
  </p>
</form>
	</body>
</html>

利用Javascript实现页面元素是否输入的校验，如果没有输入，则将焦点设置在该页面元素上

==设置焦点的函数：document.getElementById(“文本域的id”).focus();==

<html>
<head><title>作业</title></head>

	<script language="javascript">
	function judge()
	{
		Msg=document.LoginForm
       	if(Msg.one.value=="")
			{	
				document.getElementById("i1").focus(); }
		else if(LoginForm.two.value=="")
			{	
				document.getElementById("i2").focus(); }
		else if(LoginForm.thr.value=="")
			{	
				document.getElementById("i3").focus(); }
		else alert("1:"+Msg.one.value+"\n2:"+Msg.two.value+"\n3:"+Msg.thr.value);
	}
	</script>
<body>
	<form id="LoginForm" name="form1"  method="get">
	  <label>1st
	  <input type="text" name="one" id='i1'>
	  </label>
	  <p>
	    <label>2nd
	    <input type="text" name="two" id='i2'>
	    </label>
	  </p>
	  <p>
	    <label>3rd
	    <input type="text" name="thr" id='i3'>
	    </label>
	  </p>
	  <p>
	    <label>
	    <input type="button" value="提交" onclick="judge()">
	    </label>
	  </p>
	</form>	
</body>
</html>