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()这个方法。

如：

with(document.getElementById("userform")){

action="user_maint.jsp";

method="post";

submit();

}
  • JavaScript实现表单验证

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

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

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

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

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

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

function test()

       {

           var temp = document.getElementById("text1");

          //对电子邮件的验证

           var myreg =/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;

           if(!myreg.test(temp.value))

          {

                 alert('提示\n\n请输入有效的E_mail！');

                myreg.focus();

               return false;

          }

       }

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

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

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

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

<html>

<body>

<scripttypescripttype="text/javascript">

varbrowser=navigator.appName

varb_version=navigator.appVersion

varversion=parseFloat(b_version)  

document.write("Browsername: "+ browser)

document.write("<br/>")

document.write("Browserversion: "+ version)

</script>

</body>  

</html>

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

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

functionsetCookie(c_name,value,expiredays)

{

varexdate=new Date()

exdate.setDate(exdate.getDate()+expiredays)

document.cookie=c_name+"=" +escape(value)+

((expiredays==null)? "" : ";expires="+exdate.toGMTString())

}

其次：创建另一个函数来检查是否已设置cookie：

functiongetCookie(c_name)

{

if(document.cookie.length>0)

  {

  c_start=document.cookie.indexOf(c_name +"=")

  if (c_start!=-1)

    {

    c_start=c_start + c_name.length+1

   c_end=document.cookie.indexOf(";",c_start)

    if (c_end==-1) c_end=document.cookie.length

    returnunescape(document.cookie.substring(c_start,c_end))

    }

  }

return""

}

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

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

JavaScript详解的更多相关文章

  1. Day03 javascript详解

    day03 js 详解 JavaScript的基础 JavaScript的变量 JavaScript的数据类型 JavaScript的语句 JavaScript的数组 JavaScript的函数 Ja ...

  2. Unicode与JavaScript详解

    本文为转载内容 一.Unicode是什么? Unicode源于一个很简单的想法:将全世界所有的字符包含在一个集合里,计算机只要支持这一个字符集,就能显示所有的字符,再也不会有乱码了. 它从0开始,为每 ...

  3. javascript 详解数组

      概念 数组创建 数组读写 数组 VS. 一般对象 相同点 不同点 稀疏数组 数组的length属性 元素增删 数组迭代 二维数组 数组方法 Array.prototype.join Array.p ...

  4. 【原创教程】JavaScript详解之语法和对象

    JavaScript的好的想法:函数.弱类型.动态对象和一个富有表现力的对象字面量表示法. JavaScript的坏的想法:基于全局变量的编程模型.   好了,不管他是好的还是坏的,都是我的最爱,下面 ...

  5. Unicode与JavaScript详解 [很好的文章转]

    上个月,我做了一次分享,详细介绍了Unicode字符集,以及JavaScript语言对它的支持.下面就是这次分享的讲稿. 一.Unicode是什么? Unicode源于一个很简单的想法:将全世界所有的 ...

  6. Web前端之Javascript详解20180330

    一.javascript概述 javascript是基于对象和事件的脚本语言. 特点: 1.安全性(不允许直接访问本地硬盘(因为是被远程的浏览器解释)),它可以做的就是信息的动态交互 2.跨平台性(只 ...

  7. JavaScript: 详解正则表达式之三

    在上两篇文章中博主介绍了JavaScript中的正则常用方法和正则修饰符,今天准备聊一聊元字符和高级匹配的相关内容. 首先说说元字符,想必大家也都比较熟悉了,JS中的元字符有以下几种: / \ | . ...

  8. JavaScript: 详解正则表达式之一

    正则表达式是一个精巧的利器,经常用来在字符串中查找和替换,JavaScript语言参照Perl,也提供了正则表达式相关模块,开发当中非常实用,在一些类库或是框架中,比如jQuery,就存在大量的正则表 ...

  9. javascript详解1

    推荐学习链接: https://book.apeland.cn/details/356/ http://es6.ruanyifeng.com/#README https://developer.moz ...

随机推荐

  1. .NET 同步与异步之锁（Lock、Monitor）（七）

    本随笔续接:.NET同步与异步之相关背景知识(六) 在上一篇随笔中已经提到.解决竞争条件的典型方式就是加锁 ,那本篇随笔就重点来说一说.NET提供的最常用的锁 lock关键字 和 Monitor. 一 ...

  2. 【Excel】获取网页标题的VBA

    在宏录制,完成后可以直接在网格上调用Title(网址).但好些会访问不了,原因不明. Function Title(ByVal url As String) As StringOn Error Res ...

  3. overflow属性及其在ios下卡顿问题解决

    overflow属性:http://www.w3school.com.cn/cssref/pr_pos_overflow.asp overflow:scroll/auto;在手机页面滑动不流畅问题: ...

  4. dev gridcontrol把event事件转换成命令

    可以通过继承gridcontrol的形式来实现 定义DataGridDoubleClickCommand依赖属性 class MyGridControl : GridControl    {      ...

  5. vue-router之router-link

    <router-link> 组件支持用户在具有路由功能的应用中(点击)导航. 通过 to 属性指定目标地址,默认渲染成带有正确链接的 <a> 标签,可以通过配置 tag 属性生 ...

  6. Ubuntu中Qt+opencv图像显示

    先抛出一个疑问,知道的希望留言解答下 (创建Application->Qt Console Application,代码与下面2.3一样,运行有时会显示图片,但大多数不显示,为什么?) 1.打开 ...

  7. HttpURLConnection传JSON数据

    try { //创建连接 URL url = new URL(url); HttpURLConnection connection = (HttpURLConnection) url.openConn ...

  8. const 修饰成员函数体

    经过const修饰的变量表示不能被修改这个容易理解,例如 const int kInt = 0; // kInt 不能再被赋予其他值 const int getValue(const char *ke ...

  9. centos 6.5 安装openssl

    1.下载wget https://www.openssl.org/source/openssl-1.0.2h.tar.gz 2.解压tar zxf openssl-1.0.2h.tar.gzcd op ...

  10. XTU 1252 Defense Tower

    $2016$长城信息杯中国大学生程序设计竞赛中南邀请赛$J$题 贪心. 优先删除$power$大的点. #pragma comment(linker, "/STACK:1024000000, ...