三、JavaScript——编写位置

最新推荐文章于 2024-09-08 22:25:25 发布
最新推荐文章于 2024-09-08 22:25:25 发布
阅读量1.4k 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z972065491/article/details/128300956
版权

1.在script标签内编写

  • JS的代码一般可以写到script标签中，
  • script标签的完整写法是要加type="text/javascript",但这个一般可以省略，所以只用<script>即可
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>

    <!-- 将JS写到网页内部的script标签中   -->
    <!-- script标签的完整写法是要加type="text/javascript",但这个一般可以省略 -->
    <script type="text/javascript">
        alert("哈哈")
    </script>
</head>
<body>
    
</body>
</html>
 <!-- 将JS写到网页内部的script标签中   -->
    <!-- script标签的完整写法是要加type="text/javascript",但这个一般可以省略 -->
    <script type="text/javascript">
        alert("哈哈")
    </script>

2.在外部写文件引入

  • 引入外部文件通过在script标签中加入src引入外部文件的路径,即< script  src="图片路径”>

在最外层javascript文件夹下新建一个文件夹为script,再在script文件夹中新建一个script.js文件（.js结尾的文件),文件内部的内容为一个alert("内容")

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>

    <!-- 将JS写到网页内部的script标签中   -->
    <!-- script标签的完整写法是要加type="text/javascript",但这个一般可以省略 -->
    <!-- <script type="text/javascript">
        alert("哈哈")
    </script> -->

    <!-- 可以将js编写的外部的js文件，然后通过script标签进行引入 -->
    <!-- 通过在script标签中添加src引入外部文件的文件路径引入文件 -->
    <script src="./script/script.js">

    </script>
</head>
<body>
    
</body>
</html>
   <!-- 可以将js编写的外部的js文件，然后通过script标签进行引入 -->
    <!-- 通过在script标签中添加src引入外部文件的文件路径引入文件 -->
    <script src="./script/script.js">

    </script>

右键打开默认浏览器（或者快捷键Alt+B)

出现alert弹窗，并显示弹窗内容

注意事项：

  • 一旦script标签添加了src引入了文件路径，就不能在script内部再写JS代码了，
  • script标签作用单一，要么用来引入文件，要么在标签内部写JS代码（称之为编写内部的脚本）

3.编写到指定的标签属性中 

3.1在指定标签内编写JS代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>

    <!-- 1. 将JS写到网页内部的script标签中   -->
    <!-- script标签的完整写法是要加type="text/javascript",但这个一般可以省略 -->
    <!-- <script type="text/javascript">
        alert("哈哈")
    </script> -->

    <!-- 2. 可以将js编写的外部的js文件，然后通过script标签进行引入 -->
    <!-- 通过在script标签中添加src引入外部文件的文件路径引入文件 -->
    <!-- <script src="./script/script.js"> </script> -->
</head>
<body>

    <!-- 3. 将JS代码写到指定属性中 -->
    <!-- "alert('你点我试试')" 中外层用的双引号，到了内层alert内就用单引号
            ，单双引号要保持内外相反原则 -->
    <button onclick="alert('你点我试试')"></button>
    
</body>
</html>
<body>

    <!-- 3. 将JS代码写到指定属性中 -->
    <!-- "alert('你点我试试')" 中外层用的双引号，到了内层alert内就用单引号
            ，单双引号要保持内外相反原则 -->
    <button onclick="alert('你点我试试')"></button>
    
</body>
  • "alert('你点我试试')" 中外层用的双引号，到了内层alert内就用单引号，单双引号要保持内外相反原则  

右键打开默认浏览器（或者快捷键Alt+B)

点击网页的按钮会跳出相应的弹窗，

3.2在超链接标签中添加JS代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>

    <!-- 1. 将JS写到网页内部的script标签中   -->
    <!-- script标签的完整写法是要加type="text/javascript",但这个一般可以省略 -->
    <!-- <script type="text/javascript">
        alert("哈哈")
    </script> -->

    <!-- 2. 可以将js编写的外部的js文件，然后通过script标签进行引入 -->
    <!-- 通过在script标签中添加src引入外部文件的文件路径引入文件 -->
    <!-- <script src="./script/script.js"> </script> -->
</head>
<body>

    <!-- 3. 将JS代码写到指定属性中 -->
    <!-- "alert('你点我试试')" 中外层用的双引号，到了内层alert内就用单引号
            ，单双引号要保持内外相反原则 -->
    <button onclick="alert('你点我试试')"></button>

    <hr>

    <!-- 超链接中引用JS代码 -->

    <a href="javascript:alert('点击')">超链接</a>


    
</body>
</html>
 <!-- 超链接中引用JS代码 -->

    <a href="javascript:alert('点击')">超链接</a>

右键打开默认浏览器（或者快捷键Alt+B)

点击超链接会跳出相应的弹窗

 

火木火木
关注
专栏目录
js将数据写入文件到指定路径
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-31 1138
js将数据写入文件到指定路径
JavaScript基础知识
mymCocorna的博客
03-05 987
JavaScript基础知识
JS中的script标签
最新发布
2301_76662406的博客
09-08 503
浏览器在解析这个资源时，会向 src 属性指定的路径发送一个 GET 请求，以取得相应资源，假定 是一个 JavaScript 文件。这个初始的请求不受浏览器同源策略限制，但返回并被执行的 JavaScript 则受限制。 当然，这个请求仍然受父页面 HTTP/HTTPS 协议的限制。
JavaScript应该在什么位置编写代码?
青椒盖饭的博客
01-05 1190
DOM：Document Object Model(文本对象模型) - D：文档 – html 文档 或 xml 文档 - O：对象 – document 对象的属性和方法 - M：模型 - DOM 是针对xml(html)的基于树的API。 - DOM树:节点（node）的层次。 - DOM 把一个文档表示为一棵家谱树（父，子，兄弟） - DOM定义了Node的接口以及许多种节点类型来表示XM...
JS代码的位置
weixin_30882895的博客
08-31 216
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 外部JS--> <script type="text/javascrip...
一起看3种JavaScript代码书写位置和注意事项
zy1992As的博客
01-30 669
外部式有利于HTML页面代码结构化，把大段的JavaScript代码独立到HTML页面之外，既美观，也方便文件级别的代码复用。外部式是指将JavaScript代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在HTML页面中使用标签进行引入，适合JavaScript代码量比较多的情况。（3）使用行内式编写JavaScript代码，实现单击一个按钮后，弹出一个警告框，显示一些提示信息，具体代码如下。（2）创建test.js文件，在文件中编写JavaScript代码，如下所示。
20171103每日一练
qq_40742692的博客
11-05 378
一、 Java 编程题 打印出如下图案（菱形）    *   ***  ***** *******  *****   ***    * int x; int j, k = 4; for (j = 1; j for (x = 1; x System.out.print(" "); for (x = 1; x System.out.print("*"); Syst
JavaScript笔记
passport404的博客
05-27 555
引入js 1.内部标签 <script></script> 2.外部引入 有一个js文件 xxx.js <script src = xxx.js></script> js里一般使用===,绝对等于,只有类型一样,值一样才为true NaN不能参与比较,只有isNaN(NaN)才为true null 空 undefined 未定义 数组 js不需要相同类型,和Java不同 var arr = [1,2,3,'thl',null,true]; 对
走进javascript——不起眼的基础，值和分号
10-20
JavaScript是一种广泛应用于网页开发的编程语言，其基础语法中的变量值和分号使用是编写有效JavaScript代码的基础。了解这些基础知识对于编写可读性强、运行稳定的JavaScript代码至关重要。 首先，理解JavaScript中...
服务器端JavaScript——NodeJS
08-05
【服务器端JavaScript——NodeJS】 Node.js是一种基于Chrome V8引擎的JavaScript运行环境，它让JavaScript能够在服务器端执行，打破了JavaScript长期以来只能在浏览器中运行的限制。Node.js使用了一个事件驱动、非...
计算机毕业设计HTML+CSS+JavaScript——基于HTML花店购物网站项目与实现.md
08-10
- **项目名称**: HTML+CSS+JavaScript —— 基于HTML的花店购物网站项目与实现 - **项目目标**: 作为计算机专业学生的毕业设计或者HTML5期末考核大作业，该项目旨在帮助学生掌握基本的前端开发技能，包括HTML、CSS...
javascript基础——String
10-21
掌握这些字符串操作方法对于编写高效且可读性强的JavaScript代码至关重要。由于JavaScript字符串处理的灵活性和强大功能，它在前端开发中扮演着重要角色，熟练运用这些方法将大大提高前端开发的效率和质量。
JavaScript学习——js代码的编写位置
weixin_44734398的博客
04-03 353
JavaScript代码的编写位置 1.标签内部（不推荐） （1）写在标签的onclick属性中 <button onclik = "alert('你好');"></button> （2）写在a标签的href属性中 <a href="javascript:alert('hello');">嗨</a> 2.写在script标签中 <script> alert("我是script标签中的代码"); </script> 3.写在
＜script＞标签通过src属性调用js文件
lihanhan98的博客
10-30 6573
1.js文件内代码的编写 js文件内，js代码的写法和script标签内相同，可以理解为script标签被隐藏而已，一切照旧即可。 2.js文件的调用 使用script标签的src属性即可。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt
html <a>、<css>、<script>中src引用文件的路径问题
热门推荐
郭洋羊羊羊羊的博客
11-04 4万+
在编写web应用的时候，难免会在一个文件中引用外部的文件，例如样式表css文件以及一些脚本js文件，这样做的目的无疑是提高代码的复用率。但是在引用文件时，一定要引用正确的文件路径，不然是访问不到相关文件的。 总结一下，一共有如下几种方式引用相关文件： 前提： 相关目录结构： 方法一：使用相对于当前文件（源文件）的相对路径 这样在页面使用http://localhost
script src 方式传递参数
weixin_52013157的博客
11-10 1561
scriptsrc 方式传递参数
html引入js相对路径时遇到了一个问题,应该是vs code的提示bug
wusandaofwy的博客
08-21 1117
html引入js时我遇到了一个问题,应该是vs code的问题 同级路径引入js: 错误的提示 ​编辑 原因是错误的根目录路径
《知识点累积》JavaScript
前端技术
12-30 798
Javascript
Javascript #1：在HTML中使用Javascript
weixin_62428841的博客
12-16 1184
嵌入JavaScript代码的过程中，当代码中出现"</script>"字符串时，由于解析嵌入式代码的规则，浏览器会认为这是结束的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值