首页 > 代码库 > Html5 页面中 JavaScript 启动调用的三种方法比较

Html5 页面中 JavaScript 启动调用的三种方法比较

2024-07-14 13:35:09   222人阅读

Html5 页面中 JavaScript 启动调用的三种方法比较

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句：太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究：iOS、Android、Html5、Arduino、pcDuino，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。



首先，来看一下 Html5 页面引用 JavaScript 代码的几种方式：

1、Html5 页面中使用 <script>  标签容纳 JavaScript 代码；

     <script>
        init();
     </script>
这里不仅可以调用任意位置的函数，而且可以声明变量，构建函数和对象等等。

2、Html5 页面中使用 <script src=http://www.mamicode.com/"xxx.js"></script> 引入同路径下的 xxx.js 文件中的 JavaScript 代码；

	<script src=http://www.mamicode.com/"js/main.js"></script>

注意这里的 main.js 是与当前 Html 页面文件同目录下的 js 子目录中的文件，使用时，确保相对路径正确，当然了，也可以使用绝对路径。


3、Html5 界面元素事件直接赋与一段 JavaScript 代码；

        <input type="button" name="Button" value="Button" onClick="javascript:alert(‘测试‘)">

此处可参考 javascript设置onclick


以下资源可供参考，进一步理解 JavaScritp：
JavaScript的5种调用函数的方法

解读ECMAScript[1]——执行环境、作用域及闭包

解读ECMAScript[2]——函数、构造器及原型

百度百科 javascript



要想真正掌握 JavaScript 语言，那么闭包是必须要深刻理解和领悟的核心。


顺便，记录一下引用 CSS 的几种方式：

1、外部样式表

css 样式存于一个 .css 扩展名的文件中，引用方式：

<head>
    <link href=http://www.mamicode.com/"../Styles/Site.css" rel="stylesheet" type="text/css" />>
2、内部样式表
<head>
    <title>page标题</title>
    <style type="text/css">
        input{background-color:Green }
    </style>
</head>

3、内联样式
<input type="text" style="background-color:Blue;" value=http://www.mamicode.com/"input1"/>

更详细的 CSS 运用，可参考 CSS 选择器及各样式引用方式介绍 。
 


最后，切入主题，页面加载初始调用 JavaScript 代码的三种方式：
1、body 的 onl oad 事件触发回调 JavaScript 函数；
	<body onl oad="init()">
该事件在 document 文档中的所有内容都加载完成后才会被调用，这种方式显得有点笨拙，但比较把握，确保一切安好，才去调用。
如想避勉过多加载，那么页面设计上可以相对讲究些方法，人为达到滞后加载的效果，就可以给这个事件进行减压，达到尽快执行的目标。
2、document 的 onready 事件触发回调 JavaScript 函数；
    document.onready = init();
该事件在 document 文档中的 dom 模型加载完成就会产生回调，而不考虑引用的图片、脚本等资源。
3、在引入 Html5 页面的 JavaScript 代码中，直接调用 JavaScript 函数或执行 JavaScript 命令；
        <script>
            init();            
        </script>
或在外部 js 脚本中，直接调用 init(); 
init() 可以是 Html5 页面中声明的函数，也可以是外部引用的脚本中的函数。
不过发现一个有趣的问题，当在 init() 函数定义中，通过 
document.getElementById(‘container‘);
获取 container 元素的引用时，如果该 Html5 元素在该段页面内 JavaScript 代码之后时，会获取不到该元素。
这说明一个问题，第三种启动执行方式，是边加载边执行，所以对顺序有要求；


每时每刻，都有老人变新人，老手涉猎新事物，变潮人，接触陌生的领域，变新手。
凡事都有这个过程，新领域的成熟与否，其实你与无太大关系，你还是一样的新；
但这个领域的成熟，标志着，有这么多别人分享的东西，可供参考，内在的 bug 也会少很多；
但无论怎样，在你的头脑里，还是需要一点点去塞满，
并不代表，这个领域有多少，你就有多少，
也不代表，你一下子就能把这个领域成熟的东西就全能掌握，
那是需要不断理解、实践，总结、升华，以便再进一步获取更深层次理解的过程，
唐僧取到的经书，如果不被水泡了，可能我们真的就能去掉这个理解的过程了，
悟性确实是可以很高的，这个高真能达到不需要理解的过程？！
。。。。。。


联系
我们