我们要用 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. [原创] 分享一些linux教程

    书<鸟哥的linux私房菜第三版>,链接:http://pan.baidu.com/s/1i3femnr 配套视频,链接:http://pan.baidu.com/s/1v72xw --- ...

  2. JSP文件编码

    1. pageEncoding: <%@ page pageEncoding="UTF-8"%> jsp页面编码: jsp文件本身的编码 2. contentType: ...

  3. （二）重拾单片机 第一天 LED灯

    由图知道 低电平 亮,高电平 灭 控制第一个 LED1 亮灭程序代码,如下 #include<reg52.h> #define uchar8 unsigned char #define u ...

  4. paper 78：sniff抓包程序片段

    #define INTERFACE "eth0"#define MAX_SIZE 65535 int init_raw_socket();int open_promisc(char ...

  5. paper 40 ：鲁棒性robust

    最近只想安心.安静的科研,不想被任何人打扰,继续做自己,不忘初心,方得始终! 首先了解下鲁棒性这个词的定义.鲁棒性是指控制系统在一定(结构,大小)的参数摄动下,维持某些性能的特性.根据对性能的不同定义 ...

  6. sql 索引创建

    --格式 --CREATE [索引类型] INDEX 索引名称--ON 表名(列名)--WITH FILLFACTOR = 填充因子值0~100--GO ----------------------- ...

  7. sql 中的回车和换行问题

    --移除回车符 update master_locationSET street_number = REPLACE(street_number, CHAR(13), '') --移除换行符 updat ...

  8. Visual studio 中编译错误SQL71006: Only one statement is allowed per batch. A batch separator, such as 'GO', might be required between statements.

    把写好的sql脚本,并在mssqlmanager里面编译成功的存储过程脚本复制到vs项目下,出现错误信息如下:SQL71006: Only one statement is allowed per b ...

  9. 关于 ActiveMQ 的消息模式

    1.JMS Queue 执行 load balancer语义:一条消息仅能被一个 consumer(消费者) 收到.如果在 message 发送的时候没有可用的consumer,那么它将被保存一直到能 ...

  10. 为什么super（）和this（）调用语句不能同时在一个构造函数中出现的解释

    我想这应该是Java构造函数的一种机制吧,首先以子类和父类为例.当你创建一个子类的实例时,首先会调用父类的构造函数,然后再调用子类的构造函数,如果父类中没有缺省构造函数,则必须再子类的构造函数中显示的 ...