我们要用 JavaScript，但是把它写在哪里呢？
 
这里 ↘
 
1. HTML 页面中 。
 
2. 单独的一个文件中，文件后缀名是“.js”。
 
 
—————————————————————————
 
我们先讨论第一种情况 —— 在 HTML 页面中使用 JavaScript。
 
这时 JavaScript 代码：
 
1） 必须位于 <script> 与 </script> 标签之间。
 
2） 可以被放在 HTML 页面的 <body> 和 <head> 部分中。
 
下面是三个小例子：
 
小例一：
<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>在 HTML 页面中使用 JavaScript</title>

</head>

<body>

    <script>

        // JavaScript 代码在 HTML 文档的 <body> 部分中，而且

        // 在 <script> 与 <\/script> 标签之间

        document.write("<h1>海明威说</h1>");

        document.write("<p>任何初稿，都是一堆臭狗屎。</p>");

    </script>

</body>

</html>
 
有时我们会看到在 <script> 标签中使用“type="text/javascript"”。现在已经完全没必要了，JavaScript 是所有现代浏览器以及 HTML5 中默认使用的脚本语言。
 
上面“小例一”中的 JavaScript 代码，会在页面加载时执行。通常，我们不会这么做。
 
我们用 JavaScript 代码写出一个函数，当 HTML 页面中出现某个事件时（比如点击事件），调用这个函数。
 
你现在可能听不太懂，没关系，你会在稍后的文章里学习到函数和事件的知识。
 
小例二：
<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>在 HTML 页面中使用 JavaScript</title>

    <script>

        // JavaScript 代码在 HTML 文档的 <head> 部分中，而且

        // 也在（必然的） <script> 与 <\/script> 标签之间

        function myRespondToHit() {

            document.getElementById("yesID").innerHTML = "Oops!!";

        }

    </script>

</head>

<body>

    <h1>A day so happy :)</h1>

    <p>A:<span id="yesID">Yes, once I was the same.</span></p>

    <button type="button" onclick="myRespondToHit()">Hit you!</button>

</body>

</html>
 
我们将一个 JavaScript 函数放置到了 HTML 文档的 <head> 部分。
 
小例三：
<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>在 HTML 页面中使用 JavaScript</title>

</head>

<body>

    <h1>A day so happy :)</h1>

    <p>A:<span id="yesID">Yes, once I was the same.</span>

    </p>

    <button type="button" onclick="myRespondToHit()">Hit you!</button>

    <script>

        // JavaScript 代码在 HTML 文档的 <head> 部分中，而且

        // 也在（必然的） <script> 与 <\/script> 标签之间

        function myRespondToHit() {

            document.getElementById("yesID").innerHTML = "Oops!!";

        }

    </script>

</body>

</html>
这里只是将“小例二”中的 JavaScript 函数改变至 <body> 部分中，这样确保在 <p> 元素创建之后再执行脚本。
 
<head> 和 <body> 中的 JavaScript
 
你可以在 HTML 页面中放入任意多个 JavaScript 代码（或者说成“脚本”）。
 
脚本可以位于 HTML 文档的 <body> 或 <head> 部分中，又或者同时存在于两个部分中。
 
通常做法是，把函数都放在 <head> 部分中，或者都放在页面底部。这样 脚本在一块了，就不会干扰页面内容了。
 
 
—————————————————————————
 
第二种情况：外部的 JavaScript 代码
 
也可以把 JavaScript 代码写在外部文件中。这样做可以：让脚本与页面代码分离；有时，这个脚本，可能会被多个页面同时使用，这样乐意提高代码的重用性。
 
外部的脚本文件的扩展名是“.js”。
 
如果要使用外部文件，请在 <script> 标签的 “src”属性中引入这个“.js”文件。
 
小例四： 
<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>引入外部的 JavaScript 代码</title>

    <script src="js/helloScript.js"></script>

</head>

<body>

    <h1>A day so happy :)</h1>

    <p>A:<span id="yesID">Yes, once I was the same.</span></p>

    <button type="button" onclick="myRespondToHit()">Hit you!</button>

</body>

</html>
 
在 <head> 和 <body> 中引用脚本文件都是可以的。实际运行效果与您在 <script> 标签中编写脚本完全一致。 
 
还有，外部脚本不能包含 <script> 标签。
 
 
（完）

使用 JavaScript的更多相关文章

  1. JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议

    软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...

  2. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  3. Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收

    执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...

  4. 探究javascript对象和数组的异同，及函数变量缓存技巧

    javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...

  5. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  6. 《Web 前端面试指南》1、JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

  7. JavaScript权威指南 - 函数

    函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...

  8. JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

    今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...

  9. JavaScript进阶之路（一）初学者的开始

    一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...

  10. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. .NET: C#: StopWatch

    StopWatch class is used for calculate the timespan for that procedure. In Debug Mode it will be very ...

  2. sql server 查询性能最差的sql语句

    SELECT TOP 10 TEXT AS 'SQL Statement' ,last_execution_time AS 'Last Execution Time' ,(total_logical_ ...

  3. mongodb版本管理

    使用gradle. 查找最新版本http://mvnrepository.org/ compile "org.mongeez:mongeez:0.9.6" 配置spring < ...

  4. sql语句删除数据表重复字段的方法

    大家都可能遇到字段重复的情况,网上很多人在找方法,也给出了一些方法,但是有的方法是误导大家,铁牛写出以下方法,方便大家使用 1.通过group by把重复的字段筛选出来,并建立临时表tmp 1 cre ...

  5. Atom 和 Sublime Text 相比哪个好？

    好像截止到今天还分不出来,Sublime确实会快一点.

  6. android 学习随笔二十五（动画：补间动画）

    补间动画(TweenAnimation) * 原形态变成新形态时为了过渡变形过程,生成的动画就叫补间动画(为了让对象从初始状态向结束状态改变的过程更加自然而自动生成的动画效果)* 位移.旋转.缩放.透 ...

  7. MySql的Delete、Truncate、Drop分析

    MySql的Delete.Truncate.Drop分析 相同点: truncate 和不带 where 子句的 delete,以及 drop 都会删除表内的数据 不同点 1. truncate 和 ...

  8. LUA笔记之表

    表据说是LUA的核, 呵呵, 看例子吧, 看上去, 跟java的list很像, 又有点像json: a = {} -- create a table and store its reference i ...

  9. python3.4 or 3.x xlwt replaced with xlwt-future

    Q:最近在使用python3.4处理一些生物信息数据,需要将内容保存到excel中,但是,但是,发现xlwt不能再3.4中使用,即使安装也安装不成功. 由于xlwt不兼容python3.4(x),不必 ...

  10. Spring的javaMail邮件发送(带附件)

    项目中经常用到邮件功能,在这里简单的做一下笔记,方便日后温习. 首先需要在配置文件jdbc.properties添加: #------------ Mail ------------ mail.smt ...