• 技术文章 >web前端 >js教程

    HTML文档内嵌入JS方法汇总

    php中世界最好的语言php中世界最好的语言2018-05-31 10:32:50原创1307

    这次给大家带来HTML文档内嵌入JS方法汇总,HTML文档内嵌入JS的注意事项有哪些,下面就是实战案例,一起来看一下。

    在HTML里嵌入JavaScript

    在HTML文档里嵌入客户端JavaScript代码有4中方法:

    1.内嵌,放置在<script>和</script>标签之间 (少);

    2.放置在有<script>标签的src属性指定的外部文件中 (多);

    3.放置自HTML事件处理程序中,该事件处理程序由onclick或onmouseover这样的HTML属性值指定它 (很少);

    4.放在一个URL里,这个URL使用特殊的协议”javascript“协议 (很少);

    0——附:脚本类型

    JavaScript是Web的原始脚本语言,在默认情况下,<script>元素包含或引用JavaScript代码。如果要使用不标准的脚本语言,如VBScript,就必须用type属性指定脚本的MIME类型,例如:

    <script type="text/vbscript"> 
     ... ... 
    </script>

    type 属性的默认值是 ”text/javascript“。

    1——内嵌<script>元素

    例如:

     <script> 
     function displayTime(){ 
     ... ... 
     } 
     window.onload = displayTime; 
    </script>

    2——src属性使用外部文件中的脚本

    <script>标签支持src属性,这个属性指定包含JavaScript代码的文件的URL。它的用法如下:

    复制代码 代码如下:

    <script src="../../scripts/util.js"></script>

    使用src属性时,<script></script>标签之间的任何内容都会被忽略。

    当在页面中用src属性包含一个脚本时,就给了脚本坐着完全控制Web页面的权限。

    3——HTML中的事件处理程序

    当脚本所在的HTML文件被载入浏览器时,这个脚本里的JavaScript代码只会执行一次。JavaScript代码可以通过把函数赋值给Element对象的属性来注册事件处理程序。这个Element对象表示文档里的一个HTML元素。

    例如:

    复制代码 代码如下:

    <input type="checkbox" name="options" value="giftwrap" onchange="order.options.giftwrap = this.checked;">

    HTML中定义的事件处理程序的属性可以包含任意条JavaScript语句,相互之间用逗号分隔。这些语句组成一个函数体,然后这个函数成为对应事件处理程序属性的值。

    4——URL中JavaScript

    在URL后面跟着一个javascript:协议限定符,是另一种嵌入JavaScript代码到客户端的方式。这种特殊的协议类型指定URL内容为任意字符串,这个字符串是会被JavaScript解释器运行的JavaScript代码。它被当作单独的一行代码对待,这意味着语句之间必须用分号隔开,而注释必须用/**/注释代替。javascript:URL能识别的资源是转换成字符串的执行代码的返回值。如果代码返回 undefined,那么这个资源是没有内容的。

    javascript:URL可以在可以使用常规URL的任意地方:比如<a>标记的href属性,<form>的action属性,甚至window.open()方法的参数。

    超链接里的JavaScript URL可以是这样:

    <a href="javascript:new Date().toLocaleTimeString();" rel="external nofollow" > 
    What time is it? 
    </a>

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    怎样使用Vue实现树形视图数据

    怎样使用V-Distpicker组件

    以上就是HTML文档内嵌入JS方法汇总的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript HTML 汇总
    上一篇:Javascript 编码约定(编码规范) 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 一文聊聊Angular中的依赖注入• react native路由跳转怎么实现• Node实战学习:浏览器预览项目所有图片• 一起聊聊var、let以及const的区别(代码示例)• 深入详解React中的ref
    1/1

    PHP中文网