HTML、CSS和JavaScript学习三(JavaScript之语法规则:语句、数组、函数、String\Math\Array等对象)


HTML中使用JavaScript

先来了解一点常识:

Javascriptjava有什么不同:

1.javasun公司的,现在是Orcal公司,javascriptNetscape公司

2.Javascript是基于对象,java是面向对象

3.Javascript是浏览器解释并执行,java是有jvm解释执行

4.Javascript是弱类型的语言,java是强类型

5.Javascript非严谨,java是严谨的

Javascript是运行在客户端的,需要被浏览器解释执行,就必须要将代码和html相结合。结合方式看下面:

1.通过定义<script>标签将js代码存入其中,并指定type属性,方便浏览器启动指定的解析引擎。

2.也可以通过<script>标签,使用src属性链接一个指定的js文件

Javascript基本语法:

1.变量,通过var关键宇定义变量,该变量可以赋予不同类型的常量。

var x=3

X=”a6c"

特殊的常量,undefined

2.语句:

if,switch,while,do whiie,for

switch示例:
var x="bac";
switch(x){
case "bac":
alert("111");
break;
case "bac1":
alert("222");
break;
case "bac2":
alert("333");
break;
default:
alert("444");
break;
}

其它的和java语法一样,只要注意定义变量时用统一用var进行声明。

js特有的语句:

with(对象){}:可以确定对象所使用的范围。在范围内,可以直接使用指定对象的属性和行为,而不用对象.”的形式调用,简化了对象的操作,看例子,下面的function Student下面会讲到,这里只是演示with语句。可以看到在with语句中,我们并没看到s.names.age那样调用。

function Student(name,age)
{
this.name=name;
this.age=age;
}
var s=new Student("lisssss",43);
//alert(s.name+"..."+s.age);
with(s){
alert(name+"...."+age);
}

for(变量  in  对象):可以对对象的属性及行为进行遍历,看例子:

var arr=[2,3,65,4,1];
for(x in arr)
{
//alert(x);//打印的是角标
alert(arr[x]);//alert是一个输出框,相当于java中的System.out.println(),在Window对象中会讲到
}

3.数组

对于js的数组特点在于:该数组的长度是可变的,相对于java中集合的概念,该数组中可以存放的元素类型是可以不同的。定义格式如下:

var arr=[1,true,”abc”];

var arr=new Array();

var arr=[[3,22,3],[23,12,8]];

操作和java一样,都是通过for循环进行遍历;

var arr=[23,true,"abc"];

for(var i=0;i<arr.length;i++)

{

alert(arr[i]);

}

4.函数

通过function关键字定义函数。

(1).一般函数

格式:function  函数名(形式参数)

          {

执行语句;

Return 返回值;

  }

(2).动态函数

使用Function 对象。

var show =new Function(“x”,”y”,”return  x+y;”);

动态函数的特点:可以将参数列表,和方法体作为参数传递。

(3).匿名函数

其实就是一般函数的简写。

function(){}

匿名函数通常可以用于事件的处理,例如:

window.onload=function (){alert(“onload  over”);}

注:在函数使用时需要注意的部分:

function show()

{

return  “show run”;

}

var method=show();

var mentod=show;

第一句表示的是show方法运行后的结果赋给method变量;第二句表示的是将show指向的对象的地址赋给method,那么method也指向了改对象。那么就可以通过method();的形式来调用这个show方法。看例子

function show()
{
return "show run";
}
var method=show();
alert(method);

运行结果如下图

function show()
{
return "show run";
}
var method=show;
alert(method);

运行结果如下图

(4)js可以通过对象形式将数据进行封装,首先对对像进行描述,通过函数来完成

function Person(name,age)
{
   this.name=name;
   this.age=age;
}
var p=new Person("aaa",12);
//alert(p.name+".."+p.age);
p.show=function()
{
   return "aaaaaa";
}
alert(p.show());

Javascript中已定义好的一些对象。例如StringMathDateArrayFunction

这些对象都有一个属性叫做prototype原型。Prototype可以获取指定对象的引用,可以通过该引用给已有的对象赋予一些新的功能。那么以后就可以在使用该对象时,可以直接调用定义好的新功能。

先来体验一下:

function getMax()
{
var max=this[0];
for(var i=0;i<this.length;i++)
{
if(this[i]>max)
max=this[i];
}
  return max;
}
var arr=[2,34,5,43,6,12,98];
arr.sort();//直接调用了Array对象的sort()方法对数组进行排序。那么可不可以像调用sort()方法那样调用getMax()方法呢?这就需要将getMax()方法封装到Array对象当中。
Array.prototype.getMaxx=getMax;//这就是将getMax()方法封装到了Array中了,下次使用时直接调用Array中的getMaxx()方法即可。注意是将getMax赋给Array.prototype.getMaxx,不是getMax()。
var mm=arr.getMaxx();
alert("max="+mm);

好了下面看个大的示例:

两个文件,一个是html文件另一个是javascript文件。代码如下

Javascript文件,即stringutil.js文件:

// JavaScript Document

<!--

//这个js里面自定义了4个方法,最后通过String类的prototype属性将这4个方法都封装到String类中去,

//4个方法的功能分别是,去除字符串中所有的空格,判断字符串是否包含某个字符,去除字符串两端的空格,将字符串反转;

-->

function trim()

{

var str="";

for(var i=0;i<this.length;i++)

{

if(this[i]==" ")

{

continue;

}else{

str+=this[i];

}

}

return str;

}

function contain(x)

{

for(i in this)

{

if(this[i]==x)

{

return i;

}else{

continue ;

}

}

}

function trimKongge()

{

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);

}

function reverseStr()

{

var str="";

for(var i=this.length-1;i>=0;i--)

{

str+=this.charAt(i);

}

return str;

}

String.prototype.trim=trim;

String.prototype.contain=contain;

String.prototype.trimKongge=trimKongge;

String.prototype.reverseStr=reverseStr;

Html文件,即string.html

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript" src="stringutil.js"></script>

<script type="text/javascript">

/*练习1

var str="abcd";

var ret=str.reverseStr();

alert(ret);

*/

/*练习2

var str="     aaaabb  bbb    ";

var ret=str.trimKongge();

alert(ret);

*/

/*练习3

var str="dfojkjfndkferier";

var x="n";

var retVal=str.contain(x);

alert(retVal);

*/

/*练习4

var str="   wee dfdf    fdfdf  ";

var str1=str.trim();

alert(str1);

*/

/*练习5

var str="aaaaaaaaaaaabbbbbbbbbbbb";

var color="red";

var str1=str.myColor(color);

alert(str1);

document.write(str1);

*/

</script>

</head>

常见的全局方法

parseInt(numstr,[radix])//将数字格式的字符串转成整数。如果指定了基数,那么numstr就会按照执行基数进行转换。

var num=parsent("110",2);//表示“110”这个字符串会按照二进制进行转换成十进制整数

alert("num"+num);//num=6;

var x=6;

alert(x.toString(2));//110,获取6对应的二进制表现形式


阅读更多
文章标签: javascript
个人分类: java学习
想对作者说点什么? 我来说一句

javascript教程

2009年06月03日 6.03MB 下载

JavaScript教程

2010年06月07日 6.01MB 下载

JavaScript_对象参考手册

2011年09月16日 559KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭