JavaScript学习日志.docx

JavaScript学习日志.docx

《JavaScript学习日志.docx》由会员分享，可在线阅读，更多相关《JavaScript学习日志.docx（16页珍藏版）》请在冰豆网上搜索。

JavaScript学习日志

JavaScript

一概述

JavaScript是一种解释性的用于客户端的基于对象的程序开发语言。

1解释性的源代码将不经过编译而直接在浏览器中运行时被“翻译”，又称”脚本式”语言。

2用于客户端的客户端的程序则用于用户输入数据的校验、根据用户的操作改变网页的画面或者进行动画的处理等“界面”性的工作。

3基于对象的是网页中的元素不在是静态不变的元素而是动态的

二功能介绍

1校验用户输入的内容

格式性校验：

只发生在客户端

功能性校验：

与数据库相连

2有效的组织网页内容

3动态的显示网页的内容

4弥补静态网页不能实现的功能

5动画显示

三第一个JavaScript

//用于区别其他脚本编辑语言

--

functiongetArea（）{//函数要置于head表签中

varr=10;

varsqrR=r*r;

vars=Math.PI*sqrR;

alert（"半径为10cm的圆的面积是"+s+"平方米"）;

}

//-->

//标记

--//-->对于不支持Javascript的浏览器，其内容会被隐藏起来，否则会被当做HTMl内容显示出来。

对支持JavaScript的浏览器不起任何作用

上一次网页更新日期：

--

document.write（document.lastModified）;

//-->

//document.write（）显示最后编辑的时间

对于JavaScript也可置于单独的JS文件中，html文件直接调用

用var声明变量

JavaScript声明变量时无需定义数据类型

varcount=1;count=”Thecountofvalueis:

”+count;

java中的浮点数的运算

浮点数的比较依赖于各自的计算机系统

X=3.5;

Y=1.5;

Z=X-Y;（z可能为1.99999995）

If（z==2.0）{

}

最好采用下述方法;

smallValue=0.001;

X=3.5;

Y=1.5;

Z=X-Y;

If（z-2.0

}

Java中的位（&）运算符

首先以二进制的数进行运算，返回十进制的数给结果

运算符：

？

：

x=2;（x>3）?

“Higherlever”:

”Lowerlevel”结果是”Lowerlevel

条件?

:

满足条件的值：

不满足条件的值

三JavaScript语句

表单的校验过程

--

varerrorMessage="";

functioncheckRequired（s,label）{

if（s==""）

errorMessage+='请输入"'+label+'".\n';//换行符

}

functiondoValidate（）{

errorMessage="";

varsUsername=document.userForm.username.value;//获取输入框的内容

varsPassword=document.userForm.password.value;

checkRequired（sUsername,"用户名"）;

checkRequired（sPassword,"密码"）;

if（errorMessage!

=""）

{

alert（errorMessage）;

returnfalse;

}

else

returntrue;

}

functiondoSubmit（）{

if（doValidate（））

returnalert（"提交表单成功!

"）;

}

//-->

参数的个数

--

functionsumAll（）{

varargsLength=sumAll.arguments.length;//用于获取参数的个数

varsum=0;

for（vari=0;i

{

sum+=sumAll.arguments[i];

}

document.write（"Sumis"+sum+"
"）;

}

sumAll（1,2,3）;

sumAll（100,200）;

//-->

日期的创建

--

functiondateObj（year,month,day）{

this.year=year;

this.month=month;

this.day=day;

this.toString=functiongetString（）{

return（this.month+'/'+this.day+'/'+this.year）

}

}

functionprevmonth（date）{

if（date.month==1）{

date.year--;

date.month=12;

}else

{

date.month--;

}

}

varmyDate=newdateObj（'2010','8','24'）;

varmyMonth=myDate.month;

varmyDateStr=myDate.toString（）;

document.write（'新产生的日期对象月份是：

'+myMonth+'
日期是是：

'+myDateStr+'
'）;

prevmonth（myDate）;

varprevDateStr=myDate.toString（）;

document.write（'前一个月的日期是：

'+myDate.toString（））;

//-->

四事件及事件驱动

javaScript用于处理事件的程序为

事件=“函数名（）”；

functionhello（）{

alert（"欢迎访问！

"）;

}

五JavaScript常用内置对象

1数组对象

var变量名=newArray（）;varmyArray=newArray（5）;

varweekday=newArray（“sun”,”sat”,””,””,””）;

a>元素序列从0开始计算

b>长度不是固定不变的

只要赋予一个新元素就行myArray[6]=”newItem”;

数组中定义了一系列的方法和属性。

varsimpleArray=newArray（9,10,32,4,100）;

document.write（"一维数组排序;
"）;

document.write（"排序前;"+simpleArray.join（））;

simpleArray.sort（compare）;

document.write（"排序后;"+simpleArray.join（））;

functioncompare（a,b）{

return（a-b）;//一维数组的比较函数

}

联合数组

varperson=newObject（）;//创建一个联合数组

person["name"]="John";

person["phone"]="4031234";

person["email"]="abc@";

for（theIteminperson）{

document.write（theItem+"is"+person[theItem]+"
"）;

}

//测试是否有属性age

if（typeofperson["age"]=="undefined"）

{

document.write（'NOproperty"age"'）;

}

NameisJohn

phonies4031234

emailisabc@

NOproperty"age

2字符串对象

任何一个变量它的值为字符串，则为字符串

VarmyString=”thisismyString”;

VarmyString=newString（”thisismyString”）;

JavaScript中的字符串可以使用单引号，也可以使用双引号。

但是必须前后一致

类型转换

Varapples=document.form1.apples.value;

Varbananas=document.form1.bananas.value;

Varfruits=parseInt（apples,10）+parseInt（bananas,10）;//parseInt（s,b）b为几进制数

常可用于对数据的字符操作，例如：

字符长度的确定，大小的限定等等。

3数字操作

产生随机数的

3.1产生n1-n2的随机数

Math.floor（Math.random（）*（n2-n1））+n1

3.2产生0~1的随机数

Math.random（）

3.3产生0~n之间的随机数

Math.floor（Math.random（）*（n+1））

例如随机产生n位字符串密码

4日期对象

新建日期

Newdate（）;

Newdate（日期字串）

Newdate（年,月,日[,时,分,秒,毫秒]）;

Newdate（毫秒）;

varmyDate1=newDate（）;

varmyDate2=newDate（"April10,2003"）;

varmyDate3=newDate（"April10,20038:

20:

4"）;

varmyDate4=newDate（04,2,1,1）;

varmyDate5=newDate（1988,0,1,16,25,0,0）;

varmyDate6=newDate（200000000）;

for（vari=0;i<6;i++）{

document.write（"myDate"+（i+1）+"is"+eval（"myDate"+（i+1））+"
"）;

}

Answer：

myDate1isTueOct521:

37:

56UTC+08002010

myDate2isThuApr1000:

00:

00UTC+08002003

myDate3isThuApr1008:

20:

04UTC+08002003

myDate4isTueMar101:

00:

00UTC+08001904

myDate5isFriJan116:

25:

00UTC+08001988

myDate6isSatJan315:

33:

20UTC+08001970

2010年10月5日星期二显示方法

varsWeek=newArray（"日","一","二","三","四","五","六"）;

varmydate=newDate（）;

varsYear=mydate.getFullYear（）;//年

varsMonth=mydate.getMonth（）+1;//月

varsDate=mydate.getDate（）;//日

varsDay=sWeek[mydate.getDay（）];//星期

//getDay返回星期数0—星期日

document.write（sYear+"年"+sMonth+"月"+sDate+"日"+"星期"+sDay+"
"）;

六常用文档对象

通过调用JavaScript改变文档的属性

提交一次后不可以提交

functionclickButton（）

{

document.getElementById（"mybutton"）.disabled=true;

}

文档对象的属性和方法

Onload事件：

发生在装载网页后

onunload事件：

发生在离开网页前

--

functionsetTitle（）{

document.title="Todyis"+newDate（）;//标题的输出

}

functionhello（）

{

alert（"你好!

"）;

}

functionbye（）

{

alert（"再见!

"）;

}

functionupdateInfo（）{

document.write（"上一次本网页更新日期:

"）;

document.write（document.lastModified）;//上一次的更新

}

functionnewWindow（）//新的一页

{

varmsg1="这是新的一页.";

varmsg2="大家好.";

document.open（"text/html","replace"）;//打开write流

document.write（msg1）;

document.write（msg2）;

document.close（）;

}

//-->

--

updateInfo（）;

//-->

文档对象的cookies属性

Cookies是文档对象的一个属性，用于记录用户在浏览器中执行的一些状态.通过cookies可以显示用户在某网页的访问次数；可以自动显示登录网页中的用户名

1设置cookies

Cookies名=cookies值;expires=过期日期字串;[domain=域名;path=路径;secure]

Expires值设置为cookies的有效日期，如果网页超过了该日期。

该cookies无效；domain和path项是可选项。

不设置缺省为网页所在的域名和路径

2取出cookies

cookies1名=cookies1值;cookies2名==cookies2值;

3删除cookies

删除cookies实际上是设置指定的cookies名的值为空串，过期日期是当前日期以前的日期。

表单及控件元素对象

表单对象是文档对象的一个主要的元素。

onclick="javascript:

if（this.value=='请输入关键字'）{this.value=''}"onblur="javascript:

if（this.value==''）{this.value='请输入关键字'}"

onblur：

当光标离开当前页面时onclick;鼠标单击当前元素时

functiondoTest（）{

varallElements=document.getElementById（"myForm"）.elements;//获取表单所有元素控件

for（vari=0;i

if（allElements[i].type=="text"）

allElements[i].value="我是文本框";

elseif（allElements[i].type=="password"）

{

allElements[i].value=newDate（）.getTime（）;

}

elseif（allElements[i].type=="reset"）

{

alert（"JavaScript将自动按下\"重置\"钮"）;

allElements[i].click（）;//实现所有的控件重置

}

}

}

单行文本框

密码框

重置钮

form>