我们要用 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. JS不兼容减号,css属性转驼峰写法

    <script> function changeFormat(str) { return str.replace(/-(\w)/g, function(k, r) { return r.t ...

  2. Linux MD5值递归比对目录中的文件是否有修改

    项目上今天遇到检查两个版本的发布包rc1.tar.gz和rc2.tar.gz的一致性,解决方法做个总结,步骤如下 1. 建立文件夹 mkdir test_rc1 test_rc2 2. 文件解压缩 t ...

  3. jquery 实现ajax 上传文件的功能（使用插件 ajaxfileupload）

    js文件的下载地址 : http://files.cnblogs.com/wangqc/ajaxfileupload.js 页面代码: <html>    <!-- 引入相关的js文 ...

  4. 关于mybatis 在C#.Net中批量增，删，改

    发现很久没有更新空间里的日志了,有时候实在忙没有时间记录,有时候又觉得自己整理的不够清晰,还是缓缓在记录吧. 下面直接进入正题 对于急需方法的阅读者  可以直接转至代码以下忽略 对于数据库进行操作的类 ...

  5. 13---Net基础加强

    更新中,敬请期待............ 作业-复习 程序集1 程序集2 反射1 反射2 反射3 反射4-记事本插件1 反射5-记事本插件2

  6. sdf

    SDF(Standard Delay Format)是一种存储timing data的文件,其中的数据是tool-independent的 可以包括: 1)Delay: module path, de ...

  7. opengl& 颜色

    颜色 简介 颜色的显示模式分为两种: RGBA显示模式 颜色索引显示模式(使用颜色映射表,映射表提供了索引,可以混合基本的红,绿,蓝色值). RGBA模式可以选择的颜色数量多于颜色索引模式.一般而言, ...

  8. Android小案例——简单图片浏览器

    今天上午休息看Android书,里面有个变化图片的示例引起了我的兴趣. 示例需求: 有N张图片,循环显示图片的内容.如果需求让我写我会使用一个变量count来保存显示图片数据的索引,图片显示时做个判断 ...

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

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

  10. ubuntu下配置SVN服务器

    自己买的阿里云服务器.可是我老感觉没有SVN上传代码下载代码太不方便!决定配置个SVN服务器! 1.安装Subversion $ sudo apt-get install subversion $ s ...