1. AI技术聚合首页
  2. IT

JavaScript简介

青葱年少 • • IT • 阅读 32

目录

概要：

说明：

JavaScript（简称”js”）是一种轻量级的面向对象编程的语言，既能用在浏览器里控制页面的交互，也能用在服务器中作为网站的后台(Node.js),所以JavaScript是一种全栈式的编程语言。

学习JS的原因：

JS是目前最流行的最广泛的客户端脚本语言，在Web中的重要程度是不言而喻的，是一位优秀的前端工程师必备的技能之一。不仅如此JS还有以下优点：

  • JavaScript是最流行的脚本语言，简易好学，学成之后还可以使用一些JavaScript框架(如JQuery，Node.js)来开发前端或后端应用程序。
  • JavaScript还能再Web浏览器中运行，所以学习JavaScript，不需要配置任何特殊的环境。
  • JavaScript还可以应用到移动应用的开发，Web游戏等等都会用到JavaScript。
  • JavaScript有大量的框架和库，使用这些框架和库和大大减少开发的时间。

JS可以干什么：

JavaScript可以用在Web的各个开发领域，如:

Web应用的开发，如我们日常使用的网页基本都是由HTML，CSS，JavaScript构成的，通过JavaScript我们可以实时更新网页中元素的样式，并可以实现人跟网页之间的交互(如监听用户是否点击了鼠标或按下了某个按键等等)。初识CSS-CSDN博客 0基础看这一篇就够了HTML教程(详细汇总)_php代码格式-CSDN博客

JavaScript 指南 – JavaScript | MDN (mozilla.org) 此网站有着完整的js基础资源：

移动应用开发：我们可以进行Web应用开发，JavaScript还可以用来开发手机或者电脑上的应用程序，我们还可以借助一些优秀的框架(如react native),让开发过程变得更加轻松。

Web游戏：在网页上面玩的游戏都可以使用JavaScript来实现。

后端Web开发：我们可以使用JavaScript来进行web应用程序的前端部分的开发，但是随着Node.JS(一个JavaScript运行环境)让JavaScript可以用来开发Web应用程序的后端。

了解JavaScript：

前言：

我们知道一个网页基本是由JavaScript，HTML和CSS构成的，其中：

  • HTML用来定义网页的内容，如图片，文本。
  • CSS用来控制网页的外观，如颜色，字体，背景等等
  • JavaScript用来实时更新网页中的内容，如从服务获取数据并更新到网页中，修改某些标签的演示或中的内容等，可以让网页更加生动。

JavaScript的历史：

JavaScript最初被称为LiveScript，由Netscape(Netscape Communications Corporation,网景通信公司)公司的布兰登-艾奇(Brenda Eich)在1995年开发。在Nescape与Sun(一家互联万公司，全称为”Sun Microsystems”,现已被甲骨文公司收购)合作之后将其更名为了JavaScript。

之所以将LiveScript更名为JavaScript，是因为JavaScript是受Java的启发而设计的，因此在语法上他们有很多相似之处，JavaScript中的许多命名规范也都借鉴自Java，还有一个原因就是为了营销，蹭Java的热度。

同时期，微软和Nombas(一家名为Nombas的公司)也分别开发了JScript和ScriptEase两种脚本语言，与JavaScript形成了三足鼎立之势，他们之间没有统一的标准，不能互用，为了解决这一问题，1997年，在ECMA(欧洲计算机制造商协会)的协调下，Netscape，Sun，微软，Borland(一家软件公司)组成了工作组，并以JavaScript为基础制定了ECMA-262标准(ECMAScript).

第二年，ISO/IEC(国际标准化组织及国际电工委员会)也采用了ECMAScript作为标准(即ISO/IEC-16262)。

bbcd936153f342a68c4d974cf176af92.png

JavaScript与ECMAScript：

ECMAScript(简称”ES”)是根据ECMA-262标准实现的通用脚本语言，ECMA-262标准主要规定了这门语言的语法,类型，语句，关键字，保留字，操作符，对象等几个部分，目前ECMAScript的最新版是ECMAScript6(简称”ES6″),

至于JavaScript，有人会将JavaScript与ECMAScript看作是相同的，其实不然，JavaScript中包含的内容远比ECMA-262中规定的多得多，完整的JavaScript是由以下三个部分组成：

  • 核心(ECMAScript):提供语言的语法和基本对象；
  • 文档对象模型(DOM):提供处理网页内容的方法和接口；
  • 浏览器对象模型(BOM):提供与浏览器进行交互的方法和接口；

如何运行JavaScript以及JavaScrip的特点：

如何运行JavaScript：

作为一种脚本语言，JavaScript代码不能独立运行，通常情况下我们需要借助浏览器来运行JavaScript代码，所有Web浏览器都支持JavaScript.

除了可以再浏览器中执行外，也可以在服务器端或者搭载了JavaScript引擎的设备中执行JavaScript代码，浏览器之所以能够运行JavaScript代码就是因为浏览器中都嵌入了JavaScript引擎，常见的JavaScript引擎有：

  • V8：Chrom和Opera中的JavaScript引擎。
  • SpiderMonkey：firefox中的JavaScript引擎。
  • Chakra：IE中的JavaScript引擎。
  • ChakraCore：Microsoft Edge中的JavaScript引擎。
  • SquirreIFish：Safari中的JavaScript引擎。

JavaScript的特点：

  1. 解释型脚本语言：JavaScript是一种解释型脚本语言，与C,C++等语言需要先编译再运行不同，使用JavaScript编写的代码不需要编译，可以直接运行。
  2. 面向对象：JavaScript是一种面向对象语言，使用JavaScript不仅可以创建对象，也能操作使用已有的对象。
  3. 弱类型：JavaScript是一种弱类型的变成语言，对使用的数据类型没有严格的要求，如你可以将一个变量初始化为任意类型，也可以随时改变这个变量的类型。
  4. 动态性：JavaScript是一种采用事件驱动的脚本语言，它不需要借助Web服务器就可以对用户输入做出响应，如我们在访问一个网页时，通过鼠标在网页中进行点击或者滚动窗口时，通过JavaScript可以直接对这些事件做出响应。
  5. 跨平台：JavaScript不依赖操作系统，在浏览器中就可以运行，因此一个JavaScript脚本在编写完之后可以再任意系统上运行，只要系统上的浏览器支持JavaScript即可。

编写JavaScript代码并运行：

在HTML文档中编写JavaScript代码：

在HTML页面中嵌入JavaScript脚本需要使用<script>标签,用户可以在<script>标签中直接编写JavaScript代码。

现代浏览器默认<script>标签的脚本类型为JavaScript，因此可以省略type属性，如果是浏览器版本太早了就需要设置type属性。

如下：document.write(“<h1>bilibili：https://www.bilibili.com/</h1>“);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.write("<h1>bilibili：https://www.bilibili.com/</h1>");
    </script>
</head>

<body>

</body>
</html>

在JavaScript脚本中，document表示网页文档对象，document.write()表示调用Document对象的write()方法，在当前网页源代码中写入HTML字符串”<h1>bilibili：https://www.bilibili.com/</h1>“.运行结果如下：

8f17af40260a40c691595946a3b022bc.png

在脚本中编写JavaScript代码：

JavaScript程序不仅可以直接放在HTML文档中，也可以放在JavaScript脚本中，JavaScript脚本文件是文本文件，扩展名为.js,使用任何文件编辑器都可以编辑。

常用的文本编辑器有windows系统中的记事本，Linux系统中的Vim，Sublime Text，Notepad++等，对于初学者来说建议先使用文本编辑器来编写JavaScript代码，这样有助于我们队JavaScript语法，关键字，函数等内容的记忆。等到了实际开发阶段，则可以选择一些更加专业的代码编辑器，如Visual Studio Code(简称”VS Code”)，WebStorm(收费)，Atom等，这样可以提高开发效率。

新建 JavaScript 文件的步骤如下。
第1步，新建文本文件，保存为 test.js。注意，扩展名为.js，它表示该文本文件是 JavaScript 类型的文件。
第2步，打开 test.js 文件，在其中编写如下 JavaScript 代码。

alert(“bilibili：https://www.bilibili.com/”);

在上面代码中，alert() 表示 Window 对象的方法，调用该方法将弹出一个提示对话框，显示参数字符串 “Hi, JavaScript!”。
第3步，保存 JavaScript 文件。在此建议把 JavaScript 文件和网页文件放在同一个目录下。
JavaScript 文件不能够独立运行，需要导入到网页中，通过浏览器来执行。使用 <script> 标签可以导入 JavaScript 文件。
第4步，新建 HTML 文档，保存为 test.html。
第5步，在 <head> 标签内插入一个 <script> 标签。定义 src 属性，设置属性值为指向外部 JavaScript 文件的 URL 字符串。代码如下：

<script type="text/javascript" src="test.js></script>

注意：使用＜script＞标签包含外部 JavaScript 文件时，默认文件类型为 Javascript。因此，不管加载的文件扩展名是不是 .js，浏览器都会按 JavaScript 脚本来解析。

第6步，保存网页文档，在浏览器中预览，显示效果如图所示。

定义 src 属性的 <script> 标签不应再包含 JavaScript 代码。如果嵌入了代码，则只会下载并执行外部 JavaScript 文件，嵌入代码将被忽略。

JavaScript代码执行的顺序：

浏览器在解析HTML文档时，将根据文档流从上打下逐行解析和显示，JavaScript代码也是HTML文档的组成部分，因此JavaScript脚本的执行顺序也是根据<script>标签的位置来确定的。

使用浏览器测试下面实例，可以更加直观的看到JavaScript被逐步解析的过程。

<!DOCTYPE html>
<script>
    alert("顶部脚本");
</script>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script>
        alert("头部脚本");
    </script>
</head>
<body>
    <h1>网页标题</h1>
    <script>
        alert("页面脚本");
    </script>
    <p>正文内容</p>
</body>
<script>
    alert("底部脚本");
</script>
</html>

在浏览器中浏览上面实例网页，首先弹出提示文本”顶部脚本”，然后显示网页标题”test”，紧接着弹出提示文本”头部脚本”，下面才显示一级标题文本”网页标题”，继续弹出提示文本”页面脚本”，接着显示段落文本”正文内容”，最后弹出提示文本”底部脚本”。

对于导入的JavaScript文件，也将按照<script>标签在文档中出现的顺序来执行，而且执行过程是文档解析的一部分，不会单独解析或者延期执行。

JS中如何注释：

1.单行注释：

在javaScript中我们可以使用//来进行注释，//只对当前行有效，如下：

document.write(23); //这里输出了一个23
//下面定义了两个变量
var x=20;
var y=23;
2.多行注释：

在JavaScript我们可以使用/**/来进行注释,其中/*是开头，*/是结尾，里面的所有内容都是注释，示例如下：

document.write("<h1>bilibili：https://www.bilibili.com/</h1>");
        /*document.write(23); 这里输出了一个23
        下面定义了两个变量
        var x = 20;
        var y = 23;*/

JavaScript的基本概念：

JavaScript的几个简单概念包括标识符，关键字，保留字，大小写和字面量，这些都是JavaScript的基本组成。

1.标识符：

标识符(Identifier),就是名字，JavaScript中的标识符包含了变量名，函数名，参数名，属性名，类名等等

定义标识符的时候应该注意的是:

  • 第一个字符必须是字符，下划线(_)或美元符号($).
  • 除了第一个字符以外，其他位置可以使用Unicode字符，一般建议使用ASCII编码的字母，不建议使用双字节的字符。
  • 不能与JavaScript关键字，保留字重名。
  • 可以使用Unicode转义序列，如字符a可以使用”\u0061″表示。

下面示例中，arr就是变量的名字：

var arr="https://www.bilibili.com/";
document.write(arr);

第一行代码定义了一个变量，名字为arr，第二行通过arr这个名字使用了变量。

2.关键字：

关键字(Keyword)是JavaScript语言内容的一组名字(或称为命令)，这些名字具有特定的用途，用户不能自定义同名的标识符，具体说明如表:

break delete if this while
case do in throw with
catch else instanceof try continue
finally new typeof debugger(ECMAScript5新增) for
return var default function switch
void

3.保留字：

保留字就是JavaScript语言内部预备使用的一组名字(或称为命令)，这些名字目前还没有具体的用途，是为JavaScript升级版预留备用的，建议用户不要使用，具体说明如表：

abstract double goto native static boolean
enum implements package super byte export
import private synchronized char extends int
protected throws class final interface public
transient const float long short volatile

ECMAScript 3将Java所有关键字都列为保留字，而ECMAScript 5规定较为灵活，如：

在非严格模式下，仅规定class，const，enums，export，extends，import，super为保留字，其他ECMAScript 3保留字可以自由使用；

在严格模式下，ECMAScript 5变得更加谨慎，严格限制implements，interface，let，package，private，protected，public，static，yield，eval(非保留字)，arguments(非保留字)的使用。

JavaScript预定了很多全局变量和函数，用户也应该避免使用他们，如表：

arguments encodeURL Infinity Number RegExp
Array encodeURLComponent isFinite Object String
Boolean Error isNaN parseFloat SyntaxError
Data eval JSON parseInt TypeError
decodeURL EvalError Math RangeError undefined
decodeURLComponent Function NaN ReferenceError URLError

不同的JavaScript运行环境都会预定义一些全局变量和函数，上表列出的是仅针对Web浏览器运行环境。

无论是在严格模式下还是在非严格模式下，都不要使用变量名，函数名或者属性名时使用上面的保留字，以免入坑。 

4.区分大小写：

JavaScript严格区分大小写，所以arr和Arr是两个不同的标识符。

为了避免输入混乱和语法错误，建议采用小写字符编码写代码，在一些特殊情况可以使用大写形式：

1）构造函数的首字母建议大写。构造函数不同于普通函数。

2）如果标识符由多个单词组成，可以考虑使用驼峰命名法–除首个单词外，后面单词的首字母大写。

5.直接量：

字面量(Literal)也叫直接量，就是具体的值，即能够直接参与运算或显示的值，如字符串，数值，布尔值，正则表达式，对象直接量，数组直接量，函数直接量等等。

下面示例分别定义不同类型的直接量：字符串，数值，布尔值，正则表达式，特殊值，对象，数组和函数。

//空字符串直接量
1 //数值直接量
true//布尔值直接量
/a/g//正则表达式直接量
null//特殊值直接量
{}//空对象直接量
[]//空数组直接量
function(){}//空函数直接量，也就是函数表达式

最后祝愿大家一路前行不忘初心：

版权声明：本文为博主作者：aMereNobody原创文章，版权归属原作者，如果侵权，请联系我们删除！

原文链接：https://blog.csdn.net/lh11223326/article/details/137248621

共计人评分，平均分

到目前为止还没有投票！成为第一位评论此文章。

赞 (0)
青葱年少的头像青葱年少普通用户
0
上一篇 2024年4月16日
下一篇 2024年4月16日

相关推荐