1、JavaScript概述
关于JavaScript直接参考视频35-31-1解析。
先说一下什么是脚本语言，以及脚本语言与编程语言的区别
脚本语言与编程语言的区别
什么是脚本语言
编程语言分类
动态语言与静态语言
之前的HTML的标签用于页面中对数据的封装，并使用CSS完成一些页面效果，但是如果我们想实现更多的效果，HTML+CSS就显得不足，因此我们需要使用JavaScript来实现页面的动态效果。Ajax技术是一种异步通信方式，可以实现页面的局部实时刷新，与服务器进行交互，这门技术的主力语言也是JavaScript。
对数据的描述方式，HTML是标签，CSS是属性与属性值，而JavaScript是一门标准的程序设计语言，它的逻辑性比较强。
Java与JavaScript有什么关系？——视频35-31-1-8.45。——其实JavaScript和Java是2个公司开发的不同产品，JavaScript和Java有一些相同的特性，但是本质上也没有太大的关系。JavaScript目前还没有一个特别好的帮助文档手册。
JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。
特点：
1、交互性（它可以做的就是信息的动态交互）；
2、安全性（不允许直接访问本地硬盘）；
3、跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）。
JavaScript与Java不同
1、JS是Netscape公司的产品，前身是Livescript；Java是sun公司的产品，现在是oracle公司的产品；
2、JS是基于对象（JS里面的内容全都是对象），Java是面向对象（java是用一种面向对象的思考方式对问题进行描述）；
3、JS只需解释就可以执行，Java需要先编译成字节码文件，再执行；
4、JS是弱类型，Java是强类型。强类型指的是对每一种数据都定义好其类型，并对该类型所分配的空间进行好定义；对于弱类型，一块内存空间可以存放各种类型的数据。
2、JavaScript与html的结合方式
JavaScript与Html的结合方式：JS想要将其他代码融入到HTML中，都是以标签的形式。
1、JS代码存放在标签对<script>js code.…</script>中；
2.当有多个html页面使用到相同的JS脚本时，可以将JS代码封装到一个文件中，只要在script标签的src属性引入一个js文件。（方便后期维护，扩展）；
注意：如果script标签中使用src属性，那么该标签中封装的javascript代码不会被执行。 所以通常导入js文件都是用单独script来完成。script可以放在HTML页面的任意位置，目前放在body中的。
例：
注：规范中script标签早期有一个属性language，而现在使用type属性。
相应的代码实例如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<!--
浏览器如何解析<script>内的函数（35-31-02-3.20）
-->
<!--导入一个js文件-->
<script src="Demo.js" type="text/javascript"></script>
<!--通常导入js文件都是用单独script来完成-->
<!--封装javascript代码。-->
<script>
/*
注意，script在使用的时候必须标注类型，这样才会启动相应的解析引擎，否则显示出来的数据只能是纯文本
如：<% java代码 %>
*/
alert("hello javascript");
/*
这里也可以将多个html文件要使用的JS代码封装到一个js文件中，通过src调用即可
并且只会运行导入的js文件中的代码，script文件中的代码不会运行
注意，之前CSS与HTML结合的时候使用的是@import关键字在<style>标签中导入css文件的
*/
</script>
</body>
</html>
3、JavaScript的语法
3.1、运算符
高级程序设计语言所包含的语法内容以及各类运算符的演示代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<!--演示javascript语法通用内容-->
<script>
/*
* 通常高级程序设计语言所包含的语法内容：
* 1、关键字:该种语言中被赋予了特殊含义的单词。
* 2、标示符:用于标示数据和表达式的符号。通常可以理解为在程序中自定义的名称。比如变量名，函数名。
* 3、注释:注解说明解释程序。用于调试程序。（JS支持单行与多行注释）
* 4、变量:用于标示内存中一片空间。用于存储数据，该空间的中的数据是可以变化的。
* 什么时候使用变量，当数据不确定的时候。
* 5、运算符：可以让数据进行运算的符号。
* 6、语句:用于对程序的运行流程进行控制的表达式。
* 7、函数:用于对功能代码进行封装，便于提高复用性。
* 8、数组:对多数据进行存储，便于操作。就是传说中容器。
* 9、对象:只要是基于对象的语言，或者是面向对象的语言，就存在着对象的概念，
* 对象就是一个封装体。既可以封装数据又可以封装函数。
*
* 这些都是高级程序设计语言具备的共性内容，只不过各种语言对这些内容的表现形式有所不同。
* 但是使用基本思想是一致。
*/
</script>
<!--
<script type="text/javascript">
//js中定义变量,使用到关键字，这个关键字就是var
//定义变量，Js是弱类型的编程语言，因此它的变量可以赋予任意类型的数据。
//JS中的数据类型分为数字类型、字符串类型、布尔类型
var x = 4;//var不写也行，因为js是非严谨的语言，但是我们开发的时候建议都按照严谨的方式来定义。
x = "abc";//重新赋值为字符串abc。
x = 3.45;//赋值为小数，其实也是数字类型。
x = true;//赋值为boolean类型。
x = 'c';//赋值为字符串c。
alert("x="+x)//这是一个函数，将具体的参数通过对话框进行显示。
</script>
-->
<script type="text/javascript">
/*
* 运算符。
* 1，算术运算符。
* + - * / % ++ --
* 2，赋值运算符。
* = += -= *= /= %= （java中赋值运算符应该考虑到类型转换的问题）
* 3，比较运算符:运算的结果要么是false要么是true。
* > < >= <= != ==
*
* 4，逻辑运算符。用来连接两个boolean型的表达式。
* ! && ||
* 5，位运算符。
* & | ^ >> << >>>
* 6，三元运算符。
* ? :
*/
/*
//1，算术运算符演示。
var a = 3710;
alert("a="+a/1000*1000);
//a=3710，在java中a/1000，得到一个float类型的数据3.71，由于int除的是int类型的数据，最后结果也应该是int类型
//因此3.71被装换为int类型3.但是在JS中，JS是弱类型，没有整形与浮点型的区别，只有数字类型，因此3.71不会被转换为3
var a1 = 2.3 , b1 = 4.7;
alert("a1+b1="+(a1+b1));//a1+b1=7，在java中浮点类型相加结果也应该是浮点，这里是7.0
alert("12"-1);//11，字符串12减一，会先将字符串12变为整数，再减一
alert("12"+1);//121，字符串加数字类型直接转变为字符串
alert(true+1);//2，因为在js中false就是0，或者null，非0，非null，就是true，默认用1表示。
alert(2%5);//2
var n = 3 , m;
m = ++n;//如果是m=n++，那么n=4,m=3
alert("n="+n+",m="+m);//n=4,m=4
//m=n++：先将n=3的值赋予m，n再自加1
//m=++n：先将n再自加1，再将n=4的值赋予m
// =================================================
// 2，赋值运算符
var i = 2;
//i = i +1;
i += 1;
alert("i="+i);
// =================================================
// 3，比较运算符。
var z = 3;
alert(z!=4);
// =================================================
// 4，逻辑运算符。
var t = 4;
alert(t>3 && t<6);//true
alert(t>3 & t<6);//1
//在js中，“&”是位运算符，t>3是1，t<6是1，1与1结果是1；而“&&”则是true与true，结果是true
//因此，连接2个布尔表达式我们一般都会使用双与“&&”，真假值阅读更为直观
alert(!true);
alert(!t);//false，t=4非0，那就是true。注意逻辑运算符的结果都是boolean型
// =================================================
// 5，位运算符。
var c = 6;
alert(c&3);//0110&0011=0010:2
alert(5^3^3);//0101^0011=0110^0011=0101=5——一个数异或2次结果还是这个数
alert(c>>>1);//无符号右移0110>>>1=0011=6/2=3
alert(c<<2);//0110<<2=0001 1000=6*2*2=24
// =================================================
//6，三元运算符。
5>0?alert("yes"):alert("no");//运算完没有结果
alert(3>10?100:200);
//java中三元运算符运算必须有结果，而JS中三元运算符运算可以没有结果
*/
</script>
<script type="text/javascript">
//一些细节：
//1、undefined:未定义。其实它就是一个常量。
var xx;//变量没有值，就赋予undefined
alert(xx);//弹窗结果为undefined
alert(xx==undefined);//true，比较运算符，结果是boolean型
//2、要想获取具体的值的类型。可以通过typeof来完成。
alert(typeof("abc"));//string
alert(typeof('a'));//string
//字符串与字符在JS都归为string类型
alert(typeof(2.5));//number
alert(typeof(66));//number
//整型与浮点型都归为number类型
alert(typeof(true));//boolean
//判断一个量是什么类型
alert(typeof("abc") == 'string');//注意比较的时候类型使用单引号括起来
alert(typeof(2.5)=='number');
</script>
</body>
</html>
3.2、语句
各种语句示例如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
/*
* 语句：
* 1，顺序结构。
*
* 2，判断结构。
* 代表语句： if.
* 3，选择结构。
* switch
* 4，循环结构。
* while do while for
* 5，其他语句。
* break：跳出选择，跳出循环。（只会跳出一层循环）
* continue:用于循环语句，结束本次循环继续下次循环。
*/
/*
//1、顺序结构
alert("abc1");
alert("abc2");
// ------------------------------------------------
//判断语句if
var x = 3;
if(x == 4)
{
alert("yes");
}
else
{
alert("no");
}
//如果我们双等号写少一个成为单等号，本来应该判断为错，实际上并没有，结果是yes（35-31-8-3.30）
//x=4直接赋值，x=4,if(4)表示真，当然会打印yes
// if(x=4)
// {
// alert("yes");
// }
// else
// {
// alert("no");
// }
//写作4==x，在少写一个等号的情况下，IDE就会报错，错误的结果也不会显示
//报错：不能给number赋值——这样我们就能知道自己少写一个=
if(4=x)
{
alert("yes");
}
else
{
alert("no");
}
//“==”判断的时候，常量放左放右都可以判断，而“=”赋值的时候，常量只能放在右边
var y = 0.5;
if(y>1)
alert("a");
else if(y>2)
alert("b");
else if(y>3)
alert("c");
else
alert("d");
//只要y值大于1，结果都是a。因为这是一整条语句，只要有一个满足条件，语句直接结束
*/
// ------------------------------------------------
/*
//选择结构。——注意switch内容的格式的书写
//注意，在JS中字符串类型是string，第一个s是小写的
var x = "bb" ;
switch(x)
{
default: alert("d");break;
case "aa": alert("a");break;
case "bb": alert("b");break;
case "cc": alert("c");break;
}
//java的switch只能对4种类型进行选择——byte、short、int、char，现在String类型与枚举也可以
//而JS所有类型都可以进行选择
*/
// ------------------------------------------------
//循环结构
/*
//JS里面用document.write导入html标签，需要使用""括起来
var x = 1;
document.write("<font color='red' >");//注意，这里双引号里面不能写双引号，否则会报错
while(x<10)
{
alert("x="+x);
document.write("x="+x+"<br/>");
//这里加换行的标签需要用""括起来，既写入一个换行标签字符串，这样浏览器就可以解析（浏览器可以解析HTML标签）
x++;
}
document.write("</font>");
//document.write()：可以将html数据直接写到当前的页面当中，注意内容用“”包围
//document是一个文档对象，write是这个文档对象的方法
for(var y=0; y<3 ;y++)
{
document.write("y="+y+"<br />");
}
w:for(var i=0; i<3 ; i++)
{
for(var j=0; j<4 ; j++)
{
document.write("i="+i+"--"+"j="+j+"||");
//continue w;
}
}
*/
//不加continue：
//i=0--j=0||i=0--j=1||i=0--j=2||i=0--j=3||i=1--j=0||i=1--j=1||i=1--j=2||i=1--j=3||i=2--j=0||i=2--j=1||i=2--j=2||i=2--j=3||
//加continue：i=0--j=0||i=1--j=0||i=2--j=0||
</script>
</body>
</html>
小练习——九九乘法表练习如下：
首先是JSDemo2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<!--
再导入表格的css文件，对表格作一定程度的样式调整.
可以使用import导入css文件，也可以使用link导入
-->
<style type="text/css">
/*@import url(table.css);*/
</style>
<link rel="stylesheet" href="table.css"/>
</head>
<body>
<script type="text/javascript">
//模拟九九乘法表——在JS中使用html标签<table>
document.write("<table>");
for(var x=1; x<=9 ;x++)
{
document.write("<tr>");
for(var y=1; y<=x ;y++)
{
document.write("<td>"+x+"*"+y+"="+x*y+"</td>");
}
document.write("</tr>");//<tr>标签的末尾有换行标志
}
document.write("</table>");
</script>
</body>
</html>
------------------------
table.css
/* CSS Document */
/*使用关联选择器与组合选择器来对表格进行样式的调整*/
table,table td
{
background-color:#99FFFF;
border: #0000ff double 1px;
width:600px;
}
3.3、数组
相应的代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
/*
* javascript中的数组演示。
*
* 数组用于存储更多的数据，是一个容器。
* 特点：
* 1、长度的是可变的。
* 2、元素的类型是任意的，建议在使用数组时，存储同一类型的元素，操作起来较方便。
*
*
* js中的数组定义的两种方式：
* 1、var arr = []; var arr = [3,1,5,8];
* 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;
*/
var arr1 = [];
var arr2 = [2,3,4,5,6];
var arr3 = ['a',45,"cadca"];
var arr4 = new Array(6);
var arr5 = new Array(2,3,4,5);
alert(typeof(arr1));//数组属于——对象类型Object
alert("len="+arr4.length);
arr2[1] = "abc";
arr2[4] = 348;
arr2[2] = true;
//遍历数组。
for(var x=0; x<arr2.length; x++){
document.write("arr2["+x+"]="+arr2[x]+"<br/>");
}
var arr = [1,2,3];
arr[4] = 4;
for(var x=0; x<arr.length; x++){
document.write(arr[x]+"<br />");
}
/*(35-32-13-5.50解析)——数组长度的是可变的
1
2
3
undefined——没有赋值的元素值为undefined
4
*/
</script>
</body>
</html>
3.4、函数
函数的定义以及代码示例如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
/*
* js中的函数演示，定义功能通常需要两个明确。
* 1、功能的结果；
* 2、功能实现中的参与运算的未知的内容；
*
* js中的定义函数的格式。
* 通过指定的关键字来定义。
* function 函数名(参数列表)
*{
* 函数体：
* return 返回值;//如果没有具体的返回值，return语句可以省略不写。
* }
*/
/*
//定义函数
function demo()
{
alert("function run");
return ;//没有返回结果可以不返回
}
//demo();//调用函数
//加法函数
function add(x,y)//函数的参数列表不需要指定数据的类型为var，直接写变量即可
{
return x+y;
}
//调用该加法函数
var sum = add(4,5);
alert("sum="+sum);
//我们调试的时候用IE浏览器来调试，这样有错误IE会明确指出。
*/
</script>
<script type="text/javascript">
/*
* 函数的一些细节。
* 1、只要使用函数的名称就是对这个函数的调用（JS的方法存在重载的形式，调用就会自动重载）。
* 2、函数中有一个数组在对传入的参数进行存储。这个数组就是arguments
*/
/*
function show(x,y)
{
document.write("数组长度："+arguments.length+"<br/>");
document.write(x+":"+y+"<br/>");
for(var i=0; i<arguments.length ; i++)
{
document.write(arguments[i]+"<br/>");
}
}
show(4,5,6,7);//可以传入与定义的参数数量不同的参数，建议函数中定义几个参数就传递几个实参。
*/
</script>
<script type="text/javascript">
//函数的细节2：
function getSum()
{
return 100;
}
// var sum = getSum();//getSum函数运行，并将返回的结果赋值给sum。
var sum = getSum;//注意这里getSum后面没有()，因此sum不是返回值100，而是指向getSum函数的对象
/*（视频35-31-16-2.40解析，这里很重要！！！）
getSum本身是一个函数名，而函数本身在js中就是一个对象（JS基于对象），getSum就是这个函数对象的引用。
将getSum这个引用的地址赋值给sum，这时sum也指向了这个函数对象，相当于这个函数对象有两个函数名称，sum与getSum都是这个函数的名称。
*/
alert("sum="+sum);
//打印时候如果sum指向的是函数对象，那么会将该函数对象的字符串表现形式打印出来，相当于java中的toString()方法。
//打印的就是该函数的代码定义格式。
//java打印对象会打印对象所在内存的地址值（视频35-31-16-12.00解析）
/*
Demo d=new Demo();
Sysetm.out.println(d);//Demo@7daca
Thread t= new Thread();
System.out.print1n(t);//Thread[Thread-0,5, main]
Thread对象继承Object，打印对象就会直接调用其复写的toString()方法，因此它会打印有意义的字符串。
而JS对于打印对象也有自己的表现形式
*/
function show2()
{
alert("show2 run");
}
alert(show2());
//首先打印"show2 run"，其次打印undefined，首先调用了show(2)，其次由于"show2 run"中alert要打印show2的运行结果
//而show2()没有结果（其没有返回值），因此会出现undefined
</script>
</body>
</html>
动态函数及其代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
/*
* js函数的其他表现形式。
*
* 动态函数:使用的是js中内置的一个对象Function，只不过用的不是很多。
* 参数列表，函数体都是通过字符串动态指定的。（注意这种方式的格式即可）
*/
//这里定义的函数名是add，注意，其需要使用var修饰
var add = new Function("x,y","var sum; sum = x+y; return sum;");
//Function函数的参数分为2部分，一部分是函数的参数列表，另一部分是函数体。
//如果我们将Function的字符串参数定义为变量，那么我们就可以根据变量的不同来定义不同的函数
var result = add(4,5);
alert("result:"+result);
//相当于
function add2(x,y)
{
var sum ;
sum = x+y;
return sum;
}
//2种定义函数的方法的区别——（35-31-17-4.09）其实就动态函数的参数列表以及函数体都是字符串，我们可以根据需要通过字符串对函数进行修改。这就是她为什么叫动态函数。
</script>
</body>
</html>
匿名函数及其代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
/*
* 匿名函数：没有名字的函数，通常是函数的简写形式。
* 没有名字，但是有一个变量会指向这个函数
*/
//注意，前面的add后面不需要加()，因为后面function有加，这里add只是代表一个变量，它指向这个函数
var add = function(a,b)
{
return a+b;
}
alert(add(5,6))
//先按照普通方法定义一个函数
function haha()
{
alert("haha");
}
var xixi = haha;//将变量xixi指向haha函数的对象
//上述代码可以简写成下面的方式。
var xixi = function()
{
alert("haha");
}
</script>
</body>
</html>
相应的练习代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
/*
* 综合练习：
* 1，定义功能，完成对数组的最值获取。
*
* 2，对数组排个序。
*
* 3，对数组查找。
*
* 4，对数组元素进行反转。
*
*/
/*
//取最值。
var arr = [34,23,14,6,46,76,66,24];
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);
document.write(maxValue);
*/
//-------------------------------------------------------
//排序
var arr = [34,23,14,6,46,76,66,24];
//定义排序的函数——我们这里没有java在eclipse里面的调试，出错要仔细检查，否则难以辨别（这里使用的是普通选择排序）
function sortArray(arr)
{
for(var x=0; x<arr.length-1 ;x++)
{
for(var y=x+1; y<arr.length ;y++)
{
if(arr[x]>arr[y])
{
//注意，这里单纯交换x与y的值是没有用的，他们只是数组的下标，应该直接交换数组对应下标的数据
//swap(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("排序前:"+arr);
sortArray(arr);
println("排序后:"+arr);
/*
document.write("排序前:"+arr);
sortArray(arr);
document.write("排序后:"+arr);
*/
//函数对象直接打印会打印函数的代码，而数组对象直接打印会打印数组的元素（）用逗号隔开
//-------------------------------------------------------
//对数组进行查找
//普通查找方法
function searchNum(arr,key)
{
for(var x=0; x<arr.length ;x++)
{
if(arr[x] == key)
return x;
}
return -1;//没找到返回-1
}
//折半，必须有前提。必须是有序的数组。
function binarySearch(arr,key)
{
var max,min,mid;
max = arr.length-1;
min = 0;
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;//此处arr[mid]=key
}
}
return -1;
}
//对数组的反转。——这种反转的方法较好
function reverseArray(arr)
{
for(var start=0,end=arr.length-1; start<end ;start++,end--)
{
swap(arr,start,end);
}
}
reverseArray(arr);
println("反转后:"+arr);
</script>
</body>
</html>
3.5、变量
变量相应的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
//在脚本片段中定义的变量，是全局变量。
/*
for(var x=0; x<3; x++){
document.write("x="+x);
}
function show()
{
var x = 6;//局部变量。
}
document.write("X======="+x);
*/
/*
结果是：x=0x=1x=2X=======3
同时我们在下面的<script>中再次打印x，结果是
x=0x=1x=2X=======3 xx=3——发现也可以打印（视频35-32-1-2.50解析）
既在脚本片段<script>中定义的变量，是全局变量，全局变量在整个当前页面都有效
我们下面再var x = 0;，不是重新定义一个x，而是将前面的x直接拿过来重新赋值
*/
/*
//如果我们想限制变量的使用范围，如下
function show(){
var x = 8;//函数局部的变量x——只有在函数中定义的变量才是局部的变量
}
document.write("x="+x);//报错：x未定义
*/
//下面演示一个有趣的现象
var x = 3;//全局变量x.
function show(x)//函数局部的变量x，这个x是一个形式参数
{
x = 8;
}
show(x);
document.write("x="+x);//x=3;为什么是3？（35-32-1-8.40）
//在调用show函数的时候，首先将3赋予show中形式参数的局部变量x，而这个x在函数体内又被置为8，接着这个函数就结束了
//注意只有我们在函数show内部创建的局部变量的x被置为8，而全部变量x还是3，最后打印的是全局变量x。
//（如果我们将全局变量x不初始化，最后打印结果是undefined）
//想不通就按照堆栈里面变量名与变量值的存储方式自己推导一下。
//在java中试验了一下，是一样的结果。另外，java中有getter与setter方法来对全局变量进行操作。
</script>
<script type="text/javascript">
//document.write("xx="+x);
</script>
</body>
</html>
3.6、对象
3.6.1、Object对象
JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。下面是Object对象的toString方法与valueOf方法的返回类型：
Object对象的相应方法示例如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script>
/*
* 演示一下JS的Object对象。
* toString():将对象变成字符串。
* valueOf()：返回指定对象的原始值
Object对象的创建：obj = new Object([value])，Object对象提供所有JS对象的通用功能
*/
//注意，在JS中一个函数也代表一个对象
function show()
{
alert("show run");
}
//document.write(show.toString());
/*结果是
function show() { alert("show run"); }
函数对象toString打印这个函数的代码
*/
var arr = [3,4,1,6,8];
//document.write(arr.toString());
//结果是：3,4,1,6,8，数组对象toString打印这个数组的元素，并使用逗号隔开
//匿名函数
var abc = function()
{
alert("abc run");
}
//document.write(abc);
//结果：function() { alert("abc run"); }
//发现直接打印函数名，也是打印函数对象的代码，与toString方法效果相同。变量的值对应什么就打印什么内容。
//（打印函数对象就是调用函数toString方法，其实打印数组也是一样的！）
document.write(show.valueOf());//打印效果与toString大同小异
</script>
</body>
</html>
3.6.2、String对象
相应的代码示例如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript" src="out.js"></script><!--导入文件单独写一个script标签-->
<script type="text/javascript">
/*
* 演示string对象。
* 表现形式：
* var str = new String("abc");
* var str = "abc";
*/
/*
var str1 = "abcde"
println("len="+str1.length);//在JS中获取字符串长度用的是length属性
println(str1.bold());//加粗——相当于将HTML的<b>标签放在字符串的两边：<B>str1<B/>
alert("abc".bold());//<b>this</b> ——对于其他类似的方法也是一样的！在页面上显示的时候浏览器将其解析
println(str1.fontcolor("red"));//使用指定的颜色来显示字符串
println(str1.link("https://www.w3school.com.cn/jsref/jsref_link.asp"));//将字符串变成超链接。
println(str1.substr(1,3));//从起始索引号提取字符串中指定数目的字符。
println(str1.substring(1,3));//提取字符串中两个指定的索引号之间的字符。
*/
/*结果：
len=5
abcde（加粗）
abcde（显示红色）
abcde（超链接）
bcd（从1角标开始提取来个字符）
bc（提取角标1-3之间的字符，不包括角标为3的字符）
*/
//------------------------------------------
/*
* 发现js中的string对象方法有限，想要对字符串操作的其他功能。
* 比如：去除字符串两端的空格，这时只能自定义。
*/
//去除字符串两端的空格。
/*
定义两个变量，一个记录开始的位置,一个记录结束的位置。
对开始的位置 的字符进行判断，如果是空格，就进行递增，直到不是空格为止。
对结束的位置 的字符进行判断，如果是空格，就进行递减，直到不是空格为止。
必须要保证开始<=结束，这样才可以进行截取。（start=end是整个字符串都是空格的情况）
*/
/*
function trim(str)
{
var 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);//这里end必须加一，否则最后一个取不到
}
var str = " asd fvs sv ";
println("--"+trim(str)+"--");
*/
//------------------------------------------
//alert("abc".bold());//<b>this</b>
//bold对象在进行应用的时候并不知道要对哪个字符串进行加载，其实它里面写着this
//在方法的调用中，如果是本类对象在调用本类对象的方法，这个时候可以使用this来表示该类对象
//而下面的trim()方法是我们自己定义的，是不属于字符串对象的方法，因此字符串对象只能以参数形式存进去使用（其实也可以像对象调用那样写）
/*
* 既然trim方法是用来操作字符串的方法，可不可以像字符串已有的方法一样，
* 将该方法也定义到字符串对象中呢？这样直接用字符串对象调用就可以了。
*/
/*
* 这里就可以使用一个该字符串的原型属性来完成。
* 原型：就是该对象的一个描述，该描述中如果添加了新功能，那么该对象都会具备这些新功能。
* 而prototype就可以获取到这个原型对象，通过prototype就可以对对象的功能进行扩展。
prototype：返回对象类型原型的引用（35-32-5-4.15解析！重要！！！）
*
* 需求：想要给string对象添加一个可以去除字符串两端空格的新功能.
* 就可以使用原型属性来完成。
*/
//给string的原型中添加一个功能。 注意：给对象添加新功能直接使用 对象.prototype.新内容 即可。
//给String添加行为
String.prototype.trim = function()//形式类似于匿名函数
{
var start,end;
start=0;
end=this.length-1;
//此时不能存入的参数str，因为这个trim被设置为String对象自己的方法，那么就不能通过参数来代表字符串本身，而需要使用this来表示字符串本身。那么我们用this表示trim方法要操作的是本类String的字符串（传入str表示字符串会出错）
注意！！！所有被设置为原型的方法，全部只能是以“对象.方法”的方式引用，不能将对象作为方法参数。另外，原型方法内表示本对象全部使用this表示
//因为此时是字符串.trim()，因此没有参数，可以用this代替本类对象
while(start<=end && this.charAt(start)==' '){
start++;
}
while(start<=end && this.charAt(end)==" "){//单引号和双引号的空格是一样的
end--;
}
return this.substring(start,end+1);
}
alert("--"+" as hd dsh ".trim()+"--");//这里可以直接通过“.”调用trim方法，设置为原型后只能通过“对象.方法”的方式调用。
/*
当然，如果我们在上面定义了trim，想将trim方法添加到String对象中，可以
String.prototype.mytrim = trim;
*/
String.prototype.len = 199;//给string的原型对象中添加一个属性 名为len。值为199.
println("abc".len);//结果：199
</script>
</body>
</html>
原型的练习
prototype.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript" src="addfunc.js"></script>
<script type="text/javascript" src="out.js"></script>
<script>
/*
* 练习1，给字符串添加一个功能，将字符串变成一个字符数组。
*
* 练习2，给字符串添加一个功能，将字符串进行反转。
*/
var str = "abcdefg";
println(str.toCharArray());
println(str.reverseArray());
/*结果
a,b,c,d,e,f,g
gfedcba
*/
</script>
</body>
</html>
//--------------------------------
//addfunc.js
// JavaScript Document
String.prototype.toCharArray = function () {
var arr = [];
//注意，原型方法用this表示要操作的对象本身
//这里不使用传入参数str的方法（这点很关键，注意！）
for(var i=0; i<this.length ;i++)
{
//注意，数组没有add方法（集合才有），这里必须一个一个为add赋值
arr[i] = this.charAt(i);
}
return arr;
}
String.prototype.reverseArray = function () {
//首先，将字符串转变为数组，数组反转较为简单
var arr = this.toCharArray();
//在JS中，函数中还可以定义函数
//将数组位置置换功能进行封装。并定义到了反转功能内部。
function swap(arr,x,y)
{
var temp = arr[y];
arr[y] = arr[x];
arr[x] = temp;
}
for(var start=0,end=this.length-1 ; start<end ; start++,end--)
{
swap(arr,start,end);
}
//Array对象：join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
return arr.join("");
}
3.6.3、Array对象
Array对象相应的示例代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript" src="out.js"></script>
<script>
/*首先，创建 Array 对象的语法（注意与创建java数组对象的语法区分）
new Array();
new Array(size);
new Array(element0, element1, ..., elementn);
var arr = [];//这种方法是最简单的
*/
//演示数组。
var arr1 = ["nba","haha","cba","aaa","abc"];
var arr2 = ["qq","xiaoqiang",70];
/*
println(arr1);
println(arr2);
//concat()方法，用于连接数组
//在arr数组上连接一个元素"lkj"，再连接一个arr2数组。
var newArr = arr1.concat("lkj",arr2);//将lkj作为新数组中的元素，将arr2数组中的元素也作为新数组中的元素。
println(newArr);
结果
nba,haha,cba,aaa,abc
qq,xiaoqiang,70
nba,haha,cba,aaa,abc,lkj,qq,xiaoqiang,70
*/
/*
//join()方法：用于把数组中的所有元素放入一个字符串。
println(arr1.join());//默认：nba,haha,cba,aaa,abc
println(arr1.join(""));//nbahahacbaaaaabc
println(arr1.join("-"));//nba-haha-cba-aaa-abc
//模拟一下的join的实现原理。
function newJoin(arr,separator)
{
var str="";//先定义一个空的字符串
//遍历数组并将数组元素与分隔符添加到字符串
for(var x=0; x<arr.length ;x++)//注意数组长度使用的不是length()方法，数组只有length属性
{
if(x!=arr.length-1)
str += arr[x]+separator;
else//遍历到最后一个数就不需要添加连接符
str += arr[x];
}
return str;
}
//注意是自己定义的方法，不能通过“.”来引用，只能是直接调用。
println(newJoin(arr1,"."));//nba.haha.cba.aaa.abc
*/
/*
//pop() 方法用于删除数组的最后一个元素并返回这个元素。
println(arr1);//nba,haha,cba,aaa,abc
println(arr1.pop());//abc
println(arr1);//nba,haha,cba,aaa
*/
/*
//push()方法：可向数组的末尾添加一个或多个元素，并返回新的长度。
//push方法将以新元素出现的顺序添加这些元素。如果参数之一为数组，那么该数组将作为单个元素添加到
//数组中。如果要合并两个或多个数组中的元素，请使用concat方法。
println(arr1.push("lkj"));//6
println(arr1);//nba,haha,cba,aaa,abc,lkj
println(arr1.push(arr2));//7
println(arr1);//nba,haha,cba,aaa,abc,lkj,qq,xiaoqiang,70
//我们发现arr2的元素虽然添加到arr1中，但是是以arr2整体的形式添加到arr2中的，添加了arr2，长度只增加了1
//相当于在数组中又添加了一个数组var arr3 = [arra，arrb，arrc]，就是通过arr3.push(arra,arrb,arrc)实现的。
*/
/*
//reverse() 方法用于颠倒数组中元素的顺序。
println(arr1.reverse());//abc,aaa,cba,haha,nba
//shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
println(arr1.shift());//abc
println(arr1);//aaa,cba,haha,nba
*/
/*
//sort() 方法用于对数组的元素进行排序。
println(arr1);//nba,haha,cba,aaa,abc
println(arr1.sort());//aaa,abc,cba,haha,nba——已排序
//splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
arr1.splice(1,3,8080,9527,"xixixi","wangcai");//删除元素并可以进行元素的替换。 （第二个参数是要删除的元素的数量）
println(arr1);//nba,8080,9527,xixixi,wangcai,abc
*/
//unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
println(arr1.unshift("lkj"));//6
println(arr1);//lkj,nba,haha,cba,aaa,abc
//我们使用unshift往开头添加元素，使用pop在末尾移除元素，相当于实现了堆栈的数据结构
开头：添加unshift，删除：shift
结尾：添加push，删除：pop
</script>
</body>
</html>
Array对象模拟队列，堆栈以及添加新方法代码
JS_ArrayTest.html文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript" src="ArrayTool.js"></script>
<script type="text/javascript">
/*
* 数组练习:用数组实现js中的堆栈 或者队列数据结构。
先对之前的几种方法进行说明：
push():可向数组的末尾添加元素；
pop()：用于删除并返回数组的最后一个元素；
shift()：用于把数组的第一个元素从其中删除，并返回第一个元素的值；
unshift()：可向数组的开头添加一个或更多元素，并返回新的长度
var arr = [];
//入队列
arr.unshift("abc1");
arr.unshift("abc2");
arr.unshift("abc3");
println(arr);//abc3,abc2,abc1
//出队列，从尾部出去
println(arr.pop());//abc1
println(arr.pop());//abc2
println(arr.pop());//abc3
println(arr);//空
println("<hr/>");
var arr1 = [];
//入栈
arr1.unshift("abc1");
arr1.unshift("abc2");
arr1.unshift("abc3");
println(arr1);//abc3,abc2,abc1
//出栈，从头取出
println(arr1.shift());//abc3
println(arr1.shift());//abc2
println(arr1.shift());//abc1
*/
</script>
<script type="text/javascript">
/*
* 给数组对象添加新功能，使用到原型属性。
*/
var array = ["nba","haha","cba","aaa","abc"];
var maxValue = array.getMax();
println("最大值："+maxValue);
println(array.toString());
/*
最大值：nba
[nba, haha, cba, aaa, abc]
*/
</script>
</body>
</html>
-----------------------
ArrayTool.js文件
// JavaScript Document
//使用Array对象的原型为数组自定义方法。——注意这里我们是定义Array自己的方法，最后是：数组.getMax 来调用
//因此，我们不需要往getMax方法传递数组，用this代表数组本身即可
//首先是getMax方法
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(", ")+"]";
}
3.6.4、Date对象
相应的代码示例如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
/*
* 演示js中的日期。 Date
创建Date对象的方法：var myDate=new Date()
*/
//var date = new Date();
/*
println(date);//Fri Nov 01 2019 02:37:27 GMT+0800 (中国标准时间)
//toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
println(date.toLocaleString());//2019年11月1日 2:38:30
//toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
println(date.toLocaleTimeString());//2:38:30
*/
/*
var year = date.getFullYear();
var month = date.getMonth()+1;//月份是0-11，所以需要加一
var monthday = date.getDate();//返回一个月中的某一天
var weekday = date.getDay();//从 Date 对象返回一周中的某一天 (0 ~ 6)。
*/
//没有获取一周某一天是星期几的方法，自己创建
function getWeek(num)
{
var weekArr = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
return weekArr[num];
}
//getWeek()不是Date自己的方法，因此不能用date.getWeek()调用
//而getDay是Date对象原有的方法，需要使用date.getDay()调用
//var week = getWeek(date.getDay());
//println(year+"-----"+month+"-----"+monthday+"-----"+weekday+"-----"+week);
//2019-----11-----1-----5-----星期五
/*
* 为了简化对象调用内容的书写。
* 可以使用js中的特有语句with来完成。
* 格式：
* with(对象)
* {
* 在该区域中可以直接使用指定的对象的内容，不需要写对象.
* }
with(date)//将所有Date对象去除即可
{
var year = getFullYear();
var month = getMonth()+1;
var monthday = getDate();
var weekday = getDay();
var week = getWeek(getDay());
println(year+"-----"+month+"-----"+monthday+"-----"+weekday+"-----"+week);
//2019-----11-----1-----5-----星期五
}
*/
/*
// 日期对象和毫秒值之间的转换。
var date2 = new Date();
//getTime() 返回 1970 年 1 月 1 日至今的毫秒数
//获取毫秒值。 日期对象-->毫秒值。
var time = date2.getTime();
println(date.toLocaleString());
println("time:"+time);
//将毫秒值转成日期对象。
//1,new Date(time);2、setTime()方法
var date3 = new Date(time);
println(date3.toLocaleString());
*/
/*运行上面代码，结果是
2019/11/1 上午3:14:40
time:1572549280230
2019/11/1 上午3:14:40
*/
/*
日期对象和字符串之间进行转换。
日期对象转成字符串：toLocaleString toLocaleDateString
将字符串转成日期对象。
具备指定格式的日期字符串-->毫秒值--->日期对象。
*/
//创建符合条件的字符串
var dateStr = "6/6/2066";//——注意这里指定的格式：月/日/年
//通过parse方法获取指定格式日期的毫秒值
var time1 = Date.parse(dateStr);//注意，这里直接使用Date调用parse方法，相当于一个静态方法
//创建毫秒值的对象并打印该对象对于的时间
var date4 = new Date(time1);
println(date4.toLocaleDateString());//2066/6/6
</script>
</body>
</html>
3.6.5、Math对象
相应代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
/*
* 演示Math对象。该对象的中的方法都是静态的。不需要new一个Math对象来调用，直接Math调用即可。
*/
/*
var num1 = Math.ceil(12.34);//返回大于等于指定参数的最小整数。
var num2 = Math.floor(12.34);//返回小于等于指定数据的最大整数。
var num3 = Math.round(12.54);//四舍五入
println("num1="+num1);
println("num2="+num2);
println("num3="+num3);
//pow(x,y) 返回 x 的 y 次幂。
var num4 = Math.pow(10,2);
println("num4="+num4);
num1=13
num2=12
num3=13
num4=100
*/
println("<hr/>");
//random() 返回 0 ~ 1 之间的随机数。
//取任意10个0——10之间的随机整数数
for(var x=0; x<10 ;x++)
{
//Math.random()*10是从0-10之间的随机数（不包括0,10），加1就是1-11之间的随机数（不包括1,11），
//取floor就是1-10之间的随机整数
//var num = Math.floor((Math.random()*10+1));
//另一种方式parseInt，（35-32-12-10.35解析）它是一种全局方法，不需要对象名以及new对象来调用
//全局方法定义在全局对象Global中，任何对象都可以调用全局对象中的方法
//parseInt() 函数可解析一个字符串，并返回一个整数。
var num = parseInt((Math.random()*10+1));
println(num);
}
</script>
</body>
</html>
3.6.6、Global对象与Number对象
代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
/*
* 演示global的全局方法。——全局方法不需要使用对象或者new对象调用，直接使用即可
parseInt()：可解析一个字符串，并返回一个整数。
isNaN()：用于检查其参数是否是非数字值。
*/
/*
println("123"+1);//1231
println(parseInt("123")+1);//124
var val1 = parseInt("abc");
println("val1="+val1);//val1 = NaN
println(isNaN(val1));//true，结果是一个非法值
var val2 = parseInt("12abc");
println("val2="+val2);//val2 = 12，12放在abc后面就是非法的，一般我们先使用正则表达式判断变量是否是纯数字
//NaN是非法的意思，通过isNaN来判断结果是否非法。
*/
/*
* 将指定进制格式的字符串转成十进制。（注意parseInt方法的结果都是10进制数）
*/
/*
var num1 = parseInt("110",2);//二进制数字符串转换为10进制数
println("num1:"+num1);//num1:6
var num2 = parseInt("0x3c",16);//十六进制数字符串转换为10进制数
println("num2:"+num2);//num2:60
//toString(radix) 方法可把一个 Number 对象转换为一个radix进制的字符串，并返回结果。
var num3 = new Number(6);//很少有必要创建Number方法，一般直接使用数字即可
println("num3:"+num3.toString(2));//num3:110
//普通数字也可以使用Number对象的方法(35-32-13-11.40解析)
//JS是基于对象，因此60在底层也是指一个对象
var num4 = 60;
println("num4:"+num4.toString(16));//num4:3c
*/
/*
* js中的特有语句 for in
*
* 格式：
* for(变量 in 对象)//对对象进行遍历的语句。
* {}
* 这里变量i是对象角标而不是对象的元素
有点类似于java的foreach，注意区分他们的格式
for(数组类型 数组元素：数组)
在JS中不能使用foreach
*/
var arr = [23,43,14,56];
for(i in arr)
{
println("i="+i+"--"+arr[i]);
}
/*
i=0--23
i=1--43
i=2--14
i=3--56
*/
println("<hr/>");
var numObj ="abc";
for(x in numObj){
println(x+"---"+numObj[x]);
}
/*
numObj等于new Number(4)结果为空
numObj等于"abc"结果为
0---a
1---b
2---c
说明有些对象是不需要遍历的，有些自定义对象是可以直接遍历的
*/
</script>
</body>
</html>
3.6.7、自定义对象
代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
/*
* js自定义对象。
*
* 如果想要自定义对象，应该先对对象进行描述.js是基于对象，不是面向对象的,不具备描述事物的能力。
* 我们还想按照面向对象的思想编写js，就要先描述，在js中，可以用函数来模拟面对对象的中的描述。
*/
/*
//方法1：用js来描述人对象
function Person()//相当于构造器
{
alert("Person run");
}
//通过描述进行对象的建立。
var p = new Person();
//动态给p对象添加属性，直接使用p.属性名即可。
p.name = "zhangsan";
p.age = 29;
//如果定义的p对象的属性赋值为一个函数，即是给p对象添加一个方法。
//注意，这里添加新的方法，show后面不需要加()，show只是一个指向这个函数的变量名
p.show = function()
{
alert("show:"+this.name+"--"+this.age);//使用this调用本对象的属性，这里可以使用p，也可以使用this代表p
}
p.show();//用 Person对象.show() 调用，说明show()已经成为Person对象自己的方法
//同样，对于JS中原有的对象，我们也可以通过 对象变量.变量名 来添加对象新的变量。
var obj = new Object();
obj.name = "godfather";
obj.age = 1;
alert(obj.name+":"+obj.age);
//------------------------
//对象新的方法也可以通过原型来添加，而我们自己创建的对象则可以直接添加（当然我们创建的对象也可以通过原型添加）
var obj1 = new Object();
obj1.name = "shgv";
obj1.age = 12;
println(obj1.age+"---"+obj1.name);
//原型方法
Object.prototype.show1 = function () {
println(this.age+"---"+this.name);
}
obj1.show1();
//通过Object对象直接添加
obj1.show2 = function () {
println(this.age+"---"+obj1.name);
}
obj1.show2();//注意，上面只是创建方法，还需要使用对象进行调用
*/
//-------------------------------------------------
/*
//方法2：这种方式主要用于描述事物
//我们试着在对象内部给对象添加属性与方法——创建对象变量的时候可以给对象属性添加值
//对象变量就是上面的var p = new Person();的p
function Person(name,age)
{//必须要给这个函数添加参数
//添加属性，并通过对象参数赋值。在这里本身对象用this替代（这里与java是不同的，java需要先定义name等变量，再在构造方法里面this.name = name。而这里this.name就算直接创建一个Person的变量然后直接赋值）
this.name = name;
this.age = age;
//添加方法，同样对象用this替代
//注意此处是外部可以通过setName方法设定name的值，而Person的name与age参数则是在创建对象变量的时候为对象属性赋值
this.setName = function(name)
{//这个函数虽然是内部函数，但是也必须有参数，这样才能进行赋值
this.name = name;
}
this.getName = function()
{
return this.name;//注意这里的这些this不能省略！java中可以省略。注意这里函数有结果，必须返回，我们调用这个方法才有值显现。
}
}
//创建对象变量
var p = new Person("lisi",16);
//使用for in变量
for(x in p)
{
println(x+"--"+p[x]);//x是变量，而p[x]是变量的值
}
*/
/*结果——遍历我们自己创建对象中所有的属性与方法，变量显示值，方法显示方法代码
name--lisi
age--16
setName--function(name) { this.name = name; }
getName--function() { return this.name; }
*/
/*
//试着修改与获取Person属性值
p.setName("wangwu");
println(p.name);
println(p.getName());
*/
/*结果——我们发现我们可以直接访问Person的属性，也可以通过Person自定义的方法访问其属性
wangwu
wangwu
*/
/*
//方法3：当对象较多的时候，我们可以使用Map集合的形式，一个集合中可以存储多个对象
//直接使用{}定义属性和值的键值对方式。
//键值键通过:连接，键与键之间用逗号隔开。
//注意属性名与方法名为键，如果是字符串形式，需要用""围起来 ；如果不使用字符串形式则不需要
var pp = //pp类似于一个集合
{
"name":"zhaoliu","age":23,
"getName":function()
{
return this.name;
}
}//这里后面不需要加分号
//对象调用成员有两种方式：对象.属性名 对象["属性名"]——因为键是字符串，所以加""
println(pp["name"]+"--"+pp.age);//zhaoliu--23
*/
println("<hr/>");
/*
//35-32-15-30.20——JS中各种量的命名技巧
//用js实现键值对映射关系的集合容器。
var oMop =
{
21:"zhangsan",
22:"lisi",
23:"wangwu"
}
var val1 = oMop[21];
println("val1"+val1);//val1zhangsan
var val2 = get(22);
println("val2"+val2);//val2lisi
//或者是使用一个方法来获取映射的值
function get(key)
{
return oMop[key];
}
*/
/*
//我们在定义键的时候不使用字符串
var myObj1 =
{
myName:"lisi",myage:30
}
//调用的时候一个键加上""，另一个不加
println(myObj1.myName+"--"+myObj1["myage"]);
//我们在定义键的时候使用字符串
var myObj2 =
{
"myName2":"lisi","myage2":30
}
//调用的时候一个键加上""，另一个不加
println(myObj2.myName2+"--"+myObj2["myage2"]);
*/
/*结果——说明键在定义的时候可以定义为字符串，也可以不定义为字符串，但是用[]调用一定要写成["变量名"]格式
lisi--30
lisi--30
*/
//在JS中建立映射，一个键对应一个数组
var myMap =
{
//names:["lisi1","lisi2","lisi3"],ages:[23,24,25]
//当然，也可以将表示两类属性的2个数组结合起来——形成键值对的数组，数组一个元素代表一个键值对
names:[{name1:"zhangsan"},{name2:"lisi"}]
}
//println(myMap.names[1]+"--"+myMap.ages[1]);//lisi2--24
println(myMap.names[0]);//[object Object]
//可以调用数组元素中键值对的值
println(myMap.names[1].name2);//lisi
//注意此处键都不能使用数字，都必须是字符串
</script>
</body>
</html>
456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
