3、JavaScript快速入门(2)
2016-04-25 20:15
549 查看
函数基础
函数主要用来封装具体的功能代码。函数是由这样的方式进行声明的:关键字 function、函数名、一组参数,以及置于括号中的待执行代码。
注意:函数的形参是不用声明使用的。
函数的基本语法是这样的:
function functionName(arg0, arg1, ... argN) { statements }
例如:
function sayHi(sName, sMessage) { alert("Hello " + sName + sMessage); }
调用函数:
函数可以通过其名字加上括号中的参数进行调用,如果有多个参数。
如果您想调用上例中的那个函数,可以使用如下的代码:
sayHi("David", " Nice to meet you!")
调用上面的函数 sayHi() 会生成一个警告窗口。
函数的返回值:
没有返回值类型,如果一个函数需要返回值直接使用return即可.
该函数只需要使用 return 运算符后跟要返回的值即可。
function sum(iNum1, iNum2) { return iNum1 + iNum2; }
注释:如果函数无明确的返回值,或调用了没有参数的 return 语句,那么它真正返回的值是 undefined。
Function 函数名(参数列表){ 代码; return 返回值; //return 不是必须的. } 示例: function foo() { alert("test"); } function foo2( a ){ alert(a); return; // 没有返回值,表示方法执行完了,后面如果有代码就不会执行了 } function foo3( a, b ){ alert(a + b); } function foo4( a, b ){ return a + b; }
注意事项:
1. 不需要类型,只写形参的名称就可以了。
2. 声明时不需要指定返回值类型;return可以有,也可以没有。
3. javascript中的函数没有重载的形式,后定义的函数会直接覆盖前面的函数。
4. 一个函数可以接收任意个参数。
函数参数:
JS的函数都是类似于Java中可变参数的。
在函数中可以直接使用arguments变量,arguments是一个数组,表示所有传递过来的参数。
在声明函数时,定义的形参就对应arguments数组中相应位置的参数值,写形参只是用着方便一点。
参数示例
定义:
function foo( a, b, c ){ ... } 调用: foo() foo( 1, 2 ) foo( 1, 2, 3 ) foo( 1, 3, 5, 7, 9 ) foo( "aa", null, "cc" ) 没有重载 当同一个名称的函数定义多次时,最终使用的是最后一个的定义。没有重载! 例: function sum(){ alert("11"); } function sum(a,b){ alert("22"); } 调用时写sum(),结果还是显示“22”。
总结特点:
1、使用function关键字定义函数。 2、没有任何的返回值类型。 3、函数的定义优先执行,与顺序无关。 4、可以通过函数名赋值函数,函数变量的类型是function对象。 5、参数列表不能有var关键字。 6、函数的参数列表在具体调用的时候实参个数可以和形参个数不同。 7、JavaScript函数天然的支持可变参数。 8、同名的函数最后声明会覆盖前面以声明。Javascript中没有函数重载。
小案例:
定义一个输入框输入的月份,然后输出本月对应的天数
<html> <head> <title>学习JavaScript</title> </head> <body> 月份: <input type="text" id="month"> <input type="button" value="显示天数" onclick="foo()"> <!-- 31天:1,3,5,7,8,10,12 30天:4,6,9,11 28天:2 --> <script type="text/javascript"> function foo(){ var monthValue = document.getElementById("month").value; // 如果是非数字,则不再继续执行 if( isNaN(monthValue) ){ alert("请输入正确的月份!"); return; } // 转为数字 monthValue = parseInt(monthValue); // 判断范围 if( monthValue < 1 || monthValue > 12){ alert("请输入正确的月份(1--12)!"); return; } // 根据月份显示天数 switch(monthValue){ // 这时不会自动转换类型,所以先转型 case 2: alert("28天"); break; case 4: case 6: case 9: case 11: alert("30天"); break; default: alert("31天"); break; } } </script> </body> </html>
面向对象
JavaScript面向对象的脚本语言,此时开发者在开发的时候需要找对象,默认提供了内置的对象。也可以根据开发者的需求自己定义对象。为了便于操作基本类型值,ECMAScript 提供了3个特殊的引用类型:Boolean,Number,String。它们是引用类型。当读取基本数据类型时,后台就会创建一个对应的基本包装类对象,所以我们在操作基本数据类型时,可以直接调用一些方法。
String:
//通过构造函数创建String 对象 var b = new String("java"); var c = new String("java"); document.write(b + "," + c); document.write(b == c); //false //比较字符串的值是否相等 document.write(b.valueOf() == c.valueOf()); //属性 var a = "helloworld"; document.write(a.length);
常见的方法:
Anchor() 生产锚点 Blink() 为元素添加blink标签 charAt() 返回指定索引位置处的字符。 charCodeAt() 回一个整数,代表指定位置上字符的 Unicode 编码。 Concat() 回字符串值,该值包含了两个或更多个提供的字符串的连接。 Fontcolor() 把带有 COLOR 属性的一个 HTML <FONT> 标记放置在 String 对象中的文本两端 indexOf() 返回 String 对象内第一次出现子字符串的字符位置 italics() 把 HTML <I> 标记放置在 String 对象中的文本两端。 Link() 把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。 Replace() 返回根据正则表达式进行文字替换后的字符串的复制 Split() 切割 Substr() 截取子串 toUpperCase() 转大写 toLowerCase 转小写
//方法 document.write("第五章".anchor("ch1")); document.write("第五章".blink()); // 返回在指定位置的字符。 document.write("第五章".charAt(0)); document.write("a".charCodeAt(0)); document.write("第五章".concat("abc")); document.write("第五章".fontcolor("#ff0000")); document.write("第五章".indexOf("五")); document.write("第五章".italics()); document.write("第五章".link()); document.write("helloworld".replace(/l/g, "L")); document.write("<br/>"); var names = "jack-lili-lucy".split("-"); for (var temp in names) { document.write(names[temp] + "<br/>"); } document.write("<br/>"); document.write("helloworld".substr(1, 2)); //el document.write("helloworld".substring(1, 2));//e document.write("helloworld".toUpperCase()); document.write(new String("java").toString() == new String("java").toString());
Number:
//创建number对象 var a = 12; var b = new Number(12); document.write(a + ":" + b); //比较数值true document.write(a == b); //没有转型false document.write(a === b); //false document.write(new Number(12) == new Number(12)); //false document.write(new Number(12) === new Number(12)); //true document.write(new Number(12).valueOf() == new Number(12).valueOf()); //true document.write(new Number(12).valueOf() === new Number(12).valueOf()); 属性: document.write("最大值" + Number.MAX_VALUE + "</br>"); document.write("最小值" + Number.MIN_VALUE + "</br>"); 方法 //方法 document.write(new Number(12).toString(10) + "<br/>"); document.write(new Number(12).toString(2) + "<br/>"); document.write(new Number(12).toString(8) + "<br/>"); document.write(new Number(12).toString(16) + "<br/>"); document.write(new Number(12.12345) + "<br/>"); document.write(new Number(12.12345).toFixed() + "<br/>"); document.write(new Number(12.12345).toFixed(2) + "<br/>"); document.write(new Number(12.12345).toFixed(3) + "<br/>"); //备注:toFixed()是指定小数位数。
Math:
方法:
abs 、 acos 、asin 、 atan 、atan2 、 ceil 、cos 、 exp 、floor、 log 、 max 、 min、 pow 、random、 round 、sin 、sqrt 、tan
document.write(Math.ceil(12.34) + "<br/>"); //13 document.write(Math.floor(12.34) + "<br/>"); //12 document.write(Math.round(12.54) + "<br/>"); //13 document.write(Math.round(12.35) + "<br/>"); //12 document.write(Math.random() + "<br/>"); //0~1 document.write(Math.max(12, 100, -1, 200, 320, 500) + "</br>"); document.write(Math.min(12, 100, -1, 200, 320, 500) + "</br>");
Date:
function showDate() { //获取系统时间 var date = new Date(); //获取年 月 日时分秒 var str = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日" + "星期" + date.getDay() + " " + date.getHours() + "时" + date.getMinutes() + "分" + date.getMinutes() + "分" + date.getSeconds() + "秒" //将格式化好的时间显示在叶面的span标签体中 var span = document.getElementById("mydate"); //给span标签设置标签体内容 span.innerHTML = str.fontcolor("red"); //调用定时函数 window.setTimeout("showDate()", 1000); } //调用函数 showDate();
数组:
数组定义:
创建数组的基本方式有2种.
第一种是使用Array的构造函数 不指定长度 var arrs=new Array(); 如果确定知道数组保存的数量,可以通过构造函数传递数组的长度 指定长度 var arrs=new Array(20); 该数组有20个元素,每一项的默认值都是undefined 指定元素 var arrs=new Array("hello"); 会创建一个元素的数组. 第二种方式 指定元素 创建一个包含3个字符串的数组 var arrs=["aa","bb","cc"]; 创建一个空数组 var arrs=[]; var values=[1,2]; 数组初始化 var arrs=["aa","bb","cc"]; color[2]="xx";//修改第3项 数组遍历: for(var i = 0; i < arr.length; i++){ alert(arr[i]); } 或 for( var i in arr ){ // i 是遍历出的数组中的索引,从0开始,一直到最大索引。 // 如果有其他属性,也会遍历出来,其实索引就是数组对象的属性。 alert(arr[i]); }
注意: JS数组可以动态增长
//数组的声明和初始化,注意:数组的长度取决于整数下标的个数 var arr = new Array(); arr[0] = "aa";2 arr[1] = "bb"; arr[6] = 'xx'; document.write(arr + "<br/>"); //遍历数组 for (var i = 0; i < arr.length; i++) { document.write(arr[i]+"<br/>"); } //下标越界时: var arr = ["aa", "bb"]; document.write(arr[200]); // 显示undefined
常见方法
Array中的方法:
sort() 对当前数组进行排序,并返回已经进行了排序的此Array对象。 不会创建新对象,是在指定数组中直接进行排序。 reverse() 对当前数组进行反转排序,返回一个元素顺序被反转的 Array 对象。 不会创建新对象,是在指定数组中直接进行排序。 push( [item1 [item2 [. . . [itemN ]]]] ) 将以新元素出现的顺序添加这些元素。 如果参数之一为数组,那么该数组将作为单个元素添加到数组中。 pop() 移除数组中的最后一个元素并返回该元素。 如果该数组为空,那么将返回 undefined。 shift() 移除数组中的第一个元素并返回该元素。 如果该数组为空,那么将返回 undefined。 unshift([item1[, item2 [, . . . [, itemN]]]]) 将指定的元素插入数组开始位置并返回该数组。 splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]]) 移除从 start 位置开始的指定个数的元素,并插入新元素,从而修改 concat([item1[, item2[, . . . [, itemN]]]]) 返回一个新数组,这个新数组是由两个或更多数组组合而成的。原数组不变。 要加的项目(item1 … itemN)会按照从左到右的顺序添加到数组。 如果某一项为数组,那么添加其内容到 array1 的末尾。 如果该项目不是数组,就将其作为单个的数组元素添加到数组的末尾。 slice(start, [end]) 返回一个包含了指定的部分元素的数组。 将返回索引大于等于start且小于end的一段。 原数组不变。 join(separator) 把所有元素由指定的分隔符分隔开来组成一个字符串,返回这个字符串值。 如果数组中有元素没有定义或者为 null,将其作为空字符串处理。
var a = [1, 2, 3]; // 连接两个或更多的数组,并返回结果。 document.write(a.concat([100, 30]) + "<br/>"); document.write(a.concat([100, 30], [60, 90]) + "<br/>"); // 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 var b = a.join("$"); document.write(b + "<br/>"); document.write( typeof b + "<br/>"); //string // 删除并返回数组的最后一个元素 document.write(a.pop() + "<br/>"); // 向数组的末尾添加一个或更多元素,并返回新的长度。 document.write(a.push(99, 78) + "<br/>"); // 把数组转换为字符串,并返回结果。 document.write(a.toString() + "<br/>"); // 返回数组对象的原始值 var c = a.valueOf(); document.write( typeof c + "<br/>"); //排序: var a = [100, 9, 20, 3, 7, 96]; document.write(a + "<br/>"); //如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序 a.sort(); document.write(a + "<br/>"); //指定比较方式 a.sort(compareTo); document.write(a + "<br/>"); function compareTo(a, b) { return a - b; }
自定义对象
function Person() { window.document.write("constructor()<br>"); } var person = new Person(); //定义属性 person.name = "jack"; person.age = 23; //定义方法 person.work = function() { window.document.write("person working...<br/>"); }; //获取构造函数 window.document.write(person.constructor + "<br/>"); window.document.write(person.name + "," + person.age + "<br/>"); person.work();
有参构造函数
function Person(name, age) { this.name = name; this.age = age; this.work = function() { alert(this.name + ":" + this.age); } } var person = new Person("jack", 28); person.work();
Object方式:
var person = new Object(); person.name = "jack"; person.age = 28; person.sayHello = function() { document.write(this.name + ":" + this.age); } person.sayHello();
该例子创建了一个名为person的对象,并添加了2个属性(name age)和一个方法(sayHello)
使用构造函数模式方式创建对象:
先自定义类,其实就是定义一个和类名相同的函数。 再使用new关键字调用定义好的类。 (任何函数,只要通过new操作符来调用,那它就可以作为构造函数) 说明: 要将属性与方法赋给this,这样才是表示是对象的属性,如果写var str则是方法中的局部变量。 不要写new Object()。 不要写return语句。 JS在new Person()会做如下事: 1,创建一个新对象。 2,this指向新对象。 3,执行构造方法中的代码。 4,返回新对象。
字面量方式:
var person={ name:"李四", age:88, eat:function(){ alert("eating..."); } }; alert(person.name+person.age); person.eat();
prototype
“prototype”字面翻译是“原型”,是javascript实现继承的主要手段。粗略来说就是:prototype是javascript中的函数(function)的一个保留属性,并且它的值是一个对象(我们可以称这个对象为”prototype对象”)。
Prototype注意的细节:
prototype是函数(function)的一个必备属性(书面一点的说法是”保留属性”)(只要是function,就一定有一个prototype属性)
prototype的值是一个对象
可以任意修改函数的prototype属性的值。
一个对象会自动拥有这个对象的构造函数的prototype的成员属性和方法。
案例:定义一个数组工具类:
function arrTool(){} var ArrayTool = new arrTool(); ArrayTool.getMax = function(arr) { var max = 0; for(var x=1; x<arr.length; x++) { if(arr[x]>arr[max]) max = x; } return arr[max]; }; ArrayTool.getMin = function(arr) { var min = arr[0]; for(var x=1; x<arr.length; x++) { if(arr[x]<min) min = arr[x]; } return min; } /* ArrayTool.getMax = getMax; //获取最值。 function getMax(arr) { var max = 0; for(var x=1; x<arr.length; x++) { if(arr[x]>arr[max]) max = x; } return arr[max]; } */ ArrayTool.binarySearch = function(arr,key) { var min,max,mid; min = 0; max = arr.length-1; while(min<=max) { mid = (min+max)>>1; if(key>arr[mid]) min = mid + 1; else if(key<arr[mid]) max = mid - 1; else return mid; } return -1; } /* ArrayTool.binarySearch = halfSearch; //折半查找,必须是对有序的数组。 function halfSearch(arr,key) { var min,max,mid; min = 0; max = arr.length-1; while(min<=max) { mid = (min+max)>>1; if(key>arr[mid]) min = mid + 1; else if(key<arr[mid]) max = mid - 1; else return mid; } return -1; }
把数组的工具方法添加到javascript内置对象Array中
Array.prototype.getIndex = function(element) { for(var x=0; x<this.length; x++) { if(this[x]==element) return x; } return -1; } Array.prototype.getMin = function() { var min = this[0]; for(var x=1; x<this.length;x++) { if(this[x]<min) min = this[x]; } return min; }
给字符串添加新的方法
// JavaScript Document //给字符串string对象添加新功能。 //去除字符串两端的空格。 String.prototype.trim = function() { var start,end; start = 0; end = this.length-1; while(start<=end && this.charAt(start)==" ") start++; while(start<=end && this.charAt(end)==' ') end--; return this.substring(start,end+1); } //将字符串变成数组。 String.prototype.toCharArray = function() { var arr = new Array(this.length); for(var x=0; x<this.length; x++) { arr[x] = this.charAt(x); } return arr; } //将字符串进行反转。 String.prototype.reverseString = function() { var arr = this.toCharArray(); return arr.reverse().join(""); }
相关文章推荐
- [转]使用cJSON解析JSON字符串
- jSP内置对象
- javascript私有变量
- javascript闭包
- jstl c:choose>、<c:when>和<c:otherwise>标签的自定义开发
- js中的 AOP
- [JSOI2016]轻重路径
- JavaScript代码性能优化总结
- javascript 中的闭包
- [JSOI2016]无界单词
- JavaScript入门学习1
- JavaScript入门学习2
- JavaScript入门学习3;基本用法
- JavaScript入门学习4
- JavaScript入门学习5 DOM操作1
- JavaScript高级篇(一)— —高级函数
- [JSOI2016]飞机调度
- 数据可视化工具 dc.js 入门指南
- javascript屏蔽浏览器右键功能按钮
- Js 时间间隔计算(间隔天数)