我们要用 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. 是否可以继承String类?

    是否可以继承String类? String类是final类故不可以继承

  2. linux第11天 共享内存和信号量

    今天主要学习了共享内存和信号量 在此之前,有个管道问题 ls | grep a 整句话的意思是将ls输出到管道的写端,而流通到另一端的读端,grep a则是从管道的读端读取相关数据,再做筛选 共享内存 ...

  3. android05

    #ANR(application not response) 应用程序无响应原因: >主线程里面执行了耗时的操作.就会导致应用程序无响应. <自己动手写操作系统> 带界面的应用程序都 ...

  4. PAT乙级 1006. 换个格式输出整数 (15)

    1006. 换个格式输出整数 (15) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 让我们用字母B来表示“百” ...

  5. [tp3.2.1]让默认页面: 加载Home模块的Index控制器;而让admin.php默认去加载Admin模块的Adminc控制器.

    QQ:让index.php默认加载Home模块的Index控制器;而让admin.php默认去加载Admin模块的Adminc控制器.AA:复制index.php命名为admin.php复制(新建)A ...

  6. php setcookie 讲解

    1.setcookie 中 $value 值不能为数组 e.g a.$arr = array('hh','bb');setcookie('username',$arr);这种不会生效的 如果确实要放数 ...

  7. DB2 Unload 的时候遇到B37-04

    B37-04的问题是每个Mainframer首先会遇到的问题,在Unload的时候最大的可能性是Extend次数到16次了,这时候只要加大primary或secondary就可以了,我最常用的是pri ...

  8. 出现“不能执行已释放的Script代码”错误的原因及解决办法

    很多web开发者或许都遇到过这样的问题,程序莫名奇怪出现“不能执行已释放Script的代码”,错误行1,列1.对于这种消息描述不着边,行列描述更是让人迷茫的js错误,相信是所有调试js程序的朋友们最郁 ...

  9. WebDriver一些常见问题的解决方法【转】

    转至:http://www.cnblogs.com/sylovezp/p/4329770.html 1.Exception NoSuchElementException: 解决方法: 1)检查目标el ...

  10. 文字处理控件TX Text Control X10独家揭秘（一）：数据源自动处理

    TX Text Control即将发布的X10版本,将升级重点还是放到了其比较优势的流式布局报表设计和生成上.慧都获得了来自其开发商Text Control GmbH公司的一手资料,迫不及待的为大家带 ...