首页IT科技如何在html中引入javascript代码(在HTML 中嵌入 JS 代码的三种方式)

如何在html中引入javascript代码(在HTML 中嵌入 JS 代码的三种方式)

时间2025-07-30 03:08:42分类IT科技浏览4831
导读:一,在HTML中嵌入JS代码的第一种方式:行间事件...

一             ,在HTML中嵌入JS代码的第一种方式:行间事件

行间事件是指将JavaScript函数写到HTML元素中的执行事件             。

1             、JavaScript 是一种事件驱动型的编程语言                   ,通常都是在发生某个事件的时候        ,去执行某段代

码                     。其中          ,事件包括很多                  ,例如:鼠标单击事件 click           ,鼠标经过事件 mouseover 等      。并且在 JavaScript 当中任何一个事件都有对应的事件句柄(事件发生时要进行的操作)         。

例如:click 对应的事件句柄是 onclick       ,mouseover 对应的 事件句柄是 onmouseover                     。

2                     、怎么使用 JS 代码弹窗?

在 JS 当中有一个内置的 BOM 对象                  ,可以直接拿来使用              ,全部小写:window

其中 window 对象有一个方法/函数叫做 alert    ,这个函数专门用来弹出对话框         。 window.alert(hello world!);

通过下面这个代码可以知道:JS 中的字符串可以使用单引号括起来      。

(1)语句各自独占一行                   ,通常可以省略结尾的分号;

(2)程序结束或者右花括号(})之前的分号也可以省略; <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="button" value="hello1" onclick="window.alert(Hello World);" /> <input type="button" value="hello2" onclick=window.alert("Hello jQuery"); window.alert("Hello Kitty") window.alert("你好                 ,中国")/> <!-- window.可以省略 --> <input type="button" value="Hello3" onclick="alert(你好,世界);" /> </body> </html>

二                ,在HTML中嵌入JS代码的第一种方式:页面script 标签嵌入                    ,脚本块的方式                     。 脚本块的位置随意    ,没有限制!

使用工具              ,不打尖括号 <                   ,可以出提示

<script type="text/javascript"></script> <script src="" type="text/javascript" charset="utf-8"></script>

打了尖括号 提示无法出现

<script></script>

在脚本块中        ,代码执行的顺序都是从上到下的

<!-- 脚本块的位置随意          ,没有限制! --> <script type="text/javascript"> alert("Page Begin") </script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>在 HTML 中嵌入 JS 代码的第二种方式:页面 script 标签嵌入                  ,脚本块的方式</title> </head> <body> <!-- 这个按钮 1 会先被加载到浏览器内存            。 --> <input type="button" value="按钮 1" /> <!-- 脚本块 --> <!-- 一个页面中脚本块可以出现多个   。 --> <script type="text/javascript"> /*在这里直接编写 JS 代码           ,这些 JS 代码在页面打开的时候自上而下的顺序依次逐行 执行!*/ alert("Hello World"); alert("Hello Kitty"); alert("Hello China"); </script> <!-- 最后加载这个按钮 2 --> <input type="button" value="按钮 2" /> </body> </html> <script type="text/javascript"> alert("Page End") </script>

三      、在 HTML 中嵌入 JS 的第三种方式:引入外部独立的 JS 文件

这是一堆 JS 代码       ,这些 JS 代码在 HTML 引入的时候                  ,遵循自上而下的顺序依次逐行执行

alert("Hello World") alert("Hello Kitty")

引入外部独立的 CSS 文件              ,这个标签 link 中属性是 href

<link rel="stylesheet" type="text/css" href=""/>

引入外部独立的 JS 文件    ,script 标签引入 js 文件的时候                   ,是 scr 属性

<script src="js/1.js" type="text/javascript" charset="utf-8"></script>

提问:JS文件能不能引入第二次?

答:能                 ,但是引入第二次,这个操作没有意义                ,测试结果:只要引入一次 JS 文件                    ,JS 文件中的代 码就会全部执行一遍

<script src="../js/1.js" type="text/javascript" charset="utf-8"></script> <script src="../js/1.js" type="text/javascript" charset="utf-8"> alert("hello world 1 这里能执行吗~~~~"); //这里的代码不会执行 </script>

提问:单独的脚本块能执行吗?

答:能    ,经过测试             ,发现其会不断循环执行                     。

<script type="text/javascript" > alert("hello world 单独的脚本块能执行吗~~~~"); </script>

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
苹果cmsv10官方采集站(苹果CMS资源采集网,一站式高效获取资源的首选平台) 大学生最好的赚钱方式(大学生什么**最挣钱的方法-(专门针对刚毕业的大学生)抓住人的心里,然后画大饼,然…)