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

简介: Html5 页面中 JavaScript 启动调用的三种方法比较太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)本文遵循“署名-非商业用途-保持一致”创作公用协议转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。

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="xxx.js"></script> 引入同路径下的 xxx.js 文件中的 JavaScript 代码;

	<script src="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="../Styles/Site.css" rel="stylesheet" type="text/css" />
</head>

2、内部样式表

<head>
    <title>page标题</title>
    <style type="text/css">
        input{background-color:Green }
    </style>
</head>

3、内联样式

<input type="text" style="background-color:Blue;" value="input1"/>


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


最后,切入主题,页面加载初始调用 JavaScript 代码的三种方式:

1、body 的 onload 事件触发回调 JavaScript 函数;

	<body onload="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 也会少很多;

但无论怎样,在你的头脑里,还是需要一点点去塞满,

并不代表,这个领域有多少,你就有多少,

也不代表,你一下子就能把这个领域成熟的东西就全能掌握,

那是需要不断理解、实践,总结、升华,以便再进一步获取更深层次理解的过程,

唐僧取到的经书,如果不被水泡了,可能我们真的就能去掉这个理解的过程了,

悟性确实是可以很高的,这个高真能达到不需要理解的过程?!

。。。。。。


目录
相关文章
|
11天前
|
Web App开发 数据采集 移动开发
提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
在Selenium中优化Chrome的HTML5视频捕获涉及更新Chrome和ChromeDriver、配置浏览器选项、使用代理IP、调整加载策略及确保安装了正确编解码器。例如,更新驱动程序,添加如`--autoplay-policy`和`--proxy-server`的命令行参数,使用代理以防止被封,设置页面加载策略为&#39;eager&#39;,并安装必要的编解码器来确保视频播放。代码示例展示了如何集成这些优化措施。
提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
|
11天前
|
JavaScript
JS代码动态打印404页面源码
源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
12 0
JS代码动态打印404页面源码
|
15天前
|
JavaScript API
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
27 1
|
17天前
|
JavaScript 前端开发
JavaScript中exec()方法详解
在这个示例中,exec()方法会找到两个匹配项,并打印出它们在字符串中的位置。
11 1
|
11天前
|
测试技术 UED
断网之后的页面,Autox.js是点击还是上下滑动比较好?
断网之后的页面,Autox.js是点击还是上下滑动比较好?
|
11天前
|
测试技术 API Android开发
autox.js如何监听异常情况,比如网络中断、内存慢、应用死机或者页面无响应
autox.js如何监听异常情况,比如网络中断、内存慢、应用死机或者页面无响应
|
15天前
|
编解码
WordPress页面文件添加html后缀名
wordpress 页面默认不能实现伪静态链接,手动在链接中添加 “.html” ,会自动转码为 “-html” ,但万能的 WordPress,你能想到的功能都会有相应的插件帮你实现。
11 0
|
17天前
|
JavaScript
JS数组操作---删除,arr.pop()方法从数组中删除最后一个元素,并返回该元素的值,arr.shift() 删除第一个值,arr.splice()方法,删除指定元素,arr.splice,从第一
JS数组操作---删除,arr.pop()方法从数组中删除最后一个元素,并返回该元素的值,arr.shift() 删除第一个值,arr.splice()方法,删除指定元素,arr.splice,从第一
|
17天前
|
JavaScript
Js,定义数组的方法,let 数组名 = [数据1,数据2,........,数据n],取值方法,数组名[x],arr[0],let sum sum = sum + arr[0],求和的写法,平均值
Js,定义数组的方法,let 数组名 = [数据1,数据2,........,数据n],取值方法,数组名[x],arr[0],let sum sum = sum + arr[0],求和的写法,平均值
|
18天前
|
JavaScript API
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用