JS学习笔记_基础篇

var globe = "全局变量"; //globe是全局变量，不管加不加var
	test();
	function test()//js 方法写法：function(固定)+方法名字
	{
		var local = "局部变量"; //local是局部变量
		//如果在函数中声明时不加var 也会变成全局变量。 js的诡异
		document.writeln(globe);//将变量值写到页面上
		document.writeln(local);
	}
	
	document.writeln(globe);
	document.writeln(local);
	
	function test2(){
		var i = 3;
		alert(i);
		i=true;//js是弱类型
		alert(i);
	}

	with (document) {//后面的 write都是 document对象下的方法，用了with不用挨个 document.write()...
				write("<ul>");
				write("<li>hello</li>");
				write("<li>world</li>");
				write("<li>hello world</li>");
				write("</ul>");
			}

 function member(name, gender) //可以看成构造函数(可以new，生成的都是方法的实例，没有class概念)，也可以看成普通函数 不能指定参数的类型，直接写参数名字
   {
	   this.name = name;
	   this.gender = gender;
   }
   
   function showProperty(obj, objString)
   {
	   var str = "";
	   
	   for(var i in obj)//遍历对象里面的每个属性,obj 传进来是一个对象
	   {
		   str += objString + "." + i + " = " + obj[i] + "<br>";
	   }
		   
	   return str;//带返回值
   }
   
   var obj = new member("蛋蛋", "男"); //建立对象实例
   
   document.writeln(showProperty(obj,"person"));

 var date = new Date();//Date 内置对象
    var day = date.getDay();//0-6 0表示星期天
    if(0 == day)
    {
    	day = "日";//星期0 改为星期天
    }//date.getMonth()//返回的是0-11 表示月份
    //date.getYear()  是减去1900后的
    document.writeln("现在时刻： " + (date.getYear() + 1900) + "年 " + (date.getMonth() + 1) + "月" + 
    	date.getDate() + "日" + " 星期" + day + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds())
   // document.writeln(date)

 //var fruit = new Array("苹果", "鸭梨", "橙子");
    
    //var fruit = ["苹果", "鸭梨", "橙子"]; //推荐使用,没有new Array() 直接赋值
    
    var fruit = new Array();//数组对象Array JS内置，可自由扩容，里面放的数据类型可以不同
    //new Array(); 调用无餐的构造方法，括号可以不写，但是调用有参数的构造方法必须写括号
    fruit.push("苹果");//数组可以当作队列或者栈来用，让数组里逐个增加元素，下标也是0开始的
    fruit.push("鸭梨");
    fruit.push("橙子");
    fruit.push("香蕉");
    fruit.push("西瓜");
	
    for(var i = 0; i < fruit.length; i++)
    {
    	document.writeln("fruit[" + i + "] = " + fruit[i] + "<br />")
    }

 var fruit = ["苹果", "香蕉", "桔子"];
     fruit.pop();//从队尾去掉一个元素
    with(document)
    {
    	write("<ul>");
    	write("<li>" + fruit.join() + "</li>");//苹果,香蕉,桔子(默认逗号分割)
    	write("<li>" + fruit.join(":") + "</li>");//苹果:香蕉:桔子
    	write("<li>" + fruit.toString() + "</li>");//苹果,香蕉,桔子
    	write("<li>" + fruit.reverse().join() + "</li>");//桔子,香蕉,苹果
    	write("<li>" + fruit.valueOf() + "</li>");//桔子,香蕉,苹果（数组引用，前面已经倒序过了）
    	write("</ul>");
    }

 var fruit = new Array(3);
    fruit[0] = new Array("苹果", 2);//二维数组
    fruit[1] = new Array("桔子", 3);
    fruit[2] = new Array("西瓜", 4);
    for(var i = 0; i < fruit.length; i++)
    {
    	for(var j = 0; j < fruit[i].length; j++)
    	{
    		document.write("fruit[" + i + "][" + j + "] = " + fruit[i][j] + "<br>");
    	}
    	
    	document.write("<br>");
    }

var str = "javascript";
	var num = 1234;
	
	with(document)
	{
		write(str.toUpperCase() + "<br>");//转成大写
		write(num.toString().charAt(2), "<br>", "<br>");//取索引2的字符，任何元素都有toString()
		write(str.substring(0,4), "<br>");//0(包含)截取到4(不包含)的位置，write方法：逗号和加号都是拼接
	}

function isEmail()
	{
		//var emailValue = document.getElementsByName("email")[0].value;  也可以用下面那种方式取值
		emailValue = document.getElementById("emailId").value;
		if(emailValue.indexOf("@") == -1)//返回字符串的索引位置,没有就返回-1
		{
			alert("请填写正确的Email地址");
		}
		else
		{
			alert("ok");
		}
	}

function member(name, gender)
    {
    	this.name = name;
    	this.gender = gender;
    }
    
    var m1 = new member("zhangsan", "m");//实例一个对象
    var m2 = new member("lisi", "m");
    var m3 = new member("wangwu", "f");
    
    with(document)
    {
    	write(m1.name + ":" + m1.gender + "<br>");
    	write(m2.name + ":" + m2.gender + "<br>");
    	write(m3.name + ":" + m3.gender + "<br>");
    }

	function member(name, gender) {
				this.name = name;
				this.gender = gender;
				this.display = display; //指定member对象的display方法,相当于一个成员方法
			}
			
			function display() {
				var str = this.name + " : " + this.gender;
				document.writeln(str + "<br>");
			}
			
			var m1 = new member("zhangsan", "f");//定义对象的一种方式
			var m2 = new member("lisi", "f");//加不加分号都可以,但是最佳实践加上!
			var m3 = new member("wangwu", "m");

			m1.display();
			m2.display();
			m3.display();

		<script type="text/javascript">
			function mOver(object) {
				object.color = "red";
			}
			
			function mOut(object) {
				object.color = "blue";
			}
		</script>
	</head>
  <body>
  <!-- 
  		style="cursor:hand  内联样式,优先级最高" 
  		window:整个浏览器对象,里面方法可以直接用 例如alert
  		onclick="window.location.href='http://www.google.com'" :外面是双引号,里面就用单引号指定
  		onmouseover:鼠标滑倒上面的时候
  		onmouseout:鼠标离开的时候
  		this:font对应的那个元素的对象,就是当前font对象
  -->
    <font style="cursor:hand" 
    onclick="window.location.href='http://www.google.com'" 
    onmouseover="mOver(this)" onmouseout="mOut(this)">欢迎访问</font>

//JS总的就两个定时器  一个 setTimeout
			//setTimeout在指定时间之后执行指定的动作(JS的函数),JS内置函数
			function count() {
				setTimeout(sayhello(), 1000);
			}
			
			function sayhello(){
				alert("a");
			}

<input type="button" value="计时开始" onclick="count();">

//第二种定时器   setInterval 每隔一段时间执行动作
			var sec = 0;
			var timeId = setInterval("count();", 1000);//每隔1s,执行count(),在页面一加载就执行,因为是成员变量
			//innerHTML : 获得元素的html文本
			function count() {
				document.getElementById("num").innerHTML = sec++;
			}
			
			//关窗口,刷新页面,clearInterval函数  只有这3中能使 Interval终止执行
			function stopCount() {
				clearInterval(timeId);//终止定时器,参数:setInterval的返回值
			}

<font color="red" id="num">0</font>秒钟
		<input type="button" value="停止" onclick="stopCount();">

<head>
		<script type="text/javascript">
			function checkPassword(object) {
				if (object.value.length <= 4) {
					alert("密码长度过短");
			
					object.focus();//把鼠标焦点从新定位到输入域
					object.select();//将已有的内容选中  firefox不支持
				}
			}
		</script>
	</head>
	<body>
		<!--
			JS内置对象(基于浏览器的,不同浏览器提供的功能不一样):图像对象  导航对象(window)  窗口对象  屏幕对象  事件对象  历史对象 
			文件对象  描点对象 连接对象  框架对象  表单对象  位置对象
			重点: 文件对象  表单对象  
		-->
		密码：<!-- onblur:鼠标离开当前输入域 -->
		<input type="password"  onblur="checkPassword(this)">
	</body>

	//点确定就返回真,取消就返回假
			if (confirm("你想继续么？"))//confirm 内置函数,这函数的返回值决定后续流程
			{
				window.location.href = "http://www.google.com";
			} else {
				alert("Bye");
			}

 with(document)
  {
	  write("屏幕设定值<br>");
	  write("实际高度：" ,screen.availHeight, "<br>");//728  减去任务栏的高度
	  write("实际宽度：" ,screen.availWidth, "<br>");//1366
	  write("屏幕区域高度： " , screen.height, "<br>");//768
	  write("屏幕区域宽度:", screen.width, "<br>");//1366
  }

 function getEvent(event)
    {
    	alert("事件类型： " + event.type);
    }
    
    document.write("单击...");
    //document.onmousedown  整个文档对象 的 鼠标点击事件
    document.onmousedown = getEvent;
    </script>
	 <input type="button" value="我是一个按钮" id="button1">
    <script type="text/javascript">
	
	 var v = document.getElementById("button1");
	 alert(v);
	 v.onclick = clickHandler;//只能写名字 不能加括号
	
	 function clickHandler()//IE:方法里不写event参数也行,firefox不行,firefox会生成一个事件对象(名字任意)
	 //IE:用本身产生的对象event(名字固定)
	 {
		 alert(event.type);
	 }
	

 <head>
    <script type="text/javascript">
    
    var timerId;
    
    function loadPage()
    {
    	//setInterval:执行多次只能用setInterval
    	timerId = setInterval('countDown()', 1000);
    }
    
    </script>

  </head>
  
  <!-- onload:页面整体结构加载完才执行,下面的countDown() 也加载完毕 所以可以执行 -->
  <body onload="loadPage();">
    
    <script type="text/javascript">
    
    var sec = 10;
    
    function countDown()
    {
    	if(sec > 0)
    	{
    		document.getElementById("num").innerHTML = sec--;
    	}
    	else
    	{
    		clearInterval(timerId);
    		//window下的对象 不用写 window前缀
    		location.href = "http://www.google.com";
    	}
    }
    
    </script>
    
    <br>
    <font id="num" size="7">10</font>秒钟后前往
  </body>

<script type="text/javascript">
	
	function linkGetter()
	{
		//links 属性: 返回当前文档的所有链接
		//alert(document.links.length + "个搜索引擎");
		for(var i = 0; i < document.links.length; i++)
		{
			alert(document.links[i]);
		}
	}
	</script>
  </head>
  
  <body>
    
    <h1>常用的搜索引擎</h1>
    
    <a href="http://www.google.com">Google</a><br>
    <a href="http://www.baidu.com">Baidu</a><br>
    <a href="http://www.yahoo.com">Yahoo</a><br>
    <a href="http://www.sogou.com">Sogou</a><br>
    <a href="http://www.bing.com">Bing</a><br>
    
    <input type="button" value="Address" onclick="linkGetter();">
  </body>

  <head>
	<script type="text/javascript">
	
	function moveNext(object, index)
	{
		if(object.value.length == 4)
		{
			//form只有5个元素
			//第四个输入域好后  焦点就在现在的button上面
			document.forms[0].elements[index + 1].focus();
		}
	}
	
	function showResult()
	{	
		//拿到第一个form
		var f = document.forms[0];
		
		var result = "";
		
		for(var i = 0; i < 5; i++)
		{
			result += f.elements[i].value;
		}
		
		alert(result);
		
	}
	
	
	</script>


  </head>
  
  <!-- document.forms[0].elements[0].focus();  第一个form 的第一个元素 得到焦点 -->
  <body onload="document.forms[0].elements[0].focus();">
    
    <form>
    
    <!--onkeyup:键盘事件  按下松开后触发 -->
    <input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 0);">-
    <input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 1);">-
    <input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 2);">-
    <input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 3);">
    
    <input type="button" value="显示" onclick="showResult();" >
    </form>
  </body>

		<script type="text/javascript">

			var today = new Date();
			
			var expireDay = new Date();
			
			//31天的毫秒
			var msPerMonth = 24 * 60 * 60 * 1000 * 31;
			
			//重新设置时间  当前的时间 加  一个月的时候.  也就是31天后的时间.
			//cookie保存31天  31天不用重新登陆
			expireDay.setTime(today.getTime() + msPerMonth);
			
			//expireDay.toGMTString(): 返回cookie要求的时间格式.  内置方法
			//这样就把cookie写到硬盘上了			
			document.cookie = "name=zhang;expires=" + expireDay.toGMTString();
			
			document.writeln("cookie已经写到硬盘上了");
			
			document.writeln("内容是：" + document.cookie);
			
			document.writeln("有效日期是：");
			
			document.writeln(expireDay.toGMTString());
</script>

	//函数的本源是一个对象.
		
		//如果此时传两个参数 则一一对应,第二个参数不接收
		function add(number)
		{
		 	alert(number + 20);	
		}
		
		/*  这种写法和上面的写法等价.
		 * 上面的写法会转换成这种.
		 * add  指向对象的引用(函数)
		 * 
		 * 很多框架中都用这种方式定义.
		 * JS中因为没有方法的重载
		var add = function(number)
		{
			alert(number);
		}
		*/
		
		function add(number, number1)
		{
			alert(number);
			alert(number1);//传一个参数的时候 会打印:Undefined 类型  值为undefined(Undefined类型只有一种值,类似boolean只有两种)
			alert(number+20);
		}
		
		/*
		 * 这种写法和上面的写法等价
		 * 上上的add 的引用就替换成此时的add了.
		 * 两个参数的方法,可以用一个参数调用,一一对应,传一个参数就和第一个位置的参数对应
		var add = function(number, number1)
		{
			alert(number + 30);
		}	
		*/
		add(10);//只执行最后一个add方法.

<script type="text/javascript">
		//add(20);

		//Function对象(F大写):接收参数是不定长的,对于Function对象,所有的参数都是字符串类型,最后一个参数为方法体,前面的为参数  
		
		//自定义函数的本质:声明一个Function对象,函数的 名字  指向对象的引用
		var add = new Function("number", "number1", "alert(number + number1);");

		//add  指向新的引用
		var add = new Function("number", "alert(number + 20);");

		add(10, 30);
		</script>

function add(number1, number2)
		//每个函数都有隐式的对象  arguments
		{
			alert(arguments.length);//实际赋参的个数.		
			alert(arguments[0]);//实际传的值  与 方法头的形参没关系
			alert(arguments[1]);
			alert(arguments[2]);
		}	
		//add(2, 3, 4);

		function add2()
		{
			//很多框架都通过这种方式 实现重载
			if(1 == arguments.length)
			{
				alert(arguments[0]);
			}
			else if(2 == arguments.length)
			{
				alert(arguments[0] + arguments[1]);
			}
			else if(3 == arguments.length)
			{
				alert(arguments[0] + arguments[1] + arguments[2]);
			}
		}

		
		add2(3);
		add2(3, 4);
		add2(3, 4, 5);

  <head>
	<script type="text/javascript">
	function validate()
		var num = document.getElementsByName("number")[0];
		
		if(num.value.length < 1)
		{
			alert("输入不能为空！");
			
			num.focus();
			
			return false;
		}
		
		//判断每一个是否都数字
		for(var i = 0; i < num.value.length; i++)
		{
			var param = "0123456789";
			//param.indexOf 全局函数
			if(param.indexOf(num.value.charAt(i)) == -1)
			{
				alert("输入必须为数字");
				
				num.focus();
				
				return false;
			}
		}
		
		//parseInt:全局函数
		if(parseInt(num.value) < 5 || parseInt(num.value) > 15)
		{
			num.value = 10;
		}
		
		return true;
	}
	
	
	
	</script>

  </head>
  
  <body>
  	<!-- onsubmit:提交的时候做检查 -->
    <form action="end.jsp" name="form1" method="post" onsubmit="return validate();">
   请输入数字 （5——15）<input type="text" name="number"><br>
				   <input type="submit" value="submit">
    </form>
  </body>

var value = <%= request.getParameter("number")%>;//看执行时机  tomcat解析jsp的时候把值直接放在var value = 后面  
	//传递到客户端再执行下面的alert
	alert(value);
	
	function checkAll()
	{
		//获得所有复选框
		var s = document.getElementsByName("check");
		//获得全选的复选框(就上面那个框)
		var m = document.getElementsByName("all")[0];
		
		//如果上面那个框选中,下面就让全部选中
		if(m.checked)
		{
			for(var i = 0; i < s.length; i++)
			{
				s[i].checked = true;
			}
		}
		else
		{
			//上面那个不选 下面都不选
			for(var i = 0; i < s.length; i++)
			{
				s[i].checked = false;
			}
		}
	}
	
	
	//基于事件,每单击展开或收缩就产生一个事件
	function turn()
	{
		with(document)
		{
			//获得按钮
			var m = getElementById("change");
			//获得表格对象
			var n = getElementById("table");
			
			if(m.value == "收缩")
			{
				//要把表格收起来,
				//操作的对象.style(属性).对象可用的样式
				n.style.display = "none";//表格不显示出来
				m.value = "展开";//把按钮名字改为展开
			}
			else
			{
				n.style.display = "block";//展开
				m.value = "收缩";
			}
		}
	}

 <table border="1" align="center" width="60%">
    
    <tr>
    	<td>
    		<input type="checkbox" name="all" onclick="checkAll();">全选
    	</td>
		
		<td>
			<input type="button" value="收缩" id="change" onclick="turn();">
		</td>

	   </tr>
    
    </table>
    
    <% int number = Integer.parseInt(request.getParameter("number")); %>
    
    <table border="1" align="center" width="60%" id="table">
    
    <% for(int i = 1; i <= number; i++)
    {%>
    
    <tr>
    	<td>
    		<input type="checkbox" name="check">
    	</td>
    
    	<td>
    		<%= i %>
    	</td>
    </tr>
    <%} %>
    
    </table>