HTML引入外部JS文件的方法

最新推荐文章于 2024-03-29 11:19:59 发布
最新推荐文章于 2024-03-29 11:19:59 发布
阅读量10w+ 收藏 56
点赞数 19
分类专栏： JS 文章标签： JS 外部JS 引入JS HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012871987/article/details/72638373/
版权 
在引入外部JS文件的情况下，不能在<script></script>之间插入代码，插入的代码不执行，只执行引入的外部文件。
 

attack.html 代码：
 

 
 

  
  

   
   <!DOCTYPE HTML
   
   >
  
  

  
  

   
   <
   
   html
   
   >
  
  

  
  

   
   <
   
   head
   
   >
  
  

  
  

   
   <
   
   meta 
   
   http-equiv=
   
   "Content-Type" 
   
   content=
   
   "text/html; charset=utf-8"
   
    />
  
  

  
  

   
   <
   
   title
   
   >系好安全带,准备启航
   
   </
   
   title
   
   >
  
  

  
  

   
   <!--引入外部文件的方式-->
  
  

  
  

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


  
  

   
   </
   
   head
   
   >
  
  

  
  

   
   <
   
   body
   
   >
  
  

  
  
    
   
   <
   
   form
   
   >
  
  

  
  
        
   
   <
   
   input 
   
   type=
   
   "button" 
   
   value=
   
   "开始游戏" 
   
   onclick=
   
   "attackEnemy()"
   
   />
  
  

  
  
    
   
   </
   
   form
   
   >
  
  

  
  

   
   </
   
   body
   
   >
  
  

  
  

   
   </
   
   html
   
   >
  
  

 
 


 

 

attack.js 代码：
 

 
 

  
  

   
   function 
   
   attackEnemy() {
  
  

  
  
    
   
   document.
   
   write(
   
   "land on");
  
  

  
  
    
   
   alert(
   
   "ready go");
  
  

  
  

   
   }
  
  

 
 



                

        

        

    




    

      

        

            

              
                
                  JerryLZY-意
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    19
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    56
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
VUE页面中加载外部HTML的示例代码

				
			

			

				

					08-29
				

			

		

		

			
				
本篇文章主要介绍了VUE页面中加载外部HTML的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	



                

              
                



	

		

			

				
					
在HTML 中嵌入 JS 代码的三种方式

				
			

			

				

					innocence_123的博客
				

				

					05-06
					
					1万+
					
				

			

		

		

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

1、JavaScript 是一种事件驱动型的编程语言，通常都是在发生某个事件的时候，去执行某段代
码。其中，事件包括很多，例如：鼠标单击事件 click，鼠标经过事件 mouseover 等。并且在 JavaScript 当中任何一个事件都有对应的事件句柄（事件发生时要进行的操作）。

例如：click 对应的事件句柄是 onclick，mouseover 对应的 事件句柄是 onmouseover。

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


			
		

	



                


  
              

                


	

		

			

				
					
HTML引入Javascript代码的三种方法

				
			

			

				

					Sun_Yangguang的博客
				

				

					10-21
					
					4422
					
				

			

		

		

			
				
自学所遇问题记录

			
		

	





	

		

			

				
					
在html静态页面中用import导入js文件

					
最新发布

				
			

			

				

					ffdals的博客
				

				

					03-29
					
					305
					
				

			

		

		

			
				
在html静态页面中用import导入js文件 前提是js文件是一个模块。有时可能读不到 是加载时机的问题 笨办法是加定时器 聪明办法还没找到。

			
		

	



		

			
		



	

		

			

				
					
html怎么引入JavaScript代码

				
			

			

				

					hdxx2022的博客
				

				

					03-01
					
					4554
					
				

			

		

		

			
				
在元素事件中引入JS，就是指在元素的某一个属性中直接编写JavaScript程序或调用JavaScript函数，这个属性指的是元素的“事件属性”。这节课不涉及太多编程方面的知识，先给大家说一下引用方式，这样大家至少都知道在哪编程，然后再在后面章节跟大家促膝长谈编程方面的知识。在body标签内引入JavaScript跟在head标签引入JavaScript语法格式类似，在此不再重复讲解。在页中引入JS，指的就是在标签内编写JavaScript。（2）页中引入（body标签内）；

			
		

	





	

		

			

				
					
HTML 引入 JS 文件

				
			

			

				

					weixin_46774901的博客
				

				

					03-28
					
					5685
					
				

			

		

		

			
				
1、页头引入（head 标签内）；2、页中引入（body 标签内）；3、引入外部 JS 文件；

			
		

	





	

		

			

				
					
如何在HTML网页引入JavaScript

				
			

			

				

					java_dwj的博客
				

				

					01-12
					
					1万+
					
				

			

		

		

			
				
方式一:

在HTML网页内,书写script标签,里面定义js代码

缺点:

1.js代码不能重复使用(不能在其他网页里使用)

2.HTML标签和js代码耦合,不便于后期维护修改

优点:

1.HTML网页和js代码写在一起,便于阅读和测试

小结:在开发环境中使用方式一(编写阶段)

方式二:

1.在外部定义一个js文件

2.在HTML网页内,通过script标签的src属性引入外部js文件

注意:引入时注意路径写正确

当前目录:直接写目标完整的文件名

上级目录: . ./目录文件名/目

			
		

	





	

		

			

				
					
vue组件内部引入外部js文件的方法

				
			

			

				

					11-21
				

			

		

		

			
				
之所以要做这个是因为，在一个组件内部需要引入一个js文件来定位。如果放在index.html，这样每个组件都会有这个js。所以需要在组件内单独引入。 第一种操作 Dom引入js：  export default {  mounted() {  const s = ...

			
		

	





	

		

			

				
					
在html中引入外部js文件,并调用带参函数的方法

				
			

			

				

					10-21
				

			

		

		

			
				
下面小编就为大家带来一篇在html中引入外部js文件,并调用带参函数的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
在页面中引入js的两种方法(推荐)

				
			

			

				

					12-09
				

			

		

		

			
				
在页面中引入js有两种基本方式：在页面中嵌入js、引用外部js文件。 一、在页面中嵌入js 这是在页面使用js最简单的方式了，一般我在写个小测试的情况下会用这种方式。 把script元素写在</body>前面，script元素...

			
		

	





	

		

			

				
					
javascript：html嵌入javascript代码的三种方式

				
			

			

				

					qq_51476492的博客
				

				

					03-16
					
					9491
					
				

			

		

		

			
				
一、概念
javascript是运行在浏览器中的脚本语言，运行在浏览器的内存当中，不需要程序员手动编译，编写玩源代码之后，浏览器直接打开解释执行，简称JS。
二、html嵌入javascript代码的三种方式
JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。
例如：在JS中有很多事件，其中有一个事件叫做：鼠标单击，click，并且任何事件都会对应一个事件句柄onclick。
1.事件句柄是以html标签的属性存在的。
在按钮标签中设置onclick属性值，则点击按钮发生click事件后，

			
		

	





	

		

			

				
					
HTML嵌入JS代码的三种方式

				
			

			

				

					m0_53881899的博客
				

				

					08-26
					
					6978
					
				

			

		

		

			
				
HTML嵌入JS代码的三种方式

			
		

	





	

		

			

				
					
html页面中引入js的三种方式--动态引入js

				
			

			

				

					醉过方知酒浓
				

				

					03-03
					
					2万+
					
				

			

		

		

			
				
方式一：在某个标签或元素内引入js片段，如下：

            必须是日期格式（如yyyy-MM-dd）：
            
                



value="" />


                        
  

方式二：向html页面中引入js代码块，如下；

       function  aaa(){


			
		

	





	

		

			

				
					
CSS 引入 HTML 的三种方式

				
			

			

				

					ItDaChuang的博客
				

				

					12-21
					
					1万+
					
				

			

		

		

			
				
总结 CSS 引入到 HTML 中的三种方式

			
		

	





	

		

			

				
					
html调用外部js文件乱码,引用的js文件有中文时乱码

				
			

			

				

					weixin_39653622的博客
				

				

					06-04
					
					717
					
				

			

		

		

			
				
Javascript 代码比较多时，通常把代码保存到一个独立的 js 文件中，这样不但利于减少 html 文件长度好布局修改，而且利于搜索引擎蜘蛛抓取。把 Javascript 代码放到 js 文件后，在网页引用就可以执行其中的代码。大多情况下，直接引用不会出问题，但某些时候，Javascript 代码里有中文时，会出现中文乱码，并且有些浏览器乱码有些浏览器又正常，这是怎么回事？乱码一般都是编码问...

			
		

	





	

		

			

				
					
Web前端 | HTML嵌入JS代码的三种方式

				
			

			

				

					m0_61933976的博客
				

				

					10-10
					
					1万+
					
				

			

		

		

			
				
HTML嵌入JS代码的三种方式

			
		

	





	

		

			

				
					
HTML引入JS的两种方法

				
			

			

				

					weixin_44866271的博客
				

				

					10-16
					
					3万+
					
				

			

		

		

			
				
1.HTML引入JS的两种方法：


	  引入js的第一种方法
	
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<scripttype="text/javascript">

alert("hello js") //alert()是js语言提供的...

			
		

	





	

		

			

				
					
❗HTML引入JavaScript的三种常用方式汇总❗

					
热门推荐

				
			

			

				

					YXXXYX的博客
				

				

					10-13
					
					4万+
					
				

			

		

		

			
				
引言
JavaScript是一门脚本语言，虽然名字里有Java，但是和Java没有一点关系，它原名是LiveScript；现在的前端JavaScript可以说是异常火爆，但是博主本人并不准备向前端发展，但是对前端的一些基础知识还是必须有所了解的；
上一篇博客：❗HTML引入CSS的三种常用方式汇总❗ 已经介绍了HTML嵌入CSS的三种方式，这里就来介绍HTML如何嵌入JavaScript；
ps：由于作者规划以后往java后端发展，所以对于前端的知识只是了解了部分主要内容，以应用为主，所以如果有错误请各位及

			
		

	





	

		

			

				
					
如何在HTML中使用JavaScript——外部引入和内部嵌入

				
			

			

				

					努力发paper中的业余分享爱好者
				

				

					08-09
					
					2万+
					
				

			

		

		

			
				
当我们想将js脚本放入网页中时，我们无一例外的总是会想到HTML。
在如何使用JavaScript之前，我们需要先了解<script>元素，其定义了6个属性

async：可选。表示应该立即下载脚本，但是不应妨碍页面中的其他操作。在XHMTL总，要将async设置为async=“async”。异步脚本一定在页面的load事件前执行，但可能会在DMOContenLoaded事件出发之前或...

			
		

	





	

		

			

				
					
怎么在html中引入外部js文件

				
			

			

				

					05-20
				

			

		

		

			
				
在 HTML 中，你可以通过使用 `<script>` 标签来引入外部的 JavaScript 文件。

下面是一个例子：

```html
<!DOCTYPE html>
<html>
<head>
	<title>引入外部 JS 文件</title>
	<script src="path/to/external/javascript.js"></script>
</head>
<body>

<!-- 在这里可以使用引入的 JS 文件中定义的函数和变量 -->

</body>
</html>
```

在上面的例子中，`<script>` 标签中的 `src` 属性指定了外部 JavaScript 文件的路径。你需要将 `path/to/external/javascript.js` 替换成你实际的文件路径。

当浏览器遇到 `<script>` 标签时，它会下载并执行指定的 JavaScript 文件。你可以在文件下载和执行完成后，在 HTML 页面中调用该文件中定义的函数和变量。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值