在HTML文档中嵌入JavaScript的四种方法


Posted in Javascript onMay 07, 2018

在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>

上文所表述的全部内容是HTML文档中嵌入JavaScript的四种方法,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery 选项卡效果 新手代码
Jul 08 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
瀑布流布局代码一例
Apr 11 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
简单的jQuery入门指引
Jul 28 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
详解JavaScript的BUG和错误
May 07 #Javascript
vue实现个人信息查看和密码修改功能
May 06 #Javascript
基于vue-element组件实现音乐播放器功能
May 06 #Javascript
VueJs组件之父子通讯的方式
May 06 #Javascript
vue自动化表单实例分析
May 06 #Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 #Javascript
JS中this的指向以及call、apply的作用
May 06 #Javascript
You might like
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
php封装的smarty类完整实例
2016/10/19 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
python实现进程间通信简单实例
2014/07/23 Python
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
利用python发送和接收邮件
2016/09/27 Python
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
Python输出由1,2,3,4组成的互不相同且无重复的三位数
2018/02/01 Python
python模块smtplib学习
2018/05/22 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
python实现简单多人聊天室
2018/12/11 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
大学生入党自我鉴定
2013/10/31 职场文书
房屋改造计划书
2014/01/10 职场文书
合作意向书
2014/07/30 职场文书
普通党员对照检查材料
2014/09/24 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
归途列车观后感
2015/06/17 职场文书
提档介绍信范文
2015/10/22 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL