JavaScript基础
来源：互联网 发布：blct升级数据 编辑：程序博客网 时间：2024/05/16 17:41
引入方式
向HTML页面插入JavaScript的主要方法，就是使用<script元素>。
js和HTML相结合的方式：
1.将javas代码封装到<script>标签中。
2.将JavaScript代码封装到js文件中，并通过<script>的src属性进行导入。
注意：如果`<script>`标签中使用src属性，那么该标签中封装的JavaScript代码不会被执行。 所以通常导入js文件都是用单独`<script>`来完成。<html> <head> <title>jsdemo.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <!--导入一个js文件--> <script type="text/javascript" src="demo.js"></script> <!--封装js代码--> <script type="text/javascript"> alert("hello javascript"); </script> </body></html>demo.js代码： 
注意：
1、页面上可以有多个<script>标签
2、<script>标签按顺序执行
3、<script>标签可以出现在任意的页面位置
4、<script>标签一定要写</script>关闭，而不能<script/>这样关闭。否则没有任何错误信息，但是没有运行结果。
变量
js中定义变量，使用到关键字var。变量是弱类型的。
<script type="text/javascript"> var x=3;//var不写也行，因为js是非严谨的语言，但是建议用严谨的方式 x="abc";//重新赋值为字符串abc x=3.45;//重新赋值为小数 x=true;//重新赋值为boolean类型 x='c';//赋值为字符串c //alert("x="+x);//这是一个函数，将具体参数通过对话框进行显示 </script>数据类型
typeof运算符
JavaScript中有四种基本数据类型：Undefined, Boolean,Number和String
关键字typeof可以获取一个变量的类型。
如果一个变量没有初始化值的时候，其类型为undefined类型。表示没有定义。
<script type="text/javascript" > /* 1.undefined:未定义 其实它就是一个常量 * */ var s;//s没有赋值 alert(s);//undefined alert(s==undefined);//true //要想获取具体的值的类型 可以通过typeof来完成 alert(typeof("avd"));//string alert(typeof(2.3));//number alert(typeof(true));//boolean alert(typeof(34));//number alert(typeof('6')=='string');//true </script>运算符
算术运算符
1.加法运算符
某个运算数是 NaN，那么结果为 NaN。如果两个运算数都是字符串，把第二个字符串连接到第一个上。如果只有一个运算数是字符串，把另一个运算数转换成字符串，结果是两个字符串连接成的字符串。2.比较运算符
无论何时比较一个数字和一个字符串，ECMAScript 都会把字符串转换成数字，然后按照数字顺序比较它们。3.逻辑运算符
逻辑 AND 运算是简便运算，即如果第一个运算数决定了结果，就不再计算第二个运算数。逻辑 OR 运算也是简便运算。对于逻辑 OR 运算符来说，如果第一个运算数值为 true，就不再计算第二个运算数。4.赋值运算符
复合赋值运算是由乘性运算符、加性运算符或位移运算符加等号（=）实现的。5.位运算符
6.三元运算符
<script type="text/javascript" > /* 运算符 1.算术运算符 + - * / % ++ -- 2.赋值运算符 = += -= *= /= %= 3.比较运算符 运算完的结果Boolean类型 > < >= <= != == 4.逻辑运算符 连接两个布尔型的表达式 && || ! 5.位运算符 & | ^ >> << >>> ~ 6.三元运算符 ? : * */ //算术运算符演示 var a=2644; //alert("a="+a/1000*1000);//a=2644 弱类型 要是是java应该是2000 var a1=2.3,b1=4.7; alert("a1+b1="+(a1+b1));//"a1+b1=7" alert("12"+1);//121 alert("12"-1);//11 alert(true+1);//2 因为在js中false就是0或者null，非0非null就是true。默认用1表示。 alert(2%5);//2 var n=3,m; m=n++; alert("n="+n+",m="+m); //2.赋值运算符 var i=3; i+=2; alert("i="+i); //3.比较运算符 var z=3; alert(z==4); //4.逻辑运算符 var t=4; alert(t>3&&t<6); alert(!true); //5. 位运算符 var c=6; alert(c&3);//2 alert(5^3^3);//5 alert(c>>>1);//6/2(1)=3 alert(c<<2);//6*2(2)=24 //6.三元运算符 3>0?alert("yes"):alert("no"); alert(3>10?100:200); </script>流程控制语句
判断语句
if 语句的语法：
if (condition) statement1 else statement2
注意：
判断的条件会发生自动类型转换：
number：如果非0为true，0为false
string：如果非null或非空为true，否则为false
undefined：false
NaN: false
对象类型：非null为true，否则为false。
var x=3; //if(x=4){//注意 if(4==x){//建议将常量放在左边，以报错来修正代码 alert("yes"); }else{ alert("no"); } if(x>1) alert("a"); else if(x>2) alert("b"); else if(x>3) alert("c");选择语句
var y="abc"; switch(y){ default: alert("c"); break; case "kk": alert("a"); break; case "abc": alert("b"); break;关键字 break 会使代码跳出 switch 语句。如果没有关键字 break，代码执行就会继续进入下一个 case。
关键字 default 说明了表达式的结果不等于任何一种情况时的操作（事实上，它相对于 else 从句）。
JavaScript的switch语句与java不同之处：
1、基本数据类型都可以传递给switch case语句。
2、case语句可以是表达式。
循环语句
//循环结构 var t=1; document.write("<font color='red>"); while(t<3){ alert("t="+t); //将数据直接写到当前页面当中 document.write("x="+x+"<br/>"); t++; } document.write("</font>"); } for(var x=0;x<3;x++){ document.write("x="+x); } w:for(var x=0;x<3;x++){ for(var y=0;y<4;y++){ document.write("x=="+x); break w;//跳出循环 } } while 语句是先测试循环。这意味着退出条件是在执行循环内部的代码之前计算的。因此，循环主体可能根本不被执行。
do-while 语句是后测试循环，即退出条件在执行循环内部的代码之后计算。这意味着在计算表达式之前，至少会执行循环主体一次。
for 语句是前测试循环，而且在进入循环之前，能够初始化变量，并定义循环后要执行的代码。
for in语句
for 语句是严格的迭代语句，用于枚举对象的属性或者遍历一个数组的元素。
它的语法如下：
for (property in expression) statement
/* js中的特有语句 for in 格式： for(变量 in 对象)//对对象进行遍历的语句 { } * */ var arr=[32,89,65]; for(i in arr){ println("i="+arr[i]); } println("<hr/>"); var numObj= "abc";//new Number(4) //遍历到对象的一些属性或者成员 for(x in numObj){ println(x); }with语句
with语句的作用： 有了 With 语句，在存取对象属性和方法时就不用重复指定参考对象。
格式 ：
with(obj){
操作obj的属性语句;
}
练习：在页面上显示一个99乘法表
<!DOCTYPE html><html> <head> <title>jstest.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <link rel="stylesheet" href="table.css"/> </head> <body> <script type="text/javascript"> /* 练习：在页面上显示一个99乘法表 * */ document.write("<table>"); for (var i=0; i <=9; i++) { document.write("<tr>"); for(var j=1; j<=i; j++){ document.write("<td>"+j+"*"+i+"="+i*j+"</td>"); } document.write("</tr>"); }; document.write("<table>"); </script> </body></html>其中table.css代码：
@CHARSET "UTF-8";table,table td{ border: #0000ff double 1px; width: 600px;}数组
js中数组的定义有两种方式：
1. var arr=[]; var arr=[1,2,3,5]; 2.使用了JavaScript中的Array对象来完成定义 var arr=new Array();//var arr=[]; var arr1=new Array[5];//数组定义并长度是5 var arr2=new Array(5,6,7);//定义一个数组，元素是5,6,7JavaScript数组的特点：
1.长度可变2.元素的类型是任意的 建议在使用数组的时候，存储同一类型的元素，操作起来方便<!DOCTYPE html><html> <head> <title>js_array.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <script type="text/javascript" charset="utf-8"> var arr=[13,45,67]; alert(typeof(arr));//对象类型 Object alert("len:"+arr.length); arr[4]=234; arr[1]="abc"; arr[2]=true; //遍历数组 for(var x=0;x<arr.length;x++){ document.write("arr["+x+"]"+"<br/>"); } </script> </body></html>函数基础
函数主要用来封装具体的功能代码。
JavaScript函数是由这样的方式进行声明的：关键字 function、函数名、一组参数，以及置于括号中的待执行代码。
注意事项:
1. 不需要类型，只写形参的名称就可以了。2. 声明时不需要指定返回值类型；return可以有，也可以没有。3. javascript中的函数没有重载的形式，后定义的函数会直接覆盖前面的函数。4. 一个函数可以接收任意个 参数。如果函数无明确的返回值，或调用了没有参数的 return 语句，那么它真正返回的值是 undefined。
参数:
JS的函数都是类似于Java中可变参数的。在函数中可以直接使用arguments变量，arguments是一个数组，表示所有传递过来的参数。在声明函数时，定义的形参就对应arguments数组中相应位置的参数值，写形参只是用着方便一点。<!DOCTYPE html><html> <head> <title>js_function.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <script type="text/javascript" charset="utf-8"> /* js中的函数演示 函数：就是一个功能的封装体 定义功能通常需要两个明确 1.功能的结果 2.功能实现中的参与运算的未知的内容 js中定义函数的格式 通过指定的关键字来定义 function 函数名(参数列表){ 函数体: return 返回值；//如果没有具体的返回值，return语句可以省略不写 } * */ function demo(){ alert("demo run"); return; } demo();//调用函数 function add(x,y){ return x+y; } alert("sum="+add(45,5)); </script> <script type="text/javascript" charset="utf-8"> /* 函数的一些细节 1.只要使用了函数的名称，就是对这个函数的调用 2.函数中有一个数组在对传入的参数进行存储。这个数组就是argument * */ function show(x,y){ alert(arguments.length); alert(x+":"+y); for(var a=0;a<arguments.length;a++){ document.write(arguments[a]); } } show(23,45,6,7,8,9,6);//建议函数中定义几个参数就传递几个实参 </script> <script type="text/javascript" charset="utf-8"> function getSum(){ return 100; } var sum=getSum();//getSum函数运行，并将返回的结果赋值给sum var sum1=getSum;//getSum本身是一个函数名，而函数本身在js中就是一个对象。getSum就是这个函数对象的引用 //将getSum这个引用的地址赋值给sum，这是sum也指向了这个函数对象。相当于这个函数对象有两个函数名称。 alert("sum="+sum1);//打印时候如果sum指向的是函数对象，那么会将该函数对象的字符串表现形式打印出来，就是该函数的代码定义格式。 function show2(){ alert("show2 run"); } alert(show2());//显跳出show2 run窗口 然后跳出undefined窗口，因为要输出一个函数，但是函数没有返回结果，所以不能输出，会输出undefined。 </script> </body></html>js函数的其他表现形式：
<!DOCTYPE html><html> <head> <title>js_function2.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <script type="text/javascript" charset="utf-8"> /* js函数的其他表现形式 动态函数：使用的是js中内置的一个对象Function 参数列表，函数体都是通过字符串动态指定的 用得不多 * * */ var add=new Function("x,y","var sum;sum=x+y;return sum;"); var sum1=add(4,8); alert("sum="+sum1); function add2(x,y){ var sum; sum =x+y; return sum; } </script> <script type="text/javascript" charset="utf-8"> /* 匿名函数：没有名字的函数 通常是函数的简写形式 * */ var add3 = function (a,b){ return a+b; }; alert(add3(7,8)); </script> </body></html>综合练习：
<!DOCTYPE html><html> <head> <title>jstest2.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <script type="text/javascript" charset="utf-8"> /* 综合练习 1.定义功能，完成对数组的最值获取 2.对数组排序 3.对数组查找 4.对数组元素反转 */ var arr=[234,566,78,32,4445]; //取最值 function getMax(arr){ var max=0; for(var x=1; x<arr.length; x++){ if(arr[x]>arr[max]) max=x; } return arr[max]; } var maxValue=getMax(arr); // alert("maxValue:"+maxValue); //排序 function sortArray(){ for(var x=0;x<arr.length-1;x++){ for(var y=x+1;y<arr.length;y++){ if(arr[x]>arr[y]){ swap(arr,x,y); } } } } //数组中的元素位置互换 function swap(arr,x,y){ var temp=arr[x]; arr[x]=arr[y]; arr[y]=temp; } function println(val){ document.write(val+ "<br/>"); } // println("before:"+arr); // sortArray(arr); //println("after:"+arr); </script> <script type="text/javascript" charset="utf-8"> /* 3. 4. * */ //查找 function searchElement(arr,key){ for(var x=0;x<arr.length;x++){ if(arr[x]==key) return x; } return -1; } //折半查找 function binarySearch(arr,key){ var max,min,mid; min=0; max=arr.length-1; while(min<=max){ mid=(max+min)>>1; if(key>arr[mid]) min=mid+1; else if(key<arr[mid]) max=mid-1; else return mid; } return -1; } //对数组反转 function reverseArray(arr){ for(var start=0,end=arr.length-1; start<end; start++,end--){ swap(arr,start,end); } } reverseArray(arr); println("after reverse:"+arr); </script> </body></html>局部变量和全局变量
在脚本片段中定义的是全局变量，在函数内定义的是局部变量。
<body> <script type="text/javascript" charset="utf-8"> /* 全局变量和局部变量 * * */ // for(var x=0;x<3;x++){//在脚本片段中定义的变量是全局变量 // document.write("x="+x); // }// // function show(){ // var x=6;//局部变量// // }// // document.write("x==="+x); var x=3;//全局变量 function show(x){//函数局部的变量x x=8; } show(x); document.write("x="+x);//x=3 </script> <script type="text/javascript" charset="utf-8"> document.write("xx="+x); </script> </body>JavaScript常见对象
JavaScript默认提供了内置的对象，也可以根据开发者的需求自己定义对象。
<!DOCTYPE html><html> <head> <title>js_object.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <script type="text/javascript" charset="utf-8"> /* 演示Object对象 toString()：将对象变成字符串 valueOf() * */ function show(){ alert("show run"); } // alert(show.toString()); var arr=[3,4,5,7,1]; // alert(arr.toString()); var abc= function(){ alert("abc run"); } // alert(abc); alert(arr.valueOf()); alert(abc.valueOf()); </script> </body></html>String类
常见的方法：
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 转小写<!DOCTYPE html><html> <head> <title>js_string.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <script type="text/javascript" src="out.js"></script> <script type="text/javascript" src="stringtool.js"></script> <script type="text/javascript"> /* 演示string对象 表现形式 1. var str=new String("abc"); 2. var str="abc"; */ var str="abcde"; println(str.length); // alert(str.bold());//<B>abcde<B> println(str.bold());//加粗显示 println(str.fontcolor("red"));//字体颜色 println(str.link("http://www.baidu.com"));//超链接 println(str.substr(1,3));//1起始，长度3 bcd println(str.substring(1,3));//1起始，3结束 bc /* js中的string对象方法有限，想要对字符串操作的其他功能 比如：去除字符串两端的空格。这时只能自定义 * * */ //去除字符串两端的空格 function trim(str){ //定义两个变量，一个记录开始的位置，一个记录结束的位置 //对开始的位置的字符进行判断，如果是空格，就进行递增，直到不是空格为止 //对结束的位置的字符进行判断，如果是空格，就进行递减，直到不是空格为止 //必须要保证开始<=结束，这样才可以进行截取 var start,end; start=0; end=str.length-1; while(start<=end&&str.charAt(start)==' '){ start++; } while(start<=end&&str.charAt(end)==' '){ end--; } return str.substring(start,end+1); } var s=" ab c "; alert("="+trim(s)+"="); </script> </body></html>其中，out.js文件代码如下：
/** * 打印指定参数数据到页面上并换行 * */function println(param){ document.write(param+"<br/>");}/** * 打印指定参数数据到页面上 * */function print(param){ document.write(param);}原型prototype
在上面小节的代码中，trim方法是用于操作字符串的方法，可不可以像字符串已有的方法一样，将该方法也定义到字符串对象中呢？之后直接用字符串对象调用就可以。 这里就可以使用一个该字符串的原型属性来完成。
原型：就是该对象的一个描述。该描述中如果添加了新功能，那么该对象都会具备这些新功能，而prototype就可以获取到这个原型对象， 通过prototype就可以对对象的功能进行扩展。
“prototype”字面翻译是“原型”，是javascript实现继承的主要手段。粗略来说就是：prototype是javascript中的函数(function)的一个保留属性，并且它的值是一个对象（我们可以称这个对象为"prototype对象"）。需求：给string对象添加一个可以去除字符串两端空格的新功能。
可以定义一个String的工具类stringtool.js，这个文件中包含自定义的string类的扩展新功能，在HTML导入这个js文件就可以直接使用这个功能了：
/** * *//* * 字符串对象的新功能：去除字符串两端的新功能 * */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 chs=[]; //将字符串中的每一位字符存储到字符数组中 for(var x=0;x<=this.length;x++){ chs[x]=this.charAt(x); } return chs;};/** * 字符串新功能：将字符串反转 * * */String.prototype.reverse=function(){ var arr=this.toCharArray(); //将数组位置置换功能进行封装，并定义到了反转功能内部 闭包 function swap(arr,a,b){ var temp=arr[a]; arr[a]=arr[b]; arr[b]=temp; }//函数里封装函数 for(var x=0,y=arr.length-1;x<y;x++,y--){ swap(arr,x,y); } return arr.join("");};function swap(arr,a,b){ var temp=arr[a]; arr[a]=arr[b]; arr[b]=temp;}调用定义好的新功能：
<body> <script src="stringtool.js" type="text/javascript" charset="utf-8"></script> <script src="out.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> var str="abcde"; println(str.toCharArray()); println(str.reverse()); </script> </body>数组类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，将其作为空字符串处理。<!DOCTYPE html><html> <head> <title>js_array.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <script src="out.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> /* 演示数组 * */ var arr=["cd","dvd","miaomi","puppy","kitty"]; var arr2=["weixin","weibo","qq","blog"]; println(arr); println(arr2); //concat方法 //在arr数组上连接一个元素"mm"，再 连接一个arr2数组 var newArr=arr.concat("mm",arr2);//将"mm"作为新数组的元素，将arr2中的元素也作为新数组的元素 println(newArr); //join方法 返回字符串值，其中包含了连接到一起数组的所有元素，元素由指定的分隔符分隔开来 println(newArr.join()); println(newArr.join("-")); println(myJoin(newArr,"+")); //模拟join的原理 function myJoin(arr,separator){ var str=""; for(var x=0;x<arr.length;x++){ if(x!=arr.length-1) str+=arr[x]+separator; else str+=arr[x]; } return str; } println("<hr/>"); // //pop方法：移除数组中的最后一个元素并返回该元素 // println(arr.pop());//删除最后一个元素并返回 // println(arr);// // println("<hr/>"); // //将新元素添加到一个数组中，并返回数组的新长度值 // //arr3.push(arra,arrb,arrc);//等价于var arr3=[arra,arrb,arrc]; 里面有三个元素 每个元素都是数组 实现了二维数组// // println("<hr/>"); // //反转 // println(arr.reverse());// // println("<hr/>"); // println(arr.shift());//删除并返回第一个元素 // println(arr);// // //slice方法返回一个数组的一段// // //sort方法：返回一个元素已经进行了排序的Array对象 // println(arr); // arr.sort(); // println(arr); // //splice方法：从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素 // println(arr); // var temp=arr.splice(1,3,8080,9527,"game","gamble");//删除下标从1开始的3个元素，并返回删除的元素 // println(temp); // println(arr); //unshift方法：将指定元素插入数组开始位置并返回该数组 println(arr); arr.unshift("emmmm"); println(arr); </script> </body></html>数组练习
1.用数组实现js中的堆栈或者队列数据结构
2.给数组对象添加新功能
<!DOCTYPE html><html> <head> <title>js_arraytest.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <script src="out.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> /* 数组练习 用数组实现js中的堆栈或者队列数据结构 * */ var arr=[]; // arr.unshift("abc1","abc2","abc3"); arr.unshift("abc1"); arr.unshift("abc2"); arr.unshift("abc3"); println(arr);// //队列 println(arr.pop()); println(arr.pop()); println(arr.pop()); // //堆栈 // println(arr.shift()); // println(arr.shift()); // println(arr.shift()); </script> <script src="arraytool.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> /* 给数组对象添加新功能，使用到原型属性 * */ var array=["ruoxi","longkui","yuer","xinyue","miaotong"]; var maxValue=array.getMax(); println("maxValue:"+maxValue); println(array); </script> </body></html>arraytool.js：
/** * 数组获取最大值的方法 */Array.prototype.getMax=function(){ var temp=0; for(var x=1;x<this.length;x++){ if(this[x]>this[temp]){ temp=x; } } return this[temp];};/** * 数组的字符串表现形式 * 定义toString方法，相当一java中的复写 */Array.prototype.toString=function(){ return "["+this.join(", ")+"]";};Date类
<body> <script src="out.js" type="text/javascript" charset="gb2312"></script> <script type="text/javascript" charset="utf-8"> /* 演示js中的日期 Date * */ var date=new Date(); println(date);//Tue Dec 12 18:33:07 UTC+0800 2017 println(date.toLocaleString());//日期和时间 println(date.toLocaleDateString());//只有日期 /* 为了简化对象调用内容的书写 可以使用js中的特有语句with来完成 格式 with(对象){ 在该区域中可以直接使用指定的对象的内容。不需要写 对象. } * */// // var year=date.getFullYear(); // var month=date.getMonth()+1; // var day=date.getDate(); // var week=getWeek(date.getDay()); with(date){ var year=getFullYear(); var month=getMonth()+1; var day=getDate(); var week=getWeek(getDay()); } println(year+" 年 "+month+" 月 "+day+" 日 "+week); function getWeek(num){ var weeks=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']; return weeks[num]; } //日期对象和毫秒值之间的转换 var date2=new Date(); //获取毫秒值 日期对象-->毫秒值 var time=date2.getTime(); println("time:"+time);//time:1513082587526 //毫秒值转成日期对象 //1.new Date(time);//2. setTime(); var date3=new Date(time); //将日期对象和字符串之间进行转换 //日期对象转成字符串 toLocaleString toLocalDateString //将字符串转成日期对象。具备指定格式的日期字符串--->毫秒值--->日期对象 var str_date="12/12/2017"; var time2=Date.parse(str_date); var date3=new Date(time2); println(date3); </script> </body>Math类
<body> <script src="out.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> /* 演示Math对象。该对象中的方法都是静态的。不需要new，直接Math调用 * */ var num1=Math.ceil(12.34);//13 返回大于等于指定参数的最小整数 var num2=Math.floor(12.34);//12 返回小于等于参数的最大整数 var num3=Math.round(12.34);//12 四舍五入 println(num1); println(num2); println(num3); var num4=Math.pow(10,3); println("num4="+num4);//num4=1000 println("<hr/>"); for(var x=0;x<10;x++){ // var num=Math.floor((Math.random()*10+1)); var num=parseInt((Math.random()*10+1));//全局方法 Global对象里的方法 println(num); } </script>Number类
JavaScript提供了两种把非数字的原始值转换成数字的方法，即 parseInt() 和 parseFloat()。只有对 String 类型调用这些方法，它们才能正确运行；对其他类型返回的都是 NaN。
在判断字符串是否是数字值前，parseInt() 和 parseFloat() 都会仔细分析该字符串。
parseInt() 方法首先查看位置 0 处的字符，判断它是否是个有效数字；如果不是，该方法将返回 NaN，不再继续执行其他操作。但如果该字符是有效数字，该方法将查看位置 1 处的字符，进行同样的测试。这一过程将持续到发现非有效数字的字符为止，此时 parseInt() 将把该字符之前的字符串转换成数字。
判断是否是一个有效的数值：
isNaN( 表达式 )，返回的结果是否为NaN（非数值）
可以使用parseInt函数将指定进制格式的字符串转成十进制。
使用Number对象来实现将十进制转成其他进制。
<!DOCTYPE html><html> <head> <title>js_global.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <script src="out.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> /* 演示global的全局方法 * */ println(parseInt("123")+1);//124 var val=parseInt("abc"); println("value="+val);//value=NaN println("boolean:"+isNaN(val));//通过isNaN来判断结果是否非法 var v=parseInt("1234abbc"); println("v="+v);//v=1234 //将指定进制格式的字符串转成十进制 var num=parseInt("110",2); println("num="+num); var num1=parseInt("0x3c",16); println("num1="+num1); //将十进制转成其他进制 使用数字对象Number来完成 var num3=new Number(6); println("num3="+num3.toString(2)); var num4=60; println("num4="+num4.toString(16)); //基于对象：无论写什么，包括一个变量、函数，在底层都是对象，内存里面全部都是对象 </script> </body></html>自定义对象
如果想要自定义对象，应该先对对象进行描述。 js是基于对象，不对面向对象的，不具备描述事物的能力，要按照面向对象的思想编写js， 就要先描述。在js中，可以用函数来模拟面向对象的描述。
1.使用构造函数模式方式创建对象：
先自定义类，其实就是定义一个和类名相同的函数。
再使用new关键字调用定义好的类。
（任何函数，只要通过new操作符来调用，那它就可以作为构造函数）
说明： 要将属性与方法赋给this，这样才是表示是对象的属性，如果写var str则是方法中的局部变量。 不要写new Object()。 不要写return语句。JS在new Person()会做如下事： 1，创建一个新对象。 2，this指向新对象。 3，执行构造方法中的代码。 4，返回新对象。 //用js来描述人 function Person(){//相当于构造器 // alert("person run"); } //通过描述进行对象的建立 new var p=new Person(); //动态给p对象添加属性。直接使用p.属性名即可 p.name="miaowu"; p.age=9; //如果定义的p对象的属性赋值给一个函数，即是给p对象添加一个方法 p.show = function(){ alert("show:"+this.name+"--"+this.age); }; p.show(); var obj=new Object(); obj.name="god "; obj.age=2017; alert(obj.name+":"+obj.age);带参数：
function Person(name,age){ //在Person对象中添加了两个属性 this.name=name; this.age=age; this.setName=function(name){ this.name=name; }; this.getName=function(){ return this.name; }; } var p=new Person("aaaaa",23); // alert(p.name+":"+p.age); p.setName("alice"); // alert(p.getName()); //自定义对象中取属性值的方式 for(x in p){ println(x+":"+p[x]); }//name:alice //age:23 //setName:function(name){ this.name=name; } //getName:function(){ return this.name; }2.直接使用{}定义属性和值的键值对方式。键值对通过冒号连接，键与键直接用逗号隔开
var pp={ //定义一些成员 "name":"cindy","age":23, "getName":function(){ return this.name; } }; //对象调用成员有两种方式：1. 对象.属性 2. 对象["属性名"] alert(pp.getName()+":"+pp.age+"--"+pp["age"]);这种方式可以来模拟集合的定义：
//模拟map集合的定义 var oMap={ 4:"aab",3:"edf",6:"aoe" }; // var val=map[4]; // alert("val:"+val); var val2=get(6); // alert("val2:"+val2); function get(key){ return oMap[key]; }阅读全文
0 0
- javaScript基础
- JAVASCRIPT 基础
- JavaScript基础
- JAVASCRIPT基础
- JavaScript 基础
- javascript基础
- javascript基础
- JavaScript 基础
- JavaScript基础
- javascript基础
- JavaScript基础
- javascript基础
- javascript基础
- Javascript基础
- JavaScript基础
- JavaScript基础
- javascript基础
- javascript基础
- Android网络请求-sign参数的设置
- 日常咸鱼记录17/12/13，更新Vmware Tools
- C++ 关于sort
- 2017-12-13 杂记
- Leetcode 448. Find All Numbers Disappeared in an Array
- JavaScript基础
- WinForm，在另一个线程中更新Form中的数据
- 10、变量种类、赋值、脚本参数调用、bash配置文件、算术、数值字符对比
- 泛微e-cology和Oracle无法启动的解决方案
- 1006. 换个格式输出整数 (15)
- 二分查找算法
- TOJ 5266: 三角形相似
- Spring AOP实现原理
- 数据结构实验之排序三：bucket sort
