JavaScript学习笔记（1）-优快云博客

本文介绍了JavaScript的基础组成部分：ECMAScript、DOM和BOM，并详细解释了如何在HTML中使用JavaScript，包括<script>元素的各种属性及其作用。

一. JavaScript的实现

####1. 一个完整的JavaScript应该是由三部分组成，分别是： ####
（1）核心:ECMAScript

（2）文档对象模型：DOM（document object model）

（3）浏览器对象模型：BOM（browser object model）

2. ECMAScript

（1）他规定了该门语言的语法，关键字，保留字，类型，语句，操作符和对象。

3.文档对象模型（DOM）

（1）DOM是针对XML但是经过扩展的应用程序接口，是把整个页面映射成为一个多层节点结构。
（2）DOM提供访问和操作网页内容的方法和接口。

4.浏览器对象模型（BOM）

（1）从根本上来看，BOM只处理浏览器窗口和框架
（2）提供与浏览器交互的方法和接口。

二.HTML中使用JavaScript

在HTML中使用JS代码，一般有两种情况：一种是直接在HTML或JSP界面写JavaScript脚本代码，一种是将JavaScript脚本代码写在一个JS文件中，然后通过src引入到HTML/JSP界面

1.`<script>`元素

HTML4.01为<script>定义了6种属性，分别是：
（1）async:可选，异步脚本，表示应该立即下载脚本，但不应该妨碍页面中其他操作。只可以对外部脚本文件有效，该脚本并不保证按照指定他们的先后顺序执行。它一定会在页面的load事件前执行，但是可能会在DOMContentLoaded事件触发之前或者之后执行。
（2）charset:可选，该属性表示通过src属性指定的代码的字符集，很少有人用这个属性。
（3）defer:可选，表示脚本可以延迟到文档完全被解析和显示后执行。在XHTML文档中，需要把defer属性设置为defer=“defer”，属于一个延迟脚本，该属性只适用于外部脚本文件。
（4）language:已经被废弃
（5）src:可选，该属性表示可以包含要执行代码的外部文件。
（6）type:可选，可以看做是language的替代，表示编写的代码使用的脚本语言的内容类型（MIME类型），一般使用text/javascript,但是服务器实际传送javascript文件时所使用的MIME类型通常是application/x-javascript，但是在type中设置该值脚本可能会被忽略。所以text/javascript可以存在，也可以不存在，如果没有指定，默认为text/javascript。
下面是一段javascript的脚本代码：
<script type="text/javascript"> function hello(){ alert("my first javascript program!"); } </script>
其中<script>元素内部的JS代码是从上到下依次被解释，直到解释器对其内部全部解释完之前，页面其余内容都不会被浏览器加载和显示。
（7）当引用外面的javascript脚本时，在<script>元素中必须有src属性，上面说过了src作用，它是指向一个外部javascript文件的链接，其中外部的javascript文件写的时候直接写javascript脚本代码就行，不用写<script></script>这两个脚本元素
注意，在<script>元素中，不要在代码其他地方出现</script>字符串，否则会报错，因为浏览器遇到</script>就会以为该脚本结束，可以将该字符串分割为两部分来解决这个问题，比如下面这段代码就不会报错：
function error(){ alert("<\/script>"); }
（8）<script>元素的位置，第一种是放在<head>元素中，第二种是放在<body>元素中最后面，假设该页面需要很多的javascript代码，那么放在<head>中可能会导致所有javascript解析完后，才可以显示界面，第二种是在解析javascript代码之前，页面的内容就可以完全的呈现在浏览器中，用户也会因为浏览器窗口显示空白页面时间缩短而感到打开页面的速度加快了
（9）使用<script>元素的两种方式：
a.直接在页面中嵌入JavaScript代码
b.在页面中引入外部的JavaScript代码文件

2.文档模式

（1）通过使用文档类型(doctype)切换实现
（2）分类：混杂模式和标准模式（在文档的开始处如果没有发现文档类型的声明，所有的浏览器都会默认开启混杂模式）
（3）标准模式可以通过过度类型或者框架集型文档类型来触发

3.`<noscript>`元素

（1）出现原因：有的浏览器不支持javascript时，如何才可以让页面平稳退化
（2）在<noscript>元素中的内容只有在下列情况下才会显示：浏览器不支持脚本；浏览器支持脚本但是被禁用
4.标签的位置
（1）传统的做法是把<script>元素放在<head>元素中，但是这样做就必须要等所有的js代码都被下载和解析，执行完以后，才能开始呈现页面的内容，这样会导致浏览器在呈现页面的时候出现明显的延迟。
（2）现代的做法是把<script>元素放在<body>元素的最后面，这样在解析包含javascript代码之前，页面的内容将完全呈现在浏览器中。用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快。

在这里插入图片描述