初识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")存储的数据在当前会话（浏览器打开到关闭）结束后就会消失。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/61184.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

uniapp: 微信小程序包体积超过2M的优化方法（主包从2.7M优化到1.5M以内）

uniapp: 微信小程序包体积超过2M的优化方法（主包从2.7M优化到1.5M以内）

一、问题描述 在使用uniapp进行微信小程序开发时&#xff0c;经常会遇到包体积超过2M而无法上传&#xff1a; 二、解决方案 目前关于微信小程序分包大小有以下限制&#xff1a; 整个小程序所有分包大小不超过 30M&#xff08;服务商代开发的小程序不超过 20M&#xff09; 单个…
阅读更多...
STM32 ADC --- 任意单通道采样

STM32 ADC --- 任意单通道采样

STM32 ADC — 单通道采样 文章目录 STM32 ADC --- 单通道采样cubeMX配置代码修改&#xff1a;应用 使用cubeMX生成HAL工程 需求&#xff1a;有多个通道需要进行ADC采样&#xff0c;实现每次采样只采样一个通道&#xff0c;且可以随时采样不同通道的功能。 cubeMX配置 这里我们…
阅读更多...
python读取Oracle库并生成API返回Json格式

python读取Oracle库并生成API返回Json格式

一、安装必要的库 首先&#xff0c;确保已经安装了以下库&#xff1a; 有网模式 pip install flask pip install gevent pi install cx_Oracle离线模式&#xff1a; 下载地址&#xff1a;https://pypi.org/simple/flask/ # a. Flask Werkzeug-1.0.1-py2.py3-none-any.whl J…
阅读更多...
开发 + 安全：网络安全的协作方法

开发 + 安全：网络安全的协作方法

开发团队和安全团队之间由来已久的紧张关系一直是组织内部摩擦的根源。开发人员优先考虑速度和效率&#xff0c;旨在通过快节奏、迭代的开发周期快速交付功能和产品并高效前进。另一方面&#xff0c;安全团队努力平衡风险和创新&#xff0c;但必须专注于使用护栏保护敏感数据和…
阅读更多...
SpringAOP模拟实现

SpringAOP模拟实现

文章目录 1_底层切点、通知、切面2_切点匹配3_从 Aspect 到 Advisor1_代理创建器2_代理创建时机3_Before 对应的低级通知 4_静态通知调用1_通知调用过程2_模拟 MethodInvocation 5_动态通知调用 1_底层切点、通知、切面 注意点&#xff1a; 底层的切点实现底层的通知实现底层的…
阅读更多...
头歌——VLAN基本配置第一关

头歌——VLAN基本配置第一关

任务描述 本关任务&#xff1a;实现跨交换机的VLAN。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a;1.VLAN的定义&#xff0c;2.VLAN的类型。 实验步骤 &#xff08;1&#xff09;新建Packet Tracer拓扑图&#xff1b; &#xff08;2&#xff09;划分VLAN&…
阅读更多...
CentOS使用中遇到的问题及解决方法

CentOS使用中遇到的问题及解决方法

一、CentOS 7网络配置&#xff08;安装后无法联网问题&#xff09; 现象说明 在安装CentOS系统后&#xff0c;有可能出现无法联网的问题&#xff0c;虚拟机中的网络配置并没有问题&#xff0c;而系统却无法联网,也ping不通。 原因描述 CentOS默认开机不启动网络&#xff0c;因…
阅读更多...
【AI+教育】一些记录@2024.11.16

【AI+教育】一些记录@2024.11.16

《万字长文&#xff0c;探讨关于ChatGPT的五个最核心问题》 万字长文&#xff0c;探讨关于ChatGPT的五个最核心问题关于 ChatGPT 铺天盖地的信息让人无所适从。本文则试图提炼出五个关键问题&#xff1a;如何理解这次范式突破&#xff0c;未来能达到的技术天花板&#xff0c;行…
阅读更多...
CEF编译指南2024 Windows篇-CEF简介(一)

CEF编译指南2024 Windows篇-CEF简介(一)

1. 引言 在现代桌面应用程序开发中&#xff0c;Web技术的应用越来越广泛。许多开发者希望能够在传统桌面应用中嵌入Web内容&#xff0c;既保留了原生应用的性能优势&#xff0c;又能享受Web开发的便利性。CEF&#xff08;Chromium Embedded Framework&#xff09;作为一个基于…
阅读更多...
机器翻译-基础与模型

机器翻译-基础与模型

一、机器翻译发展历程 基于规则的-->基于实例的-->基于统计方法的-->基于神经网络的 传统统计机器翻译把词序列看作离散空间里的由多个特征函数描述的点&#xff0c;类似 于 n-gram 语言模型&#xff0c;这类模型对数据稀疏问题非常敏感。神经机器翻译把文字序列表示…
阅读更多...
计算机网络——路由选择算法

计算机网络——路由选择算法

路由算法 路由的计算都是以子网为单位计算的——找到从原子网到目标子网的路径 链路状态算法 序号——&#xff08;源路由器&#xff0c;序号&#xff09;——如果发现这个序号重复或者老了——就不扩散 先测量——再泛洪获得路由 路由转发情况 若S——>W是21则不更改——…
阅读更多...
【金融风控项目-07】：业务规则挖掘案例

【金融风控项目-07】：业务规则挖掘案例

文章目录 1.规则挖掘简介2 规则挖掘案例2.1 案例背景2.2 规则挖掘流程2.3 特征衍生2.4 训练决策树模型2.5 利用结果划分分组 1.规则挖掘简介 两种常见的风险规避手段&#xff1a; AI模型规则 如何使用规则进行风控 **使用一系列逻辑判断(以往从职人员的经验)**对客户群体进行区…
阅读更多...
实时监控，智能分析：输电线路多目视频监控装置提升运维效率

实时监控，智能分析：输电线路多目视频监控装置提升运维效率

在快速变迁的现代社会中&#xff0c;安全监控技术已成为各行各业安全管理体系的核心组成部分。无论是工厂生产线的安全保障&#xff0c;城市治安的维护&#xff0c;还是偏远区域电力巡检的顺利进行&#xff0c;都离不开高效且智能的监控解决方案。 在高压输电线路的监测领域&am…
阅读更多...
【MCU】GD32H7定时器使用外部时钟源

【MCU】GD32H7定时器使用外部时钟源

1、定时器可以使用系统内部的mcuclk&#xff0c;也可以通过管脚使用外部输入的时钟源 2、GD32H7怎么使用外部的源来驱动定时器呢 3、GD32H7通用定时器的框图如下&#xff1a; 这是官方手册上的图&#xff0c;不得不说&#xff0c;画的不够详细&#xff0c;只是一个大概的框图…
阅读更多...
IDEA2023 SpringBoot整合Web开发（二）

IDEA2023 SpringBoot整合Web开发（二）

一、SpringBoot介绍 由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置&#xff0c;从而使开发人员不再需要定义样板化的配置。SpringBoot提供了一种新的编程范式&#xff0c;可以更加快速便捷…
阅读更多...
英伟达AI超大规模组网平台方案

英伟达AI超大规模组网平台方案

英伟达GPU&#xff1a;AI超大规模组网 "英伟达&#xff0c;引领GPU技术革新&#xff0c;持续加速AI超大规模组网进程。自2024年起&#xff0c;英伟达每2年将推出一代新型GPU架构&#xff0c;如今的Blackwell芯片已投入生产。展望未来&#xff0c;2025年&#xff0c;我们将…
阅读更多...
计算机网络：概述知识点及习题练习

计算机网络：概述知识点及习题练习

网课资源&#xff1a; 湖科大教书匠 1、因特网 网络之间需要路由器进行互联&#xff0c;互联网是网络的网络&#xff0c;因特网是最大的互联网&#xff0c;连接到网络的设备称为主机&#xff0c;一般不叫路由器为主机。 因特网发展&#xff1a;ARPNET->三级结构因特网&am…
阅读更多...
makefile速通

makefile速通

makefile速通 文章目录 makefile速通1.基础显式规则隐含规则%*通配符 赋值 伪目标CFLAGS 2.函数wildcardpatsubst 3.项目实例 1.基础 显式规则 目标文件&#xff1a;依赖文件 [TAB] 指令隐含规则 % 任意* 所有通配符 符号含义$^所有依赖文件$所有目标文件$<所有依赖文…
阅读更多...
分数加减

分数加减

#include <stdio.h> #include <stdlib.h>// 求最大公因数 int gcd(int a, int b) {return b 0? a : gcd(b, a % b); }// 化简分数 void simplify(int *num, int *den) {int g gcd(*num, *den);*num / g;*den / g;if (*den < 0) {*num * -1;*den * -1;} }//…
阅读更多...
Misc_01转二维码(不是二进制)

Misc_01转二维码(不是二进制)

例题ctfhub/隐写v2.0 打开是一张图片 文件分离得到zip&#xff0c;爆破密码得到7878 打开得到0和1&#xff0c; !!!不是二进制转图片&#xff0c;直接是二维码 缩小能看到 000000000000000000000000000000000000000000000000000000000000000000000 000000000000000000000000…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023