JavaScript学习笔记[更新中...]
JavaScript学习笔记
一、数组（Array）
<script type="text/javascript">/*数组的定义*///第一种var arr1 = ["A","B","C"];//第二种var arr2 = new Array("A", "B", "C");//第三种var arr3 = new Array(2);arr3.push("A");arr3.push("B");//遍历数组for(var i = 0; i < arr1.length; i++){document.writeln("arr[" + i + "]" + arr1[i] + "<br />");} with(document) { write("<ul>"); write("<li>" + arr.join() + "</li>"); write("<li>" + arr.join("#") + "</li>"); write("<li>" + arr.toString() + "</li>") ; /*数组反转*/ write("<li>" + arr.reverse().join()+ "</li>"); write("<li>" + arr.valueOf() + "</li>"); write("</ul>"); }</script><script type="text/javascript">var arr = [1, 3, 25];/*对于Javascript数组的sort方法来说，它会先将待排序的内容转换为字符串(调用toString()方法),按照字符串的先后顺序排序*///数组的sort方法。默认升序//arr.sort();//alert(arr);//实现数组自定义排序function compare(num1, num2){var temp1 = parseInt(num1);var temp2 = parseInt(num2);if(temp1 < temp2){return -1;}else if(temp1 == temp2){return 0;}else{return 1;}}//函数名是对象的引用arr.sort(compare);alert(arr);</script>var str = "javascript";var num = 12345;//返回索引为3的字符alert(str.charAt(3));//转大写alert(str.toUpperCase());//转小写alert(str.toLowerCase());alert(num.toString().charAt(3));alert(str.indexOf('t'));alert(str.substring(0,4));/*Object*/function member(name, gender){this.name = name;this.gender = gender;this.display = display;//指定member对象的display方法}var m1 = new member("test1", "Man");with(document){write(m1.name + ":" + m1.gender + "<br />");}function display(){var str = this.name + ":" + this.gender;document.writeln("display:" + str + "<br />");}var m2 = new member("test2","f");m1.display();//第一种/*setTimeout*///经过5000毫秒执行一次后，不再执行setTimeout("alert('Successed');",5000);//第二种/*setInterval*///每隔1000毫秒执行一次，除非关闭浏览器或者执行clearInterval方法才停止执行var timeId = setInterval("method();", 1000);/*clearInterval*///清除定时器，需要传入被清除的定时器IDclearInterval(timeId);<script type="text/javascript">//screen对象with(document){write("屏幕设定值：<br />");//屏幕实际的高度write("屏幕实际的高度：", screen.availHeight, "<br />");//屏幕实际的宽度write("屏幕实际的宽度：", screen.availWidth, "<br />");//屏幕的区域高度write("屏幕的区域高度：", screen.height, "<br />");//屏幕的区域宽度write("屏幕的区域宽度：", screen.width, "<br />");}</script><script type="text/javascript">//event对象(绑定事件)/*function getEvent(event){alert("事件类型：" + event.type);}document.write("单击...");绑定事件document.onmousedown = getEvent;*/function loadPage(){var obj = document.getElementById("btn1");//注意只需要函数名obj.onclick = testBind;obj.onmouseover = function(){alert("button is onmouseovered");}}function testBind(){alert("button is clicked");}</script><body onload="loadPage();"><input type="button" value="点击我" id="btn1" /></body>
<body><!--如果href="#"，那么a标签在执行完onclick后会再次执行href--><!--比如说当前页URL是http://www.google.com/--> <!--那么这时候herf="http://www.google.com/#"--><!--就无法返回始终在此页--><a href="#" onclick="history.back();">返回</a><!--如果写成这样 不管在哪个浏览器下 都能返回--><a href="javascript:void(0);" onclick="history.back();">返回</a></body>
<script type="text/javascript">function add(num){alert(num + 10);}function add(num){alert(num + 20);}function add(num, num1){alert(num + 30);}add(10);//这时候alert的值为40/*以上的形式就相当于var add = function(num){alert(num + 10);}var add = function(num, num1){alert(num + 30);}看似是简单的覆盖 实际上是add的引用 指向了一个新的对象，1、在javascript中，函数（function）就是对象2、在javascript中没有方法重载的说法。在javascript中不管定义的函数function中有多少个参数你都可以传或者不传，它都会按顺序去赋值*/</script>function add(num1, num2){/*在javascript中，每个函数都有一个隐含的对象arguments，表示给函数实际传递的参数。*/alert(arguments[0]);alert(arguments[1]);}//函数名.length表示函数期望传入的参数个数alert(add.length);add(2, 3);<script type="text/javascript">//JavaScript中有五种数据类型：Undefined、Null、Boolean、Number以及String。//1.Undefined数据类型的值只有一个：undefined//2.Null数据类型的值只有一个：null//3.Boolean数据类型的值有两个：true和false//4.javascript中没有字符类型(char)//5.typeof一元运算符，后跟变量的名称，用于获取变量的数据类型，其返回值有5个://6.undefined、boolean、number、string以及objectvar s = 'hello';alert(typeof s);//7.在javascript中，如果函数没有声明返回值，那么会返回undefined//8.null与undefined关系：undefined实际上是从null派生出来的 也就是null == undefined 为true//9.强制类型转换：在javascript中有3种强制类型转换：Boolean(value),Number(value),String(value)//10.在javascript中，对于函数中定义的变量来说，加var表示局部变量，不加var表示全局变量。//11.在javascript中，所有对象都是从Object继承过来的。</script>
/*在javascript中，可以动态添加属性，也可以动态的删除对象的属性*/var obj = new Object();//动态添加属性的两种方式//1.obj.name = "test";//2.//obj["name"] = "test2";alert(obj.name);//动态删除对象的属性delete obj.name;//name属性已经从obj对象中删除alert(obj.name);
//在Javascript中最常见一种定义对象的方式var obj = {name:"zhangsan", age:"15"};alert(obj.name);alert(obj.age);//1.基于已有对象扩充其属性和方法var obj = new Object();obj.name = "zhangsan";obj.setName = function(name){this.name = name;alert(name);}obj.setName("test");//2、工厂方式创建对象function createObject(){var obj = new Object();obj.name = "zhangsan";obj.password = "123";obj.get = function(){alert(this.name + "," + this.password);}return obj;}var obj1 = new createObject();var obj2 = new createObject();obj1.get();obj2.get();//使用原型(prototype：Object对象的属性不是js库)方式创建对象function Person(){}Person.prototype.username = new Array();Person.prototype.password = "123";Person.prototype.getInfo = function(){alert(this.username + ", " + this.password);}//调用var p1 = new Person();var p2 = new Person();//修改用户名称p1.username.push("zhangsan");p1.username.push("lisi");p1.password = "456";p1.getInfo();p2.getInfo();/*注：1.单纯使用原型方式定义类无法在构造函数中为属性赋初值，只能在对象生成后再去改变属性的值2.如果使用原型的方式对象，那么生成的所有对象会共享原型中的属性， 这样一个对象改变了该属性，也会反应到其他对象中*///使用原型+构造函数方式定义对象,对象间的属性互不干扰，各个对象间共享同一个方法function Person(){this.username = new Array();this.password = "123";}Person.prototype.getInfo = function(){alert(this.username + ", " + this.password);}var p1 = new Person();var p2 = new Person();p1.username.push("zhangsan");p2.username.push("lisi");p1.getInfo();p2.getInfo();//动态原型方式创建对象:在构造函数中通过标志量，让所有对象共享一个方法，而每个对象又拥有自己的属性function Person(){this.username = "zhangsan";this.password = "123";if(typeof Person.flag == "undefined"){alert("invoked");Person.prototype.getInfo = function(){alert(this.username + ", " + this.password);}Person.flag = true;}}var p1 = new Person();var p2 = new Person();p1.getInfo();p2.getInfo();<script type="text/javascript">//继承第一种方式：对象冒充//注：在Javascript中this不是指本类，而是谁调用就代指谁function Parent(username){this.username = username;this.sayHello = function(){alert(this.username);}}function Child(username, password){//将method指向Parent对象this.method = Parent;//将子类的username赋值this.method(username);delete this.method;//以上3行代码是最关键的this.password = password;this.sayWorld = function(){alert(this.password);}}var p = new Parent("zhangsan");var c = new Child("lisi", "1234");p.sayHello();c.sayHello();c.sayWorld();</script><script type="text/javascript">//继承的第二种实现方式：call方法方式，Function对象的方法function test(str){alert(this.name + "," + str);}var object = new Object();object.name = "zhangsan";//test.call相当于调用了test函数test.call(object, "learn");//将object赋给了this，从传入的第二个参数开始将依次赋值给test中定义的参数</script><script type="text/javascript">//第三种方式 apply方法方式function Parent(username){this.username = username;this.sayHello = function(){alert(this.username);}}function Child(username, password){//apply方法只是将call方法的零散的传值封装成了数组Parent.apply(this, new Array(username));this.password = password;this.sayWorld = function(){alert(this.password);}}var p = new Parent("zhangsan");var c = new Child("lisi", 999);p.sayHello();c.sayHello();c.sayWorld();</script><script type="text/javascript">//使用原型链(prototype chain)方式实现继承:无法给构造函数传参数function Parent(){}Parent.prototype.hello = "hello";Parent.prototype.sayHello = function(){alert(this.hello);}function Child(){}//将Child原型指向ParentChild.prototype = new Parent();Child.prototype.world = "world";Child.prototype.sayWorld = function(){alert(this.world);}var c = new Child();c.sayHello();c.sayWorld();</script><script type="text/javascript">//混合方式实现对象继承(推荐)function Parent(hello){this.hello = hello;}Parent.prototype.sayHello = function(){alert(this.hello);}function Child(hello, world){Parent.call(this, hello);this.world = world;}Child.prototype = new Parent();Child.prototype.sayWorld = function(){alert(this.world);}var c = new Child("hello", "world");c.sayHello();c.sayWorld();</script><script type="text/javascript">//定义一个空的xmlHttpRequest，用于接收XMLHttpRequest对象var xmlHttpRequest = null;function ajaxSubmit(){//如果是IE浏览器if(window.ActiveXObject){xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");}//除IE外的其他浏览器else if(window.XMLHttpRequest){xmlHttpRequest = new XMLHttpRequest();}if(null != xmlHttpRequest){var v1 = document.getElementById("v1").value;var v2 = document.getElementById("v2").value;/*GET请求方式xmlHttpRequest.open("GET", "AjaxServlet?v1=" + v1 + "&v2=" + v2, true);//绑定回调函数xmlHttpRequest.onreadystatechange = ajaxCallBack;//GET方式为nullxmlHttpRequest.send(null);*//*POST请求方式*/xmlHttpRequest.open("POST", "AjaxServlet", true);//绑定回调函数xmlHttpRequest.onreadystatechange = ajaxCallBack;//Post请求方式需要设置请求头xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2);}}//回调函数function ajaxCallBack(){if(xmlHttpRequest.readyState == 4){if(xmlHttpRequest.status == 200){var responseText = xmlHttpRequest.responseText;document.getElementById("showMsg").innerHTML = responseText;}}}</script>