JavaScript学习笔记[更新中...]
JavaScript学习笔记
一、数组（Array）
关于数组的排序以及自定义排序
二、字符串
三、对象
四、定时器
五、Screen
六、绑定事件
七、关于<a>标签 href
八、Function 对象模型
1.
2、隐含对象arguments
九、javascript中数据类型
十、javascript之构造函数方式定义对象
十一、Javascript中定义对象的几种方式(javascript中没有类的概念 只有对象)
3、使用原型(prototype：Object对象的属性不是js库)方式创建对象
4、动态原型方式创建对象:在构造函数中通过标志量，让所有对象共享一个方法，而每个对象又拥有自己的属性
十二、Javascript中继承
1）对象冒充
2）call方法方式
call方法是Function对象中的方法，因此我们定义的每一个function对象都拥有该方法。可以通过函数名来调用call方法，call方法中的第一个参数会被传递给函数中的this,从第二个开始依次赋值给函数中的参数。
3）apply方法方式
4）原型链方式（无法给构造函数传参）
5）混合方式实现对象继承(推荐)
Ajax
一、数组（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*/
//清除定时器，需要传入被清除的定时器ID
clearInterval(timeId);
五、Screen
<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>
七、关于<a>标签 href
<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>
八、Function 对象模型
1.
<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>
2、隐含对象arguments
function add(num1, num2)
{
/*
在javascript中，每个函数都有一个隐含的对象arguments，
表示给函数实际传递的参数。
*/
alert(arguments[0]);
alert(arguments[1]);
}
//函数名.length表示函数期望传入的参数个数
alert(add.length);
add(2, 3);
九、javascript中数据类型
<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以及object var 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之构造函数方式定义对象
/*在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);
十一、Javascript中定义对象的几种方式(javascript中没有类的概念 只有对象)
//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();
3、使用原型(prototype：Object对象的属性不是js库)方式创建对象
//使用原型(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();
4、动态原型方式创建对象:在构造函数中通过标志量，让所有对象共享一个方法，而每个对象又拥有自己的属性
//动态原型方式创建对象:在构造函数中通过标志量，让所有对象共享一个方法，而每个对象又拥有自己的属性
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();
十二、Javascript中继承
1）对象冒充
<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>
2）call方法方式
call方法是Function对象中的方法，因此我们定义的每一个function对象都拥有该方法。可以通过函数名来调用call方法，call方法中的第一个参数会被传递给函数中的this,从第二个开始依次赋值给函数中的参数。
<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>
3）apply方法方式
<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>
4）原型链方式（无法给构造函数传参）
<script type="text/javascript">
//使用原型链(prototype chain)方式实现继承:无法给构造函数传参数
function Parent()
{
}
Parent.prototype.hello = "hello";
Parent.prototype.sayHello = function()
{
alert(this.hello);
}
function Child()
{
}
//将Child原型指向Parent
Child.prototype = new Parent();
Child.prototype.world = "world";
Child.prototype.sayWorld = function()
{
alert(this.world);
}
var c = new Child();
c.sayHello();
c.sayWorld();
</script>
5）混合方式实现对象继承(推荐)
<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>
Ajax
<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方式为null
xmlHttpRequest.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>