javascriptday1

最新推荐文章于 2024-07-15 14:11:16 发布

笑一笑

最新推荐文章于 2024-07-15 14:11:16 发布

阅读量2k

点赞数

分类专栏： JavaScript 文章标签： javascript function arrays html button url

本文链接：https://blog.csdn.net/tanyit/article/details/7027251

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JavaScript 网页脚本语言;从C语言的基础上演变出来的
//1.JavaScript定义变量;
//2.JavaScript定义方法(函数);
JavaScript中定义变量统一使用var来定义.没有具体的数据类型;
JavaScript也有变量的作用域;跟Java的判定方式一样;

Java中定义方法的格式:
修饰符返回类型方法名(参数列表)异常处理 {方法体}
JavaScript定义方法的格式
function 方法名(参数列表) {方法体}

————————————————————————————————————————————————————————————

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>javascript test1</title>
	<!-- 
		Javascript 可以写在任何一个Html文档中的位置:
		Head中可以,Body中可以,Html之后也可以;
	 -->
	 <script type="text/javascript">
	 	//javascript 中的注释方式跟Java类似;
	 	/* javascript中只有块注释,没有Java中的文档注释 */
		var test;
		//javascript中的类型,只有在变量赋值之后才知道到底是什么类型;
		test = 123;//整数类型
		window.alert(test);
		test = "Tomcat";//字符串类型
		window.alert(test);
		test = new Array(5);//数组类型;也就是Java中的引用数据类型;对象;
		window.alert(test);
		//ext ==> 专门用来美化HTML界面的UI组件;这里面的所有内容全部都是Javascript
		//Ajax 技术  ===> 老技术新用法 ==> 使用到javascript
		
	 </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			//注意,如果要在变量定义之前进行调用或者打印是不可以的.
			// 因为这时候变量还没有初始化,所以调用是会出现错误;
			// 定义变量或者方法的时候一定要避免重复命名的问题;
			// 因为javascript中没有方法的重载,更没有方法的覆盖;
			// 错误的调用 : window.alert(test1);
		</script>
		<script type="text/javascript">
			//测试javascript变量的作用域
			var test1 = "test1";
			//编写javascript的方法
			function testVarArea(){
				var test2 = "test2";
				window.alert(test1);
				window.alert(test2);
			}
			//window.alert(test1);
			//window.alert(test2);
			//testVarArea();//在调用javascript的方法(函数)
			//java:for (声明变量并且初始化;判断表达式;变量修改){ 循环体 }
			//javaScript:for(声明变量并且初始化;判断表达式;变量修改){ 循环体 }
			function testfor(){
				for(i=0;i<10;i++){
					window.document.write("i==>"+i+"<br>");
				}
			}
			//testfor();
			//javascript => while 循环;
			function testwhile(){
				//java:while(判断表达式){ 循环体;变量修改}
				i = 0;
				while(i<10){
					window.document.write("while==>i : "+i+"<br>");
					i++;//自增
				}
			}
			//testwhile();
			function testdowhile(){
				i=0;
				do{
					window.document.write("do while i==>"+i+"<br>");
					i++;
				}while(i<10);
			}
			//testdowhile();
			function testifelse(){
				i=10;
				if(i<10){
					window.alert("i<10");
				}else if(i>10){
					window.alert("i>10");
				}else{
					window.alert("i=10");
				}
			}
			//testifelse();
			function testswitch(){
				i=1;
				switch(i){
					case 1:{		window.alert("i=1");	break;	}
					case 2:{		window.alert("i=2");	break;	}
					case 3:{		window.alert("i=3");	break;	}
					default :{	window.alert("找不到对应的选项");	}
				}
			}
			testswitch();
		</script>
	</head>
	<body>
	
	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			function testArray(){
				//测试javascript中的数组;
				//javascript中的数组和Java中的数组有区别;
				//声明1:使用new的方式声明一个Array数组;
				var array = new Array(5);
				//可以通过具体的下标值进行数据的赋值
				// 具体每个数据是什么类型需要根据赋值的结果来判定
				// 那么这样的话,javascript的数组就有点类似于Java中的一个有限长度的
				// 集合一样.
				array[0]="tom";
				array[1]=20;
				array[2]="male";
				array[3]=4500.00;
				array[4]="广州天河华南师范大学";
				//window.alert(array);
				return array;
			}
			function iteratorArray(){
				var arrays = testArray();
				for(i=0;i<arrays.length;i++){
					window.document.write("arrays["+i+"] ==> "+arrays[i]+"<br>");
				}
			}
			//iteratorArray();
			function testDate(){
				//测试Date()时间;
				var times = new Date();//获取本机系统的当前时间;
				window.document.write(times.toLocaleString());
			} 
			//testDate();
			
			/*for (变量 in 对象)
			{
			    在此执行代码
			}*/
			
			function testforin(){
				var a = testArray();
				for( i in a){
					window.document.write(a[i]+"<br>");
				}
			}
			//testforin();
			function testMath(){
				//Math对象,直接调用.不需要创建;
				window.document.write(Math.PI);
			}
			testMath();
		</script>
	</head>
	<body>
	
	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			//测试带有参数的JavaScript的function
			function testParam(r){
				area = Math.PI*r*r;
				len = Math.PI*r*2;
				window.document.write("圆的半径为:"+r+"<br>");
				window.document.write("经过计算的圆面积为:"+area+"<br>");
				window.document.write("经过计算的圆周长为:"+len);
			}
			//testParam(4.5);
			var arrays = [1,2,3,4,5,6,7,8,9];
			function testArrays(){
				for(i=0;i<arrays.length;i++){
					window.document.write(arrays[i]+"<br>");
				}
			}
			//testArrays();
			//window.document.write(arrays);
			//怎样创建javascript中的Map集合;
			var map = {name:"Tom",sex:"male",age:25,email:"tom@163.com"};
			//window.document.write(map);
			function testMap(){
				//专门遍历map集合;
				window.document.write(map.name+"<br>");
				window.document.write(map.sex+"<br>");
				window.document.write(map.age+"<br>");
				window.document.write(map.email+"<br>");
			}
			//testMap();
			function testNumber(){
				window.document.write(Number.MAX_VALUE+"<br>");
				window.document.write(Number.MIN_VALUE+"<br>");
				window.document.write(Number.NEGATIVE_INFINITY+"<br>");
				window.document.write(Number.POSITIVE_INFINITY+"<br>");
				window.document.write(isNaN("65")+"<br>");
				window.document.write(isNaN("6w5")+"<br>");
			}
			//testNumber();
			//转换字符串类型的数据为数字类型;
			//typeof 运算符返回一个用来表示表达式的数据类型的字符串。 
			function testParsInt(str){
				//打印具体的类型;
				window.document.write(typeof(str)+"<br>");
				//是不是数字类型;
				if(!isNaN(str)){
					i = parseInt(str);
					window.document.write(typeof(i));
				}
			}
			//testParsInt("12345");
			function testString(str){
				var s = new String(str);
				// 打印字符串中的第一个位置的字符 charAt(int index) 返回索引
				//window.document.write(s.charAt(0));
				// 将传入的字符串在次于当前的这个字符串进行连接;
				// 组合成一个新的字符串赋值给变量s;
				//s = s.concat(s);
				//window.document.write(s);
				//测试字符的下标值;
				//i = s.indexOf("r");
				//window.document.write(i);
				//arry = s.split(":");
				//window.document.write(arry);
				// 获取字符串从下标12开始取,向后取12个字符; 
				//window.document.write(s.substr(12,12)+"<br>");
				// substring(起始位置,结束位置);
				//window.document.write(s.substring(12, 24));
				// javascript中判定是否相等没有equals 只有 == 
				//利用循环的方式来逐个查找;
				/*for(i=0;i<s.length;i++){
					if(s.charAt(i)=="@"){
						window.document.write(s.charAt(i));
					}
				}*/
				//i = s.indexOf("@");
				//window.document.write(s.substr(i,1));
				//window.document.write(s.substring(i,i+1));
				//s = s.replace("m","&");
				//window.document.write(s);
				//字符串转换大小写
				window.document.write(s.toLowerCase()+"<br>");
				window.document.write(s.toUpperCase()+"<br>");
				window.document.write(s.toLocaleLowerCase()+"<br>");
				window.document.write(s.toLocaleUpperCase()+"<br>");
				window.document.write(s.toLocaleString()+"<br>");
			}
			//testString("Marry:female:23:marry@163.com");
		</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		
	</head>
	<body>
		<table border="1" >
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
			<tr>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
		</table>
		<input type="button"  value="showLine1"  οnclick="javascript:showLine(0);" />
		<input type="button"  value="showLine2"  οnclick="javascript:showLine(1);" />
		<input type="button"  value="showLine3"  οnclick="javascript:showLine(2);" />
		<input type="button"  value="showAll"   οnclick="javascript:showLine(3);"/>
	</body>
</html>
<script type="text/javascript">
	var trlist = document.getElementsByTagName("tr");
	function showLine(num){
	//将所有的tr全部都隐藏;
		for(i=0;i<trlist.length;i++){
			trlist[i].style.display="none";
		}
		//根据具体的下标来显示所需要看到的内容;
		if(num==0){
			trlist[num].style.display="";
			return;
		}
		if(num==1){
			trlist[num].style.display="";
			return;
		}
		if(num==2){
			trlist[num].style.display="";
			return;
		}
		if(num==3){
			for(i=0;i<trlist.length;i++){
				trlist[i].style.display="";
			}
			return;
		}
	}
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
	<body>
		<form action="" method="post" name="userFrm" id="userFrm">
			<table>
				<tr>
					<td colspan="2">用户登录</td>
				</tr>
				<tr>
					<td>用户名称:</td>
					<td><input type="text" name="userName" id="userName"></input></td>
				</tr>
				<tr>
					<td>用户密码:</td>
					<td><input type="password" name="passWord" id="passWord"></input></td>
				</tr>
				<tr>
					<td colspan="2">
						<input  type="button"  value="[登 录]" οnclick="javascript:getById();" /> 
						<input type="reset"  value="[重 置]"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>
<script type="text/javascript">
	function getInfor(){
	//userFrm 是 form表单的名字,通过这个名字可以获取到一个Form的对象;
	//在通过这个对象获取到userName名字对应的组件,
	//在利用这个获取到的input组件取得这个对象的value值;
		username = userFrm.userName.value;
		password = userFrm.passWord.value;
		if(username==""){
			window.alert("请输入用户名!");
			return ;
		}
		if(password == ""){
			window.alert("请输入用户密码!");
			return ;
		}
		window.alert("UserName="+username);
		window.alert("PassWord="+password);
	}
	function $(id){
		return document.getElementById(id);
	}
	function getById(){
		//如果使用Id属性作为获取HTML元素对象的方式;
		//那么要保证这个文档中没有一个id属性内容是相同的;
		username = $("userName").value;
		password = $("passWord").value;
		window.document.write("UserName:"+username+"<br>");
		window.document.write("PassWord:"+password);
	}
</script>

————————————————————————————————————————————————————————————————————————————————————————————

javascript 注册页面

reg.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<form name="regFrm">
	<table>
		<thead>
			<tr>
				<td colspan="2">用户注册</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>用户名:</td>
				<td><input type="text" name="username" size="15"/></td>
			</tr>
			<tr>
				<td>密码:</td>
				<td><input type="password" name="password" size="15"/></td>
			</tr>
			<tr>
				<td>性别:</td>
				<td><select name="sex">
				<!-- selected属性表示默认选中 -->
					<option value="male" selected="selected">男</option>
					<option value="female">女</option>
				</select></td>
			</tr>
			<tr>
				<td>地址:</td>
				<td><input type="text" name="address" size="40"/></td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td align="center" colspan="2"><input type="button" value="[注 册]" οnclick="javascript:sendTo();"/></td>
			</tr>
		</tfoot>
	</table>
</form>
</body>
</html>
<script type="text/javascript" language="javascript">
function sendTo(){
	regFrm.action="send.html";
	regFrm.method="get";
	regFrm.submit();//提交数据;
}
</script>

send.html页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<table width="40%">
	<thead>
		<tr>
			<td colspan="2">获取到reg.html的注册信息</td>
		</tr>
	</thead>
	<tbody>
	<tr>
		<td width="20%">用户名:</td>
		<td width="80%" id="userName"></td>
	</tr>
	<tr>
		<td>密码:</td>
		<td id="passWord"></td>
	</tr>
	<tr>
		<td>性别:</td>
		<td id="sex"></td>
	</tr>
	<tr>
		<td>地址:</td>
		<td id="address"></td>
	</tr>
	</tbody>
</table>
</body>
</html>
<script type="text/javascript" language="javascript">
//获取URL
var url = window.location;
//window.alert(url);
function get(id){
	return document.getElementById(id);
}
function setValues(){
	//这个方法就是将URL进行解析,然后添加到对应的td元素中;
	url = new String(url);
	url = url.split("?");
	//window.alert(url[1]);
	url = url[1].split("&");
	//window.alert(url);
	for(i=0;i<url.length;i++){
		str = url[i].split("=");
		if(str[0]=="username"){
			get("userName").innerHTML="<font color='red'>"+str[1]+"</font>";
		}
		if(str[0]=="password"){
			get("passWord").innerHTML="<font color='blue'>"+str[1]+"</font>";
		}
		if(str[0]=="sex"){
			get("sex").innerHTML=str[1];
		}
		if(str[0]=="address"){
			get("address").innerHTML=str[1];
		}
	}
}
setValues();
</script>

笑一笑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascriptday1

JavaScript 网页脚本语言;从C语言的基础上演变出来的//1.JavaScript定义变量;//2.JavaScript定义方法(函数);JavaScript中定义变量统一使用var来定义.没有具体的数据类型;JavaScript也有变量的作用域;跟Java的判定方式一样;Java中定义方法的格式:修饰符返回类型方法名(参数列表)异常处理 {方法体}
复制链接

扫一扫