JavaScript入门

最新推荐文章于 2023-08-06 08:23:15 发布

常青树2001

最新推荐文章于 2023-08-06 08:23:15 发布

阅读量66

点赞数 1

分类专栏：学习笔记文章标签： javascript html

本文链接：https://blog.csdn.net/qq_45537366/article/details/116944782

版权

学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习目标：

《JavaScript高级程序设计》+《JavaScript权威指南》+《深入浅出Vue》，希望本次学习可以深入理解透彻这三本书。

学习内容：

今天下午到晚上待在实验室里，初步翻阅了下这三本，初步决定首先看JavaScript高级程序设计这本，一时心血来潮，想发个博客记录下自己的学习情况，既可以当做学习笔记也可以当做对自己的一种监督吧，本人有java+html+css基础（仅限于基础哈），今天看了约五十页，冲冲冲！

第一章什么是JavaScript

1.1简短的历史回顾

1995年，网景公司一名叫做Brend Eich的工程师开发了一个叫做Mocha的脚本语言。由于时间关系，网景公司和sun公司结成开发联盟，共同完成LiveScript的开发，后LiveScript语言初步成型后，为了搭载上正处于媒体热烈炒作中Java的顺风车，又改名为今天我们熟知的JavaScript。

1.2JavaScript实现

完整的JavaScript实现包含以下几部分：

核心（ECMAScript）
文档对象模型（DOM）
浏览器对象模型（BOM）

1.2.1ECMAScript

基本的层面上，ECMAScript将这门语言描述为如下部分：

语法
类型
语句
关键字
保留字
操作符
全局对象

ECMAScript只是对实现这个规范描述的所有方面的一门语言的简称（有点绕口但不难理解，书上就是这么记得），JavaScript就实现了ECMAScript，当然还有其他的语言也实现了ECMAScript：例如Adobe ActionScript。

1.2.2DOM

文档对象模型（DOM 全拼Document Object Model）是一个应用编程接口（API），用于在HTML中使用扩展的XML。DOM将整个页面抽象为一组分层节点，HTML或XML页面的每个组成部分都是一种节点，包含不同的数据。

例如下面的HTML页面：就可以通过DOM分成分层节点：不知道怎么画图，大概意思就是html>(head=body)>(title=p)><page=Hello World>,与数据结构中的树类似。

<html>
    <head>
         <title>page</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

DOM通过创建表示文档的树，让开发者可以随心所欲的控制网页的内容和结构。使用DOM API可以轻松的删除、添加、替换、修改某个节点。

如果有疑问：DOM为什么是必须的？我认为书中有一句话很有意思，它说：由于网景公司和微软公司采用不同的思路开发DHTML（不同形式的动态HTML），为了防止网景和微软各行其是，因为他们两个大公司打架，会为开发者带来无限的麻烦，导致开发者们不得不面向浏览器编程，于是W3C开始制定了DOM标准！

1.2.3BOM

浏览器对象模型（BOM）API，用于支持访问和操作浏览器的窗口，使用BOM，开发者可以操控浏览器显示页面之外的部分。BOM真正独一无二的地方（自然也是问题做多的地方），就是他是唯一一个没有相关标准的JavaScript实现。幸好HTML5出现了，这个版本的html一正是规范的形式涵盖了尽可能多的BOM特性，使之前很多问题都迎刃而解了。

总体来说，BOM主要针对浏览器窗口和子窗口，不过人们通常把任何特定于浏览器的扩展都归在BOM范畴内。

例如下面这些扩展：

弹出新浏览器窗口的能力
一动、缩放、关闭浏览器的能力
mavigator对象，提供关于浏览器的详尽信息
location对象，提供浏览器加载页面的详尽信息
screen对象，提供关于用户屏幕分辨率的详尽信息
performance对象，提供浏览器内存占用、导航行为和时间统计的详尽信息
对cookie的支持
其他自定义对象

以前，每个浏览器都用自己的BOM，现在有了H5,BOM的细节应该会日趋一致。

第二章 HTML中的JavaScript

2.1<script>元素

将JavaScript插入HTML中的主要方法就是使用<script>元素。<script>元素有以下八个属性：

async
charset
crossorigin
defer
integrity
language
src
type

包含在<script>中的代码会被从上到下解释，有一个注意点就是注意代码中不能出现</script>，即便是作为字符串输出也不行，因为浏览器见到</script>后就会将其当成结束标签，不会管他是不是仅仅只是字符串。自然也有避免的方法，就是在</script>前面加上转义字符\即可。

src属性：

这个属性的值是Url，指向一个包含JavaScript代码的文件。如果使用<script src=""></script>链入了一个js文件的话，那这个标签内部就不要在包含其余的JS代码，因为浏览器只会下载并执行src指向的js文件，忽略行内代码。

url还可以是一个网址，例如在后面学习Vue的时候，它就用到了这点，例如这个<script src="http://www...com/...js"></script>，浏览器在解析资源的呢时候，回想src属性指定的路径发一个get请求以取得资源，这个请求仍然受到HTTP/HTTPS协议的限制。

2.1.1标签位置

若将JS代码全部放入<head>标签中，浏览器会有明显的延迟，因为浏览器解析到<body>的起始标签才会开始渲染，这期间浏览器也面是空白的，就会非常明显。

若将JS代码全部放入<body>标签中，效果明显会好一些，因为页面会在处理js代码之前渲染页面，用户就会感觉加载速度更快了，页面空白的时间也变短了。

2.1.2推迟执行脚本

前面讲到<script>标签有八个属性，其中有一个加defer的属性，这个属性表示在执行的时候不会改变页面的结构，因此脚本完全可以在整个页面解析后在运行。所以在<script>中设置defer属性，会告诉浏览器应该立刻开始下载，但执行应该推迟。

注意：defer属性最好只有一个，避免未知的顺序错误。

2.1.3异步执行脚本

2.1.5XHTML中的变化

可扩展超文本标记语言（XHTML 全拼：Extensible HyperText Markup Language）是将Html作为Xml的应用重新包装的结果，与Html不同，在XHtml中使用JavaScript必须指定type属性且值为text/javascript，目前XHtml已经退出历史舞台，但可能会遇到些遗留代码，稍作介绍。

2.2行内代码和外部文件

尽可能的将JavaScript代码放在外部文件中，推荐理由如下：

可维护性
缓存
适应未来

从浏览器的角度来讲，通过SPDY/HTTP2获取多个js小文件和一个js大文件的延迟差不多。

2.4 <noscript>元素

这个元素对于禁用JavaScript的浏览器有一定用处，主要针对早期浏览器不支持JavaScript，需要一个页面优雅降级的处理方案，所以<noscript>出现了。

2.5 小结

JavaScript是通过<script>标签插入到HTML中。这个元素可以用于把JavaScript代码嵌入到HTML中去，跟其他标记混合在一起，也可用于引入保存在外部的JavaScript文件。本章重点如下：要包含JavaScript文件，必须将src属性设置为要包含文件的URL，文件可以跟网页在同一台服务器上，也可以位于不同的域：例如一个网址
所有<script>元素会依照他们在网页中出现的次序被解释，在不使用defer和async属性的情况下，包含在<script>元素中的代码必须严格按照次序进行
对不推迟执行的脚本，浏览器必须解释完位于<script>元素中的代码，然后才继续渲染页面剩余部分。为此，通常把<script>元素放在页面末尾，介于主内容之后和</body>之前
可以使用defer属性把脚本推迟到文档渲染结束完毕后在执行。推迟的脚本纵是按照它们列出的顺序执行
可以使用async属性把脚本不需要等待其他的脚本，同时也不堵塞文档渲染，即异步加载。异步脚本不能保证按照它们在页面中出现的次序运行
通过使用<noscript>元素，可以指定在浏览器不支持脚本时现实的内容。如果浏览器支持并启用脚本，则<noscript>元素中的任何内容都不会被渲染。

常青树2001

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript入门

学习目标：《JavaScript高级程序设计》+《JavaScript权威指南》+《深入浅出Vue》，希望本次学习可以深入理解透彻这三本书。学习内容：今天下午到晚上待在实验室里，初步翻阅了下这三本，初步决定首先看JavaScript高级程序设计这本，一时心血来潮，想发个博客记录下自己的学习情况，既可以当做学习笔记也可以当做对自己的一种监督吧，本人有java+html+css基础（仅限于基础哈），今天看了约五十页，冲冲冲！第一章什么是JavaScript1.1简短的历史回顾1995年
复制链接

扫一扫