引入方式
向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,7
JavaScript数组的特点：
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];
}
扫一扫
8024
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
