轻松学习JavaScript十九:DOM编程之在HTML文档什么位置编写JS代码

用JS和JQuery实现的效果是一样的。

轻松学习JavaScript十九:DOM编程之在HTML文档什么位置编写JS代码

在学习DOM编程的时候又回过头去看了过去写的JS代码,并没有考虑在什么位置编写JS代码更加符合规范以及

当HTML文档加载完毕后再运行JS代码的问题。在刚接触JS的时候,写过一篇博文:轻松学习JavaScript三:

JavaScript与HTML的结合,只是单纯就HTML与JS的结合说明JS代码放在什么位置,可能一些还是错的,现在开始

在博文中纠错。开始学习DOM编程的时候又遇到了新的问题,那就是HTML文档未加载完毕先执行了JS代码并没有得

到我们想象中的效果。那么我们就来看一下应该放在HTML文档什么位置,又怎样来解决HTML文档加载问题的?

从HTML文档出发,我们可以有以下几种在什么位置编写JS代码:

(1)直接在HTML页面编写JS代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>JS代码位置</title>  
</head>  

<body>  
<button id="button" onclick="alert('Hello world!')">点击我</button>  
</body>  
</html>  

运行的结果:

图片 1

缺点:1)JS和HTML强耦合,不利于代码的维护。

2)若onlick响应事件函数是比较复杂的,则需要先定义一个函数,然后再在onlick属性中完成对函数的引

用,比较麻烦。这样不利于代码的整洁程度,难以要实现JS和HTML以及CSS代码的分离。

(2)在body标签之前编写JS代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>JS代码位置</title>  
<script type="text/javascript">  
//获取button元素节点  
var btns=document.getElementById("btn");  
//为button添加响应时间函数  
btns.onclick=function(){  
   alert("Hello world!");  
}  
</script>  
</head>  

<body>  
<button id="btn">点击我</button>     
</body>  
</html>  

运行的结果是不符合我们所想要看到的:

图片 2

运行结果是不会弹出Hello
world!的警告框。那么是什么原因造成的呢?浏览器在加载HTML文档的时候回从上到

下依次进行解析,由于script标签内的JS代码先加载,body标签的内容后加载,在加载JS的代码的时候并没有button

标签,因此当整个HTML文档加载完毕后,并没有出现想要的结果。一般地,我们不能在body节点之前来直接获取

body内的节点,因为此时HTML文档树还没有加载完成,获取不到指定的节点。为了解决这个顺序的问题,我们可以

放在body标签之后,也就是下面的第三种。

(3)在body标签之后编写JS代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>JS代码位置</title>  
</head>  

<body>  
<button id="btn">点击我</button>     
</body>  
</html>  
<script type="text/javascript">  
//获取button元素节点  
var btns=document.getElementById("btn");  
//为button添加响应时间函数  
btns.onclick=function(){  
   alert("Hello world!");  
}  
</script>  

运行结果:

图片 3

在整个HTML文档被加载完毕后,JS代码获取了其中的节点,因此出现了相应的结果。但是把script标签放在

HTML文档的最后,这并不符合JS代码习惯规范,通常我们会把JS代码还是放在body标签之前,也就是放在head标

签中,一般放在title标签之后。

在说第四种情况之前我么先来一个做一个小的测试:

<script type=”text/javascript”> alert(“1”);
window.onload=function(){ alert(“4”); } </script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>无标题文档</title>  
<script type="text/javascript">  
alert("1");  
window.onload=function(){  
     alert("4");  
}  
</script>  
</head>  

<body>  
<button onclick="alert('2')">点击我</button>  
</body>  
</html>  
<script type="text/javascript">  
alert("3");  
</script>  

经过上面代码的测试,运行的结果是符合HTML文档加载的规则的,警告框出现的次序也是我们在代码中标注的

顺序。我们可以得出结论:window.onload事件是在整个HTML文档被完全加载后再执行的,所以在其中可以获取到

HTML文档的任何元素。

(4)利用window.onload事件将JS代码放在body标签之前

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>JS代码位置</title>  
<script type="text/javascript">  
//window.onload事件是在整个HTML文档加载完毕后才执行的  
window.onload=function(){  
     //获取button元素节点  
     var btns=document.getElementById("btn");  
     //为button添加响应时间函数  
     btns.onclick=function(){  
          alert("Hello world!");  
     }  
}  
</script>  
</head>  

<body>  
<button id="btn">点击我</button>     
</body>  
</html>  

 

运行的结果:

图片 4

一般地,在body节点之前编写JS代码,但需要利用window.onload事件,该事件在当前文档完全加载完毕之后被

触发,所以其中的代码可以获取到当前文档的任何节点。
因此推荐使用的就是最后一种,代码习惯规范我们是必须遵

守的,这样有利于代码的维护和整洁程度。当然了,如果JS代码很多的话,我们总是将JS代码放在JS文件里,然后

利用script标签引入JS文件,这在前面已经说过了。

每次学习的深入都是前面所学知识的加深,也是在自我查错,看了自己以前写的JS代码,真是一塌糊涂,整个

HTML文档每个位置都有JS代码,这就降低了可维护性,要是代码量很多的话,很难维护。因此,从今天起要重新审

视过去写JS代码的行为,翻开前面的博文去改正,也算是加深理解和为了养成习惯吧。后面的DOM编程学习更是要

严谨和规范,要不出现错误了,自己都不知道。

在学习DOM编程的时候又回过头去看了过去写的JS代码,并没有考虑在什么位置…

引用来自:http://blog.csdn.net/carson_ho/article/details/64904691

HTML代码

<legend> 请填写注册信息</legend> <form action="index.html" method="post"> <table style="text-align: right;"> <tr> <td>用户名:</td> <td><input type="text" name="userName" placeholder="由英文字母和数字组成的4-16位字符,以字母开头"> </td> </tr> <tr> <td>昵称:</td> <td><input type="text" name="nickName" placeholder="由2-6个汉字组成"> </td> </tr> <tr> <td>邮箱:</td> <td><input type="text" name="email" placeholder="邮箱账号@域名。如good@tom.com、whj@sina.com.cn"> </td> </tr> <tr> <td>密码:</td> <td><input type="password" name="pwd" placeholder="由英文字母和数字组成的4-10位字符"> </td> </tr> <tr> <td>确认密码:</td> <td><input type="password" name="pwd2" placeholder="确认密码"> </td> </tr> <tr> <td>手机号码:</td> <td><input type="text" name="phone" placeholder="手机号由11位数字组成,且以13,15,18开头"> </td> </tr> <tr> <td>出生日期:</td> <td><input type="text" name="date" placeholder="出生日期在1990-2009之间"> </tr> <tr> <td colspan="2" align="left"><input type="button" name="submit" value="提交"></td> </tr> </table> </form></fieldset>

前言

现在很多App里都内置了Web网页(Hyprid
App),比如说很多电商平台,淘宝、京东、聚划算等等,如下图

图片 5

image.png

上述功能是由Android的WebView实现的,其中涉及到Android客户端与Web网页交互的实现
今天我将全面介绍Android通过WebView与JS交互的全面方式

CSS样式

 body { text-align: center; padding: 0; margin: 0; } fieldset { width: 800px; } table tr td ~ td { text-align: left; width: 600px; }

目录

图片 6

目录


JS代码

//验证用户名function check_userName() { var userName = document.getElementById.value; var regName = /[a-zA-Z]w{4,16}/ if (userName == "" || userName.trim { document.getElementById("err_name").innerHTML = "请输入用户名"; return false; } else if (!regName.test) { document.getElementById("err_name").innerHTML = "由英文字母和数字组成的4-16位字符,以字母开头"; return false; } else { document.getElementById("err_name").innerHTML = "ok!!!"; return true; }}//验证昵称function check_nickName() { var nickName = document.getElementById.value; var regName = /[u4e00-u9fa5]{2,6}/ if (nickName == "" || nickName.trim { document.getElementById("err_nick").innerHTML = "请输入昵称"; return false; } else if (!regName.test) { document.getElementById("err_nick").innerHTML = "由2-6个汉字组成"; return false; } else { document.getElementById("err_nick").innerHTML = "ok!!!"; return true; }}//验证邮箱function check_email() { var email = document.getElementById.value; var regEmail = /^w+@w+$/; if (email == "" || email.trim { document.getElementById("err_email").innerHTML = "请输入邮箱"; return false; } else if (!regEmail.test { document.getElementById("err_email").innerHTML = "邮箱账号@域名。如good@tom.com、whj@sina.com.cn"; return false; } else { document.getElementById("err_email").innerHTML = "ok!!!"; return true; }}//验证密码function check_pwd() { var pwd = document.getElementById.value; var regPwd = /^w{4,10}$/; if (pwd == "" || pwd.trim { document.getElementById("err_pwd").innerHTML = "请输入密码"; return false; } else if (!regPwd.test { document.getElementById("err_pwd").innerHTML = "格式错误"; return false; } else { document.getElementById("err_pwd").innerHTML = "ok!!!"; return true; }}//确认密码function check_pwd2() { var pwd = document.getElementById.value; var pwd2 = document.getElementById.value; if (pwd2 == "" || pwd2.trim { document.getElementById("err_pwd2").innerHTML = "请输入密码"; return false; } else if (!pwd2.equals { document.getElementById("err_pwd2").innerHTML = "两次输入密码不一致"; return false; } else { document.getElementById("err_pwd2").innerHTML = "ok!!!"; return true; }}//验证手机号function check_phone() { var phone = document.getElementById.value; var regPhone = /[13,15,18]d{9}/; if (phone == "" || phone.trim { document.getElementById("err_phone").innerHTML = "请输入手机号"; return false; } else if (!regPhone.test { document.getElementById("err_phone").innerHTML = "手机号由11位数字组成,且以13,15,18开头"; return false; } else { document.getElementById("err_phone").innerHTML = "ok!!!"; return true; }}//验证时间function check_date() { var birthday = document.getElementById("birthday").value; var regDate = /[13,15,18]d{9}/; if (birthday == "" || birthday.trim { document.getElementById("err_date").innerHTML = "请输入日期"; return false; } else if (!regDate.test) { document.getElementById("err_date").innerHTML = "出生日期在1990-2009之间"; return false; } else { document.getElementById("err_date").innerHTML = "ok!!!"; return true; }}

1. 交互方式总结

Android与JS通过WebView互相调用方法,实际上是:

  • Android去调用JS的代码
  • JS去调用Android的代码

二者沟通的桥梁是WebView

对于Android调用JS代码的方法有2种:

  1. 通过WebViewloadUrl()
  2. 通过WebViewevaluateJavascript()

对于JS调用Android代码的方法有3种:

  1. 通过WebViewaddJavascriptInterface()进行对象映射
  2. 通过 WebViewClientshouldOverrideUrlLoading ()方法回调拦截
    url
  3. 通过 WebChromeClient
    onJsAlert()onJsConfirm()onJsPrompt()方法回调拦截JS对话框alert()confirm()prompt()
    消息

Jquery代码

 $(function () { var errMsg; $.each($, function  { $.blur(function () { if .attr == "userName") { $(".nameMsg").remove(); var userName = val.value; var regName = /[a-zA-Z]w{4,16}/ if (userName == "" || userName.trim { errMsg = "用户名不能为空"; } else if (!regName.test) { errMsg = "由英文字母和数字组成的4-16位字符,以字母开头"; } else { errMsg = "OK!"; } $.parent().append; } else if .attr == "nickName") { $(".nickMsg").remove(); var nickName = val.value; var regName = /[u4e00-u9fa5]{2,6}/ if (nickName == "" || nickName.trim { errMsg = "昵称不能为空"; } else if (!regName.test) { errMsg = "由2-6个汉字组成"; } else { errMsg = "OK!"; } $.parent().append; } else if .attr == "email") { $(".emailMsg").remove(); var email = val.value; var regEmail = /^w+@w+$/; if (email == "" || email.trim { errMsg = "邮箱不能为空"; } else if (!regEmail.test { errMsg = "邮箱账号@域名。如good@tom.com、whj@sina.com.cn"; } else { errMsg = "OK!"; } $.parent().append; } else if .attr == "pwd") { $(".pwdMsg").remove(); var pwd = val.value; var regPwd = /^w{4,10}$/; if (pwd == "" || pwd.trim { errMsg = "密码不能为空"; } else if (!regPwd.test { errMsg = "格式错误"; } else { errMsg = "OK!"; } $.parent().append; } else if .attr == "pwd2") { $(".pwd2Msg").remove(); var pwd2 = val.value; var pwd = $[3].value; if (pwd2 == "" || pwd2.trim() == "" || !pwd2.equals { errMsg = "两次输入密码不一致"; } else { errMsg = "OK!"; } $.parent().append; } else if .attr == "phone") { $(".phoneMsg").remove(); var phone = val.value; var regPhone = /[13,15,18]d{9}/; if (phone == "" || phone.trim { errMsg = " 手机号不能为空 < /span>" } else if (!regPhone.test { errMsg = " 格式错误 < /span>" } else { errMsg = " OK! < /span>" } $.parent().append; } else if .attr == "date") { $(".dateMsg").remove(); var birthday = val.value; var regDate = /(199d|200d)[-/](0d|1[0-2])[-/](0d|[1-2]d|30|31)/; if (birthday == "" || birthday.trim { errMsg = "请输入生日"; } else if (!regDate.test) { errMsg = "格式错误"; } else { errMsg = "OK!"; } $.parent().append; } }); }); });

2. 具体分析

2.1 Android通过WebView调用 JS 代码

对于Android调用JS代码的方法有2种:

  1. 通过WebViewloadUrl()
  2. 通过WebViewevaluateJavascript()

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website