JavaScript学习笔记(3)——JavaScript与HTML的组合方式
一、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的组合方式的更多相关文章
- Javascript学习笔记1 javascript的特点
..对于网页而言,Javascript无处不在,对于英语不好的人它简直是噩梦般的存在,但形式所逼,今天开始着手学习!希望自己能坚持下去.从什么地方着手,我的目标是从大处着眼,从应用着眼,不抠细节,反正 ...
- Javascript学习笔记3 Javascript与BOM简介
什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象 ...
- JavaScript学习笔记(4)——JavaScript语法之变量
一.变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume). 变量必须以字母开头 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做 ...
- JavaScript学习笔记(12)——JavaScript内置对象
1.Number Javascript只有一种数字类型,可以有小数也可以没有,也可以使用科学计数法. var z=123e-5; // 0.00123 JavaScript 不是类型语言.与许多其他编 ...
- JavaScript学习笔记(12)——JavaScript自定义对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript学习笔记(10)——JavaScript语法之操作DOM
1.页面输出用document.write()方法,但是不可以在window.onload中用,否则整个html页面将被覆盖. 2.通过javascript获取对象后,改变对象中的html内容:doc ...
- JavaScript学习笔记(9)——JavaScript语法之流程控制
javascript的流程控制语句与大部分类c语言一致.大致如下: 一.if if...else if...else if....else if....else..... 二.switch(变量){ ...
- JavaScript学习笔记(7)——JavaScript语法之函数
函数就是包裹在花括号中的代码块,前面使用了关键词 function: function functionname() { //这里是要执行的代码 } 当调用该函数时,会执行函数内的代码. 可以在某事件 ...
- JavaScript学习笔记(6)——JavaScript语法之对象
JavaScript 中的所有事物都是对象:字符串.数字.数组.日期,等等. 在 JavaScript 中,对象是拥有属性和方法的数据. 属性是与对象相关的值. 方法是能够在对象上执行的动作. 提示: ...
- JavaScript学习笔记(5)——JavaScript语法之数据类型
JavaScript 拥有动态类型.这意味着相同的变量可用作不同的类型: var x // x 为 undefined var x = 6; // x 为数字 var x = "Bill&q ...
随机推荐
- C#开源资源大汇总
C#开源资源大汇总 C#开源资源大汇总 一.AOP框架 Encase 是C#编写开发的为.NET平台提供的AOP框架.Encase 独特的提供了把方面(aspects)部署到运行 ...
- 使用jdbc连接上oracle的两种方法
1. 使用thin连接 优点:thin驱动都是纯Java代码,并且使用TCP/IP技术通过java的Socket连接上Oracle数据库,所以thin驱动是与平台无关的,无需安装Oracle客户端,只 ...
- JS基础DOM篇之一：何为DOM？
近日在园子看了一篇文章,一位前端负责人问应聘者何为DOM事件流的三个阶段,我当时一看也是懵圈,于是强迫症复发,遂想要搞清楚它.谁知在查资料的过程中发现有好多关于DOM的概念也是模糊不清,便决定继续延伸 ...
- 【21】必须返回对象时，别妄想返回器reference
1.考虑有理数Rational,有个友元操作符*,返回Rational对象.返回对象,导致临时对象的构造,析构.效率低,因此会想返回方法内局部对象的引用,这种方法不可行.为什么? 2.调用方法是在st ...
- C++ 继承的访问权限
1.它解决什么问题?为什么设计出继承的各种访问权限? 可以这样认为,C++继承会把父类的东西拉到自己这里,这些东西都是自己的,父类中的字段和方法都有访问权限,如果我想改变这些东西的访问权限,该怎么办? ...
- 一个GCC4.6.3的奇妙问题的糊涂解决方案
因为工作中需要OpenCV,又不想用Windows,所以我就在Linux下编译安装OpenCV了.一开始,由于我的计算机不能安装ubuntu12.04,所以我安装了ubuntu13.04,opencv ...
- OpenCV Mat 类型定义和赋值
1.一般的Mat定义方法:cv::Mat M(height,width,<Type>),例: cv::Mat M(480,640,CV_8UC3); 表示定义了一个480行640列的矩阵, ...
- jquery html标签的链式语法
<div id="ProductNet"> <table border='0' cellspacing='2' cellpadding='0' style='te ...
- iOS开发：AVPlayer实现流音频边播边存
1. AVPlayer简介 AVPlayer存在于AVFoundation中,可以播放视频和音频,可以理解为一个随身听 AVPlayer的关联类: AVAsset:一个抽象类,不能直接使用,代表一个要 ...
- iOS开发——面试指导
iOS面试指导 一 经过本人最近的面试和对面试资料的一些汇总,准备记录这些面试题,以便ios开发工程师找工作复习之用,本人希望有面试经验的同学能和我同时完成这个模块,先出面试题,然后会放出答案. 1. ...