javascript(1)

一，js语法

（1）定义变量

var定义所有的变量

document.write()表示向文档中输出

var greeting="hello";

document.write(greeting);

 

（2）运算符和c#相同

var result;

result=2+3;

 

 

（3）逻辑控制语句和c#相同

result1 = (3>4)?"Y":"N";

var a,b,c;

a=true&&false;

b=true||false;

c=!true;

 

（4）函数

函数是靠html标签中的事件进行驱动的

function 函数名(){}

函数中的形式参数可以没有数据类型，函数中也能够有返回值

函数中的实参如果是某标签的id值，那么就要当成字符串

 

匿名函数没有函数名，进行动态的加载事件

function (){}

 

（5）数组

可以索引或字符串做为下标

var arr = new Array(3);                     

arr[0] = 1;

arr[1] = 2;

arr[2] = 3;

arr[3] = 4;

arr["rrr"] = 4090;

arr.length表示的是数组长度

数组使用循环遍历

              for(var o in arr) {

                     document.write(o);

                     document.write(arr[o]+"<br>");

              }

 

 

（6）字符串

可以使用”+”来连接字符串

字符串截取：

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

greeting="welcome to the js";

document.write(greeting.substring(9,3));//表示从3号索引开始到8号索引结束

 

查找指定位置的字符：

charAt(索引)

document.write(str.charAt(i)+"<br>");  

 

查找指定字符的位置：

       tmp=str2.indexOf('@');

 

 

二，js对象

2.1   window为最高级的对象，widow对象的方法：

（1）open（”url”，”name”，“窗口特征”）打开指定名称的窗口

open("register.html", "注册窗口", "toolbars=0, location=0,

statusbars=0,menubars=0,width=700,height=550,scrollbars=1");

 

       var abc = window.open("1.htm","newWin","toolbar=no,left=200,top=100,menubar=no,width=300,height=100");

       <input type="button" onclick="JavaScript:abc.focus();" value="跑前面来">

       <input type="button" onclick="JavaScript:abc.close();" value="关闭">

 

（2）close（）关闭当前窗口

 

（3）alert（””）显示一个提示消息和确定按钮的对话框

 

（4）confirm（””）显示一个有提示消息，确定按钮和取消按钮的对话框

 

（5）prompt()-- 弹出消息对话框（对话框中包含一个OK按钮、Cancel按钮与一个文本输入框）

prompt(str1, str2);

str1 -- 要显示在消息对话框中的文本，不可修改

str2 -- 文本框中的内容，可以修改

如果点击OK按钮，文本框中的内容将作为函数返回值

点击Cancel按钮，将返回null

 

 

（6）showModalDialog()在模式窗口中显示指定的html文档

window.showModalDialog("register.html", "注册窗口", "toolbars=0, 

      location=0, statusbars=0, menubars=0,width=700,

      height=550,scrollbars=1");

 

（7）setTimeout(“函数”,时间)定时器，多长时间后执行一次函数

 

（8）setInterval(“函数”,时间)每隔一段时间执行一次函数，无限循环

 

 (9)

open

close

alert

confirm

prompt

setTimeout

clearTimeout

setInterval

clearInterval

moveBy

moveTo

resizeBy

resizeTo

scrollBy

scrollTo

find

back

forward

home

stop

print

blur

focus

 

2.2   Window子对象有：

（1）screen：有关客户端屏幕和显示性能的消息

window.screen.width == 1024 && window.screen.height == 768）

 

（2）status：指定浏览器状态栏中显示的临时消息

window.status="系统当前状态：您正在注册用户......";

 

（3）document：表示浏览器中html文档

属性：

bgColor设置或检索Document对象的背景色

方法：

getElementById()封装对象

getElementsByName()封装一组同名对象，返回一个对象数组

getElementsByTagName()按标签查找

document.write("let's go!")向文本中输出

 

（4）location：有关当前url消息

属性：

href设置或检索完整的url字符串

host设置或检索url的主机名和端口号

hostname设置或检索url的主机名

方法：

assign（“url”）加载url的页面

reload（）重新加载当前页   

<A href="javascript: location.reload( )">刷新</A>

replace（“url”）加载url替换当前文档

 

<SELECT name="selTopic"  id="selPTopic" onChange="javascript: location=this.value">

           

window.location="33.htm";

 

2.3  封装对象

在html的标签中设置id属性，然后使用document对象的getElementById()方法封装对象然后通过封装的对象操作标签的属性或事件

 

通过document对象的getElementsByName()方法封装一组相同id的标签返回的是对象数组

 

封装对象后调用innerHTML表示标签中的文本内容

 

（5）history：客户访问过的url消息

history对象方法：

back（）加载history列表中的上一个url

<A href="javascript: history.back( )">返回 </A>

forward（）加载history列表中的下一个url 

<A href="javascript: history.forward( )">前进</A>

 

go（“url”）跳到某一页上

go（number）移动的页数

 

三，js事件

（1）在提交表单的时候

<form name="test" action="1.htm" onsubmit="return check()">

在function函数中使用return把值返回到函数的调用，在调用处使用return则把结果返回到window对象。

在check()函数中也有return

 

onload/onunload页面加载/离开事件

onfocus/onblur控件的聚焦/失去焦点事件

onmouseover/onmouseout鼠标移入/移出事件

onclick/ondoubleclick单/双击事件

onchange改变内容事件

onselect选中内容事件

 

 

四，其他js内容

（1）类型转换

parseInt（String）将字符串转换为整形数字

parseFloat（String）将字符串转换成浮点型数字

document.getElementById("myAnchor").innerHTML="维普";//其中innerHTML属性表示html标签对象中的文本

 

（2）test()方法

test() 方法用于检测一个字符串是否匹配某个模式.

<script type="text/javascript">

var str = "Visit W3School";

var patt1 = new RegExp("W3School");

 

var result = patt1.test(str);

 

document.write("Result: " + result);

 

（3）Math对象的方法

方法

描述

FF

IE

abs(x)

返回数的绝对值。

1

3

acos(x)

返回数的反余弦值。

1

3

asin(x)

返回数的反正弦值。

1

3

atan(x)

以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。

1

3

atan2(y,x)

返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。

1

3

ceil(x)

对数进行上舍入。

1

3

cos(x)

返回数的余弦。

1

3

exp(x)

返回 e 的指数。

1

3

floor(x)

对数进行下舍入。

1

3

log(x)

返回数的自然对数（底为e）。

1

3

max(x,y)

返回 x 和 y 中的最高值。

1

3

min(x,y)

返回 x 和 y 中的最低值。

1

3

pow(x,y)

返回 x 的 y 次幂。

1

3

random()

返回 0 ~ 1 之间的随机数。

1

3

round(x)

把数四舍五入为最接近的整数。

1

3

sin(x)

返回数的正弦。

1

3

sqrt(x)

返回数的平方根。

1

3

tan(x)

返回角的正切。

1

3

toSource()

返回该对象的源代码。

1

-

valueOf()

返回 Math 对象的原始值。

1

4

 

 

 

 

 

 

五，时间对象

Date对象存储的日期为1970年1月1日00：00：00以来的毫秒数

（1）创建日期对象

var 日期对象=new Date()//其中可以有年月日参数也可以没有参数

setSeconds()/getSeconds()设置/获取秒

setMinutes()/getMimutes()设置/获取分

setHours()/getHours()设置/获取小时

setDay()/getDay()设置/获取星期

setDate()/getDate()设置/获取天数

setMonth()/getMonth()设置/获取月份

setYear()/geYear()设置/获取年

 

六，层

(1)常见的页面坐标

top：指定元素的上边界位置

 

pixelTop：设置或返回元素的上边界

advInitTop=document.getElementById("advLayer").style.pixelTop;  

 

left：指定元素的左边界位置

 

scrolltop：页面滚动的高度

document.body.scrollTop

 

 

 

 

 

 

 

（2）层的定位

只有先设置层的position为absolute后，才能为层定位

<DIV     id="advLayer" style="position:absolute;     left:16px;     

               top:129px;  width:144px;      height:95px;  z-index:1;">

z-index表示层的悬浮效果

 

（3）层的隐藏

document.getElementById("advLayer").style.display="none";   

document.getElementById("mylayer").style.display="block";

document.getElementById("mylayer").style.display="inline";

 

 

 

 

 

 

 

七，其他内容

（1）超链接与点击事件

如果超链接中有点击事件，那么就要在点击事件的函数后面加上return false阻止超链接的执行

<a  href="#"  onclick="canclelink() return false;">退出</a>

 

（2）文本框的只读属性

<input name="MyDateTime" type="text" id="MyDateTime" readonly="readonly"/>