JavaScript DOM_2 JS编写位置

JS代码编写位置:

1.编写在head节点中。如下代码所示:

<head>
    <script type="text/javascript">
        window,load=function(){
            alert("加载完成");
        }
    </script>
</head>

2.编写在html标签内。

<body>
    <button onclick="alert(‘Hello World!‘)">ClickMe</button>
</body>

说明:这样不适合编写JS代码,因为HTML代码和JSd代码耦合了,如果JS代码量比较大的时候不应该采用这种方式,不利于管理代码,同时也不方便编写。代码量小的时候这种方式可以很轻松的去编写实现效果和功能,所以要根绝项目大小和代码量多少,合理的选取该种方式,不过建议不要使用这种方式,不利于后期扩展。

3.编写在HTML节点之外

<HTML>
    <HEAD>
        <TITLE>JavaScript</TITLE>
    </HEAD>
    <BODY>
    </BODY>
</HTML>
<SCRIPT type="text/javascript">
    window.load = function(){
        alert("加载完毕!");
    }
</SCRIPT>

4.编写在单独的文件中在使用的地方引入

   
   var btn = document.getElementsByTagName("button")[0];
   btn.onclick = function(){
     alert("大家好!");  
   }

该种方法是推荐使用的,因为解耦了HTML和JavaScript代码,同时利于后期的维护和扩展,是很多程序员都使用的方法。

总结:

具体使用哪种或者哪几种混合使用,都是根据项目需要来定,但一切的目的都是为了,减少前期和后期维护的代价,所以没有一定要如何使用的约束,但第四种最为通用。

时间: 2024-10-26 19:56:16

JavaScript DOM_2 JS编写位置的相关文章

JS基础_js编写位置

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <!-- 8 可以将js代码编写到外部js文件中,然后通过script标签引入 9 写到外部文件中可以在不同的页面中同时引用,也可以利用到浏览器的缓存机制 10 推荐使用的方式 11 --> 12 <script type="

JavaScript(1) -- JS入门

1.   JavaScript介绍 JavaScript是属于HTML与Web的解释性编程语言,也是一种以函数优先的弱类型轻量级的脚本语言,无需进行预编译即可与HTML前端页面进行行为交互,支持跨平台运行,可在多种平台下(如Windows.Linux.Mac.Android.iOS等).目前JavaScript被广泛地应用于Web前端Html实现页面交互.实现浏览器页面事件响应.前端数据验证.检验访客浏览器信息.控制cookies的创建与修改.基于Node.js技术进行服务器端编程. 2.  

为Node.js编写组件的几种方式

本文主要备忘为Node.js编写组件的三种实现:纯js实现.v8 API实现(同步&异步).借助swig框架实现. 关键字:Node.js.C++.v8.swig.异步.回调. 简介 首先介绍使用v8 API跟使用swig框架的不同: (1)v8 API方式为官方提供的原生方法,功能强大而完善,缺点是需要熟悉v8 API,编写起来比较麻烦,是js强相关的,不容易支持其它脚本语言. (2)swig为第三方支持,一个强大的组件开发工具,支持为python.lua.js等多种常见脚本语言生成C++组件

Javascript进阶(5)---编写类

Javascript类的编写 在内部定义变量和方法 凡是定义共公共属性与公共方法都要使用this声明 在内部的 var 声明,或者直接不写var(隐式声明)的都为死哟属性与私有方法 类的实例只能够访问公共属性与公共方法 function Pet(_name,_age,_price){ this.name=_name; var age=_age; //私有属性 var price=_price;//私有属性 this.setAge = function(intAge) { age = intAge

JavaScript之JS实现动画效果

在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务的最佳工具.但是有一个应用领域是目前的CSS无能为力的.如果我们想随着时间的变化而不断改变某个元素的样式,则只能用JavaScript.JavaScript能够按照预定的时间间隔重复的调用一个函数,而意味着我们可以随着时间的推移而不断改变某个元素的样式. 动画是样式随着时间变化的完美例子之一.简单的说,动画就是让元素的位置随着时间而不断的发生变化

原生js之道——原生js编写类选择器

一.类选择器的概念 类选择器,就是通过class属性获取节点.比如一个html结构中,有三个p标签都具有class="red"的属性,那么类选择器返回的就是这三个p标签. 在jquery中,我们可以很方便的通过$(".red")这种方式按照类获取节点.但是在原生的javascript中,有getElementById(按照id属性获取元素).getElementsByTagName(按照标签名获取元素)等方法,但是并没有类选择器相关方法.因此,编写原生js实现类选择

【Javascript】JS常用方法扩展

1.格式化字符串操作 String.prototype.format = function(args) { if (arguments.length>0) { var result = this; if (arguments.length == 1 && typeof (args) == "object") { for (var key in args) { var reg=new RegExp ("({"+key+"})"

js编写验证码

这是一个简单的js编写的验证码,自己已经亲自验证,没有问题了 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head&g

第十二篇 JavaScript(简称JS) 实现显示与隐藏

JavaScript JavaScript简称JS.JS是脚本语言,它是一种轻量级的编程语言,是可以插入HTML页面的编程代码,几乎所有现代浏览器都是支持的. 理论老师不行,我就抄袭手册上的一些关键字段给大家,然后我们写代码来学习. JS也和CSS一样,是可以外部引用的,但是CSS用的是link标签,而JS用的则是script标签,和CSS一样,要写在head标签里哦,引用文件都要写在这里的. 我们来写一个看看: <head lang="en"> <script sr