位置: IT常识 - 正文

[JavaScript你真的以为这么简单吗]JavaScript高级

编辑：rootadmin

推荐整理分享[JavaScript你真的以为这么简单吗]JavaScript高级，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

✅作者简介：大家好,我是Philosophy7？让我们一起共同进步吧！🏆 📃个人主页：Philosophy7的csdn博客 🔥系列专栏： 👑哲学语录: 承认自己的无知，乃是开启智慧的大门 💖如果觉得博主的文章还不错的话，请点赞👍+收藏⭐️+留言📝支持一下博>主哦🤞

⭐学习目标: -掌握script标签的具体用法 -理解行内脚本与外部脚本的区别 -理解文档模式对JavaScript的影响 -ECMAScript的语法文章目录一、JavaScript初体验1、script元素1.1 标签位置1.2 废弃的语法2.行内代码与外部文件3.文档模式4.小结二、ECMAScript语法1、语法1.1、区分大小写1.2、标识符1.3、注释1.4、严格模式1.5、语句1.6、关键字与保留字2、变量2.1、var关键字作用域2.2、let关键字2.3、const关键字3、数据类型3.1、深入字符串字符串的特点:字符出的转换:字符串的字面量3.2、Symbol 类型(了解即可)3.3、Object类型4.运算符1.算数运算符减法乘法除法取余2.赋值运算符5.语句1.if语句2.do-while3.while4.for5.for-in6.break-continue语句7.switch

一、JavaScript初体验1、script元素

在HTML中插入JavaScript，我们使用的是script标签。这个元素是被网景公司创造出来的，并最早在Netscape Navigator 2 中实现的。后来，这个元素被正式加入到 HTML 规范。script元素有下列八个属性，分别为:

async : 可选。表示立即下载脚本，但不阻止其他页面的效果。只对外部脚本有效charset : 可选。使用src属性指定的代码字符集。不常用，因为大多数浏览器不在乎。crossorigin : 配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI， Subresource Integrity）。language：废弃。最初用于表示代码块中的脚本语言（如"JavaScript"、“JavaScript 1.2” 或"VBScript"）。大多数浏览器都会忽略这个属性，不应该再使用它。src：可选。表示包含要执行的代码的外部文件。type：可选。代替 language，表示代码块中脚本语言的内容类型（也称 MIME 类型）。按照惯例，这个值始终都是"text/javascript"，尽管"text/javascript"和"text/ecmascript" 都已经废弃了。

使用JavaScript方式有两种:

HTML中直接使用

外部引入

使用 src 属性。这个属性的值是一个 URL，指向包含 JavaScript 代码的文件，比如：下面的例子

这个例子在页面中加载了demo.js

注意:

使用了 src 属性的标签中再包含其他 JavaScript 代码。如果两者都提供的话，则浏览器只会下载并执行脚本文件，从而忽略行内代码。

<body><script> //内部使用script alert("Hello World")</script><script src="demo.js"/></body>

Js文件

document.write("Hello Alert")

浏览器的执行流程:

在有多个script标签时，浏览器会依照从上到下的顺序去解释并执行它们，前提是没有defer和async属性。

1.1 标签位置

我们可以看到有的script标签被放在head标签内，如下:

<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>JS初体验</title> <script src="demo.js"></script> <script src="demo.js"></script></head><body><script> //内部使用script alert("Hello World")</script><script src="demo.js"/></body></html>

为什么这样做呢：

主要目的是把外部的 CSS 和 JavaScript 文件都集中放到一起。

不过，把所有 JavaScript 文件都放在里，也就意味着必须把所有 JavaScript 代码都下载、解析和解释完成后，才能开始渲染页面（页面在浏览器解析到的起始标签时开始渲染）。

对于需要很多 JavaScript 的页面，这会导致页面渲染的明显延迟，在此期间浏览器窗口完全空白。

为了解决这个问题，我们将script引用到了body标签内，这就表示浏览器在解释JS代码之前就完全渲染了整个页面。

1.2 废弃的语法

自 1995 年 Netscape 2 发布以来，所有浏览器都将 JavaScript 作为默认的编程语言。

type 属性使用一个 MIME 类型字符串来标识script的内容但 MIME 类型并没有跨浏览器标准化。

即使浏览器默认使用 JavaScript，在某些情况下某个无效或无法识别的 MIME 类型也可能导致浏览器跳过（不执行）相关代码。

在最初采用 script 元素时，它标志着开始走向与传统 HTML 解析不同的流程。对这个元素需要应用特殊的解析规则，而这在不支持 JavaScript 的浏览器（特别是 Mosaic）中会导致问题。不支持的浏览器会把script元素的内容输出到页面中

Netscape 联合 Mosaic 拿出了一个解决方案，对不支持 JavaScript 的浏览器隐藏嵌入的 JavaScript 代码。最终方案是把脚本代码包含在一个 HTML 注释中

可以直接在 HTML 文件中嵌入 JavaScript 代码，但通常认为最佳实践是尽可能将 JavaScript 代码放在外部文件中

使用外部文件的好处:

可维护性。JavaScript 代码如果分散到很多 HTML 页面，会导致维护困难。而用一个目录保存所有 JavaScript 文件，则更容易维护，这样开发者就可以独立于使用它们的 HTML 页面来编辑代码。缓存。浏览器会根据特定的设置缓存所有外部链接的 JavaScript 文件，这意味着如果两个页面都用到同一个文件，则该文件只需下载一次。这最终意味着页面加载更快适应未来。通过把 JavaScript 放到外部文件中，包含外部 JavaScript 文件的语法在 HTML 和 XHTML 中是一样的。

在配置浏览器请求外部文件时，要重点考虑的一点是它们会占用多少带宽。在 SPDY/HTTP2 中，预请求的消耗已显著降低，以轻量、独立 JavaScript 组件形式向客户端送达脚本更具优势。

3.文档模式

IE5.5 发明了文档模式的概念，即可以使用 doctype 切换文档模式。

最初的文档模式有两种：混杂模式（quirks mode）和标准模式（standards mode）。

前者让 IE 像 IE5 一样（支持一些非标准的特性），后者让 IE 具有兼容标准的行为。

虽然这两种模式的主要区别只体现在通过 CSS 渲染的内容方面，但对 JavaScript 也有一些关联影响，或称为副作用。

4.小结要包含外部 JavaScript 文件，必须将 src 属性设置为要包含文件的 URL。文件可以跟网页在同一台服务器上，也可以位于完全不同的域所有script元素会依照它们在网页中出现的次序被解释。在不使用 defer 和 async 属性的情况下，包含在script元素中的代码必须严格按次序解释对不推迟执行的脚本，浏览器必须解释完位于script元素中的代码,才能继续渲染页面

二、ECMAScript语法1、语法

ECMAScript很大程度上借鉴了Java中的语法，熟悉Java的小伙伴应该学习起来会非常的容易，并且熟悉，

而且JavaScript是一门弱类型语言，也就意味着语法的约束倒没有那么严格，可以轻松的掌握。

1.1、区分大小写

ECMAScript 中一切都区分大小写。无论是变量、函数名还是操作符，都区分大小写。

换句话说，变量 test 和变量 Test 是两个不同的变量。类似地，typeof 不能作为函数名，因为它是一个关键字（后面会介绍）。但 Typeof 是一个完全有效的函数名。

所谓标识符，就是变量、函数、属性或函数参数的名称。标识符的规则:

第一个字符必须是字母、下划线_ 或者美元符号($)剩下的字母可以是数字、字母、美元符号下划线

按照我们熟悉的方式，ECMAScript标识符也使用了驼峰命名的规则，即第一个单词首字母小写，后面的每个单词首字母大写。

例如:

firstNameselectStudentmyMoney

虽然这些不做强制要求，但是为了增加我们代码的可读性，还是建议如此的去命名。