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

最新推荐文章于 2024-11-03 09:26:21 发布

rainmeterLotus

最新推荐文章于 2024-11-03 09:26:21 发布

阅读量861

点赞数

分类专栏： java学习文章标签： javascript

本文链接：https://blog.youkuaiyun.com/rainmeterlinux/article/details/8295832

版权

java学习专栏收录该内容

16 篇文章

订阅专栏

HTML中使用JavaScript

先来了解一点常识：

Javascript和java有什么不同：

1.java是sun公司的，现在是Orcal公司，javascript是Netscape公司

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.name和s.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.οnlοad=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中已定义好的一些对象。例如String、Math、Date、Array、Function

这些对象都有一个属性叫做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对应的二进制表现形式