Javascript 与 HTML的分离

最新推荐文章于 2024-08-10 14:15:42 发布
转载 最新推荐文章于 2024-08-10 14:15:42 发布 · 932 阅读 · 0

本文介绍了一个使用JavaScript实现的弹窗功能，通过自定义函数`Popup`来打开新的浏览器窗口，并展示了如何在HTML中设置链接以调用此函数。此外，还提供了一种通过`window.onload`事件初始化页面上所有具有特定类名的链接的方法。

OpenFunction.js

function Popup(winURL) {
 window.open(winURL,"Popup","width=320, height=480");
}

window.onload = PrepareLink;

function PrepareLink() {
 if (!document.getElementsByTagName) return false;
 var links = document.getElementsByTagName("a");
 for (var i=0; i<links.length; i++) {
  if (links[i].getAttribute("class") =="Popup") {
   links[i].onclick = function() {
    Popup(this.getAttribute("href"));
    return false;
   }
  }
 }
}

 

Popup.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
  <script type="text/JavaScript" src="OpenFunction.js">Checking</script>
 </head>
 <body>
  <!--a href="http://www.example.com/" onclick="Popup('http://www.example.com/'); return false;">Example</a-->
  <!--a href="http://www.example.com/" onclick="Popup(this.getAttribute('href')); return false;">Example</a-->
  <!--a href="http://www.example.com/" onclick="Popup(this.href); return false;">Example</a-->
  <a href="http://www.example.com/" class="Popup">Example</a>
 </body>
</html>

 


  
 

 

                

        

    


  



    



                



	

		

			

				
					
Vue.js框架组件中实现JavaScript和HTML代码分离的两种方法

				
			

			

				

					CgbAutoit的博客
				

				

					09-20
					
					1358
					
				

			

		

		

			
				
一种是基于单文件组件（SFC）的分离方式，通过将模板、样式和逻辑封装在一个文件中实现代码的分离。另一种方式是使用JSX，通过在JavaScript中编写类似HTML结构的语法实现代码的分离。除了单文件组件，Vue.js还支持使用JSX的方式来分离JavaScript和HTML代码。通过使用JSX，我们可以在JavaScript中直接编写组件的模板代码。通过使用JSX语法，我们可以在JavaScript中直接使用类似HTML的标签和语法。单文件组件是Vue.js中常用的组织代码的方式。标签定义了组件的样式。

			
		

	



                

            
              



	

		

			

				
					
DOM学习1.1：HTML与JavaScript的分离

				
			

			

				

					weixin_44817017的博客
				

				

					05-24
					
					1788
					
				

			

		

		

			
				
分离JavaScript是把网页的结构和内容与JavaScript脚本的动作行为分开。
建立一个外部的.js文件，将JavaScript的代码保存在里面；
把JavaScript代码调用行为与HTML文档的结构和内容分离开；
JavaScript语言不要求事件必须在HTML文档里处理，可以在外部的JavaScript文件里把一个事件添加到HTML文档的某个元素上：
element.event = ...

			
		

	



              


  
              

                


	

		

			

				
					
也谈分离JavaScript和HTML

				
			

			

				

					沧海一粟 —— 技术随手记
				

				

					02-18
					
					1万+
					
				

			

		

		

			
				
<br />    不知道能不能将JavaScript和HTML的分离也归结为“你必将业务逻辑由显示中分离（thou shalt separate business logic from display）”[1]
的问题。但有HTML和CSS的分离在前面对照，它们的分离是如此地优雅，对于理想主义的小coder实在具有莫大的吸引力。<br />
    从现实的角度，也可以举出很多方面来论证JavaScript和HTML分离的好处：网页设计人员和JavaScript程序员可以分工合作，尽可能降低沟通成本；

			
		

	





	

		

			

				
					
javascript 利用onload 实现 js与html 彻底分离

				
			

			

				

					码农富哥
				

				

					03-08
					
					4411
					
				

			

		

		

			
				
function show(){
		var dobj = document.getElementById("one")
		alert(dobj.textContent)
	}

	//var dobj = document.getElementById("one")
		//alert(dobj.textContent) //直接来的找的话 找不到 至上而下 找不到





	adfa

			
		

	



		

			
		



	

		

			

				
					
html文件和js脚本分离

				
			

			

				

					wuxiangege的专栏
				

				

					10-22
					
					5665
					
				

			

		

		

			
				
创建一个index.html文件<!doctype html>
<html>
<head>
    <title>this is a title</title>
    <meta charset="utf-8">
    <!--外部js脚本-->
    <script src="./wu.js"></script >
</head>
<body>
    <h1>你好</h1>
</body>

			
		

	





	

		

			

				
					
html、css和js代码分离

				
			

			

				

					bll1355的博客
				

				

					08-10
					
					698
					
				

			

		

		

			
				
结构用于描述网页的框架，对应语言有HTML，HTML使用标签的形式来标识网页中的不同组成部分；行为用于相应用户的操作，对应语言有JavaScript。4、单一责任原则，某个代码的功能，应该保证只有单一的明确的执行任务，否则一旦修改会增加关联测试的繁琐程度。3、低耦合原则，即这部分代码的使用和修改影响到其他部分的代码尽可能少，否则牵一发而动全身。2、简单原则，简单是用户最佳体验之一，而且简单的代码占用时间少，漏洞少，且易于修改。1、避免重复原则，编程的最基本原则是避免重复，换句话说叫提高代码复用率。

			
		

	





	

		

			

				
					
基于JavaScript的HTML+CSS+Java前后端分离黑马点评设计源码

				
			

			

				

					09-26
				

			

		

		

			
				
该项目是一款基于JavaScript的HTML+CSS+Java前后端分离的黑马点评设计源码，共包含347个文件，涵盖169个PNG图片、67个Java源文件、42个JPG图片、13个HTML文件、9个CSS文件、5个JavaScript文件、4个Vim脚本、3个...

			
		

	





	

		

			

				
					
基于CSS、JavaScript、Java和HTML的前后端分离论文管理系统设计源码

				
			

			

				

					10-02
				

			

		

		

			
				
基于CSS、JavaScript、Java和HTML的前后端分离论文管理系统设计源码是一款采用现代网页开发技术构建的系统，旨在提高论文管理的效率和便捷性。系统整体采用前后端分离的设计模式，这种模式让前端和后端的开发可以...

			
		

	





	

		

			

				
					
css html JavaScript

					
最新发布

				
			

			

				

					07-30
				

			

		

		

			
				
使用CSS，开发者可以将网页的结构内容与它的设计样式分离，从而使得同一个页面在不同的设备和屏幕尺寸上都能保持一致的视觉效果。此外，CSS还有许多强大的功能，比如动画效果、过渡效果以及响应式布局等，让网页的...

			
		

	





	

		

			

				
					
基于Java与JavaScript的GLCS轻量级前后端分离快速开发平台设计源码

				
			

			

				

					10-08
				

			

		

		

			
				
GLCS轻量级快速开发平台是结合Java与JavaScript开发技术打造的，以实现前后端分离为设计核心，将前端和后端的应用程序结构分离，允许两者独立开发、测试和部署。此类平台的架构模式有助于提升开发效率，缩短产品上市...

			
		

	





	

		

			

				
					
穷夯JavaScript基础——分离JavaScript代码与HTML页面

				
			

			

				

					iteye_11043的博客
				

				

					06-18
					
					593
					
				

			

		

		

			
				
现在的HTML页面的编写主要分为三部分：
1.(X)HTML作为结构，由资料方编写。
2.CSS作为样式，由美工方编写。
3.JavaScript作为动态处理，由程序方编写。
分离JavaScript代码与HTML页面是一件很重要的事情，尤其是对于大型网站。设计方和代码方通常是两个人或者两个小组分工合作的。作为一个网页设计者，懂JavaScript不应该是条件之一。所以，如果直接在HTML...

			
		

	





	

		

			

				
					
(补充)如何将javascript代码和HTML分开

				
			

			

				

					龙腾四海365的专栏
				

				

					12-05
					
					4037
					
				

			

		

		

			
				
(补充)如何将javascript代码和HTML分开


很多时候都是需要把视图和数据、数据和操作分开的，这样的好处是便于代码的维护：
下面就讲讲如何将js代码和html代码分开方法：


方法一：传统js方法
//方式一
window.onload = function(){
	//当整个页面加载完毕会调用onload方法
}
方法二：用jQuery框架
//方式二
//jQ

			
		

	





	

		

			

				
					
html与js文件分离写法

				
			

			

				

					qq_31489909的博客
				

				

					11-08
					
					2592
					
				

			

		

		

			
				
<html>
    <head>
        <meta charset="utf-8">
        <title>Export to excel test</title>
        <script src="./excellentexport.js"></script>
        &lt...

			
		

	





	

		

			

				
					
js代码与html代码分离示例

				
			

			

				

					weixin_33725126的博客
				

				

					06-17
					
					1440
					
				

			

		

		

			
				
验证用户名是否存在的示例代码引出该思想：
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional/...

			
		

	





	

		

			

				
					
html分离JavaScript

					
热门推荐

				
			

			

				

					
				

				

					05-09
					
					3万+
					
				

			

		

		

			
				
分离JavaScript

test.html

<html>
	<head>
		<script type="text/javascript" src="test.js"></script>
	</head>
	<body>
		<a href="http://www.example.com/" class="pop...

			
		

	





	

		

			

				
					
Javascript二：如何实现Javascript/css与HTML的分离

				
			

			

				

					做一枚优雅的IT女
				

				

					06-06
					
					8279
					
				

			

		

		

			
				
实现Javascript/css与HTML的分离的步骤是很相似的，当然也不同，接下来就是具体的实现。
第一步：首先都是创建文件，只是创建的文件不同。如下图
       
 
1）如果创建JavaScript代码与HTML的分离的文件创建：
a)    选择JavaScript页面类型
b)    显示创建的文件，把  框架里面的代码放入到创建的文件中
（切记:不要把框架代码放入文件

			
		

	





	

		

			

				
					
性能、JavaScript与html标签分离(代码与结构和内容分离)、平稳退化

				
			

			

				

					chengmei851791的博客
				

				

					08-24
					
					142
					
				

			

		

		

			
				
性能 
 
 尽量减少DOM访问和标记，减少document.getElementsByTagName()之类方法的使用，把这类方法返回的值存储在变量之中。 
 合并脚本、样式文件、图片文件等，以便减少加载页面时的请求数量。 
 压缩脚本。 
 

JavaScript与html标签分离 
...

			
		

	





	

		

			

				
					
分离JavaScript

				
			

			

				

					a512394464的博客
				

				

					12-22
					
					148
					
				

			

		

		

			
				
分离JavaScript类似于使用style属性，在HTML文档里使用诸如onclick之类的属性也是一种既没有效率又容易引发问题的做法。如果我们用一个”挂钩“，就像CSS机制中的Class或ID属性那样，把JavaScript代码调用行为与HTML文档的结构和内容分离开，网页就会健壮得多。那么，可以用下面这条语句来表明”当这个链接被点击时，它将调用popUp()函数“。<a hr...

			
		

	





	

		

			

				
					
html文件的模板分离,JS数据模板分离（告别字符串拼接）-template

				
			

			

				

					weixin_34276402的博客
				

				

					06-21
					
					687
					
				

			

		

		

			
				
刚开进架触我法端位画近发行思发们识和移的近开始在写第一个动态网页的demo时，由于html不多，便使用字符串拼接的方法添加到dom来渲染，可是在后来写某外卖app时也需要如此添加，打开代码一看几千行，突然感觉二，都过发宗发数前业很断屏击和公图使分近步现喜进过，分一端务有的蔽战滚司标用别近步现喜进过，分一端务有的蔽战滚司标用别近步现喜进过，分一端务有的蔽战滚司标用别近步现喜进过，分一累觉不爱一行行的...

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值