在HTML中使用JavaScript的两种方法


Posted in Javascript onDecember 24, 2020

在HTML中使用HTML需要借助<scirpt>标签,使用<script>标签的方式有两种:一种是直接在<script>标签中嵌入JavaScript代码,另一种是用<script>的src属性引入外部JavaScript文件。

直接在页面嵌入JavaScript代码

在使用<script>标签嵌入JavaScript代码时,只需为<script>指定type属性。然后,像下面这样把JavaScript代码直接放在标签内部即可:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script type="text/javascript">
    var word = "Hello, itbsl";
    alert(word);
  </script>
</head>
<body>
</body>
</html>

在HTML中使用JavaScript的两种方法

<script>的type属性可以不要,这是因为当初标准的制定者认为标签内嵌入还可能会嵌入其他语言,需要用type来指定标签内的语言,但是发展到至今大家已经知道,这里只会嵌入JavaScript,目前所有浏览器的默认值就是text/javascript。

HTML文件内可以嵌入任意多个script标签。

引入外部JavaScript文件

如果要通过<script>标签包含外部JavaScript文件,那么src属性是必须的。这个属性的值是一个指向外部JavaScript文件的链接,例如:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

  <script type="text/javascript" src="./js/example.js"></script>

</head>
<body>
</body>
</html>

在HTML中使用JavaScript的两种方法

注意:带有src属性的<script>标签不应该在其<script>和</script>标签之间再嵌入任何JavaScript代码。如果嵌入了额外的JavaScript代码,则只会下载并执行src引入的外部脚本文件,嵌入的代码会被忽略。

在HTML中使用JavaScript的两种方法

以上就是在HTML中使用JavaScript的两种方法的详细内容,更多关于HTML中使用JavaScript的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
获取当前网页document.url location.href区别总结
May 10 Javascript
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
vue项目中openlayers绘制行政区划
Dec 24 #Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 #Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 #Vue.js
vue绑定class的三种方法
Dec 24 #Vue.js
全面解析Vue中的$nextTick
Dec 24 #Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 #Vue.js
js实现随机点名功能
Dec 23 #Javascript
You might like
PHP数字格式化
2006/12/06 PHP
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
用YUI做了个标签浏览效果
2007/02/20 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
python实现dict版图遍历示例
2014/02/19 Python
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
迪奥官网:Dior.com
2018/12/04 全球购物
文艺晚会主持词
2014/03/24 职场文书
《长征》教学反思
2014/04/27 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
自主招生自荐信范文
2015/03/04 职场文书
车间质检员岗位职责
2015/04/08 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
合作合同协议书
2016/03/21 职场文书