【Javascript基础】--零基础--超详细且简洁的Javascript笔记--简介(01)

news2024/11/17 10:31:15

参考资料:
【现代Javascript教程】https://zh.javascript.info/
【MDN】https://developer.mozilla.org/zh-CN/
笔记仅作为学习交流载体,无任何商业或盈利目的

JavaScript 简介

了解 JavaScript 有什么特别之处,我们可以用它实现什么,以及哪些其他技术可以与其搭配产生奇妙的效果。

什么是 JavaScript?

JavaScript 最初被创建的目的是“使网页更生动”。

这种编程语言写出来的程序被称为 脚本。它们可以被直接写在网页的 HTML 中,在页面加载的时候自动执行。

脚本被以纯文本的形式提供和执行。它们不需要特殊的准备或编译即可运行。

这方面,JavaScript 和 Java 有很大的区别。

为什么叫 JavaScript?

JavaScript 在刚诞生的时候,它的名字叫 “LiveScript”。但是因为当时 Java 很流行,所以决定将一种新语言定位为 Java 的“弟弟”会有助于它的流行。

随着 JavaScript 的发展,它已经成为了一门完全独立的语言,并且也拥有了自己的语言规范 ECMAScript。现在,它和 Java 之间没有任何关系。

如今,JavaScript 不仅可以在浏览器中执行,也可以在服务端执行,甚至可以在任意搭载了 JavaScript 引擎 的设备中执行。

浏览器中嵌入了 JavaScript 引擎,有时也称作“JavaScript 虚拟机”。

不同的引擎有不同的“代号”,例如:

  • V8 —— Chrome、Opera 和 Edge 中的 JavaScript 引擎。
  • SpiderMonkey —— Firefox 中的 JavaScript 引擎。
  • ……还有其他一些代号,像 “Chakra” 用于 IE,“JavaScriptCore”、“Nitro” 和 “SquirrelFish” 用于 Safari,等等。

上面这些术语很容易记住,因为它们经常出现在开发者的文章中。我们也会用到这些术语。例如,如果“V8 支持某个功能”,那么我们可以认为这个功能大概能在 Chrome、Opera 和 Edge 中正常运行。

引擎是如何工作的?

引擎很复杂,但是基本原理很简单。

  1. 引擎(如果是浏览器,则引擎被嵌入在其中)读取(“解析”)脚本。
  2. 然后,引擎将脚本转化(“编译”)为机器语言。
  3. 然后,机器代码快速地执行。

引擎会对流程中的每个阶段都进行优化。它甚至可以在编译的脚本运行时监视它,分析流经该脚本的数据,并根据获得的信息进一步优化机器代码。

浏览器中的 JavaScript 能做什么?

现代的 JavaScript 是一种“安全的”编程语言。它不提供对内存或 CPU 的底层访问,因为它最初是为浏览器创建的,不需要这些功能。

JavaScript 的能力很大程度上取决于它运行的环境。例如,Node.js支持允许 JavaScript 读取/写入任意文件,执行网络请求等的函数。

浏览器中的 JavaScript 可以做与网页操作、用户交互和 Web 服务器相关的所有事情。

例如,浏览器中的 JavaScript 可以做下面这些事:

  • 在网页中添加新的 HTML,修改网页已有内容和网页的样式。
  • 响应用户的行为,响应鼠标的点击,指针的移动,按键的按动。
  • 向远程服务器发送网络请求,下载和上传文件(所谓的 AJAX 和 COMET 技术)。
  • 获取或设置 cookie,向访问者提出问题或发送消息。
  • 记住客户端的数据(“本地存储”)。

浏览器中的 JavaScript 不能做什么?

为了用户的(信息)安全,在浏览器中的 JavaScript 的能力是受限的。目的是防止恶意网页获取用户私人信息或损害用户数据。

此类限制的例子包括:

  • 网页中的 JavaScript 不能读、写、复制和执行硬盘上的任意文件。它没有直接访问操作系统的功能。

    文件相关操作受限。仅当用户做出特定的行为,JavaScript 才能操作这个文件。例如,用户把文件“拖放”到浏览器中,或者通过 <input> 标签选择了文件。

    有很多与相机/麦克风和其它设备进行交互的方式,但是这些都需要获得用户的明确许可。

  • 不同的标签页/窗口之间通常互不了解。有时候,也会有一些联系,例如一个标签页通过 JavaScript 打开的另外一个标签页。但即使在这种情况下,如果两个标签页打开的不是同一个网站(域名、协议或者端口任一不相同的网站),它们都不能相互通信。

    这就是所谓的“同源策略”。为了解决“同源策略”问题,两个标签页必须 包含一些处理这个问题的特定的 JavaScript 代码,并均允许数据交换。后续讲到这部分相关的知识。

    这个限制也是为了用户的信息安全。例如,用户打开的 http://anysite.com 网页必须不能访问 http://gmail.com(另外一个标签页打开的网页)也不能从那里窃取信息。

  • JavaScript 可以轻松地通过互联网与当前页面所在的服务器进行通信。但是从其他网站/域的服务器中接收数据的能力被削弱了。尽管可以,但是需要来自远程服务器的明确协议(在 HTTP header 中)。这也是为了用户的信息安全。

如果在浏览器环境外(例如在服务器上)使用 JavaScript,则不存在此类限制。现代浏览器还允许安装可能会要求扩展权限的插件/扩展。

是什么使得 JavaScript 与众不同?

至少有 3 件事值得一提:

  • 与 HTML/CSS 完全集成。
  • 简单的事,简单地完成。
  • 被所有的主流浏览器支持,并且默认开启。

JavaScript 是将这三件事结合在一起的唯一的浏览器技术。

这就是为什么 JavaScript 与众不同。这也是为什么它是用于创建浏览器界面的使用最广泛的工具。

此外,JavaScript 还可用于创建服务器和移动端应用程序等。

JavaScript “上层”语言

不同的人想要不同的功能。JavaScript 的语法也不能满足所有人的需求。

这是正常的,因为每个人的项目和需求都不一样。

因此,最近出现了许多新语言,这些语言在浏览器中执行之前,都会被 编译(转化)成 JavaScript。

现代化的工具使得编译速度非常快且透明,实际上允许开发者使用另一种语言编写代码并会将其“自动转换”为 JavaScript。

此类语言的示例有:

  • CoffeeScript 是 JavaScript 的一种语法糖。它引入了更加简短的语法,使我们可以编写更清晰简洁的代码。通常,Ruby 开发者喜欢它。
  • TypeScript 专注于添加“严格的数据类型”以简化开发,以更好地支持复杂系统的开发。由微软开发。
  • Flow 也添加了数据类型,但是以一种不同的方式。由 Facebook 开发。
  • Dart 是一门独立的语言。它拥有自己的引擎,该引擎可以在非浏览器环境中运行(例如手机应用),它也可以被编译成 JavaScript。由 Google 开发。
  • Brython 是一个 Python 到 JavaScript 的转译器,让我们可以在不使用 JavaScript 的情况下,以纯 Python 编写应用程序。
  • Kotlin 是一个现代、简洁且安全的编程语言,编写出的应用程序可以在浏览器和 Node 环境中运行。

小结

  • JavaScript 最开始是专门为浏览器设计的一门语言,但是现在也被用于很多其他的环境。
  • JavaScript 作为被应用最广泛的浏览器语言,且与 HTML/CSS 完全集成,具有独特的地位。
  • 有很多其他的语言可以被“编译”成 JavaScript,这些语言还提供了更多的功能。建议最好了解一下这些语言,至少在掌握了 JavaScript 之后大致的了解一下。

手册与规范

这本书是一个 教程。它旨在帮助你由浅入深掌握 JavaScript 这门语言。但是,当你已经熟悉了这门语言的基础知识,你就会需要其他资料。

规范

ECMA-262 规范 这份规范明确地定义了这门语言。

难理解,但它并不适合日常使用。

手册

MDN(Mozilla)JavaScript 索引 是一个带有用例和其他信息的主要的手册。它是一个获取关于个别语言函数、方法等深入信息的很好的信息来源。

你可以在https://developer.mozilla.org/zh-CN/阅读它。

兼容性表

JavaScript 是一门还在发展中的语言,定期会添加一些新的功能。

要查看它们在基于浏览器的引擎及其他引擎中的支持情况,请看:

  • https://caniuse.com —— 每个功能的支持表,例如,查看哪个引擎支持现代加密(cryptography)函数:https://caniuse.com/#feat=cryptography。
  • https://kangax.github.io/compat-table —— 一份列有语言功能以及引擎是否支持这些功能的表格。

代码编辑器

程序员接触时间最长的就是代码编辑器。

代码编辑器主要分两种:IDE(集成开发环境)和轻量编辑器。很多人喜欢这两种各选一个。

IDE

IDE(集成开发环境)是指用于管理整个项目的,具有强大功能的编辑器。顾名思义,它不仅仅是一个编辑器,而且还是个完整的“开发环境”。

IDE 加载项目(通常包含很多文件),并且允许在不同文件之间导航(navigation)。IDE 还提供基于整个项目(不仅仅是打开的文件)的自动补全功能,集成版本控制(如 git)、集成测试环境等一些其他“项目层面”的东西。

如果你还没考虑好选哪一款 IDE,可以考虑下面两个:

  • Visual Studio Code(跨平台,免费)。
  • WebStorm(跨平台,收费)。

对于 Windows 系统来说,也有个叫 “Visual Studio” 的 IDE,请不要跟 “Visual Studio Code” 混淆。“Visual Studio” 是一个收费的、强大的 Windows 专用编辑器,它十分适合于 .NET 开发。用它进行 JavaScript 开发也不错。“Visual Studio” 有个免费的版本 Visual Studio Community。

轻量编辑器

“轻量编辑器”没有 IDE 功能那么强大,但是它们一般很快、优雅而且简单。

“轻量编辑器”主要用于快速打开和编辑文件。

“轻量编辑器”和 “IDE” 最大的区别是,IDE 一般在项目中使用,这也就意味着在开启的时候要加载很多数据,如果需要的话还会分析项目的结构等。如果我们只需要编辑一个文件,那么“轻量编辑器”会更快。

实际上,“轻量编辑器”一般都有各种各样的插件,这些插件可以做目录级(directory-level)的语法分析和代码补全。所以“轻量编辑器”和 IDE 也没有严格的界限。

常见的“轻量编辑器”:

  • Sublime Text(跨平台,共享软件)。
  • Notepad++(Windows,免费)。

开发者控制台

代码是很容易出现错误的。

但在浏览器中,默认情况下用户是看不到错误的。

为了发现错误并获得一些与脚本相关且有用的信息,浏览器内置了“开发者工具”。

通常使用 Chrome

开发者工具很强大,功能丰富。首先,我们将学习如何打开它们,查找错误和运行 JavaScript 命令。

Google Chrome

打开网页

按下 F12 键,如果你使用 Mac,试试 Cmd+Opt+J。

默认情况下,开发者工具会被在 Console 标签页中打开。

就像这样:

img

具体什么样,要看你的 Chrome 版本。它随着时间一直在变,但是都很类似。

  • 在这我们能看到红色的错误提示信息。这个场景中,脚本里有一个未知的 “lalala” 命令。
  • 在右边,有个可点击的链接 bug.html:12。这个链接会链接到错误发生的行号。

在错误信息的下方,有个 > 标志。它代表“命令行”,在“命令行”中,我们可以输入 JavaScript 命令,按下 Enter 来执行。

现在,我们能看到错误就够了。稍后,在浏览器中调试一节中,我们会重新更加深入地学习开发者工具。

多行输入

通常,当我们向控制台输入一行代码后,按 Enter,这行代码就会立即执行。

如果想要插入多行代码,请按 Shift+Enter 来进行换行。这样就可以输入长片段的 JavaScript 代码了。

小结

  • 开发者工具允许我们查看错误、执行命令、检查变量等。
  • 在 Windows 系统中,可以通过 F12 开启开发者工具。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

适合编程初学者的开源博客系统(Vue3+Element Plus版)

目标 为编程初学者打造入门学习项目&#xff0c;使用各种主流编程语言来实现。让想学编程的&#xff0c;一个都不落下。 上述基本涵盖了当前编程开发所有主流语言。 左侧为前端版本&#xff1a;安卓、iOS、鸿蒙、Flutter、Vue、uni-app、微信小程序。 右侧为服务器端版本&am…

YOLOV7学习记录之模型推理

前面我们学习了YOLOV7的训练过程&#xff0c;今天我们学习其推理过程&#xff0c;即模型预测&#xff1a;其包含损失函数计算&#xff0c;输出值解码&#xff0c;非极大值抑制&#xff0c;mAP计算等过程。 同时还介绍原始图像上绘制目标框等功能。 我们从predict.py文件开始&am…

【源码共读】Vite 项目自动添加 eslint 和 prettier

vite-pretty-lint库是一个为Vite创建的Vue或React项目初始化eslint和prettier的库。 该库的目的是为了让开发者在创建项目时&#xff0c;不需要手动配置eslint和prettier&#xff0c;而是通过vite-pretty-lint库来自动配置。 源码地址&#xff1a; vite-pretty-lintgithub1s…

设计模式 - 单例模式(一)

单例模式一 官方定义二 单例模式八种方式2.1 饿汉式&#xff08;静态常量&#xff09;代码案例案例分析2.2 饿汉式&#xff08;静态代码块&#xff09;代码案例案例分析2.3 懒汉式(线程不安全)代码案例案例分析2.4 懒汉式(线程安全&#xff0c;同步方法)代码案例案例分析2.5 懒…

数据要求说明书(GB856T——88)基于协同的在线表格forture-sheet

数据要求说明书 1引言 1.1编写目的 本份数据要求说明书详细的提供了系统中各个数据的流向&#xff0c;是设计数据库的关键所在。为以后的编码以及测试提供一份可靠的依据。 预期的读者&#xff1a;系统开发人员、系统测试人员、系统维护人员 1.2背景 待开发的数据库名称&a…

揭秘百度智能测试在测试定位领域的实践

以前&#xff0c;我们介绍了测试活动测试输入、测试执行、测试分析、测试定位和测试评估五个步骤中测试输入、执行、分析、评估的智能化研究和实践&#xff0c;本文重点介绍测试定位环节的智能化实践。 测试定位的主要作用是在构建失败或问题发生后&#xff0c;快速给出产生该现…

机器学习之回归

回归算法 线性回归 求解线性回归方法 正规方程梯度下降 迭代 API sklearn.linear_model.LinearRegression 正规方程优化fit_intercept 是否计算偏置量&#xff0c;没有的化经过原点属性 coef_ 回归系数intercept_ 偏置量 sklearn.linear_model.SGDRegressor 使用随机梯度…

转行了!文科生转程序员的外包工作经历分享

01 种子 我是一名文科生&#xff0c;法律专业&#xff0c;武汉某 211 &#xff0c;入这行纯属巧合。 大三下半年&#xff0c;大家纷纷准备秋招&#xff0c;我去校园招聘会上溜达了一圈&#xff0c;好奇而去&#xff0c;丧气而归。 或许是因为大学三年过得太过安逸(宅在宿舍打…

C#语言实例源码系列-实现本地磁盘目录

专栏分享点击跳转>Unity3D特效百例点击跳转>案例项目实战源码点击跳转>游戏脚本-辅助自动化点击跳转>Android控件全解手册 &#x1f449;关于作者 众所周知&#xff0c;人生是一个漫长的流程&#xff0c;不断克服困难&#xff0c;不断反思前进的过程。在这个过程中…

POMO: Policy Optimization with Multiple Optima for Reinforcement Learning学习笔记

文章目录摘要零、一些基础1.梯度近似2.策略梯度定理3.REINFORCE4.REINFORCE with Baseline5.REINFORCE Actor-Critic一、介绍二、相关工作&#xff08;1&#xff09;深度强化学习构建法&#xff08;2&#xff09;推理技术&#xff08;3&#xff09;深度强化学习改善法三、激励四…

制作 iOS 证书

准备工作 您需要 注册并加入 Apple Developer Program&#xff0c;才能在 App Store 上架应用。请准备一台 macOS 系统的电脑&#xff0c;用于证书制作。 创建 App ID 登录 Apple Developer&#xff0c;选择 Certificates, Identifiers & Profiles 选项。 选择 Identifi…

自学编程和计算机科班出身的差别在哪里

前不久逛知乎的时候看到一个问题&#xff1a;自学编程和计算机科班出身的差别在哪里&#xff1f; 自己回答了一下&#xff0c;获得了比较多的点赞和评论&#xff0c;在这里也分享给大家。 985 通信专业学长&#xff0c;转行程序员&#xff0c;聊一聊我的看法&#xff1a;说一千…

k8s之Job 与 CronJob

写在前面 语雀原文阅读效果更佳&#xff1a; 5、Job与CronJob 语雀 《5、Job与CronJob》 Job 与 CronJob 接下来给大家介绍另外一类资源对象&#xff1a;Job&#xff0c;我们在日常的工作中经常都会遇到一些需要进行批量数据处理和分析的需求&#xff0c;当然也会有按时间来…

RK3568平台开发系列讲解(工具命令篇)常用 GIT 命令汇总

🚀返回专栏总目录 文章目录 一、GIT BASICS二、GIT DIFF三、UNDOING CHANGES四、REWRITING GIT HISTORY五、GIT BRANCHES六、REMOTE REPOSITORIES七、GIT CONFIG八、GIT LOG九、GIT RESET十、GIT PULL十一、GIT PUSH沉淀、分享、成长,让自己和他人都能有所收获!😄 一、GI…

基于51单片机的酒精气体检测器设计

使用说明&#xff1a; 上电以后&#xff0c;需要预热一段时间&#xff0c;此时lcd显示Loading... &#xff08;预热过程为电压先上升后下降的改成&#xff0c;通过检测电压来检测是否预热完成&#xff09; &#xff0c; 预热完成后显示酒精浓度&#xff0c;按下按下按键key1即…

MySQL:互联网公司常用分库分表方案汇总

本文目录 一、数据库瓶颈 IO瓶颈 CPU瓶颈 二、分库分表 水平分库 水平分表 垂直分库 垂直分表 三、分库分表工具 四、分库分表步骤 五、分库分表问题 非partition key的查询问题 非partition key跨库跨表分页查询问题 扩容问题 六、分库分表总结 七、分库分表示例 …

因特网概述

目录1 网络、互连网&#xff08;互联网&#xff09;和因特网2 因特网发展的三个阶段3 因特网的标准化工作4 因特网的组成1 网络、互连网&#xff08;互联网&#xff09;和因特网 网络&#xff08;Network&#xff09;由若干结点&#xff08;Node&#xff09;和连接这些结点的链…

2022年山东省职业院校技能大赛高职组“网络系统管理”赛项规程

2022年山东省职业院校技能大赛高职组“网络系统管理”赛项规程一、赛项名称赛项名称&#xff1a;网络系统管理赛项组别&#xff1a;高职组赛项类别&#xff1a;电子与信息大类二、竞赛目的本赛项旨在借鉴世界技能大赛的办赛理念与技术规程&#xff0c;通过竞赛让参赛选手经历一…

论文导读 | 关于内存子图匹配算法的调研

前言 近年来&#xff0c;图数据结构在学术界和工业界的应用越来越广泛&#xff0c;包括社交网络分析、道路分析、化学分子合成、生物蛋白质网络分析、金融欺诈检测等等。子图匹配&#xff08;Subgraph Matching&#xff09;是图分析领域研究的一个重要课题&#xff0c;其旨在一…

批发进销存软件哪个好用?求测评

产品产量增加&#xff0c;在其他条件不变的情况下&#xff0c;就会形成规模效应&#xff0c;这样产品的生产成本就会降低。批发市场就可以对接大批量生产和出售单价更低的商品。而零售业往往也会采取批发货物的方式来降级成本。但是产品种类多&#xff0c;对于的供应商和客户也…