初识JavaScript（第一个课）

一、JavaScript定义

JavaScript 是一种高级的、解释型的编程语言，主要用于网页开发，使网页具有交互性和动态性。

JavaScript是运行在客户端的脚本语言

脚本语言不需要编译、运行过程种直接js解释器逐行来进行解释执行

二、历史背景

JavaScript 最初由 Netscape 公司的 Brendan Eich 在 1995 年设计。它的设计初衷是为了在浏览器中实现一些简单的交互功能，比如表单验证，当时它被命名为 LiveScript，后来由于和 Sun Microsystems 合作，为了搭上 Java 语言的热度，才将名字改为 JavaScript，但实际上它和 Java 语言没有太多的关联。

三、应用场景

1、浏览器端开发（前端开发）

是网页开发中必不可少的一部分。通过 JavaScript，可以实现网页元素的操作，如改变 HTML 元素的样式、内容和属性。

例如，可以使用 JavaScript 让一个按钮在被点击时改变颜色，或者通过操作 DOM（Document Object Model，文档对象模型）动态地添加或删除网页中的元素。

2、服务器端开发（后端开发）

随着 Node.js 的出现，JavaScript 也可以用于服务器端开发。Node.js 是一个基于 JavaScript 的运行时环境，它允许 JavaScript 代码在服务器上运行，处理诸如文件系统操作、网络通信等任务。

3、移动应用开发（混合应用）

利用一些跨平台开发框架，如 React Native、Ionic 等，JavaScript 可以用于开发移动应用。这些框架将 JavaScript 代码转换为原生应用的组件，使开发者能够用 JavaScript 构建在 iOS 和 Android 平台上运行的应用。

四、浏览器组成部分

1、用户界面（UI）

这是用户直接与之交互的部分，包括浏览器的窗口、菜单、工具栏等。不同浏览器的用户界面设计可能会有所不同，但一般都包含一些基本元素。
例如，在大多数浏览器中，有前进和后退按钮，用户可以通过点击这些按钮在浏览历史记录中导航。还有地址栏，用户在这里输入要访问的网站的 URL（统一资源定位符）。同时，书签栏允许用户保存和快速访问喜欢的网站，而刷新按钮用于重新加载当前页面的内容。

2、浏览器引擎

它是浏览器的核心组件之一，主要作用是在用户界面和渲染引擎之间进行通信和协调。它可以根据用户的操作（如点击链接、输入网址等）来调用渲染引擎获取网页内容，并将渲染后的结果展示给用户。
例如，当用户在地址栏输入一个网址并按下回车键时，浏览器引擎会启动一系列的流程来获取和展示网页，包括向服务器发送请求、接收数据以及将数据传递给渲染引擎进行处理。

3、渲染引擎（也称为排版引擎）

渲染引擎负责解析 HTML（超文本标记语言）、CSS（层叠样式表）和 JavaScript 代码，将这些代码转换为可视化的网页。
对于 HTML，渲染引擎会将标签解析为 DOM（文档对象模型）树。例如，当解析一个包含<html>、<body>、<h1>和<p>标签的简单网页时，它会构建一个对应的 DOM 树结构，其中<html>是根节点，<body>是子节点，<h1>和<p>是<body>的子节点。
对于 CSS，渲染引擎会根据样式规则来确定网页元素的外观，如颜色、字体、大小、布局等。它会将 CSS 样式与 DOM 树中的元素进行匹配，计算出每个元素的最终样式。
JavaScript 代码则会被执行，以实现网页的动态效果。例如，JavaScript 可以改变 DOM 树的结构或元素的样式，渲染引擎会根据这些变化重新渲染网页。常见的渲染引擎有 Gecko（用于 Firefox）、Blink（用于 Chrome 和 Opera 等）和 WebKit（用于 Safari 等）。

4、网络模块

主要负责与网络进行通信，包括发送 HTTP（超文本传输协议）请求和接收服务器返回的数据。
当用户请求访问一个网页时，网络模块会根据用户输入的网址，向对应的服务器发送请求。例如，如果用户访问 "https://www.example.com"，网络模块会构建一个 HTTP 请求，其中包含请求的方法（如 GET）、请求头（包含浏览器信息、用户代理等）等内容，并将其发送到服务器。
它还会接收服务器返回的响应，包括 HTML 文件、CSS 文件、JavaScript 文件、图片等各种资源。这些资源会被传递给其他模块进行进一步的处理，如渲染引擎进行页面渲染。

5、JavaScript 解释器（JavaScript 引擎）

用于执行网页中的 JavaScript 代码。它可以解析 JavaScript 代码的语法，理解代码的含义，并按照代码的逻辑进行执行。
例如，当网页中有一段 JavaScript 代码用于实现一个图片轮播效果时，JavaScript 引擎会逐行解释代码。它会处理变量定义、函数调用、事件处理等操作，从而使网页能够实现动态的交互功能。不同浏览器可能使用不同的 JavaScript 引擎，如 V8 引擎（用于 Chrome）、SpiderMonkey（用于 Firefox）等。

6、数据存储模块

用于存储浏览器相关的数据，主要包括以下几种类型：
缓存：存储网页的一些资源，如 HTML 文件、CSS 文件、图片等。当用户再次访问相同的网页或者相关资源时，如果缓存中存在有效数据，浏览器可以直接使用缓存中的内容，而不需要再次从服务器获取，这样可以提高网页的加载速度。
Cookies：是一种小型的文本文件，由服务器发送并存储在浏览器中。Cookies 通常包含用户的一些相关信息，如登录状态、用户偏好等。例如，当用户登录一个网站后，网站可能会在浏览器中设置一个 Cookie 来记录用户的登录信息，这样在下次访问该网站时，浏览器可以发送这个 Cookie，服务器可以根据 Cookie 中的信息识别用户身份，提供个性化的服务。
本地存储（如 LocalStorage 和 SessionStorage）：LocalStorage 用于在浏览器中长期存储数据，即使浏览器关闭后数据仍然存在。SessionStorage 则用于存储在一个会话期间（从用户打开网页到关闭网页）的数据。这些存储方式可以用于存储一些简单的应用数据，如用户的设置、表单数据等。

五、js组成

一、ECMAScript（核心语法）

1、变量与数据类型

基本数据类型：包括数字（Number）、字符串（String）、布尔值（Boolean）、未定义（Undefined）、空值（Null）和符号（Symbol，ES6 新增）。例如，let num = 5;定义了一个数字类型的变量，let str = "Hello";是一个字符串类型的变量。数字类型可以表示整数和浮点数，布尔值只有true和false两种取值。未定义类型通常用于表示变量声明但未初始化的情况，空值表示故意为空的一个值。
复杂数据类型（引用数据类型）：主要是对象（Object）和函数（Function）。对象是一组属性和方法的集合，例如let person = {name: "John", age: 30, sayHello: function() { console.log("Hello!"); }};，这里的person就是一个对象，它有属性name和age，以及方法sayHello。函数在 JavaScript 中是一等公民，可以像变量一样被赋值、传递和调用，如let add = function(a, b) { return a + b; };定义了一个简单的加法函。

2、运算符

算术运算符：包括加（+）、减（-）、乘（*）、除（/）、取模（%）等。例如，10 % 3的结果是1，因为10除以3的余数是1。
比较运算符：如等于（==和===）、不等于（!=和!==）、大于（>）、小于（<）等。需要注意的是，==会进行隐式类型转换，而===是严格相等比较，不会进行类型转换。例如，"5" == 5是true，但"5" === 5是false。
逻辑运算符：有与（&&）、或（||）、非（!）。例如，true && false的结果是false，true || false的结果是true，!(true)的结果是false。

3、控制流语句

条件语句：主要是if - else和switch。if - else语句根据条件的真假来执行不同的代码块。
循环语句：包括for、while和do - while。for循环通常用于已知循环次数的情况。

4、函数

函数的定义方式多样。可以是函数声明，如function addNumbers(a, b) { return a + b; }，也可以是函数表达式，如let multiplyNumbers = function(a, b) { return a * b; }。函数可以有参数和返回值，并且可以嵌套使用。例如，一个函数内部可以调用另一个函数，function outerFunction() { function innerFunction() { console.log("Inner function"); } innerFunction(); } outerFunction();。

二、DOM（文档对象模型）操作（用于浏览器端）

1、节点访问

可以通过多种方式访问 DOM 节点。例如，通过document.getElementById("myId")可以获取具有特定id属性的元素。document.getElementsByTagName("div")会返回文档中所有<div>标签的元素集合。document.getElementsByClassName("myClass")用于获取具有特定类名的元素集合。

2、节点修改

可以改变元素的属性、内容和样式。例如，element.setAttribute("src", "new-image.jpg")可以改变一个<img>元素的src属性。element.innerHTML = "New content"用于更新元素内部的 HTML 内容。对于样式修改，可以使用element.style.color = "red"来改变元素的颜色。

3、事件处理

可以为元素添加各种事件监听器。例如，element.addEventListener("click", function() { console.log("Clicked"); });为元素添加了一个click事件监听器，当用户点击该元素时，就会执行相应的函数，在控制台输出Clicked。

三、BOM（浏览器对象模型）（用于浏览器端）

1、窗口操作

可以控制浏览器窗口的大小、位置等。例如，window.open("https://www.example.com", "newWindow", "width=600,height=400")用于打开一个新的浏览器窗口，并且可以指定窗口的宽度和高度。window.moveTo(x, y)可以移动窗口到指定的坐标位置。

2、导航操作

用于页面之间的跳转等操作。例如，window.location.href = "https://www.new-url.com"会使浏览器跳转到新的网址。window.history.back()可以让浏览器返回上一个浏览的页面。

3、存储操作（部分与浏览器数据存储模块相关）

包括localStorage和sessionStorage。localStorage.setItem("key", "value")可以在本地存储中保存一个键值对，并且这个数据在浏览器关闭后仍然存在。sessionStorage.setItem("key", "value")存储的数据在当前会话（浏览器打开到关闭）结束后就会消失。