JavaScript读书笔记【基础+多实例】.doc

JavaScript应该了解哪些1.何为JavaScript2.JavaScript的功能3.JavaScript的形态4.在HTML中嵌入JavaScript 3显示日期和时间1、告知日期和时间 2、每天都有问候3、能每个小时呈现不同信息的Script4、制作漂亮的图像时钟(field)5、制作精美的日历6、D-day功能（日期倒数）4生成帅气的文本效果1、生成键入效果的Script 12、生成键入效果的Script 23、使信息在显示框内来回移动的Script4、当鼠标移上文字时，显示框内会显示说明文字的Script6、新闻或公告事项中使用的Script 27、生成跃然而出的欢迎语的Script8、使访问者在芳名录上留名的Script5制作动感十足的图片1、鼠标一碰，图片就变。2、每次打开网页，图片都会变化。3、图片自然会动。4、时而清晰，时而模糊的图片。5、图片四处闪现最终消失。6、零碎图片滑动拼凑成完整图片。field7、利用转换滤镜变换图片6 与鼠标相关的各类效果1、鼠标移上时菜单发生变化2、禁止使用鼠标右键3、随鼠标移动的图片4、随鼠标移动的块状图片5、文本随鼠标滴溜溜的转6、单击鼠标右键，弹出“添加入收藏夹”窗口7状态栏也可以吸引眼球1、状态栏上的闪动信息2、在状态栏上显示当前信息3、在状态栏上显示动态文本4、在信息栏上只显示信息而不显示链接地址5、信息一个字一个字的显示6、信息在状态栏上来回移动8 为背景添加多样效果1、鼠标移上文本时，背景色发生变化2、背景添加Fade效果3、生成随鼠标移动的十字线效果failed4、利用META标签转换画面5、雪花簌簌落下的效果待定6、水泡噗噗向上冒的效果9想了解与窗口相关的迷人效果吗？1、访问时自动弹出公告窗2、公告窗只出现一次3、生成无边框窗口field4、单击即打开新窗口、如同按F11一样5、生成多个弹出窗口6、关闭某网页自动链接到另一网站10制作风格各异的菜单1、鼠标上移时会产生变化的菜单2、鼠标移上时会自行展开菜单4、单一即会生成向下滑动(slide)菜单5、利用Iframe制作滑动菜单(sliding menu)11还有哪些实用的源代码1、制作多样的网络功能按钮2、制作“收藏夹”按钮3、制作“设为首页”按钮4、打印当前页5、制作“查看源代码”按钮【failed】6、禁用鼠标右键和键盘7、告知一切信息8、制作背景音乐的播放、停止按钮JavaScript应该了解哪些1.何为JavaScript2.JavaScript的功能3.JavaScript的形态4.在HTML中嵌入JavaScript(add)5.JavaScript的缺陷(在不同浏览器中表现有的存在差异)1.何谓JavaScript2.JavaScript的功能（1）JavaScript能使页面产生动感效果（2）JavaScript能根据使用者的操作执行相应的任务（3）JavaScript能获取用户和网页的信息（4）JavaScript可改变属性（5）JavaScript可控制各种表单（form）JavaScript可在传送表单之前对其格式进行检查。3.JavaScript的形态JavaScript的内容如果你觉得需要更清晰一点，还可以显示声明脚本需要那个版本的JavaScript支持。如：但是，并非所有的游览器都会检测language属性中的版本号。当然，不检测版本号的浏览器。就是不支持JavaScript1.5。在一般情况下，使用JavaScript有两种方法：一种是直接将JavaScript所有的源代码嵌入HTML中使用，另一种是将JavaScript的源代码保存至”*js”外部文件，然后再HTML文本的指定位置进行使用。下面这个标签演示如何对外部JavaScript文件进行读取。 能防止JavaScript源代码泄露。？JavaScript的注解处理方法1/注解内容一般用于一行的注解(没有结束标志)方法2/*注解内容*/用于两行的注解方法3用于两行以上的注解4.在HTML中嵌入JavaScriptJavaScript可以嵌入HTML的任何部分，只是在传统上将JavaScript嵌入至head部分或body部分当在方法中写入字符串是，必须用双引号将字符串包起来，而当在双引号中还要再次使用双引号时，就应该使用单引号。与HTML不同，JavaScript区分字母的大小写。DUAM网站的Cafe不适用JavaScript.2简单编写JavaScript1.利用记事本编写JavaScript2.利用NAMO WebEditor编写JavaScript参考：强力推荐！JavaScript源代码宝库！http:/www.sourcenara.rcom3显示日期和时间1、告知日期和时间2、每天都有问候3、能每个小时呈现不同信息的Script4、制作漂亮的图像时钟5、制作精美的日历6、D-day功能1、告知日期和时间tm=new Date();document.write(今天的日期：+tm.getYear()+年+(tm.getMonth()+1)+月+tm.getDate()+日+tm.getHours()+时+tm.getMinutes()+分+tm.getSeconds()+秒);特别关注：对象与对象变量生成过多的对象变量会给程序造成负担，所以，JavaScript提供了关于对象变量的操作。该操作被称为“声明对象变量“，所谓”声明对象变量“就是声明专属于“使用者”的对象。可以采取以下的格式用“new”来声明对象变量。对象变量 = new 对象类型()形式1对象变量 = new 对象类型(参数(parameter)1,参数2)形式2JavaScript事先生成了具备众多功能的对象，这些对象也被称为“内建对象”，各位可以轻松使用这些对象，譬如，JavaScript中有的Date对象，它用于处理日期和时间。下例正是利用对象Date生成新的对象变脸tm的格式。这一新生成的对象变量(tm)具备原有对象的Data的方法和属性功能。tm = new Date();以上格式用于生成与日期/时间有关的对象变量，笔者将日期/时间对象变量命名为”tm”，对象变量的名称最好用便于记忆的英文字母，但是最好不要用已存在的英文单词。各位还记得对象Document吗？他是提供与当前页面构成元素相关的属性和方向的对象，使用语句document.write可以向页面发送的内容对象Date的方法类型getMonth()告知当前月份(在数字011内变换)getDate()告知当前日期(在数字131内变换)getYear()告知当前年份(4位数字变换)getDay()告知当前星期几(在数字17内变换)getHours()告知当前时间的时针数(在数字023内变换)getMinutes()告知当前时间的分针数(在数字059内变换)getSeconds()告知当前时间的秒针数(在数字059内变换)2、每天都有新的问候var today=new Date();var today_date=today.getDate();var title=;/输入用于标题的图片或信息var day=new Array();/以名称day给数组变量赋值；day29=每月29日的公告;/若还需进行超链接，所有信息需使用单引号。day30=每月30日的公告;document.write(title);document.write(daytoday_date);var day=new Array();是以名称day赋值数组变量。在Array()中，如果括号内不填写任何数值，那么数组项目数就会继续补充。可见，数组的大小是由括号内数值决定的，譬如要生成一个有30个项目数的数组，就必须设定new Array(30)3、能每个小时呈现不同信息的Scriptvar day=new Date()var hour=day.getHours()if(hour=6)|(hour=7)|(hour=8)|(hour=9)document.write(清爽的早晨，希望今天也是快乐的一天)if(hour=18)document.write(这一天都是怎么过的呢？)if(hour=19)document.write(晚上7点了哦)特别关注：运算符关系运算符运算符说明A=B如果A等于B，即为trueA!=B如果A不等于B,即为trueAB如果A大于B,即为trueA=B如果A大于等于B,即为true逻辑运算符运算符说明备注A&BA，B均为真时返回trueANDA|BA或B的任一为真时返回trueOR!AA若等于其相反值时返回trueNOTAB对A和B进行逻辑异或运算，如果A与B的真与假相反即返回trueXOR4、制作漂亮的图像时钟没搞定5、制作精美的日历用组设定每天的背景图片，document.wrte显示即可6、D-day功能（日期倒数功能）var today=new Date();var day=new Date(February 1,2010);/将变量day赋值修改为新的日期var days=Math.ceil(day-today)/1000/24/60/60);/Math.ceil返回指定数字或表达式的最小整数document.write(离那个日子还有+days+天);如果你想在窗口下面的状态栏输出的话可以在JavaScript中加这句window.status=(离那个日子还有+days+天);4生成帅气的文本效果1、生成键入效果的Script 1var msg=你好，欢迎你的到来;var i=0;function play()if(i=msg.length)document.form1.text1.value=msg.substring(0,i);i+;setTimeout(play(),300);elsei=0;setTimeout(play(),2000);2、生成键入效果的Script2 var msg=new Array();msg0=12345678;msg1=它斯蒂芬哈上帝哦附近闪动奥;msg2=我阿斯顿和佛山大幅;var i=0;var n=0function play()if(i=msg.length)n=0;setTimeout(play(),100);3、使信息在显示框内来回移动的Scriptvar msg=我左摇右晃，嘿！;var direction=1;var size=15;var position=size;function play()(direction=1)?position-=2:position+=2;if(positionsize)direction=1;var space= ;for(i=0;iposition;i+)space=space+ ;var message=space+msg;document.form1.text1.value=message;setTimeout(play(),300); 4、当鼠标移上时，显示框内会显示说明文字的Script var msg=new Array();msg0=这是HTML;msg1=这是CSS;msg2=这是JavaScript;msg3=说明性文字？function change(i)document.forms1.text1.value=msgi;/forms1表示第二个form表单HTMLCSSJavaScript 6、新闻或公告事项中使用的Script2当鼠标上移时，原文向上滚动的公告内容随即停止function marq(kind)switch(kind)case 1:notice.stop();break;case 2:notice.start();break;江北 刚逼 明 耗子 6、生成跃然而出的欢迎语的Scriptfunction pop()alert(欢迎光临); /alert()是windows的一个方法，是制造警告窗口的方法。7、是访问者在芳名录上留言的Scriptfunction pop()if(confirm(请留言)windows.open(网址);else if(confirm(真的不留？)windows.open(网址);else alert(男的当猪仔，女的日了她); /onunload离开网页时运行，这里的离开是跳转到其他网页时？离开时的留言请求特别关注：confirm()方法confirm()方法，类似于alert()方法,但区别是有所选择。特别关注：prompt()方法prompt()是window对象的方法，其基本作用是，在装入Web页面时在屏幕上显示一个带有【确认】和【取消】按钮的对话框，让用户输入数据。var user_id=prompt(请输入用户ID,输入位置);document.write(user_id);5制作动感十足的图片1、鼠标一碰，图片就变if(document.images)mouseover=new Image;mouseout=new Image;mouseout.src=image/638eacf1d0ef5d1b97fc8e6f79c802c7.jpg;mouseover.src=image/background_title.jpg;elsemouseover= ;mouseout= ;document.images= ;特别关注：Event Hander用户将鼠标移上图片，这就产生了一个Event(事件)。事件发生后自动运行的函数被称为”Handle”。JavaScript支持Event Handle运行（HTML环境不支持），利用Event Handle可以使许多效果得以呈现。以下为Event Handle的具体操作形式。形式 on event=”运行”Event Hande的种类EventEvent Hander说明abortonAbort中止载入图片时的情况bluronBlur鼠标光标移开对象时的情况changeonChange对象内输入值发生变化时的情况clickonClick单击对象时的情况dbclickonDbclick双击对象时的情况dragdroponDragDrop选中对象后进行拖动的情况erroronError错误发生的情况focusonFocus鼠标光标移上对象时的情况keydownonKeyDown用键盘输入时的情况keypressonKeyPress按下该键时的情况keyuponKeyUp释放该键时的情况loadonLoad载入该对象时的情况mousedownonMouseDown按下鼠标按键后再释放时的情况mousemoveonMouseMove鼠标移动时的情况mouseoutonMouseOut鼠标移离对象时的情况mouseoveronMouseOver鼠标移上对象时的情况mouseuponMouseUp按下鼠标按键后再释放时的情况moveonMove游览器视窗移动时的情况resetonReset重置对象时的情况resizeonResize改变游览器视窗大小时的情况selectonSelect在文字框内选定某一字段时的情况submitonSubmit在输入样式提交网络时的情况unloadonUnload取消对象时的情况2、每次打开网页，图片都会变化。刷新document.img.src=image/+Math.round(Math.random()*3)+.jpg;注意，document.img.src=image/+Math.round(Math.random()*3)+.jpg;这句话要在这句话下面才行。另外Math.round(Math.random()*3)值是03,若是Math.round(Math.random()*3+.4)则值为13。经验证，Math.round()返回四舍五入的整数。3、图片自然滑动function iniscroll()block=document.getElementById(slidarea).style;block.xpos=parseInt(block.left)function slideleft()if(block.xpos-901)block.xpos-=1;block.left=block.xpos;if(block.xpos-900)block.xpos=0; block.left=block.xpos;setTimeout(slideleft(),10) 4、时而清晰时而模糊的图片var b=1;var c=true;function fade()if(document.all);if(c=true)b+;if(b=100)b-;c=false;if(b=10)b+;c=true;if(c=false)b-;f.filters.alpha.opacity=0+b;setTimeout(fade(),20);style=”filter:alpha(opacity=0)”中,”opacity”的取值为0100，数值越小图片越透明。调整源代码setTimeout(“fade()”,30)中的数值，就可以设定图片清晰与模糊的互换速度。5、图片四处闪现最终消失此Script产生的效果：图片四处闪现最终消失。它不是采用事先预定图片位置的“弱智”方法，图片的出现位置时随机设定的，图片出现的速度也可以任意调节。function image()if(document.all)document.all.layer.style.popTop=randomposition(300)-30;/300是源代码适用的高度document.all.layer.style.posLeft=randomposition(600)-70;document.all.layer.style.visibility=visible;if(document.layers)document.layer.top=randomposition(300)-30;document.layer.left=randomposition(600)-70;document.layer.visibility=visible;var timer=setTimeout(image(),1500);function hideImage()if(document.all)document.all.layer.style.visibility=hiddenif(document.layers)document.layer.visibility=hiddenvar timer=setTimeout(image(),700)function randomposition(range)return Math.floor(range*Math.random()document.write();6、零碎图片滑动拼凑成完整图片代码超长。最后整理吧。7、利用转换滤镜变换图片就像电影或广告中徐徐变化的场面，该效果是从一张图片慢慢过滤成另一张图片，该效果是利用META标签的转换滤镜实现的。转换滤镜具体包括IE支持的25中滤镜效果，只要准确掌握各种转换滤镜，就能为图片增添多样的效果。下面这个例子使用了转换滤镜中的blend滤镜（展现一个淡入淡出的效果），图片会渐变成另一张图片。var current=1;img1=new Image();img2=new Image();img1.src=image/0.jpg;img2.src=image/1.jpg;function objplay()obj.filters.blendTrans.apply();if(current=1)obj.src=img2.src;current=2;elseobj.src=img1.src;current=1;obj.filters.blendTrans.play();6 与鼠标相关的各类效果1、鼠标移上时菜单发生变化鼠标移上菜单图片会有黑白色变换为亮彩色，或者图标的颜色会发生变化。生成该效果的Script在网页制作中是非常实用的。aup=new Image();bup=new Image();adown=new Image();bdown=new Image();aup.src=image/2.jpg;bup.src=image/3.jpg;adown.src=image/0.jpg;bdown.src=image/1.jpg;function over(img)documentimg.src=eval(img+up.src);function out(img)documentimg.src=eval(img+down.src); 其实就是几幅不同的画变换罢了，还以为图自己用滤镜什么的变呢。alt=”菜单”。移上图片时会有注释为菜单2、禁止使用鼠标右键function click()if(event.button=2|event.button=3)alert(单击鼠标右键，你想干嘛嘛？);document.onmousedown=click;在遨游游览器中没有用。3、所鼠标移动的图片function move()document.allrose.style.left=event.clientX + document.body.scrollLeft-50;document.allrose.style.top=event.clientY + document.body.scrollTop-20;小知识：想知道layer(层)的属性吗？形式：id:设定layer的名称left . top : layer左侧和上端的位置width . height : layer的高和宽position : 与layer位置相关的属性，大家都使用absolute4、随鼠标移动的块状图片var imgwidth=481; /图片宽度 var imgheight=600; /图片高度var imgurl=image/0.jpg;/图片路径var imgslices=10;/图片分的块数var height_slice=Math.floor(imgheight/imgslices);var cliptop=0;var clipbottom=height_slice;var clipleft=0;var clipright=imgwidth;var x,y;var flag=0;var box;if(document.layers)var left_pos=.left=;var top_pos=.top=;var doc=document.;var stl=;if(document.all)var left_pos=.pixelleft=;var top_pos=.pixeltop=;var doc=;var stl=.style;function handlerMM(e)x=(document.layers)?e.pageX:event.clientX;y=(document.layers)?e.pageY:event.clientY;flag=1;if(document.layers)document.captureEvents(Event.MOUSEMOVE);document.onmousemove = handlerMM;var xpos=new Array()for(i=0;i=imgslices;i+)xposi=-50;var ypos=new Array()for(i=0;i=1;i-)xposi=xposi-1;yposi=yposi-1;xpos0=x;ypos0=y;for(i=0;iimgslices;i+)var thisspan = eval(document.all.span+(i)+.style)thisspan.posLeft=xposi;thisspan.posTop=yposi;var timer=setTimeout(madein(),10);document.write();for(i=0;i=imgslices-1;i+)document.write();document.write();document.write();cliptop+=height_slice;clipbottom+=height_slice;5、文本随着鼠标滴溜溜的转message= welcome to tag classroom of rosefamily;/标示随鼠标转动的文字的内容mcolor=pink;/设定字体颜色msize=5;/设定字体大小mwidth=70;/设定随鼠标进行文字转动效果的宽度mheight=70;/设定随鼠标进行文字转动效果的高度mspeed=0.03;/设定文字的速度message=message.split();L=message.length;Result=;TrigSplit=360/L;br=(document.layers)?1:0;if(br)for(i=0;iL;i+)document.write(+Result+messagei+);elsedocument.write();for(i=0;iL;i+)document.write(+Result+messagei+);document.write();xpos=0;ypos=0;step=mspeed;currStep=0;Y=new Array();X=new Array();Yn=new Array();Xn=new Array();for(i=0;iL;i+)Yni=0;Xni=0;(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;function Mouse(a)ypos=(document.layers)?event.pageY:event.y;xpos=(document.layers)?event.pageX:event.x;(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;function animateLogo()if(!br)outer.style.pixelTop=document.body.scrollTop;for(i=0;i=0;i-)Yi=Yni+=(ypos-Y