`
ajuanlong
  • 浏览: 105188 次
社区版块
存档分类
最新评论

JavaScript详解

 
阅读更多

JavaScript可以说是web开发中必备的一种技术。它具有灵活，简单，高效等特点。这次DRP中大量的用到了js，让自己对js有了更深的了解。看完这个以后还回去看了一下牛腩的js视频。把以前没看的看了一下。这里总结一下js。

  • 什么是javaScript，js有哪些特性

JS是一种解释型的网页脚本语言。其作用是控制浏览器的行为和内容。

js代码是嵌入到Html中的。

它有这么几大特点

  • 在客户端运行，这就意味着可以减轻服务器的压力。提高代码的执行效率。
  • JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）

对应的编译型语言，执行的时候需要提前编译成中间代码或者机器语言，比如java编译成.class文 件。

  • javaScript和java没有任何关系。Javascript不是其他语言的精简版（例如，它只是与 Java 有点模糊而间接的关系），也不是任何事物的简化。不过，它有其局限性。例如，您不能使用该语言来编写独立运行的应用程序，并且没有对读写文件的内置支持。此外，Javascript脚本只能在某个解释器或“宿主”上运行，如 Active Server Pages（ASP）、Internet 浏览器或者 Windows 脚本宿主。
  • JavaScript能实现哪些功能

javascript能实现浏览器的脚本开发。它有很多经典的功能。我们需要掌握。

  • JavaSript实现网页特效

Js能实现很多网页特效，如图片文字的滚动，图片的动态变换等。在网上搜索，能找到很多现成的 代码。总之，很多东西是不需要你自己动手的。需要站在巨人的肩膀上。

  • JavaScript操作Html元素

Js能操作网页元素，如对输入框，下拉框，表格等元素的操作。操作html元素的基础就是对DOM对象的操作。任何一个html元素是一个dom对象。我们可以利用js，来操作它。比如改变它的属性，动态增加元素。获取它的值等。

Html中的每一个元素都对应dom中的一个节点。html表单对应着一棵dom树，每个节点都有nodeName nodeValue nodeType属性。js就是通过操作这些属性来操作html的。

这里列举了一些操作方法。

  • createElement(element)：创建一个指定标签名创建一个新的元素节点，返回值为指向新建元素节点的引用指针
  • createTextNode(string)：创建一个包含着给定文本的新文本节点，返回一个指向新建文本节点的引用指针：
  • appendChild(node)：插入节点
  • removeChild(node)：将从一个给定元素利删除一个子节点，返回一个指向已被删除的子节点的引用指针。
  • hasChildNodes：用来检查一个给定元素是否有子节点 ，返回boolean值
  • replaceChild(newnode,oldnode)：节点替换
  • setAttribute(key,value)：为给定元素节点添加一个新的属性值或是改变它的现有属性
  • getAttribute(key)：返回一个给定元素的一个给定属性节点的值
  • getElementById():寻找一个有着给定id属性值的元素，返回一个元素节点
  • getElementsByTagName():用于寻找有着给定标签名的所有元素

从这些方法可以看出，js可以灵活的增加，删除，获取一个节点（html元素）。这样对表单的操作也就灵活的多了。

在这次drp中，主要用到了就是getElementById()这个方法。

如：

[javascript]view plaincopy
  1. with(document.getElementById("userform")){
  2. action="user_maint.jsp";
  3. method="post";
  4. submit();
  5. }



  • JavaScript实现表单验证

被JavaScript 验证的这些典型的表单数据有：

用户是否已填写表单中的必填项目？

用户输入的邮件地址是否合法？

用户是否已输入合法的日期？

用户是否在数据域(numeric field) 中输入了文本？

JS验证表单通常有两种方式。一种是手动写方法，在表单提交或者触发了某个事件的时候，调用这个js方法，再通过js代码提取这个控件的属性，判断它是否满足条件。另一种方法就是：利用正则表达式，验证输入的数据是否符合某种格式。例如如下的验证邮箱的一个js代码



[javascript]view plaincopy
  1. <prename="code"class="javascript">functiontest()
  2. {
  3. vartemp=document.getElementById("text1");
  4. //对电子邮件的验证
  5. varmyreg=/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
  6. if(!myreg.test(temp.value))
  7. {
  8. alert('提示\n\n请输入有效的E_mail！');
  9. myreg.focus();
  10. returnfalse;
  11. }
  12. }



代码的关键是找到正则表达式，第二就是利用这个正则表达式的test方法，验证某个字符串。注意test方法是这个正则表达式自带的。

  • JavaScript检查客户浏览器和创建cookies

使用javaScript验证用户浏览器的版本，信息等。

其中下面的Navigator对象包含了有关访问者浏览器的信息，包括浏览器类型、版本等等。

[html]view plaincopy
  1. <html>
  2. <body>
  3. <scripttypescripttype="text/javascript">
  4. varbrowser=navigator.appName
  5. varb_version=navigator.appVersion
  6. varversion=parseFloat(b_version)
  8. document.write("Browsername:"+browser)
  9. document.write("<br/>")
  10. document.write("Browserversion:"+version)
  11. </script>
  12. </body>
  14. </html>


cookie是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回cookie 的值。

首先：创建一个可在cookie 变量中存储访问者姓名的函数

[javascript]view plaincopy
  1. functionsetCookie(c_name,value,expiredays)
  2. {
  3. varexdate=newDate()
  4. exdate.setDate(exdate.getDate()+expiredays)
  5. document.cookie=c_name+"="+escape(value)+
  6. ((expiredays==null)?"":";expires="+exdate.toGMTString())
  7. }
  8. 其次：创建另一个函数来检查是否已设置cookie：
  9. functiongetCookie(c_name)
  10. {
  11. if(document.cookie.length>0)
  12. {
  13. c_start=document.cookie.indexOf(c_name+"=")
  14. if(c_start!=-1)
  15. {
  16. c_start=c_start+c_name.length+1
  17. c_end=document.cookie.indexOf(";",c_start)
  18. if(c_end==-1)c_end=document.cookie.length
  19. returnunescape(document.cookie.substring(c_start,c_end))
  20. }
  21. }
  22. return""
  23. }


上面的函数首先会检查document.cookie 对象中是否存有 cookie。假如 document.cookie 对象存有某些 cookie，那么会继续检查我们指定的cookie 是否已储存。如果找到了我们要的 cookie，就返回值，否则返回空字符串。

总之，js的是web开发中必不可少的一个技术，作为一个web开发人员，必须对它熟悉掌握。

分享到：
| ReceivedBytesThreshold属性的设置
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript详解（第2版）

    资源名称：JavaScript详解(第2版)内容简介：　Javaｓｃｒｉｐｔ是目前最流行和最重要的Web编程语言。《Javaｓｃｒｉｐｔ详解(第2版)》从Javaｓｃｒｉｐｔ的编程结构开始，循序渐进地讲述了Javaｓｃｒｉｐｔ及相关的...

    JavaScript详解[参照].pdf

    JavaScript详解[参照].pdf

    javascript详解（很详细，很简单）

    javascript详解（很详细，很简单）javascript详解（很详细，很简单）javascript详解（很详细，很简单）javascript详解（很详细，很简单）javascript详解（很详细，很简单）javascript详解（很详细，很简单）...

    JavaScript详解（第2版），完整扫描版

    《JavaScript详解(第2版)》主要内容简介：JavaScript是目前最流行和最重要的Web编程语言。《JavaScript详解(第2版)》从JavaScript的编程结构开始，循序渐进地讲述了JavaScript及相关的CSS、W3C DOM、cookie、正则...

    JavaScript详解,第2版(JavaScript by Example,2nd Edition)

    JavaScript详解,第2版(JavaScript by Example,2nd Edition)。英文清晰PDF版。javascript 是目前最流行和最重要的web 编程语言。本书从javascript 的编程结构开始，循序渐进地讲述了javascript 及相关的css、w3c dom...

    javaScript详解

    javaScript详解

    javascript详解

    javascript详解,入门,

    javascript详解及核心对象

    javascript核心对象用户手册详解哦

    JavaScript详解，适合初学者

    基础入门，从基础知识讲起，逐步深入，帮助读者轻松掌握JavaScript；边学边练，依托网页实际开发，深入讲解JavaScript在网页中的各种应用；实例讲解，通过实例详细讲解每个知识点的实际应用。 本书共分为12章，分别...

    JavaScript详解(第2版)

    第1章　JavaScript简介　1 1.1　JavaScript是什么　1 1.2　JavaScript不是什么　2 1.3　JavaScript的用处　3 1.4　JavaScript及其在Web页面中的位置　3 1.5　Ajax是什么　5 1.6　JavaScript是什么样子的　6 1.7　...

    JavaScript详解.doc

    JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。 特点： 1. 交互性（它可以做的就是信息的动态交互） 2. 安全性（不允许直接访问本地硬盘） 3. 跨平台性（只要是可以解释Js的浏览器都可以执行，和...

    Javascript详解

    女里成为JAVAscript高手吧，一定要女里啊，详细介绍了你需要女里的各种技巧！

Magicbox
Global site tag (gtag.js) - Google Analytics