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

原创 2012年12月14日 16:07:41


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对应的二进制表现形式


相关文章推荐

JavaWeb - JavaScript,js与html结合方式,js(语句/运算符/数组/string/Array/Math/Date/RegExp/bom对象/全局变量/局部变量)

JavaWeb - JavaScript,js与html结合方式,js(语句/运算符/数组/string/Array/Math/Date/RegExp/bom对象/全局变量/局部变量)...

28-JavaScript-面向对象-系统函数-内部类-Math-Date-String-Array-Boolean-Number

内部类  - Math  - Date  - String  - Array  - Boolean  - Number 系统函数 1. 内部类  1) 什么是内部...

HTML_10_javascript_基本对象_语法规则,函数

语法  : var 变量名 =值;    //var n=24; var  系统内部的关键字申明变量的; 变量名   将地址起名字 注意 1,变量名不能以数字开头 2,变量名...
  • jankin6
  • jankin6
  • 2016年10月26日 22:52
  • 241

JavaScript中的Date日期、String字符串、Array数组、Math提供对数据的数学计算

一.Date 日期对象 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒)。 定义一个时间对象 : var Udate=new Date(); ...

JavaScript中Date,Math,Global,Number等对象的浅析,Array数组对象的解析

/* var date=new Date(); alert(date); alert(date.toLocaleString());//这个方法在IE8中显示的是年月日时分秒格式的日期,在 谷歌...

javascript中数组(Array)对象的方法和字符串(String)对象的方法

主要总结了一下数组对象中的方法,以及字符串对象中的方法,以免自己混淆,特别是ES5后数组新增的一些方法...
  • liwusen
  • liwusen
  • 2016年03月08日 21:24
  • 584

JavaScript第四章知识点总结——JS内置对象 Array Date Math

JavaScript第四章知识点总结——JS内置对象 Array Date Math 知识点预览 Array对象 Date对象 Math对象     Array对象   1.创建Array对...
  • Wentasy
  • Wentasy
  • 2012年08月31日 08:51
  • 1991

韩顺平_轻松搞定网页设计(html+css+javascript)_第29讲_二维数组转置_js面向对象编程介绍 类(原型对象)和对象_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ 在上一个博客中未完成的矩阵转置的问题:韩顺平_轻松搞定网页设计(html+css+javascript)_第28...

【JavaScript】函数、运算符、语句、对象和数组

下面是对JavaScript中的一些小知识进行思维导图的梳理: 一、函数:        声明函数、用return返回值、如果不知道有多少个元素的时候可以用arguments; 二、运算符 ...

04-javascript String、Number、Math、Date对象

String对象1.常用方法a.substr: 截取字符串 两个参数第一个是下标,第二个是长度 b.substring: 截取字符串 两个参数第一个是下标,第二个是下标 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML、CSS和JavaScript学习三(JavaScript之语法规则:语句、数组、函数、String\Math\Array等对象)
举报原因:
原因补充:

(最多只允许输入30个字)