标签：
一、Javascript概述(知道) a.一种基于对象和事件驱动的脚本语言 b.作用： 给页面添加动态效果 c.历史： 原名叫做livescript.W3c组织开发的标准叫ECMAscipt. d.特点： 1). 弱势语言 2). 由浏览器直接解析执行。（函数不能直接执行） 3). 是一个解释性语言 4). 交互性（它可以做的就是信息的动态交互） 5). 安全性（不允许直接访问本地硬盘） 6). 跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关 e . javascript和java的一些区别： 1). javascript是一个解释性语言,java是编译解释性语言 2). javascript是一个弱势语言，Java是一个强势语言 3). 在页面上引入的方式不同javascript代表用<script>引入，Java代码<%> 4). JS是基于对象，Java是面向对象。 二、JavaScript语言组成(了解) EcMAScript + BOM + DOM ECMAScript: 规定了一些语法，变量，for循环等等结构 BOM: Browser object Model 浏览器对象模型 window 对象==java中的object DOM: Document object Model 文档对象模型 树模型,所有的东西都是节点(文本节点,属性节点标签节点),不是父子就是兄弟 除了html,它没有父亲,却有俩个孩子,head 和body, 三、JavaScript与Html的结合方式(必须掌握)--浏览器解析一般是从上到下解析,一般放在最后,我个人认为 Javascript与HTML的结合方式有三种： 1.采用事件来调用，代码写在字符串中 <button onclick = "alert(‘大家好‘)">点击</button> <p onclick="alert(‘nihao‘)">大家好!</p> 点击p上的文字弹出对话框 2.采用定义函数的方式: 用function来定义函数 ,函数不能直接执行,必须被调用 function fun(){ alert(‘你好‘)} ; 3.采用外部js文件. 利用<script src = "a.js"></script>引入,文件名字随意,可以把js改成a.abvfdf;照样可以执行 2.2 <body> <p onclick="alert(‘nihao‘)" id="pid">大家好!</p> </body> <script> var pid =document.getElementById("pid"); alert(pid.onclick);//弹出的是 funciton onclick(event){alert(‘nihao‘)} </script> 四、JavaScript基本语法(掌握) 变量本身没有类型 * 定义变量：采用var关键字来定义.定义的变量的类型是由给定的值来决定的。 * 基本数据类型： undifined,表示未定义类型。 Number类型。代表了一切数字类型 String类型。字符串类型 Boolean类型。布尔类型 Function类型。函数类型 Null类型。 * 基本数据类型： object ：对象类型. * 判断变量的类型 : 1. 采用typeof函数判断 :typeof(a) == "string" 类似toString(),打印所有类型的小写; 2. 采用instanceof运算符： a instanceof String 判断变量是否由new出来的 var a; undefined 没有给变量赋值的时候 a=10; numberic a="abc" String a=function(){alert("aaadfd")} Function a=null; Null a=10; a instanceof Number;//false typeof(a)=="number" //true; == 后面是小写的变量 a= new Number(10); //true; 因为是new出来的所以true typeof(a)=="number" //false 与java不一样的语法: var a =10; 或 a=10; var 可写可不写 js的运算符 input标签中的value的值就是标签中出现的内容,也是传给服务器的值 文本框变长:size:50; 50个字符 readonly只读:光标可以点进文本框,但是update不了 disable:光标不可以点进文本框 type:hidden 隐藏框,目的给程序员往服务器发送数据用!不能看不能写 type:radio 单选框必须要给name属性,因为浏览器默认给name相同的作为一组,默认选中checked * 三大结构 a.顺序结构 b.选择结构 c.循环结构 for,while,do...while * 运算符 1.一元运算符 +(正号) - ++ -- 2.二元运算符 +(加法) - * / % 3.三元运算符 ？ ： 4.等号 == 判断的是内容, === 全等于 ,判断类型和内容 * 类型的转换 1. Number转String : 3 + "" 2. Number转Boolean ：牢记：在javascript中，类似C语言，非0为真，0为假，数字0为假，但字符串“0”为真， 如果变量为null或者undefined或者NaN，也为假. 在java中，字符串转换不了boolean 3. String转Number: var a =‘10‘; 1.a. parseInt,parseFloat 2. 乘以1即可(推荐) a=a*1; alert(typeof(a)) 4.案例 age:<input type="text" id="age" name=""> <input type="button" value="alertage" onclick="fun()"> function fun(){ var txt = document.getElementById("age").value;//value不能忘了 if(txt==100){//双等于不能忘了,双等可以直接等于number或string alert("age等于100") }else{ alert("age不等于100") } } 五、JavaScript 函数的定义（掌握） //js 中函数的调用 直接写函数名即可,java通过对象调用 * 函数的定义有三种方式： 1.采用function关键字来定义 funciton fun(){alert("hellojs")}; fun(); 2.采用匿名的方式来定义 var a = funciton (){alert("hellojs")}; a(); 函数赋值给变量 3.采用new Function()的方式(了解,不推荐) var b = new Function("X","Y","Z","alert(X+Y+Z)");//最后一个是函数体,其他是形参 b(1,2,3,4,5);//1+2+3=6;多个参数支取前面三个 b(1,2);//NaN * 函数的调用： 1.函数调用的时候参数可以传递多个，可以和函数定义的形参个数不符合 2.如果函数重名了，那么调用的时候一定是调用最后一个，与参数无关。 function fun1(){alert("1")}; function fun1(x){alert("2")}; function fun1(x,y){alert("3")}; fun1() fun1(1) fun1(2,3) fun1(2,4,5)//统统调用的是最后一个弹窗是3 *** 推荐： 定义函数的千万不要重名。同名就要闭包 函数劫持： document 网页对象 alert 是window对象 改变js函数预定义的功能. window.alert=funciton(x){document.write(x)} alert("abc"); 结果是,弹框没有了,变成了在网页中打印了abc,为什么? alert("abc");变成了调用上面的方法,而上面的方法就是在页面中输出数据 六、JavaScript 全局函数(掌握) 全局函数： 1.isNaN (掌握)：用来判断变量是否是数字类型的字符串 NaN: not a Number ,不是数字,是一个函数 var a ="100";//内容是数字 if(isNaN(a)) alert("a不是数字");//判断的是内容是不是数字 else alert("a是数字");//打印此行 2.parseInt,parseFloat 3.eval(掌握): a:主要执行字符串,把结果转换成数字 alert("3+10");//3+10 alert("3"+"2");//32 alert(eval("3+10"));//13 alert(eval("3+10")+eval("2"));//15 b:将json格式的字符串转换成json, json本质就是一个map {"a":"china","b":"us"} --for each通过key拿value 4.escape(): 编码,中文往服务器端传数据,网络传递数据时 var b ="中国"; var c =escape(b);//c=%u4E2D%u56FD alert(c); alert(unescape(c))//中国 5.unescape(): 解码 6.encodeURI(): 对网址（URL）进行编码 7.decodeURI(): 对网址（URL）进行解码 var e ="http://www.sohu.com?a=中国&b=美国"; var f = encodeURI(e);// alert(f); alert(decodeURI(f))//http://www.sohu.com?a=中国&b=美国 七、JavaScript常用对象介绍（掌握） * Array对象 数组对象，进行数组操作 定义方式 1.采用new Array()的方式 var arr = new Array();初始长度为0; var arr1 = new Array(10);初始长度为10;Z只写一个是定义长度,多个是初始化 初始化: arr1[0]=1; arr1[1]=10;//如果alert[5];undefined,没有限定类型,java中0 0.0 false等有默认值 var arr2 = new Array(1,2,3,4,5,);//java需要在后面加{}来初始化 2.采用中括号[]来定义(推荐使用) 数组的长度可以随时改变 var arr3=[];//定义了一个空数组 var arr3=[3,"33",flase,"abc",4,8];//定义一个数组且初始化,不推荐放不同类型 3.如何改变数组的长度 var arr4 =[1,2,3,4,5]; 增加长度到100; 第一种: arr4[99]=123; 数组的长度变成100; 第二种: arr4.length=100; 其他所有的未定义类型都是undefined 缩减数组长度到2; arr4.length=2; 此刻 arr4[3],//undefined 4.数组引用方式 用下标或 var arr5 = ["china","usa","小日本"]; arr5["china"]=["北京","上海","天津"]; alert(arr5["china"][0]);//模拟二维数组, 打印出 北京 5.数组的类型 alert(typeof(arr5));//object 特点： 1.javascript中数组的大小可以随时改变,如同java中的集合(如List) 2.javascript中数组的下标可以是任意对象。 方法： 数组对象预定义好的方法 1.join() : 把数组的所有元素放入一个字符串. 默认用逗号连接 var arr=["北京","上海","天津"]; alert(arr.join());//北京,上海,天津 默认是逗号隔开 alert(arr.join(""));//北京上海天津 2.push() : 向数组的末尾添加一个元素 arr.push("韩国");//4 alert(arr.join("*"));//北京*上海*天津*韩国 4.reverse() :反转 var arr=["北京","上海","天津"]; alert(arr.reverse());//天津,上海,北京 3.shift() : 删除并返回数组的第一个元素 var arr=["北京","上海","天津"]; alert(arr.shift());//北京 alert(arr);//上海,天津 4.sort() ; 排序 .默认同类型的数据相比较. 默认将能转换成number类型的字符串和number类型放在一起比较 先转换成toString,转换不成的作为一组来比较 var arr1=[3,8,"23","34",123]; alert(arr1.sort());//123 23 3 34 8 不符合要求 改写:给sort方法添加一个形参比较器 arr1.sort(funciton(a,b){ if(a*1>b*1){ //将字符串转换成number类型 return 1;//降序 从大到小 }else { return -1;//升序 从小到大 } }); 案列:标题栏跑马灯特效 <body onload="init()">//初始化 <script> function init(){ //1.获取标题栏的内容 var title = document.title; //2.将字符串转换成对应的数组 var arr = title.split("");//以空字符串分割 // 3.将数组的第一个字符拿到并删除 var first = arr.shift(); //4.将一个字符放置到数组的末尾 arr.push(first); title=arr.join("");//将数据组合成一个字符串 //5.把新的字符串设置成新的标题 document.title=title; //6.定时重复上面步骤 setTimeout("init()",200);//每隔0.2s执行init(),即重复上面5个步骤; } </script> </body> * String对象 ----- 字符串类型的引用类型 String对象： 1.方式： substr: 截取字符串 两个参数第一个是下标，第二个是长度 substring: 截取字符串 两个参数第一个是下标，第二个是下标 toUppercase: toLowercase: indexOf: charAt() : replace(): anchor();创建html的锚点 1.1案例:让p标签的内容变大 注意:innerHTML只能用于有开始和结束标签的标签对象,如input img等拿不到数据 function changeBig() { var p = document.getElementById("p");//拿到p标签的对象 var txt = p.innerHTML;//拿到p标签对象的主体内容html代码,即 大 这个字符串 //txt=txt.big();居然变大不了!!! p.innerHTML=txt.big();//改变字符串的内容再赋值到p标签的主体内容上 } </script> <p id="p">大</p> <input id="btn" type="button" value="变大" name="" onclick="changeBig()"> 2. innerHTML与innerText的区别? <h1 id="h1"><font>你好</font></h1> innerHTML:<font>你好</font> innerText:你好 2.1案例 给字体自动变换颜色 <script> function changeColor() { var arr=["red","green","blue","yellow","black"]; var p = document.getElementById("p");//拿到p标签的对象 var txt = p.innerText;//拿到p标签对象的文本,即 大小多少 var index = Math.floor(Math.random()*arr.length);//Math.random()*arr.length 0-5之间的double,向下取整,0-4 p.innerHTML=txt.fontcolor(arr[index]);//改变字体的内容再赋值回去 //p.innerText=txt.fontcolor(arr[index]);??点击三下是这样<font color="red"><font color="yellow"><font color="black">大小多少</font></font></font> setTimeout("changeColor()",500); } </script> <p id="p">大小多少</p> <input id="btn" type="button" value="变大" name="" onclick="changeColor()"> * Number对象 ---- 数字原始类型引用类型 Num对象： 1. random() : 获得随机数[0,1) 2. ceil() : 返回大于等于次数的最大整数 3. floor() : 返回小于等于次数的最大整数 4. round(): 返回四舍五入后的整数 * Boolean对象 ---- 布尔原始类型引用类型 * Math对象 执行数学任务 * Date对象 用于处理日期和时间 Date对象： 代表一个时间 方法： getXXX() : 拿到年月日 * RegExp 对象正则表达式对象 正则表达式 写法： 1. new的方式 var r = new RegExp("ab") ; 2. 采用/正则表达式/ (推荐) var r = /ab/ ;
标签：
原文地址：http://www.cnblogs.com/bravolove/p/5496772.html
