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


JS: String、Array、Number、Math 属性方法汇总

JavaScript String、Array、Number、Math
  • qq_31280709
  • qq_31280709
  • 2017年04月21日 20:59
  • 372

javascript 字符串和数组——String和Array

一、String类型的方法: 1、toString(),该方法可以接受一个参数,表示输出数值的基数。例如:var num=10,num.toString()。多数情况系下是没有参数的。 2、Str...
  • zxsrendong
  • zxsrendong
  • 2013年01月15日 20:50
  • 9865

JS的内置对象(Date、String、Array、Math、Event)

1. 日期对象Date 2. 字符串对象String 3. 数组对象Array 4. 数学对象Math 5. 事件对象Event...
  • hot_cool
  • hot_cool
  • 2017年07月03日 11:13
  • 210

学习HTML、CSS、Javascript必看书

第一本,入门 《Head first HTML&CSS》 最好的入门书。看两遍就对HTML & CSS 有个大概印象了。 此时把w3cschool作为备查手册收藏起来 第二本《CSS权...
  • qq1169091731
  • qq1169091731
  • 2016年09月15日 01:02
  • 1724

html + css + js初步简单学习笔记

html: 这个是HTML5的根元素。可以省略 注意每个文件最多只有一个根元素 页面头部分,可以省略 引入样式 标题1-6字体越来越小 定义的是段落 可以指定id class style...
  • JerroLuo
  • JerroLuo
  • 2016年07月27日 11:06
  • 3722

Javascript中判断变量是 array还是object(是数组还是对象)

此段文字是从github上截取由本人翻译过来的。 原文地址:https://github.com/nathansmith/javascript-quiz/blob/master/ANSWERS.md ...
  • vvhesj
  • vvhesj
  • 2013年01月21日 17:24
  • 8032

9. javascript对象 核心对象 Array

  • qq_25201665
  • qq_25201665
  • 2016年10月18日 21:20
  • 522

HTML与javascript语法

1.1  Tip:Html:超文本标记语言。        Html语言中是由标签组成的。        Html中的数据都会封装在标签中,因为可以通过标签中的属性值对封装内数据进行操作。   ...
  • xushuaic
  • xushuaic
  • 2012年08月31日 17:37
  • 1434

js中String对象和Array对象的常用方法和属性

String对象有哪些方法? String对象的属性有: (1) length (返回字符串的字符长度) (2) prototype (3) constructor ...
  • xiaobing_hope
  • xiaobing_hope
  • 2016年09月07日 16:43
  • 1475

javascript练习题(三)

第4章 对象
  • k_shl_2011
  • k_shl_2011
  • 2016年04月16日 23:09
  • 1651
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML、CSS和JavaScript学习三(JavaScript之语法规则:语句、数组、函数、String\Math\Array等对象)
举报原因:
原因补充:

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