?
JavaScript
? ? ? ? 是一种脚本语言(脚本语言是一种轻量级的编程语言,是一条条的纯文本命令,用记事本可以看到的)。?
? ? ? ? 是一种解释性语言(就是说,代码执行不进行预编译)。?
? ? ? ? 不需要显式的去调用,有由数行可执行计算机代码组成。如:
? ? ? ? ? ? ? ? <script type="text/javascript">
? ? ? ? ? ? ? ? ? ? ? ? document.write("<h1>This is a header</h1>");//代码
? ? ? ? ? ? ? ? ? ? ? ? {//代码块
? ? ? ? ? ? ? ? ? ? ? ? document.write("<p>This is a paragraph</p>");
? ? ? ? ? ? ? ? ? ? ? ? document.write("<p>This is another paragraph</p>");
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? </script>
?
脚本
1. [script] 表演戏剧、拍摄电影等所依据的底本电影脚本
2. [manuscript]∶书稿的底本(蓝本、话本) ? ? ? ? ? ? ? ?
?
概念
? ? ? ? 变量、表达式、运算符、语句、函数 ? ? ?
?
变量
? ? ? ? 本地变量:函数内声明的变量。当退出该函数后,这个变量会被撤销。这种变量称为。
? ? ? ? 全局变量:函数之外声明的变量,则页面上的所有函数都可以访问该变量。在页面关闭时变量会被撤销。
? ? ? ? 以下值,在判断条件时均视为false
? ? ? ? var a1; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//等效于var a4 = undefined;,al的值也是undefined
? ? ? ?var a2 = null;
? ? ? ?var a3 = false;
? ? ? ?var a4 = undefined;
? ? ? ?var a5 = NaN;
? ? ? ? if(!a1){alert("a1 ");}
? ? ? ? if(!a2){alert("a2 null");}
? ? ? ? if(!a3){alert("a3 false");}
? ? ? ? if(!a4){alert("a4 undefined");}
? ? ? ? if(!a5){alert("a5 NaN");}
运算符
? ? ? ? 算术运算符
? ? ? ? 赋值运算符
? ? ? ? 字符串的 + 运算符
? ? ? ? 比较运算符if(age>18)中的age>18
? ? ? ? 逻辑运算符 &&, ? ? ? ?||, ? ? ? ?!
? ? ? ? 条件运算符variablename=(condition)?value1:value2 //三目运算符
?
方法自定义的3种方式
? ? ? ? 直接声明:
? ? ? ? ? ? ? ? function a(){...}
? ? ? ? 匿名赋值:把方法的引用,赋值给符号引用
? ? ? ? ? ? ? ? var ?f = function (x) {reurn x * x} ; ?
? ? ? ? ? ? ? ? ? ? ? ? //扩展1,起别名
? ? ? ? ? ? ? ? ? ? ? ? var prd = {};
? ? ? ? ? ? ? ? ? ? ? ? prd.f = f;
? ? ? ? ? ? ? ? ? ? ? ? //扩展2,每一个对象都有个prototype类型,给对象动态添加方法
? ? ? ? ? ? ? ? ? ? ? ? String.prototype.toNum = function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var reg= new RegExp(",","g");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return this.replace(reg,"");
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? //扩展3,在对象内部定义
? ? ? ? ? ? ? ? ? ? ? ? ?join : function(callback) {... },
? ? ? ? 嵌套在on*事件中的js
? ? ? ? ? ? ? ? onkeyup= "value=value.replace(/[\uFF00-\uFFFF]/g, ' ')
? ? ? ? ? ? ? ? onsubmit="return false;"即取消提交############
? ? ? ? ? ? ? ? <form onsubmit="submitTest();">等效于Form.prototype.onsubmit= function(){submitTest();};
? ? ? ? ? ? ? ? <form onsubmit="return submitTest();">等效于Form.prototype.onsubmit= function(){return submitTest();};
? ? ? ? ? ? ? ? //还可以写2个以上的语句
? ? ? ? ? ? ? ? onmouseover="alert('An onMouseOver event');return false" ? ??
? ? ? ? ? ? ? ? <a href="javascript:setMenuCookie('msg');">
执行顺序
? ? ? ? JS 在函数执行前将整个函数的变量进行声明,无论这个变量的声明语句有没有机会执行
? ? ? ? function () { ?
? ? ? ? ? ? ? ? alert(om); // 显示 undefined ?//但是不报 JS 错误
? ? ? ? ? ? ? ? if ( false ) { var om = 'abc' ;} // 此处声明没有机会执行 ?
? ? ? ? } ??
?
? ? ? ? JS 解析器在执行语句前会将函数声明和变量定义进行"预编译"(按<script>块、段来预编译的)
? ? ? ? ? ? ? ? function addB() {...}是声明,会预编译
? ? ? ? ? ? ? ? var addB = function addB() {...}是声明,会预编译
? ? ? ? ? ? ? ? var addB = function{...}是预声明,只有执行到此代码时才会编译,不会预编译。不能在它之前使用addB方法
?
? ? ? ? js代码只要写在<script>块里面就行,不一定非要是function结构,可以直接写语句。
?
? ? ? ? head中的js--->页面中的js(body标签内或body标签外都一样)-->body标签onload(加载完后的)事件中的js.
?
?
JavaScript 实现是由以下 3 个不同部分组成的:
? ? ? ? 核心(ECMAScript) js语法及js内置对象
? ? ? ? 文档对象模型(DOM)?
? ? ? ? 浏览器对象模型(BOM)?
?
js可以自由使用这3类对象
? ? ? ? 宿主对象:寄宿浏览器提供的对象:DOM,BOM
? ? ? ? 本地对象:17个,其中Math为静态类的,Global的方法和属性直接用,不需要"对象."或"Global."
?
本地对象(大部分)都有的2个属性
? ? ? ? constructor ? ? ?所建立对象的函数参考
? ? ? ? prototype ? ? ? 能够为对象加入的属性和方法
? ? ? ? function comet1(str){ ? ? ? ? ? ? ? ?//自定义的类(构造函数comet1)
? ? ? ? ? ? ? ? this.aaa = str
? ? ? ? }
? ? ? ? comet1.prototype.aaa = 55; ? ? ? ? ? ? ? ?//只有通过构造函数才能用prototype,动态添加属性或方法
? ? ? ? var comet = {};comet.aaa=55; ? ? ? ? ? ? ? ?//对象的话不需要prototype,直接动态添加
?
1.Date
? ? ? ? 方法(43):
? ? ? ? ? ? ? ? getFullYear() ? ? 返回完整的4位年份数
? ? ? ? ? ? ? ? getMonth() ? ? ?返回月份数(0-11)
? ? ? ? ? ? ? ? getDate() ? ? ? 返回日(1-31)
? ? ? ? ? ? ? ? getHours() ? ? ? 返回小时数(0-23)
? ? ? ? ? ? ? ? getMinutes() ? ? ?返回分钟(0-59)
? ? ? ? ? ? ? ? getSeconds() ? ? ?返回秒数(0-59)
? ? ? ? ? ? ? ? getMilliseconds() 返回毫秒(0-999)
?
2.Math ? ? ? ?//静态类
3.Number
4.Boolean
5.String
? ? ? ? 属性-额外:
? ? ? ? ? ? ? ? length ? ? ?返回字符串的字符长度
?
? ? ? ? 方法(20):
? ? ? ? ? ? ? ? charAt(index) 返回指定索引处的字符
? ? ? ? ? ? ? ? indexOf(searchString, startIndex) 返回字符串中第一个出现指定字符串的位置
? ? ? ? ? ? ? ? lastlndexOf(searchString, startIndex) 返回字符串中最后一个出现指定字符串的位置
? ? ? ? ? ? ? ? match(string)或match(regex) 在字符串中查找指定值,
? ? ? ? ? ? ? ? ? ? ? ? 类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。
? ? ? ? ? ? ? ? ? ? ? ? var str="Hello 12 world! 34 Hello 56 ok 12"
? ? ? ? ? ? ? ? ? ? ? ? alert(str.match("Hello")); ? ? ? ?//Hello
? ? ? ? ? ? ? ? ? ? ? ? alert(str.match(/\d+/)); ? ? ? ?//12
? ? ? ? ? ? ? ? ? ? ? ? alert(str.match(/\d+/g)); ? ? ? ?//12,34,56,12
? ? ? ? ? ? ? ? replace(string, newString)或replace(regex, newString)将字符串中的某些字符替换成其它字符
? ? ? ? ? ? ? ? ? ? ? ? var reg= new RegExp(",","g");
? ? ? ? ? ? ? ? ? ? ? ? var custFloor=regFloor.replace(reg,"");
? ? ? ? ? ? ? ? ? ? ? ? var str="2010-10-19-16";
? ? ? ? ? ? ? ? ? ? ? ? alert(str.replace(/-/g, "\/"));"2010/10/19/16"
? ? ? ? ? ? ? ? ? ? ? ? alert(str.replace(/-/, "\/"));"2010/10-19-16"
? ? ? ? ? ? ? ? ? ? ? ? alert(str.replace("-", "\/"));"2010/10-19-16" ? ? ? ?//这个的参数是字符串,不是regex
? ? ? ? ? ? ? ? search(regex) 针对某执行值对字符串进行查找
? ? ? ? ? ? ? ? slice(startIndex, endIndex)将部分字符抽出并在新的字符串中返回剩余部分
? ? ? ? ? ? ? ? split(delimiter)将字符串分配为数组
? ? ? ? ? ? ? ? substr(startIndex, length) 从startIndex取,取length个字符
? ? ? ? ? ? ? ? substring(startIndex, endIndex) 从startIndex和endIndex之间的字符,不包括endIndex
? ? ? ? ? ? ? ? ? ? ? ? js的substring和java的完全一致。
? ? ? ? ? ? ? ? toLowerCase() 把字符串中的文本变成小写
? ? ? ? ? ? ? ? toUpperCase() 把字符串中的文本变成大写
?
6.Array
? ? ? ? 属性-额外的:
? ? ? ? ? ? ? ? index ? ? ?For an array created by a regular expression match, the zero-based index of the match in the string.
? ? ? ? ? ? ? ? input ? ? ?For an array created by a regular expression match, reflects the original string against which the regular expression was matched.
? ? ? ? ? ? ? ? length ? ? ?获取数组元素的个数,即最大下标加1
?
? ? ? ? 方法(13):
? ? ? ? ? ? ? ? concat(array1,arrayn)将两个或两个以上的数组值连接起来,合并后返回结果
? ? ? ? ? ? ? ? join(string) 将数组中元素合并为字符串,string为分隔符.如省略参数则直接合并,不再分隔
? ? ? ? ? ? ? ? pop() ? ? ?移除数组中的最后一个元素并返回该元素
? ? ? ? ? ? ? ? push(value) 在数组的末尾加上一个或多个元素,并且返回新的数组长度值
? ? ? ? ? ? ? ? reverse() ? ?颠倒数组中元素的顺序,反向排列
? ? ? ? ? ? ? ? shift() ? ? 移除数组中的第一个元素并返回该元素
? ? ? ? ? ? ? ? slice(start, deleteCount, [item1[, item2[,...[,itemN]]]]) 返从一个数组中移除一个或多个元素,如果必要,在所移除元素的位置上插入新元素,返回所移除的元素
? ? ? ? ? ? ? ? sort(compare Function) 在未指定排序号的情况下,按照元素的字母顺序排列,如果不是字符串类型则转换成字符串再排序,返回排序后的数组
? ? ? ? ? ? ? ? splice() ? ? 为数组删除并添加新的元素
? ? ? ? ? ? ? ? toSource() ? ?显示对象的源代码
? ? ? ? ? ? ? ? toString() ? ?将数组所有元素返回一个字符串,其间用逗号分隔
? ? ? ? ? ? ? ? unshift(value)为数组的开始部分加上一个或多个元素,并且返回该数组的新长度
? ? ? ? ? ? ? ? valueOf() ? ?返回数组对象的原始值
?
7.RegExp
? ? ? ? 创建RegExp对象的两种定义方式:
? ? ? ? ? ? ? ? 1、var patt1=new RegExp("e","g");//new RegExp(pattern, attributes);attributes 是一个可选的字符串,包含属性 "g"、"i" 和 "m"
? ? ? ? ? ? ? ? ? ? ? ? i 执行对大小写不敏感的匹配。?
? ? ? ? ? ? ? ? ? ? ? ? g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。?
? ? ? ? ? ? ? ? ? ? ? ? m 执行多行匹配。?
? ? ? ? ? ? ? ? 2、var patt = /^\w+$/ ? ? ? ? ? ? ? ?//直接量语法
?
? ? ? ? RegExp对象的方法 ? ? ? ?
? ? ? ? ? ? ? ? compile 编译正则表达式。用于改变 RegExp。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var patt1=new RegExp("e");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? patt1.compile("d");
? ? ? ? ? ? ? ? exec 检索字符串中指定的值。返回找到的值,并确定其位置。?
? ? ? ? ? ? ? ? ? ? ? ? var patt1=new RegExp("e","g");
? ? ? ? ? ? ? ? ? ? ? ? do{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? result=patt1.exec("The best things in life are free");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? document.write(result);
? ? ? ? ? ? ? ? ? ? ? ? }while (result!=null)?
? ? ? ? ? ? ? ? ? ? ? ? 由于这个字符串中 6 个 "e" 字母,代码的输出将是:eeeeeenull
? ? ? ? ? ? ? ? test 检索字符串中指定的值。返回 true 或 false。?
? ? ? ? ? ? ? ? ? ? ? ? /\s+\w+\s+/.test(" ?llyu ");对
? ? ? ? ? ? ? ? ? ? ? ? "/\s+\w+\s+/".test(" ?llyu ")错
?
8.Function
9.Object
10.Global 全局-顶层
? ? ? ? 属性:
? ? ? ? ? ? ? ? Infinity ? ? 指定一个正负无穷大的数值
? ? ? ? ? ? ? ? NaN ? ? ? 指定一个 “非数字” 值
? ? ? ? ? ? ? ? undefined ? ?指定一个未被赋值的变量
?
? ? ? ? 方法:
? ? ? ? ? ? ? ? decodeURI() ? ? ? 为加密的URI进行解码
? ? ? ? ? ? ? ? decodeURIComponent() 为加密的URI组件解码
? ? ? ? ? ? ? ? encodeURI() ? ? ? 将字符串加密为URI
? ? ? ? ? ? ? ? encodeURIComponent() 将字符串加密为URI组件
? ? ? ? ? ? ? ? escape(string) ? ? ?加密一个字符串
? ? ? ? ? ? ? ? unescape() ? ? ? ?使用escape()对一个字符串进行解码
? ? ? ? ? ? ? ? eval(string) ? ? ? 判断一个字符串并将其以脚本代码的形式执行
? ? ? ? ? ? ? ? isFinite(number) ? ? 检测一个值是否为一个有限数字,返回True或False
? ? ? ? ? ? ? ? isNaN(string) ? ? ?检测一个值是否不是一个有限数字
? ? ? ? ? ? ? ? Number() ? ? ? ? 将一个对象的值转换为一个数字
? ? ? ? ? ? ? ? parseFloat(string) ? ?将一个字符串解析为一个浮点数字
? ? ? ? ? ? ? ? parseInt(string) ? ? 将一个字符串解析为一个整数,不是四舍五入操作,而是切尾
? ? ? ? ? ? ? ? String(object) ? ? ?将一个对象值转换为一个字符串
? ? ? ? ? ? ? ? number(object)
?
11-17:Error ,EvalError ,RangeError ,ReferenceError ,SyntaxError ,TypeError ,URIError?
?
18.自定义对象:属性和方法都可以访问,没有private属性这一说。
? ? ? ? 有初始化对象和定义构造函数的对象两种方法
? ? ? ? a:初始化对象,例如:
? ? ? ? ? ? ? ? var person = {
? ? ? ? ? ? ? ? ? ? ? ? name:"tom",age:25,
? ? ? ? ? ? ? ? ? ? ? ? test:function(str){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alert(str);
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? score:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? chinese:87,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? english:91
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
?
? ? ? ? b: 自定义类,例如:
? ? ? ? ? ? ? ? function tearcher(firstname,age){
? ? ? ? ? ? ? ? ? ? ? ? this.firstname=firstname;
? ? ? ? ? ? ? ? ? ? ? ? this.age=age;
? ? ? ? ? ? ? ? ? ? ? ? this.test=function(str){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alert(str);
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? var person = new tearcher("kebi",33);
? ? ? ? ? ? ? ? alert(person.age);
? ? ? ? ? ? ? ? person.test("hello");
? ? ? ? ? ? ? ? var person = new tearcher("kebi",33);
? ? ? ? ? ? ? ? person[0]= "test"; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//只将数组元素添加到一个对象中并不会使它成为数组。
?
? ? ? ? c:使用Object类
? ? ? ? ? ? ? ? personObj=new Object()
? ? ? ? ? ? ? ? personObj.firstname="John"
? ? ? ? ? ? ? ? personObj.test=function(str){
? ? ? ? ? ? ? ? ? ? ? ? alert(str);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? alert(personObj.firstname);
? ? ? ? ? ? ? ? personObj.test("hello");
?
?
1、数组直接量:
? ? ? ? var es = [ ] ;
? ? ? ? var es = [ [ 1, {x:1 , y : 2}] , [ 2, {x:3 , y : 4}] ];//二维数组,数组项中包含对象
? ? ? ? alert(es) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//1,[object Object],2,[object Object]不输出Object ,是因为数组是一个具有额外功能层的对象.
2、数组构造
? ? ? ? var cars=new Array(2); ? ? ? ? ? ? ? ?//参数,为初始化时的数组大小,数组大小可以动态自动变化
? ? ? ? cars[0]="BMW"; ? ? ? ? ? ? ? ? ? ? ? ?//
? ? ? ? cars[1]=99; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//类型可以不一致
? ? ? ? cars["a"]="aaaaaa"; ? ? ? ? ? ? ? ? ? ? ? ?//数组length不变,cars["a"]或cars.a作为对象的属性存在
? ? ? ? cars.b="bbbbbb"; ? ? ? ? ? ? ? ? ? ? ? ?//数组length不变,cars.b或cars["b"]作为对象的属性存在
?
3、数组构造直接值
? ? ? ? var cars=new Array(99,"Volvo","BMW"); ? ? ? ?
?
1、对象
? ? ? ? var cars = {bm:"宝马",bc:"奔驰"} ? ? ? ? ? ? ? ?//cars.bm或cars["bm"]
? ? ? ? var cars = {"bm":"宝马","bc":"奔驰"} ? ? ? ? ? ? ? ?//cars.bm或cars["bm"]
? ? ? ? cars["a"]="aaaaaa"; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//动态添加对象属性,cars["a"]或cars.a作为对象的属性存在
? ? ? ? cars.b="bbbbbb"; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//动态添加对象属性,cars.b或cars["b"]作为对象的属性存在
?
? ? ? ? var mycars ={}
? ? ? ? mycars["a"]="aaaaaa"; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//动态添加对象属性,cars["a"]或cars.a作为对象的属性存在
? ? ? ? mycars.b="bbbbbb"; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//动态添加对象属性,cars.b或cars["b"]作为对象的属性存在
?
8, 删除数组元素和对象属性:
? ? ? ? 数组元素
? ? ? ? ? ? ? ? delete a[0]; ? ? ? ?//把元素设置为undefined;数组长度不变。真正删除调用Array的方法
? ? ? ? 对象属性
? ? ? ? ? ? ? ? var obj = {a:'a', b:'b'};
? ? ? ? ? ? ? ? var objItem = obj.a;
? ? ? ? ? ? ? ? delete obj.a;
? ? ? ? ? ? ? ? alert(objItem);//这里输出a
?
?