Javascript 与 HTML的分离

最新推荐文章于 2022-05-01 00:50:09 发布
最新推荐文章于 2022-05-01 00:50:09 发布
阅读量817 收藏
点赞数
分类专栏： JavaScript

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/" οnclick="Popup('http://www.example.com/'); return false;">Example</a-->
  <!--a href="http://www.example.com/" οnclick="Popup(this.getAttribute('href')); return false;">Example</a-->
  <!--a href="http://www.example.com/" οnclick="Popup(this.href); return false;">Example</a-->
  <a href="http://www.example.com/" class="Popup">Example</a>
 </body>
</html>

 


  
 

 

                

        

        

    




    

      

        

            

              
                
                  Roenfun
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

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

				
			

			

				

					做一枚优雅的IT女
				

				

					06-06
					
					8079
					
				

			

		

		

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

			
		

	



                

              
                



	

		

			

				
					
DOM学习1.1：HTML与JavaScript的分离

				
			

			

				

					weixin_44817017的博客
				

				

					05-24
					
					1478
					
				

			

		

		

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

			
		

	



                


  
              

                


	

		

			

				
					
javascript代码与html分离进阶

				
			

			

				

					Good good study!
				

				

					10-30
					
					2297
					
				

			

		

		

			
				
nodeName属性的结果总是大写的，即使在html代码中标签是小写。

onclick事件虽然叫onclick，但是通过tab来切换链接，并通过回车按下执行的点击大多都会执行onclick事件。

HTML-DOM DOM-Core区别
DOM是一个通用的东西，并不专属于javascript，针对不同的领域定制了很多不同的DOM
像getAttribute和setAttribute是

			
		

	





	

		

			

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

				
			

			

				

					龙腾四海365的专栏
				

				

					12-05
					
					3858
					
				

			

		

		

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


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


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

			
		

	



		

			
		



	

		

			

				
					
html文件和js脚本分离

				
			

			

				

					wuxiangege的专栏
				

				

					10-22
					
					5524
					
				

			

		

		

			
				
创建一个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+javascript

				
			

			

				

					05-09
				

			

		

		

			
				
"学员优秀笔记javascript.pdf"可能涵盖了JavaScript的基础语法、变量、控制流、函数、对象、数组，以及与DOM交互的技巧等内容。而"学员优秀笔记html+css.pdf"可能讲解了HTML5的新特性、CSS选择器、布局模型（如...

			
		

	





	

		

			

				
					
html + javascript 俄罗斯方块

				
			

			

				

					09-05
				

			

		

		

			
				
《HTML + JavaScript 实现的俄罗斯方块：技术详解与拓展》  俄罗斯方块，这款经典的电子游戏，凭借其简洁的设计和无限的挑战性，一直以来深受玩家喜爱。在现代Web开发中，利用HTML和JavaScript实现俄罗斯方块是一个...

			
		

	





	

		

			

				
					
分离式javascript取当前element值的代码

				
			

			

				

					10-30
				

			

		

		

			
				
在JavaScript编程中，分离式（Declarative）代码通常指的是将代码逻辑与HTML结构分离，以便更好地维护和组织代码。这种编程风格强调将样式、结构和行为分开，以提高代码可读性和重用性。在给定的示例中，我们看到一...

			
		

	





	

		

			

				
					
基于JavaScript和html的开发模板引擎

				
			

			

				

					02-22
				

			

		

		

			
				
在前端开发领域，模板引擎是一种用于动态生成HTML的工具，它可以帮助开发者将数据与视图逻辑分离，提高代码的可维护性和复用性。本文将深入探讨基于JavaScript和HTML的开发模板引擎，以及相关的技术知识点。  一、...

			
		

	





	

		

			

				
					
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip

				
			

			

				

					06-04
				

			

		

		

			
				
接着，CSS（Cascading Style Sheets）是用于控制网页样式的语言，它能分离内容与表现，使网页设计更加灵活和可维护。CSS可以设置颜色、字体、布局和响应式设计等，例如使用`background-color`、`font-size`、`...

			
		

	





	

		

			

				
					
html代码分开页面,html,  js 代码如何分离?

				
			

			

				

					weixin_28812205的博客
				

				

					06-04
					
					661
					
				

			

		

		

			
				
前一天后一天加载中var fromPinyin = "";var toPinyin = "";var trainNumber = "";function initParams(){fromPinyin = $("#from_pinyin").text().trim();toPinyin = $("#to_pinyin").text().trim();trainNumber = $("#train_...

			
		

	





	

		

			

				
					
将html文件中的css和javascript拆分出来

				
			

			

				

					qq_52681025的博客
				

				

					05-01
					
					761
					
				

			

		

		

			
				
模块化的基本概念
// 1.1 导入 fs 模块
const fs = require('fs')
// 1.2 导入 path 模块
const path = require('path')

// 1.3 定义正则表达式，分别匹配<style></style>和<script></script>标签
const  regStyle = /<style>[\s\S]*<\/style>/
const  regScript = /&lt

			
		

	





	

		

			

				
					
JavaScript 基础知识

				
			

			

				

					Morbidmuse的博客
				

				

					12-21
					
					518
					
				

			

		

		

			
				
/*
第一章:JavaScript简介
JavaScript简介:
	一种嵌入到HTML中的编程语言,或称为脚本语言,由浏览器边解释边执行,所以它是一种解释性语言
	作用是控制网页的行为.
	因为有了JS,使得用户可以和页面进行交互(如鼠标操作)
JS的引入方式:
	在HTML中引入js一般有三种方式:
		外部JS
			把html文件和js文件分开放在不同的文件夹中,在html文档中通过<script>标签来引用
			这是最常用的引入方式,有利于提升网站性能和可维护性
			既可以在he.

			
		

	





	

		

			

				
					
也谈分离JavaScript和HTML

					
热门推荐

				
			

			

				

					沧海一粟 —— 技术随手记
				

				

					02-18
					
					1万+
					
				

			

		

		

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

			
		

	





	

		

			

				
					
js代码与html代码分离示例

				
			

			

				

					weixin_33725126的博客
				

				

					06-17
					
					1391
					
				

			

		

		

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

			
		

	





	

		

			

				
					
[笔记]前端html设计与js代码分离

				
			

			

				

					匆匆往站
				

				

					05-21
					
					6281
					
				

			

		

		

			
				
这些天对写前端越发不开心，感觉总是哪里别扭。看看现在主流的框架，jQuery就是管管js代码中ajax和dom的操作；AngluarJS做了很好的工作，但是有个很大的问题：ngIf, ngFor直接出现在html里，一个是这样让html设计人员要十分清楚javascript的开发，二是我在浏览器里直接根本看不到最后设计的结果。代码的管理在AngularJS也变得更复杂：
如果架构不当，就会出现有些地

			
		

	





	

		

			

				
					
html与js文件分离写法

				
			

			

				

					qq_31489909的博客
				

				

					11-08
					
					2219
					
				

			

		

		

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

			
		

	





	

		

			

				
					
如何理解HTML、CSS和JS三者分离

				
			

			

				

					jaycemxy的博客
				

				

					04-03
					
					4485
					
				

			

		

		

			
				
回答思路：正向答这道题很难说出什么，就像有人问你为什么人类需要空气和水？转换角度，用如果不... ...的思维去回答，如果没有水我们会难以维持生命，没有空气我们不能呼吸会缺氧而死。以这样的思路来解这个问题：  1、HTML可以负责样式，但如果这样会使得内容的结构有很多无用的标签，这让html的结构看上去十分复杂，有的标签是用来表示内容，有的又是用来表示样式，这样很难区分它们之间的逻辑结构。  2、...

			
		

	



              



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

  

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

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值