在HTML中使用JavaScript的两种方法

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

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

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

以上就是在HTML中使用JavaScript的两种方法的详细内容，更多关于HTML中使用JavaScript的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JavaScript实现HTML导航栏下拉菜单

    JavaScript实现HTML导航栏下拉菜单[悬浮显示] 前端界面进行设计时,我们会遇到鼠标悬浮在某选项上,然后就会凭空显示出菜单出来,这种设计的确受到了很多人的青睐.其实纯css也是可以实现的,但是会有一些限制,必须如要显示的菜单需要作为鼠标悬浮元素的子元素,选择器优先级等等.废话不多说,直接看效果! 样式有点丑. 代码实现(JavaScript) 1.获取要悬浮的对象和菜单对象 //获取需要悬浮的对象 let show = document.getElementById("show&quo

  • HTML+JS实现“代码雨”效果源码（黑客帝国文字下落效果）

    我们先看看HTML+JS实现"代码雨"的最终效果 1.绿色: 2.彩色: 3.背景色: 4.绿色逐渐变浅: 源代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Code -by ZhenYu.Sha</title>

  • JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果

    先看看JS+CSS+HTML实现"代码雨"类似黑客帝国文字下落最终效果: HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/ok.css" rel="external nofo

  • 原生js实现html手机端城市列表索引选择城市

    本文实例为大家分享了js实现手机端城市列表索引选择城市的具体代码,供大家参考,具体内容如下 html部分: <div class="cityPage"> <div class="cityContent"> <div class="inputBox"> <input type="text" placeholder="中文 / 拼音首字母" id="findc

  • springboot返回html和jsp的方法示例

    springboot返回html和jsp的方法示例

    一.返回html (1)添加maven依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> (2)thymeleaf模板默认寻找resources下,templates文件夹放html页面,static文件夹放css及js (3)引入

  • js实现html滑动图片拼图验证

    本文实例为大家分享了js实现html滑动图片拼图验证的具体代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

  • JavaScript实现字符串与HTML格式相互转换

    代码:: 1.将字符转换成Html function encodeHtml(str){ var encodedStr = "" ; if (str=="") return encodedStr ; else { for (var i = 0 ; i < str.length ; i ++){ encodedStr += "&#" + str.substring(i, i + 1).charCodeAt().toString(10)

  • 关于IDEA使用jsp可以访问页面转换为html弹出页面为404的问题

    关于IDEA使用jsp可以访问页面转换为html弹出页面为404的问题

    这种办法为绕过controller直接访问静态页面, 大家只要路径对 在springmvc.xml中配置好一个 标签即可. <!--解决拦截器拦截静态资源的请求问题--> <mvc:default-servlet-handler/> 拦截器拦截掉了html页面所以无法访问  <mvc:default-servlet-handler/> 在xml文件中配置<mvc:default-servlet-handler/>,Spring MVC上下文中定义一个org.

  • jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例

    本文实例讲述了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作.分享给大家供大家参考,具体如下: 1.先给json格式的数据: [ {"id":1,"name":"stan"}, {"id":2,"name":"jack"}, {"id":3,"name":"lucy"}, {"id&quo

  • js在HTML的三种引用方式详解

    1.内联样式 内联样式分为两种,一是直接写入元素的标签内部 <html> <title>js样式内联写法</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <body> <!--js内联写法01开始--> <!--当鼠标点击图片时跳出弹窗显示1223--> <div cla

  • visual studio code 编译运行html css js文件的教程

    运行html文件 1.添加插件扩展 2.安装 open in browser 3.在对应的html 文件处右击,选择open in default browser 或者直接 总结 到此这篇关于visual studio code 编译运行html css js文件的教程的文章就介绍到这了,更多相关visual studio code 运行html css js文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

随机推荐