1、在语法上,<script>标签可以写在<html></html>标签的任何位置,type类型是必须的,用来规定脚本的MIME类型,对于javascript其MIME类型是“test/javascript”,language属性不建议使用。
<script type="text/javascript"> //借助window.onload事件,在文档加载之后进行相关操作 window.onload=function(){ //获取按钮对应的元素节点对象 var btn=document.getElementByTagName("button")[0]; //绑定单击响应函数 btn.onClick=function(){ //打印文本值 alert(this.firstChild.nodeValue); } }
2、在文档中直接插入javascript代码。
<script type="text/javascript">
alert("Hello World!");
</script>
3、连接到外部的javascript文件<script>标签的src属性,规定外部脚本文件的URl
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
4、function sum(num01,num02){ //function是关键字,sum函数名同时也是函数,num01,num02是参数,不需要指定类型
return num01+num02;
}
var result=sum(2,3);//函数的掉用
var obj=new Object();
obj.method=sum;
alert(obj.method(2,3));
5、JavaScript 代码写在什么位置
-------------如果想写在html内
<button onclick="alert('hello')">ClickMe</button>
js和html强耦合不利于代码的维护。例如10个button标签处都修改
-------------如果写在<head> 标签内
这个位置更符合习惯,但有严重问题: 在 body 节点之前执行的代码无法直接获取 body 内的节点。 原因:此时 html 文档树还没有加载完成, 更准确的说就是——内存中的 DOM 结构还不完整,不包括未加载的 DOM 节点,所以相关节点 JavaScript 程序获取不到
6、浏览器加载原理分析
浏览器按照从上到下的顺序下载 HTML 文档,一边下载,一边加载到内存, 不是全部下载后再全部加载到内存。 另外,DOM 树结构的绘制优先于关联元素的加载,比如图片。浏览器执行 JavaScript 脚本有两大特性载入后马上执行、执行时会阻塞页面后续内容(包括页面的渲染、其它资源的下载)浏览器加载 HTML 文档时,如果遇到<script>标签就会停止后面元素的加载, 先对 JavaScript 脚本文件进行解析和执行。
7、widow.onload事件是在当前文档完全加载完后被触发,此时HTML文档树已经加载完成,可以获取到当前文档中的任何节点。最终的执行顺序为:
1st 浏览器加载HTML文档
2nd 遇到<script>标签停止加载后面的HTML元素,开始解析执行JavaScript 代码
3rd 将封装了相关操作的响应函数绑定到window.onload 事件上
4th 加载HTML元素,绘制DOM 结构
5th HTML文档加载完成,触发window.onload 事件
6th 开始执行window.onload事件响应函数中的JavaScript代码