JavaScript —— 概述_autocomplete from history-优快云博客

本文为博主原创文章，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/marvelousness/article/details/119888710

JavaScript概述

1.1. JavaScript简述

JavaScript 是为满足制作动态网页的需要而诞生的一种编程语言。
是由 Netscape（网景通信公司）开发的嵌入到 HTML 文件中的基于对象（Object）和事件驱动（Event Driven）的脚本语言。
在 HTML 基础上，使用 JavaScript 可以开发交互式（网页）Web。
JavaScript 的出现使得网页和用户之间实现了实时、动态和交互的关系。

1.2. JavaScript的环境要求

JavaScript的运行需要JavaScript解释器。
换言之，一个能运行JavaScript的Web浏览器，需要嵌入JavaScript解释器。
这与Java的只要有Java虚拟机就能运行、跨操作系统平台的特性类似。
目前几乎所有的主流浏览器（Internet Explorer、Firefox、Opera、Maxthon……）都支持JavaScript。

1.3. 编写JavaScript的工具

可以在普通文本编辑器里编写
可以在浏览器的开发者工具中编写
可以在时下流行的各种IDE中编写，如 Visual Studio、Eclipse、IDEA、HBuilder、Notepad++ 等等。

1.4. 编写第一个JavaScript程序

console.log("Hello World！");

知识点

一、输出信息

js 输出的内容会出现在浏览器的开发者工具中的 Console 面板中。
打开开发者工具的快捷键是 F12 或 Ctrl + Shift + I 或者鼠标右键点击检查菜单。

日志信息

console.log("Hello log");

普通信息

console.info("Hello info");

警告信息

console.warn("Hello warn");

错误信息

console.error("Hello error");

调试信息

console.debug("Hello debug");

格式化信息

console.log("你好，我是%s，来自%s", "timor", "武汉");
console.log("我今年 %d 岁了。", 18);
console.log("PI ≈ %f", 3.1415926);
console.log("红色的%c■%c，蓝色的%c■", "color:red", null, "color:blue");

输出到页面上

document.write("<h1>来自 js 输出的内容</h1>");

在文档已加载后使用它，会覆盖整个文档。

二、输出面板

输出面板侧边栏

在侧边栏，可以对消息的类型进行过滤，可以有针对性的查看诸如警告，错误或者日志信息：

JS输出控制台侧边栏

清空 Console

点击控制台侧边栏旁边的圆形按钮，能清空控制台输出的内容

清空控制台按钮

动态表达式

在清空按钮右边的眼睛形状的按钮可以增加动态表达式，用于实时监控某个变量或表达式的值的变化

上下文过滤器

在一个网页中存在多个网页嵌套的情况时将会产生多个网页上下文，可以通过上下文过滤器来进行过滤。比如，在 parent.html 网页中嵌套了 inner-1.html 和 inner-2.html 则就存在三个上下文，就可以使用过滤器来切换不同上下文的脚本输出内容。

parent.html

<h1>父级网页</h1>
<iframe src="inner-1.html"></iframe>
<iframe src="inner-2.html"></iframe>
<script>console.log("Hello parent");</script>

inner-1.html

<h1>内嵌的第一个网页</h1>
<script>console.log("Hello inner-1");</script>

inner-2.html

<h1>内嵌的第二个网页</h1>
<script>console.log("Hello inner-2");</script>

操作如下：
切换不同的JS上下文
效果如下：
切换不同的上下文后的效果图

内容过滤器

它类似文本编辑器的查找功能，匹配到特定的文本的输出信息才会被显示出来，其他的就会被隐藏，隐藏信息的数量可以在右侧设置按钮旁边会显示：

消息隐藏

消息级别过滤器

它类似侧边栏的功能，能过过滤有针对性的查看诸如警告，错误或者日志信息：

消息级别过滤器

Issue 提示

当网页中用到了一些可能会导致故障的代码时，会在这里产生提示，例如刚刚我们使用的 iframe 嵌套，就会产生 issue，如下所示：
issue 提示
通过点击可以看到更加详细的解释：

Quirks Mode

设置

设置项

Hide network：隐藏网络信息。浏览器预设会印出关于网路的错误Message，例如收到400或500 的状态码就会显示错误。
Preserve log：刷新页面可以保留控制台信息
Selected context only：只显示当前上下文，取消勾选将会显示所有上下文
Group similar：类似的消息会折叠显示
Log XMLHttpRequests：是否显示每一个 XMLHttpRequests，XHR finished loading 表示完成
Eager Evaluation：控制台写表达式时，显示预览结果
Autocomplete from history：自动生成历史消息
当勾选时，会在曾经输入过的历史中提示此刻输入的提示
Evaluate triggers user activation：检测触发用户激活，用于确保代码的执行是由用户触发，而非代码自动执行。例如在使用 window.open 时，如果不勾选，在控制台使用时，就会被拦截。如图：