- 浏览: 12211 次
- 性别:
- 来自: 西安
最新评论
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>
- jsunit2_2.zip (7.4 MB)
- 下载次数: 0
相关推荐
javaScript学习笔记总结.docx
javascript学习笔记讲解版参考.pdf
HTML笔记. J2EE笔记. Javascript笔记. JAVA笔记.oracle 笔记.Linux笔记.tomcat笔记.面试问题.数据结构.听韩顺平的笔记.正则表达式.等,我是我在上大学时学习做的笔记,拿出来和大家共享。。
JavaScript学习笔记归纳.pdf
JavaScript学习笔记.pdf
JavaScript-学习笔记
HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 ...
javascript 教程-学习笔记.docx
个人Javascript学习笔记 精华版 个人Javascript学习笔记 精华版 个人Javascript学习笔记 精华版
JavaScript练习程序学习笔记.rar
javascript-jquery学习笔记.docx
从菜鸟教程上学习的关于js的学习笔记,可以用于参考学习使用,脑图样式,浏览更方便,有需要的同学可以带走
JavaScript学习笔记JavaScript学习笔记
JavaScript的MVVM库Vue.js入门学习笔记_.docx
JavaScript学习笔记.docx
Javascript学习笔记.docx
JavaScript学习笔记.doc