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还没有加载完成。造成异常。

转载于:https://www.cnblogs.com/yoran-yang/p/5218209.html

JavaScript学习笔记(3)——JavaScript与HTML的组合方式相关推荐

Javascript学习笔记3 Javascript与BOM简介
什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象 ...
JavaScript学习笔记(2)——JavaScript和DOM的关系
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...
JavaScript 学习笔记 - 12 JavaScript 应用示例
目录 12.1 使用可折叠菜单 12.2 添加下拉菜单 12.3 改进下拉菜单 12.4 带说明的幻灯片 12.5 一个娱乐姓名生成器 12.6 柱状图生成器 12.7 样式表切换器 12.1 使用可 ...
JavaScript学习笔记2——JavaScript操作BOM对象
BOM模型 BOM:浏览器对象模型(Browser Object Model) BOM提供了独立于内容的.可以与浏览器窗口进行互动的对象结构 BOM可实现功能弹出新的浏览器窗口移动.关闭浏览器窗口 ...
JavaScript学习笔记(8)——JavaScript语法之运算符
一. 算术运算符: 运算符描述例子结果 + 加 x=y+2 x=7 - 减 x=y-2 x=3 * 乘 x=y*2 x=10 / 除 x=y/2 x=2.5 % 求余数 (保留整数) x=y%2 ...
JavaScript学习笔记：JavaScript获取元素：id,标签名，类名，querySelector,querySelectorall,获取body,html
1.根据ID获取元素 ● 语法:document.getElementById(id) ● 作用:根据ID获取元素对象 ● 参数:id值,区分大小写的字符串 ● 返回值:元素对象或 null 案例代 ...
学习笔记-----分布式事务基础理论，CAP组合方式
[Android学习笔记四] 自定义Android组件之组合方式创建密码框组件
Android中所有控件(也称组件)都继承自adnroid.view.View类,android.view.ViewGroup是View类的重要子类,绝大多书的布局类就继承自ViewGroup类. 参 ...
Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

JavaScript学习笔记(3)——JavaScript与HTML的组合方式

JavaScript学习笔记(3)——JavaScript与HTML的组合方式相关推荐

最新文章

热门文章