探索Javascript

1、 JavaScript探索JavaScript JavaScript对象Javascript是一种基于对象的语言，因此可以使用面向对象的思想来进行javascript程序设计对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体。属性与方法都是对象的成员颜色猫身高抓老鼠对象属性方法 JavaScriptJavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素的构成的。前者是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；后者是指对象能够按照设计者的意图而被执行，从而与特定的函数相联。 JavaScript本地对象1.Da

2、te 日期对象 Date对象用来处理日期和时间。（日期基线：1970年1月1日00：00：00）例：var today = new Date();var year = today.getFullYear();var month = today.getMonth() + 1;var day = today.getDay();日期参数：1.省略；2.英文-数值格式：月 日，公元年 时：分：秒 如：today=new Date(October 1,2008 12:00:00)3.数值格式：公元年，月，日，时，分，秒 如：today=new Date(2008,10,1) JavaScript2.Ma

3、th 数学对象(静态对象)Math 对象用来处理复杂的数学运算。Math对象是javascript的一个全局对象，不需要用new 创建例：var a = Math.abs(-2);/return 2var b = Math.round(5.5);/return 6var c = Math.random();数学对象的属性：数学对象的属性：格式：Math.属性属性： PI 圆周率SQRT1_2 1/2的平方根SQRT2 2的平方根数学对象的方法：数学对象的方法：格式：Math.方法（参数）方法： ceil(数值) 大于等于该数值的最小整数floor(数值) 小于等于该数值的最大整数min(数值1

4、,数值2) 最小值 JavaScriptmax(数值1,数值2) 最大值pow(数值1,数值2) 数值1的数值2次方random() 0倒1的随机数round(数值) 最接近该数值的整数sqrt(数值) 开平方根abs() 绝对值三角函数等：sin(弧度)、cos、tan、asin、acos、atan JavaScript3.Array 数组对象var week = new Array();var week = new Array(星期一 , 星期二, 星期三);alert(week1);alert(week.length);var arr=a,b,c,d; arr20建立数组对象：建立数组对

5、象：格式：数组对象名称=new Array(元素个数)格式：数组对象名称=new Array(元素1，元素2，.)格式：数组对象名称=元素1，元素2，.数组对象的属性：数组对象的属性：格式：数组对象名称.属性属性：length数组长度数组对象的方法：数组对象的方法：格式：数组对象名称.方法(参数)方法： join(分隔符) 数组元素组合为字符串toString() 以字符串表示数组reverse() 数组反转valueOf() 返回数组值 JavaScript4. String 对象(字符串对象)String 对象用来处理文本。事实上任何一个字符串常量都是一个String对象,可以将其直接作为

6、对象来使用。例1：获得字符串长度var str = “hello”;var str2 = “你好”;alert(str.length);/outputs 5alert(str2.length);/outputs 2建立字符串对象：建立字符串对象：格式：字符串对象名称=new String(字符串常量)格式：字符串变量名称=字符串常量“字符串对象的属性：字符串对象的属性：格式：字符串对象名称 . 属性属性：length 字符串长度字符串对象的方法：字符串对象的方法：格式：字符串对象名称.方法方法： 如下页 JavaScriptbold() 粗体italtics() 斜体strike() 删除线f

7、ontsize(字级大小) 文字大小fontcolor(#rrggbb) 文字颜色sup() 上标sub() 下标toUpperCase() 大写toLowerCase() 小写charAt(索引) 返回索引位置的字符charCodeAt(索引) 返回索引位置的ASCII字符码，十进制表示indexOf(“字串”,索引) 返回字串在对象中的索引位置lastIndexOf(“字串”,索引) 返回字串在对象中的索引位置（反向搜索）search(“字串”) 返回字串在对象中的索引位置replace(字串1,字串2) 字串2替换字串1split(“字串”,限制) 将字串从对象中删除substr(sta

8、rt,length) 返回特定长度的字串 JavaScript例2.提取字符串var str = hello;alert(str.substr(0,2);例3.替换字符串var str = hello;alert(str.replace(h, a);例4.大小写字母转换var str = hello;alert(str.toLowerCase();alert(str.toUpperCase(); JavaScript自定义对象1.构造函数方式function Person(name) = name;this.say = function()alert(I am +this.n

9、ame);var p1 = new Person(wang);var p2 = new Person(li);p1.say();p2.say();alert(p1.say=p2.say); JavaScript2. Object方式function createObject(name) var p = new Object(); =name; p.say = function()alert(I am +); return p;var p1 = createObject(“wang);var p2 = createObject(“li);alert(+ +p

10、2.name);p1.say();p2.say(); JavaScript3.原型方式 D = d;Dtotype.isLeapYear = function()var year = this.getFullYear();if(year%4=0 & year%100!=0) | year%400=0)return true;elsereturn false;var d = new Date();alert(d.isLeapYear(); JavaScript4.For in 用法function Person() =

11、zxx;this.age = 19;this.height = 176;var p1 = new Person();var prop, str = ;for(prop in p1)str += p1prop + ;alert(str); JavaScriptvar x, str = ;var arr = new Array();arr0 = 3.5;arr1 = abc;arr2 = 3;for(x in arr)str += x + : + arrx + “;alert(str); JavaScript5.json对象var person = ;var girl = name:”miss w

12、ang”,age:20,show : function() alert(my name is + );var p= “a” : 1 , ”b” : 2var a=“c”:“d”:3,”e”:”s”,”f”:”f” JavaScriptwindowdocumentframeshistorylocationnavigatorscreenformsimageslinksBOM 浏览器对象模型BOM (浏览器对象模型），它提供了与浏览器窗口进行交互的对象。 JavaScriptwindow对象Window对象表示整个浏览器窗口。1.系统消息框alert()例：alert(hello)

13、;2.确认对话框confirm()Confirm()方法返回一个boolean值，如果点击ok返回true,点击cancel返回false;例：If(confirm(“确定要删除吗?”)/删除 JavaScript3.输入对话框prompt()如果点击ok将文本框中的值作为函数值返回，如果点击cancel返回null例：var name = prompt(“请输入你的姓名？”，“”);If(name != null)alert(welcome+ name);4. 打开新窗口Window.open()例：Window.open(“http:/”,”_blank”,”width=300, heig

14、ht=200”); JavaScript5.定时器用以指定在一段特定的时间后执行某段程序。1.setTimeout() 格式：定时器对象名= setTimeout(“”，毫秒)功能：隔多久执行一次。(只执行一次)clearTimeout(定时器对象名) 终止定时器2.setInterval()格式：定时器对象名= setInterval(“”，毫秒)功能：循环执行表达式，间隔的时间是clearInterval(定时器对象名) 终止定时器 JavaScripthistory对象history对象是window对象的子对象，对应于浏览器的历史记录。属性：属性：current 当前历史记录的网址le

15、ngth 存储在记录清单中的网址数目next 下一个历史记录的网址previous 上一个历史记录的网址方法：方法：back() 回到上一个历史记录中的网址forward() 回到下一个历史记录中的网址go(整数或URL) 前往历史记录中的网址window.history.go(-1);window.history.go(1);history.back();history.forward(); JavaScriptLocationLocation对象对象Location对象也是window对象的子对象，通过它可以获取或设置浏览器的当前地址。1.跳转到其它页面window.location =

16、“http:/”;location.href = “http:/”;Window.location.href=属性：属性：hash 锚点名称host 主机名称hostname host:port主机名及端口href 完整的URL字符串pathname 路径port 端口protocol 协议search 查询信息方法：方法：location.reload() 重新载入页面（刷新)replace(网址) 用指定的网页取代当前网页 JavaScriptnavigator对象Navigator对象包含着有关web浏览器的信息，它也是window的属性，可以用window.navigator引用它，也

17、可以用navigator引用例：获取浏览器内部代号，名称，操作系统等信息var info = navigator.userAgent;alert(info);document.write(浏览器名称: +navigator.appName+);document.write(版本号: +navigator.appVersion+);document.write(代码名字: +navigator.appCodeName+);document.write(用户代理标识: +navigator.userAgent); JavaScriptDOM 文档对象模型DOM (document object m

18、odel) 文档对象模型，是HTML和XML的应用程序接口（API）， 它定义了操作文档对象的接口 。DOM将把整个页面规划成由节点层级构成的文档。所谓文档对象模型，其实就是对网页HTML中的各种元素的一种内部的表示，例如HTML中的头、段落、列表、风格、ID等，所有的元素都能通过DOM来访问 。DOM可以被看作是一棵拥有很多互相关联的节点的树，使用parent(父), child(子), sibling(兄弟)等，来表明家庭成员之间的关系。 JavaScripthtmlheadbodymetatitleh1pullilili JavaScript节点节点（node) 一词来自于网络理论，这代

19、表着网络中一个个的连接点，网络是由节点构成的。对于html文档也是一样，文档是由节点构成的集合。1.元素节点元素节点如 之类的元素，这些元素在文档中的布局形成了文档的结构。2.文本节点文本节点指的是元素节点中的内容，但并非所有的元素节点都包含有文本节点。3.属性节点元素都或多或少有一些属性，属性的作用是对元素作出更具体的描述。属性节点总是被包含在元素节点当中。 JavaScriptptitle=“提示”这是一个段落元素节点属性节点文本节点html:这是一个段落 JavaScript获取文档对象1.getElementById()这个方法返回一个与给定id属性值的元素节点相对应的对象。例：doc

20、ument.getElementById(box);2.getElementsByName() getElementsByTagName() 这个方法返回一个对象数组。每个对象分别对应着文档里给定标签的一个元素。例：document.getElementsByTagName(li); JavaScript3. getAttribute 获取节点属性值object.getAttribute(attribute)例：var a = document.getElementByTagName(a);for(var i=0; ia.length; i+)alert(ai.getAttribute(tit

21、le);4.setAttribute() 设置节点属性值object.setAttribute(attribute, value)例：var link = document.getElementById(link);link.setAttribute(title, 链接提示信息); JavaScriptcreateElement()createTextNode() appendChild() className style.color JavaScript function test() var div = document.createElement(div); var node = doc

22、ument.createTextNode (这是新创建的元素); div.appendChild(node); document.body.appendChild(div); 插入到元素的末尾：appendChild ()放到某节点之前：insertBefore ()替换掉原有的某个节点： replaceChild ()removeChild函数能够用于删除父节点的任意子节点，并返回被删除的对象。 JavaScriptDOM 总结：一份文档就是一棵树;节点分为不同的类型，分别是：元素节点，属性节点，文本节点;每个节点都是一个对象;getElementById()方法将返回一个对象，该对象对应着

23、文档里的一个元素节点;getElementByTagName()方法返回一个对象数组，它们分别对应着文档里的元素节点; JavaScript事件一、什么是事件？JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。页面载入完成时，会触发一个事件。用户点击按钮时，点击也是一个事件。通常鼠标或热键的动作我们称之为事件，而由鼠标或热键引发的一连串程序的动作，称之为事件驱动。而对事件进行处理程序或函数，我们称之为事件处理程序二、怎样将事情处理程序绑定到特定的事件中？方法方法1 1. 使用HTML标记创建事件处理程序;例：给图片添加点击事件 JavaScript Jav

24、aScript方法方法2 2：使用对象的事件属性创建事件处理程序语法：object.onEventName = eventHandler;例1：给document对象添加点击事件function sayHello()alert(hello);document.onclick = sayHello;/document.onclick = function()sayHello();/document.onclick = function()alert(hello);例2：给所有的图片都添加一个单击事件，用于在新窗口中打开图片var img_obj = document.getElementsByT

25、agName(img);for(var i = 0; i img_obj.length; i+)img_obji.onclick = function()alert(this.src); JavaScript表单操作一、表单表单(Form)是Web页面中最常用的元素之一，它通常由一个或多个表单域组成，这些表单域接收用户的输入，并通过表单的提交功能将数据传递到服务器端，由服务器端对这些数据进入处理。在Javascript中可以很方便的操作表单，例如获取表单域的数据进行有效验证、自动给表单域赋值、处理表单域的事件等。每对.标记被解析为一个对象，即form对象，可以通过document.forms集

26、合来引用这些对象，例如一个名为form1的表单可以用如下语句获得：var myform = document.formsform1;不仅如此，还可以通过表单在文档中的索引来引用表单对象，例如下面代码表示引用文档中的第一个表单对象。var myform = document.forms0; JavaScript二、引用表单域 表单域是指用于接收用户输入或操作的一些页面元素，例如文本框、按钮、复选框等。它们通常包含在一个表单中，要在Javascript中引用一个表单元素，可以采用以下两种方法：var element = theForm.elementsindex;var element = the

27、Form.elementselementName;在第一种方法中，index表示表单域的索引，第一个出现的索引为0,依次递增; 第二种方法中，elementName表示表单域name属性所指定的表单域名称;有时需要指定遍历某种类型的表单域，可以使用表单域的type属性来获取表单域类型，例如要处理所有的复选框，可以使用如下语句for(var i=0; i theForm.elements.length; i+)if(checkbox = theForm.elememtsi.type)/处理程序 JavaScript三、表单域的通用属性1. disabled有时希望表单域不能接收用户操作，如有些文

28、本框要设定为只读; 当所有的表单域输入完成之前，设定提交按钮为灰的，不可单击等。这些都可以通过表单域的disable属性来实现：例：element.disable = true;2. 使用name属性获取或者设置表单域的名称3. 使用form属性获取该表单域所属的表单4. 使用value属性来获取和设置表单域的值四、表单域的通用方法1. 使用focus() 方法让表单域获得焦点2. 使用 blur()方法让表单域失去焦点 JavaScript五、表单域的通用事件事件是处理用户操作的一项重要机制，在Javascript中，表单域提供了丰富的事件以方便程序捕获用户行为。1. 使用onfocus事件和onblur事件，该事件在表单获得焦点和失去焦点时触发。2.使用 onclick、onkeydown、onkeyup、onkeypress 事件，这4个事件分别对应于鼠标和键盘的几个操作。click事件表示鼠标单击该表单域; 3. 使用 onmouseover、onmouseout、onmousedown、onmouseup事件，这些事件对应于鼠标的不同动作4.使用onchange事件捕获表单域值的变化每个表单域都有一定的值，在这些值发生变化的时候会触发onchange事件，例如：文本域文本的变化，复选框从选中变为未选中，下