Javascript45个经典例子资源-CSDN文库

共53个文件

doc：44个

gif：3个

ini：2个

1星需积分: 9 124 浏览量 2007-09-29 15:34:26 上传评论 2 收藏 476KB RAR 举报

JavaScript，作为全球最广泛使用的编程语言之一，是创建交互式网页和应用程序的关键工具。这个压缩包包含45个JavaScript的经典实例，以及一个名为"Javascriptjavascript使用技巧.txt"的文本文件，旨在帮助用户深入理解和掌握这门语言的核心概念及实用技巧。 1. **变量与数据类型**：JavaScript支持动态数据类型，意味着变量可以存储不同类型的值，如字符串、数字、布尔值等。了解如何声明（`var`, `let`, `const`）和操作变量至关重要。 2. **基本运算符**：包括算术、比较和逻辑运算符，它们在执行计算、比较和逻辑判断时发挥作用。 3. **控制流**：`if...else`语句、`switch`语句、`for`循环、`while`循环等用于控制程序的执行流程。 4. **函数**：JavaScript中的函数允许我们将代码组织成可重复使用的模块。可以使用`function`关键字定义函数，也可以使用箭头函数（`=>`）简化语法。 5. **数组**：数组是存储一组有序数据的数据结构。JavaScript提供了一系列方法来操作数组，如`push()`, `pop()`, `slice()`, `forEach()`等。 6. **对象**：JavaScript对象是键值对的集合，使用大括号`{}`表示。可以通过点号`.`或方括号`[]`访问对象属性。 7. **DOM操作**：文档对象模型（DOM）是HTML和XML文档的结构化表示，JavaScript通过DOM API可以修改网页内容。 8. **事件处理**：JavaScript通过监听并响应用户的交互事件，如点击按钮、滚动页面等，实现动态效果。 9. **AJAX**：异步JavaScript和XML，用于在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。 10. **闭包**：闭包是JavaScript中的一个高级特性，它能让内部函数记住其外部环境，即使外部函数已经执行完毕。 11. **作用域**：JavaScript有全局作用域和局部作用域，理解这两者以及`var`、`let`和`const`的作用域规则非常重要。 12. **原型与原型链**：JavaScript对象可以通过原型链共享属性和方法，这是实现继承的一种方式。 13. **ES6新特性**：包括箭头函数、模板字符串、解构赋值、Promise、async/await等，这些新特性大大提高了代码的可读性和效率。 14. **错误处理**：`try...catch`块用于捕获和处理运行时错误，确保程序的稳定运行。 15. **模块化**：使用`import`和`export`关键字进行模块导入和导出，便于代码组织和重用。 16. **正则表达式**：在JavaScript中，正则表达式用于字符串的模式匹配和替换。 17. **性能优化**：了解如何避免内存泄漏、减少DOM操作次数和利用缓存策略可以提高JavaScript代码的性能。 18. **跨域通信**：CORS（跨源资源共享）允许浏览器从不同源加载资源，解决同源策略限制的问题。 19. **Promise**：用于异步编程，解决回调地狱问题，使得异步代码更加可读和维护。 20. **事件委托**：通过将事件监听器添加到父元素上，利用事件冒泡机制处理子元素的事件，可以提高性能。 21. **TypeScript**：它是JavaScript的一个超集，提供了静态类型检查和其他增强功能，有助于写出更健壮的代码。 22. **Web Storage**：`localStorage`和`sessionStorage`允许在浏览器端存储数据，实现页面间的持久化。 23. **Web API**：包括WebSocket、Fetch API等，用于实现更丰富的客户端功能，如实时通信、异步数据请求。 24. **CSS3动画与JavaScript结合**：通过JavaScript控制CSS3动画，可以实现复杂的交互效果。 25. **框架与库**：如React、Vue、Angular等，它们为构建大型Web应用提供了结构、工具和最佳实践。 26. **响应式设计**：JavaScript配合媒体查询和事件监听，实现响应式布局，适应不同设备。 27. **表单处理**：JavaScript可以验证用户输入，提供即时反馈，防止无效数据提交。 28. **异步编程**：`async/await`让异步代码看起来像同步，提高了代码的可读性。 29. **错误日志**：通过记录和分析错误日志，可以定位并修复代码中的问题。 30. **性能分析**：使用Chrome DevTools等工具，对JavaScript代码进行性能分析和优化。 31. **代码质量**：遵循编码规范，使用ESLint等工具检查代码质量，保证代码的一致性和可维护性。 32. **测试驱动开发**：编写测试用例，使用Mocha、Jest等测试框架，确保代码功能正确无误。 33. **性能预算**：设定性能指标，监控并优化JavaScript的执行速度和内存占用。 34. **代码分割**：在大型项目中，通过代码分割技术减少初始加载时间，提升用户体验。 35. **服务端渲染**：SSR（Server-Side Rendering）可提高SEO和首屏加载速度。 36. **Web Workers**：在后台线程中执行计算密集型任务，防止阻塞主线程。 37. **事件传播**：理解事件冒泡和事件捕获的概念，有效管理事件监听。 38. **错误预防**：使用`try...finally`确保即使在异常情况下也能执行清理工作。 39. **代码优化**：利用`const`和`let`代替`var`，避免全局变量污染，使用立即执行函数（IIFE）等。 40. **模块打包工具**：如Webpack、Rollup，将多个模块打包成单个文件，方便部署和加载。 41. **代码复用**：通过函数、类和模块实现代码复用，提高开发效率。 42. **异步数据流**：RxJS等库提供了一种处理异步数据流的统一方式。 43. **可访问性**：编写无障碍（ Accessibility，简称a11y）的JavaScript，确保所有用户都能使用你的网站。 44. **前端路由**：在单页应用中，使用如React Router或Vue Router管理页面导航。 45. **性能基准测试**：通过编写基准测试，比较不同实现的性能，选择最优方案。这些例子和技巧涵盖了JavaScript的各个方面，对于初学者和经验丰富的开发者来说都是宝贵的资源，可以帮助他们深入理解和运用JavaScript的精髓。通过学习和实践这些实例，开发者能够提升技能，更好地应对实际项目中的挑战。

资源推荐

资源详情

资源评论

收起资源包目录

Javascript.rar （53个子文件）

Javascript

前进和后退按钮.doc 24KB

在页面上显示日期，星期和时间.doc 27KB

状态栏显示时间.doc 25KB

防止内容被拷贝大法HOT!.doc 55KB

用Javascript制作鼠标移动跟随.doc 38KB

javascript使用技巧.txt 25KB

用Javascript制作复选框.doc 35KB

JavaScript简介.doc 38KB

网页中的最后修改日期.doc 37KB

用Javascript制作推拉门式菜单.doc 40KB

最后更新日期.doc 24KB

JavaScript教程语言概况.doc 48KB

显示访问者停留时间.doc 27KB

巧用表单单选框.doc 41KB

在页面上显示当前日期和时间.doc 26KB

Javascript的环绕文字效果.doc 39KB

用Javascript制作跳动的文字.doc 37KB

警告窗按钮.doc 24KB

用Javscript制作图片变换特效.doc 35KB

用JavaScript实现更复杂的交互.doc 54KB

开新窗口按钮.doc 25KB

查看源代码的按钮.doc 25KB

_desktop.ini 10B

Javascript的推出文字效果.doc 38KB

离开时告诉你停留时间.doc 25KB

前进后退的图片按钮.doc 26KB

中华网--科技频道--网络教室.htm 25KB

用JavaScript脚本实现Web页面信息交互.doc 58KB

用Javascript制作会计算的表单.doc 35KB

Javascript制作水中倒影.doc 43KB

闪烁按钮.doc 27KB

显示日期和星期.doc 27KB

中华网--科技频道--网络教室.files

_desktop.ini 10B

chinacom_logo.gif 617B

wljs.gif 4KB

icon_chinadotcom1.gif 1KB

head.css 2KB

site=chinacom&affiliate=tech&subchannel=endpage&type=banner 3KB

向下滚屏按钮.doc 25KB

网页电子时钟揭密.doc 38KB

用Javascript制作旋转导航菜单.doc 42KB

JavaScript窗口及输入输出.doc 59KB

JavaScript程序构成.doc 52KB

在JavaScript中创建新对象.doc 48KB

JavaScript对象系统的使用.doc 57KB

动态网页制作简介.doc 34KB

JavaScript基本数据结构.doc 45KB

友情链接表单发送.doc 317KB

可滚动的链接按钮.doc 29KB

会变色的按钮.doc 25KB

基于对象的JavaScript语言.doc 48KB

状态栏中显示访问者停留时间.doc 27KB

走动的时间.doc 28KB

1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键 <table border oncontextmenu=return(false)><td>no</table> 可用于Table 2. <body onselectstart="return false"> 取消选取、防止复制 3. onpaste="return false" 不准粘贴 4. oncopy="return false;" oncut="return false;" 防止复制 5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标 6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标 7. <input style="ime-mode:-Disabled"> 关闭输入法 8. 永远都会带着框架 <script language="javascript"></script> 9. 防止被人frame <SCRIPT LANGUAGE=javascript></SCRIPT> 10. 网页将不能被另存为 <noscript><iframe src=*.html></iframe></noscript> 11. <input type=button value=查看网页源代码 onclick="window.location = `view-source:`+ http://www.51js.com/`";> 12.删除时确认 <a href=`javascript: if(confirm("确实要删除吗?"location="boos.asp?&areyou=删除&page=1"`>删除</a> 13. 取得控件的绝对位置 //javascript <script language="javascript"> function getIE(E){ var t=e.offsetTop; var l=e.offsetLeft; while(e=e.offsetParent){ t+=e.offsetTop; l+=e.offsetLeft; } alert("top="+t+"/nleft="+l); } </script> //VBScript <script language="VBScript"></script> 14. 光标是停在文本框文字的最后 <script language="javascript"> function cc() { var e = event.srcElement; var r =e.createTextRange(); r.moveStart(`character`,e.value.length); r.collapse(true); r.select(); } </script> <input type=text name=text1 value="123" onfocus="cc()"> 15. 判断上一页的来源 javascript: document.referrer 16. 最小化、最大化、关闭窗口 <object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> <param name="Command" value="Minimize"></object> <object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> <param name="Command" value="Maximize"></object> <OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"> <PARAM NAME="Command" value="Close"></OBJECT> <input type=button value=最小化 onclick=hh1.Click()> <input type=button value=最大化 onclick=hh2.Click()> <input type=button value=关闭 onclick=hh3.Click()> 本例适用于IE 17.屏蔽功能键Shift,Alt,Ctrl <script> function look(){ if(event.shiftKey) alert("禁止按Shift键!"; //可以换成ALT　CTRL } document.onkeydown=look; </script> 18. 网页不会被缓存 <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> 或者<META HTTP-EQUIV="expires" CONTENT="0"> 19.怎样让表单没有凹凸感？ <input type=text style="border:1 solid #000000"> 或 <input type=text style="border-left:none; border-right:none; border-top:none; border-bottom: 1 solid #000000"></textarea> 20.<div><span>&<layer>的区别？ <div>(division)用来定义大段的页面元素，会产生转行 <span>用来定义同一行内的元素，跟<div>的唯一区别是不产生转行 <layer>是ns的标记，ie不支持，相当于<div> 21.让弹出窗口总是在最上面: <body onblur="this.focus();"> 22.不要滚动条? 让竖条没有: <body style=`overflow:-Scroll;overflow-y:hidden`> </body> 让横条没有: <body style=`overflow:-Scroll;overflow-x:hidden`> </body> 两个都去掉？更简单了 <body scroll="no"> </body> 23.怎样去掉图片链接点击后，图片周围的虚线？ <a href="#" onFocus="this.blur()"><img src="logo.jpg" border=0></a> 24.电子邮件处理提交表单 <form name="form1" method="post" action="mailto:****@***.com" enctype="text/plain"> <input type=submit> </form> 25.在打开的子窗口刷新父窗口的代码里如何写？ window.opener.location.reload() 26.如何设定打开页面的大小 <body onload="top.resizeTo(300,200);"> 打开页面的位置<body onload="top.moveBy(300,200);"> 27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动 <style> body {background-image:url(logo.gif); background-repeat:no-repeat; background-position:center;background-attachment: fixed} </style> 28. 检查一段字符串是否全由数字组成 <script language="javascript"></script> 29. 获得一个窗口的大小 document.body.clientWidth; document.body.clientHeight 30. 怎么判断是否是字符 if (/[^/x00-/xff]/g.test(s)) alert("含有汉字"; else alert("全是字符"; 31.TEXTAREA自适应文字行数的多少 <textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight"> </textarea> 32. 日期减去天数等于第二个日期 <script language=javascript> function cc(dd,dadd) { //可以加上错误处理 var a = new Date(dd) a = a.valueOf() a = a - dadd * 24 * 60 * 60 * 1000 a = new Date(A) alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日" } cc("12/23/2002",2) </script> 33. 选择了哪一个Radio <HTML><script language="vbscript"> function checkme() for each ob in radio1 if ob.checked then window.alert ob.value next end function </script><BODY> <INPUT name="radio1" type="radio" value="style" checked>style <INPUT name="radio1" type="radio" value="barcode">Barcode <INPUT type="button" value="check" onclick="checkme()"> </BODY></HTML> 34.脚本永不出错 <SCRIPT LANGUAGE="javascript">  </SCRIPT> 35.ENTER键可以让光标移到下一个输入框 <input onkeydown="if(event.keyCode==13)event.keyCode=9"> 36. 检测某个网站的链接速度：把如下代码加入<body>区域中: <script language=javascript> tim=1 setInterval("tim++",100) b=1 var autourl=new Array() autourl[1]="http://www.sina.com.cn/"; autourl[4]="http://www.cctv.com/"; function butt(){ document.write("<form name=autof>" for(var i=1;i<autourl.length;i++) document.write("<input type=text name=txt"+i+" size=10 value=测试中……> =》<input type=text name=url"+i+" size=40> =》<input type=button value=GO onclick=window.open(this.form.url"+i+".value)><br>" document.write("<input type=submit value=刷新></form>" } butt() function auto(url){ document.forms[0]["url"+b].value=url if(tim>200) {document.forms[0]["txt"+b].value="链接超时"} else {document.forms[0]["txt"+b].value="时间"+tim/10+"秒"} b++ } function run(){for(var i=1;i<autourl.length;i++)document.write("<img src="}/' target=_blank _fckxhtmljob="1">http://";+autourl+"`)>"} run()</script> 37. 各种样式的光标 auto ：标准光标 default ：标准箭头 hand ：手形光标 wait ：等待光标 text ：I形光标 vertical-text ：水平I形光标 no-drop ：不可拖动光标 not-allowed ：无效光标 help ：?帮助光标 all-scroll ：三角方向标 move ：移动标 crosshair ：十字标 e-resize n-resize nw-resize w-resize s-resize se-resize sw-resize 38.页面进入和退出的特效进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)"> 推出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)"> 这个是页面被载入和调出时的一些特效。Duration表示特效的持续时间，以秒为单位。Transition表示使用哪种特效，取值为1-23: 　　0 矩形缩小　　1 矩形扩大　　2 圆形缩小　　3 圆形扩大　　4 下到上刷新　　5 上到下刷新　　6 左到右刷新　　7 右到左刷新　　8 竖百叶窗　　9 横百叶窗　　10 错位横百叶窗　　11 错位竖百叶窗　　12 点扩散　　13 左右到中间刷新　　14 中间到左右刷新　　15 中间到上下　　16 上下到中间　　17 右下到左上　　18 右上到左下　　19 左上到右下　　20 左下到右上　　21 横条　　22 竖条　　23 以上22种随机选择一种 39.在规定时间内跳转 <META http-equiv=V="REFRESH" content="5;URL=http://www.51js.com">

评论收藏

内容反馈