一、JavaScript可以写在HTML页面内部，

可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

通过<script>标签，如下面代码中的粗体部分：其中，type属性是一种古老的写法，现在可以省略，因为所有现代浏览器默认脚本语言。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript">

            console.log("hello World!");

        </script>

    </head>

    <body>

    </body>

</html>

二、JavaScript还可以写在单独的文件中，以“.js”为后缀，HTML语言通过<script>标签的src属性引入，如下面代码中的粗体部分：

js文件夹下新建javascript0.js文件：

console.log("hello world!");

HTML代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript">

            console.log("hello World!");

        </script>

        <script src="js/javascript0.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

    </body>

</html>

粗体部分为引入js/javascript0.js文件的写法，效果与写入HTML文件效果一样，这样做有两个好处：

1.代码复用

2.结构清晰

此处应该注意两点：

1.在js文件中不需要再写<script>标签， 该标签是告诉浏览器引擎，标签内为javascript代码，而js文件已经表明这是javascript代码。

2.在引入外部javascript文件的<script>标签内不可以再编写javascript代码，即使编写也不会起作用。

三、javascript代码是按照在html中的顺序执行。那么一般就会把javascript写在文件最后，或者写在javascript的一个方法中，该方法是在页面加载后才知性。这样做有两个好处：

1.提高页面加载速度，因为javascript代码执行时，后面的html代码将不会被渲染；另外，js文件下载也需要时间。提高用户体验。

2.防止javascript代码操作的DOM还没有加载完成。造成异常。

JavaScript学习笔记(3)——JavaScript与HTML的组合方式的更多相关文章

  1. Javascript学习笔记1 javascript的特点

    ..对于网页而言,Javascript无处不在,对于英语不好的人它简直是噩梦般的存在,但形式所逼,今天开始着手学习!希望自己能坚持下去.从什么地方着手,我的目标是从大处着眼,从应用着眼,不抠细节,反正 ...

  2. Javascript学习笔记3 Javascript与BOM简介

    什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象 ...

  3. JavaScript学习笔记(4)——JavaScript语法之变量

    一.变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume). 变量必须以字母开头 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做 ...

  4. JavaScript学习笔记(12)——JavaScript内置对象

    1.Number Javascript只有一种数字类型,可以有小数也可以没有,也可以使用科学计数法. var z=123e-5; // 0.00123 JavaScript 不是类型语言.与许多其他编 ...

  5. JavaScript学习笔记(12)——JavaScript自定义对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. JavaScript学习笔记(10)——JavaScript语法之操作DOM

    1.页面输出用document.write()方法,但是不可以在window.onload中用,否则整个html页面将被覆盖. 2.通过javascript获取对象后,改变对象中的html内容:doc ...

  7. JavaScript学习笔记(9)——JavaScript语法之流程控制

    javascript的流程控制语句与大部分类c语言一致.大致如下: 一.if if...else if...else if....else if....else..... 二.switch(变量){ ...

  8. JavaScript学习笔记(7)——JavaScript语法之函数

    函数就是包裹在花括号中的代码块,前面使用了关键词 function: function functionname() { //这里是要执行的代码 } 当调用该函数时,会执行函数内的代码. 可以在某事件 ...

  9. JavaScript学习笔记(6)——JavaScript语法之对象

    JavaScript 中的所有事物都是对象:字符串.数字.数组.日期,等等. 在 JavaScript 中,对象是拥有属性和方法的数据. 属性是与对象相关的值. 方法是能够在对象上执行的动作. 提示: ...

  10. JavaScript学习笔记(5)——JavaScript语法之数据类型

    JavaScript 拥有动态类型.这意味着相同的变量可用作不同的类型: var x // x 为 undefined var x = 6; // x 为数字 var x = "Bill&q ...

随机推荐

  1. CALayer精讲

    前言 CALayer包含在QuartzCore框架中,这是一个跨平台的框架,既可以用在iOS中又可以用在Mac OS X中.后面要学Core Animation就应该先学好Layer(层). 我们看一 ...

  2. 大数记录之，大数乘整型数nyoj832

    想到了一个题目:对决二http://acm.nyist.net/JudgeOnline/problem.php?pid=832 但是发现有一道题目是相似的:http://acm.nyist.net/J ...

  3. C#- 将秒数转化成任意时间格式

    将秒数转化成任意时间格式,可以使用C#的一个函数TimeSpan,看示例: TimeSpan ts = new TimeSpan(0, 0, 3661); richTextBox2.Text = ts ...

  4. Css基础-介绍及语法

    css 文件后缀.css 基础语法: selector { property:value } 例如: h1 {color:red;font-size:14px;} color:字体颜色  font-s ...

  5. cocos2d-x 屏幕坐标系和OPenGL坐标系转换

    转自:http://home.cnblogs.com/group/topic/57609.html cocos2d坐标系(OPenGL坐标系):以左下角为原点,x向右,y向上 屏幕坐标系(androi ...

  6. 安装Intel HAXM为Android 模拟器加速，30秒内启动完成

    要求 必备知识 windows 7 基本操作. 运行环境 windows 7(64位); Android Studio 1.1.0;JDK 1.7.0_75(64位);android-sdk_r24 ...

  7. Linux下修改网卡IP、DNS和网关

    Linux下修改网卡IP和网关 建议通过终端字符方式下来修改 一.修改IP地址 vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 BOO ...

  8. 使用百度地图结合GPS进行定位

    本文在上文基础上加入GPS定位功能,实现实时定位,代码如下: Activity: package com.home; import android.app.Activity; import andro ...

  9. NSURLSession、NSURLConnection

    NSURLSesstion GET方法 block回调方法NSString * urlStr = @"http://192.168.1.247:8100/stream?cname=cha_2 ...

  10. 仿简书、淘宝等等App的View弹出效果

    昨天用简书App的时候觉得这个View的弹出效果特别好,而且非常平滑,所以我就尝试写了一个,和简书App上的效果基本一致了: 下面开始讲解: 1.首先我们要知道这个页面有几个View?这个页面其实有四 ...