在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 相关文章推荐
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 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” 彩蛋进行敏感信息获取
2013/08/07 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
jQuery 动画基础教程
2008/12/25 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
python练习程序批量修改文件名
2014/01/16 Python
Python实现登录接口的示例代码
2017/07/21 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
在django模板中实现超链接配置
2019/08/21 Python
python小白学习包管理器pip安装
2020/06/09 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
美国休闲服装品牌:Express
2016/09/24 全球购物
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
加强作风建设工作总结
2014/10/23 职场文书
企业战略合作意向书
2015/05/08 职场文书
尼克胡哲观后感
2015/06/08 职场文书
工作感想范文
2015/08/07 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android