这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这个问题一直是初学者的困惑。先明白 js 能放在 html 的那个位置,分别是 head 和 body 中。大部分人都是放到 head 里面的。我学的时候也是稀里糊涂的跟着放到 head 的里面,也不知道为什么?今天看说说,放到这两个地方的区别:
先明白 js 能放在 HTML 的那个位置,分别是 head 和 body 中。大部分人都是放到 head 里面的。下面为大家介绍下放到这两个地方的区别
先看一段 html 代码:
- <html>
- <head>
- <title>
- New Document
- </title>
- <meta http-equiv="content-type" content="text/html;charset=utf-8">
- <script type="text/javascript" src="test.js">
- </script>
- </head>
- <body>
- <div id="target">
- </div>
- <button id="btn">
- 按钮
- </button>
- </body>
- </html>
- var test = function(){
- var span = document.createElement("span");
- span.innerHTML="添加";
- document.getElementById("target").appendChild(span);
- }
- document.getElementById("btn").onclick=test;
如果这段代码放到 head 里面就不能运行。为什么? 这就要说一下 HTML 的运行顺序了,应该确切点说不是 HTML 的运行顺序,是 js 的运行顺序。HTML 从上运行到
的时候进入 test.js 文件。前面的不会运行,也就是被 function 包起来的不会被运行,这个时候就执行最后一句。去页面中取元素 Id 为 btn 的元素。但是这个时候,HTML 页面并没有加载完。肯定取不到 id 为 btn 的元素。会报错。这个时候有人说可以改为下面的代码:
- document.body.onload = function(){
- document.getElementById("btn").onclick=test;
- };
但是这样写还不如,写到的前面呢。 有没有注意到,上面的 [document.getElementById("btn").onclick=test;] 中 test 没有括号,那如果改成[test()]. 会怎么样呢
结果如图,页面载入就是是这个样子,点击按钮没有反应。将 js 代码改成如下:
- var test=function(){
- var span = document.createElement("span");
- span.innerHTML="添加";
- document.getElementById("target").appendChild(span);
- return function(){
- alert("aaaa");
- };
- }
- document.getElementById("btn").onclick=test();
页面载入的时候,还是和上面一个样子,当点击按钮的时候,有反应了弹出一个框内容是 "aaaa"; 说明点击的时候执行了函数中 return 的值。也就是加括号的时候,不触发事件也会执行函数。触发事件的时候执行函数的返回值。不加括号的时候,触发事件才执行函数。
html 的事件触发器,内容能写什么?• 比如 onclick=""; 双引号里面能写什么。一般看到的可以写函数,比如,onclick="test();"。除了这个还能写什么呢? 好有这个分号能不写吗? • 看上面的 js 代码,每一行都有分号。分号的作用就是为了语句被混淆。那也就是说 onclick 里面可以写 js 代码。写一个试试,如下
- <html>
- <head>
- <title>
- New Document
- </title>
- <meta http-equiv="content-type" content="text/html;charset=utf-8">
- </head>
- <body>
- <div id="target">
- </div>
- <button id="btn" onclick="var espan = document.createElement('span');espan.innerHTML='添加';document.getElementById('target').appendChild(espan);">
- 按钮
- </button>
- </body>
- </html>
• 运行结果如下:
• 说明是可以运行的。这说明,不止可以放函数名了。 事件绑定方式? • 事件绑定方式常用有两种一是前面介绍的在事件中加入 js 代码。如:onclick="test();"。这种绑定方式有缺点,就是你要修改,美工已经写好的代码。 • 还有一种方式就是我开始代码写的那样,通过 id,只需要美工将每个元素都加上 id 就行。并不需要修改 HTML 代码。
来源: http://www.phperz.com/article/17/0626/279334.html