JavaScript的基础知识介绍

方石剑
99 阅读16分钟

编码员你好!

这篇文章的目的是帮助初学者适应JavaScript的概念。对于新人来说，JavaScript ，众所周知，它是世界上最流行的语言，在软件开发中的使用率超过69.7%。如果你要留出时间和精力来学习一门新的编程语言，或者要在技术领域开始你的职业生涯，你要确保你在众多的语言中挑选一门有用的和需求量大的编程语言，JavaScript ，在这里很容易成为你的最佳选择。

谢谢你的阅读!内容由App Generator提供

  • 👉 什么是JavaScript
  • 👉JavaScript Basics
  • 👉 使用JS in HTML
  • 👉 调用一个external JS 文件
  • 👉JavaScript 评论
  • 👉 CommonsMethodologies in JS
  • 👉JS Cheat Sheet - 10项
  • 👉 结论与链接

现在你已经做了研究，并且可能已经开始了学习，你可能已经发现JavaScript的一些概念很模糊，难以理解。别担心，我们都经历过这种情况，这就是为什么我们要把这篇文章放在一起，帮助你学习和理解这门了不起的语言的基础知识，同时也给你提供职业发展的小抄，take your JavaScript knowledge to the next level 。

Already Familiar with JS? 请看这篇热门文章。React表单 - Formik vs. Hook-Form vs. Final-Form

这篇文章是为那些希望提升自己的JavaScript技能和对这门语言的理解的初学者和入门级工程师准备的。本文包含解释、示例代码、基本和重要的操作符、函数、方法、类，以及对JavaScript 的基本原理的总体概述。

✨ 什么是JavaScript

JavaScript 最简单的形式是一种编程语言，为网站上的大多数动态行为提供动力，因为它有与文本、数据结构和文档对象模型（DOM）相关的API。它开发于1995年，是一种高级的多范式脚本语言，支持函数式、命令式和事件驱动的编程风格。

一些uses of JavaScript ，其中包括。

  • 通过WebSockets或Ajax加载网页内容。
  • 初始化弹出窗口、查询和操纵元素
  • 控制流媒体播放，等等。

流行的websites that run on JavaScript ，包括谷歌、Facebook、Youtube、Instagram等等。这使得它成为互联网历史上使用最多的语言。由于这个事实，有太多的东西需要学习，不可能把所有的语言概念都记在脑子里，这使得这篇文章对你作为一个JavaScript开发者的成长非常重要。

✨ JavaScript基础知识

这里有一些你应该熟悉的JavaScript的基本概念。

👉 在HTML页面中包含JavaScript

要在HTML页面中包含JS，你需要将代码包裹在脚本标签中。下面是这个概念的一个例子。

<script type="text/javascript">

//Your JavaScript code goes here

</script>

👉 调用一个外部JavaScript文件

你可以创建一个external JavaScript 文件并在你的HTML文件中链接到它。这很有用，因为你的JavaScript文件中可能有很多代码，在你的HTML文件中填充这些代码会使代码看起来很糟糕，而且不合适。因此，如果你的文件被命名为script.js ，这里是如何在你的HTML文件中调用它。

<script src="https://somehost.net/static/myscript.js"></script>

👉 给你的代码加注释

注释对于你的代码库来说是必要的，因为它们可以帮助其他人理解代码，也可以在需要时帮助你调试你的代码。

有不同的方法来给你的JavaScript代码添加注释。它们包括。

  • 单行注释。使用// 作为前面的字符，向你的代码库添加单行注释。
// Single line comment in JS
let my_var = "Learning JS"
  • 多行注释。当你想在你的代码中写多行注释时，这很有用。用/* 和*/ 作为评论的开始和结束，以避免它被执行。
/*
 Multi line comment in JS
*/
var x = 4;

✨ 常见的JS方法论

👉方法

方法返回关于一个对象的信息，通过在一个实例后面加上句号来调用*。*，方法名称，以及圆括号（）。

// Returns a number between 0 and 1
Math.random();

👉库

库包含的方法可以通过在库名后面加上句号来调用*。*，方法名称，以及一组括号（）。下面是一个JavaScript中的库的例子。

Math.random();
// ☝️ Math is the library

👉变量

变量是用来store information in JavaScript 。它是一个唯一的标识符，指向内存中的一个特定位置。变量是可以用来在JavaScript代码库中进行各种操作的替身值，你应该注意，在JavaScript中，有3种常见的方法可以声明变量。它们包括。

  • var- 这是最常用的JavaScript变量。然而，由于它有重新声明的可能性，也就是说，它可以很容易地在代码中重新声明和重新定义，这使得它非常不稳定，容易出错，因此，自从采用ES6的let关键字后，建议不要在你的代码库中经常使用var关键字。

  • let- let关键字的变量不能被重新声明，这使得它容易产生较少的错误。然而，它们可以被重新分配一个新的值。

// Note here that ‘x’ cannot be redeclared 
// but can be reassigned as a value
let x = 5;
  • const- JavaScript中的const变量在代码中出现之前不能被使用。它们也不能被重新声明或重新赋值，也就是说，它们存储在内存中的信息在你的代码生命周期中保持不变。
// y here remains constant throughout the codebase 
// and cannot be reassigned or redeclared.
const y = 15;

👉数据类型

不同类型的值和数据可以被存储在JavaScript变量中。"="等号用于给变量赋值。在JavaScript中，有7种数据类型，包括。

  • 数字- 这些是JavaScript中的数值，可以是整数或实数。
//10 here is a numerical data type.
let x = 10;
  • 字符串- 这些是JavaScript中多个字符的组合。在JavaScript中，字符串的一个例子是。
let name = “Hello JavaScript”
  • 布尔- 这些是JavaScript中的真值或假值。
  • 数组- 数组是不同数据类型的集合，也就是说，你可以在一个数组中存储各种数据类型。它通常用括号[]来表示。一个数组的例子是。
let mango = [‘fruit’, true, 10]
  • 对象- JavaScript中的对象是一个命名变量的属性的容器。它们可以有自己的数据和方法，例如
let police = {name: “Jon Snow”, id: 5667637, active: true}
  • Null- 这是用来表示没有身份的，只能来自于字面表达式，例如：Null。
let x = null

它经常被用来表示一个预期的值，但在这个时候可能是不可用的。

✨ JavaScript小贴士

👉 1 -JavaScript中的操作符

JavaScript操作符被用来赋值、比较数值、进行算术计算等等。在JavaScript中，有不同种类的运算符，包括算术运算符、逻辑运算符、比较运算符和位运算符。

  • 算术运算符

这些运算符用于执行JavaScript中的基本计算。

+  Addition
-  Subtraction
*  Multiplication
/  Division
(....) Grouping Operator
%   Modulus 
++  Increment Numbers
--  Decrement Numbers
  • 比较运算符
==  Equal to
=== Equal value and equal type
!=  Not equal
!== Not equal value or not equal type
>   Greater than
<   Less than
>=  Greater than or equal to
<=  Less than or equal to
?   Ternary operator
  • 逻辑运算符
&& Logical and
|| Logical or
!  Logical not
  • 位操作符
&   AND statement
|   OR statement
~   NOT
^   NOR
<<  Left shift
>>  Right shift
>>> Zero fill right shift

👉 2 -条件流(if/else)

这些语句被用来在你的代码中执行任务和命令。它们决定了你的代码库要执行的命令流，也就是说，如果满足某些要求，那么你的代码就会执行或不执行，这使得它成为JavaScript和一般编程的一个重要方面。

if ( condition ) {
    // block of code to be executed 
    // if the given condition is satisfied
} else {
    // block of code to be executed 
    // if the given condition is not met
}

👉3 -JavaScript中的循环

循环类似于 "if-else "语句，因为只要满足一个条件，它们就会运行特定的命令，然而，主要的区别在于，循环可以让你随心所欲地用不同的值运行代码块。在JavaScript中，有不同的方法来创建循环，包括。

  • while循环：这建立了一个循环运行的条件。下面是一个循环语法的例子。
while ( condition ) {
    // Code to be executed
    // Update the loop variable 
}
  • For 循环：这是在JavaScript中创建循环的最流行的方法。它的语法如下所示。
for (initialize loop variable; condition; update after loop) {
    // code to be executed in loop  
}
  • Do-while循环:这与while循环非常相似，但不同的是它至少运行一次，并检查到最后，以确保在再次运行之前满足条件。它的语法如下所示。
do {
    // 1. Code to be executed in the loop
    // 2. Update loop variable
} while (condition);

👉 4-JavaScript数组

数组是JavaScript中重要的数据结构，用于分组小型或大型数据集。数组被简单地称为数据的集合。下面是一个数组的例子。

let array = [“goodness”, “maya”, “job”];

数组有一些特殊的方法，用来对其中包含的数据进行特定的操作，它们包括。

  • concat() - 用于将几个数组连接成一个数组。
  • length() - 表示一个数组中包含的元素数量。
  • indexOf() - 返回数组中某一特定元素出现的第一个位置。
  • join() - JavaScript中的join方法用于将一个数组中的元素组合成一个字符串，同时返回该字符串。
  • lastIndexOf() - 给出一个数组中给定元素出现的最后位置。
  • pop() - 删除数组中的最后一个元素。
  • push() - 在最后添加一个新元素。
  • reverse() - 将数组中的元素按降序排序。
  • shift() - 该方法删除数组的第一个元素。
  • slice() - 将一个数组的副本拉入一个新的数组。
  • sort() - 该方法按字母顺序排列元素。
  • splice() - 该方法以指定的方式和位置添加元素。
  • toString() - 将一个数组的元素转换为字符串。
  • unshift() - 此方法在数组的开头添加一个新元素。
  • valueOf() - 返回指定对象的原始值。

👉5 -JavaScript函数

JavaScript中的函数可以被定义为为执行一组特定指令而编写的代码块。下面描述了JavaScript中基本函数的语法。

function myFunction (parameterOne, parameterTwo,  …parameterN) {
    // Task of the function 
}

上面的代码块以关键字function 开始，这个关键字明确用于描述JavaScript中的函数，然后是函数的名称，以及在小括号中定义的函数的参数() ，最后是大括号中的函数应该承担的任务/工作{} 。

下面列出了一些常用的函数类型，用于outputting data in JavaScript 。

  • prompt():该函数在浏览器中创建一个接受用户输入的对话框。
  • alert():该函数在浏览器窗口的对话框中输出信息。
  • console.log():这是一个对所有级别的开发人员都非常重要的函数，因为它用于调试代码，也可以在浏览器的控制台中输出信息。
  • document.write():全局函数：这个函数用于将代码直接写入HTML代码中。

下面是JavaScript中的一些全局函数。

  • parseFloat():这个函数返回一个传给它的参数的浮点数。
  • parseInt()::此函数返回传递给它的任何参数的整数。
  • encodeURI():将一个统一资源运营商（URI）编码为UTF-8编码方案。
  • decodeURI():解码一个已经编码的URI。
  • isNaN()::该函数确定给它的参数是否是一个数字。
  • Number():用于将一个给定的参数转换为一个
  • number.eval():用于评估以字符串形式出现的JavaScript程序。

👉 6-JavaScript中的范围

范围被定义为JavaScript中定义的变量的可访问性，也就是说，它描述了你的JavaScript代码的哪一部分可以访问和使用已经定义的变量。在JavaScript中，有三（3）种类型的范围，即。

  • 全局范围 - 这是指任何不包含在代码块（一对大括号）或函数中的定义变量。全局范围可以从程序中的任何地方访问。下面是一个全局范围变量的例子。
let greeting = ‘Hello!’;

function greet() {
    console.log(greeting);
}

// This function returns ‘Hello!’ as the response.
greet();
  • 本地范围 - 这些是在一个功能块中声明的变量。它们只能在函数中访问，不能在程序中的其他地方使用。下面是一个局部范围的例子。
function greet() {

    let greeting = ‘Hello!’;
    console.log(greeting);
}

//This function returns ‘Hello!’ as the response.
greet();
  • 块范围--在ES6中，用let和const关键字定义的变量可以被范围到最近的大括号内。然而，它们不能从上述一对大括号之外到达，这意味着它们不能在外面被访问。下面是一个封锁范围的例子。
{
    let greeting = ‘Hi’;
    var language = ‘English’;
    console.log(greeting); // “Hi” is returned
}

console.log(language); // ‘English’ gets logged
console.log(greeting); //Uncaugt ReferenceError: greeting is not defined

👉 7 -JavaScript Hoisting

Hoisting 是一种允许将函数、变量和类移到其作用域顶部的JavaScript方法，也就是说，函数、变量和类的声明可以在使用hoisting定义它们之前在JavaScript代码中被利用。然而，这种方法并不值得推荐，因为这种方法在大多数时候容易出错，在程序中容易出现不可预见的错误。

在JavaScript中，有两种类型的提升方式，包括。

  • 函数提升--如前所述，函数提升使你能够在定义一个函数之前在程序中调用或使用该函数。下面是一个例子。
// The usage is before the definition
showAnimal(‘lion’)

function showAnimal(input) {
    console.log(input);
} //Lion gets logged
  • 变量悬挂- 变量悬挂允许你在定义一个变量之前利用它。但是，应该注意的是，JavaScript只对声明进行提升，而不是变量初始化。

👉 8 -JavaScript字符串

Strings 是一些字符的组合，用来执行JavaScript中的一些任务集。字符串配备了许多方法，使其有可能在程序中执行各种指令集。下面列出了其中的一些方法。

  • toLowercase() - 用于将字符串转换为小写字母。
  • toUppercase() - 用于将字符串转换为大写字母。
  • charAt() - 该方法用于返回字符串中某一给定索引的特定字符。
  • charCodeAt() - 该方法用于返回给定索引处的字符的Unicode。
  • concat() - 用于将多个字符串连接成一个字符串。
  • match() - 用于检索与提供的模式相匹配的字符串。
  • replace() - 该方法用于查找和替换一个字符串中的给定文本。
  • indexOf() - 该方法用于提供一个字符串中第一次出现的给定文本的索引。
  • lastIndexOf() - 与indexOf() 方法类似，唯一的区别是它返回最后出现的字符并向后搜索。
  • search() - 该方法用于启动对匹配文本的搜索，并返回搜索到的字符串的索引。
  • substr() - 该方法提供了一个来自字符串中某个字符索引的子串。
  • slice() - 该方法用于提取一个给定字符串的一个区域并返回。
  • split() - 用于将一个字符串对象分割成一个特定索引的字符串数组。
  • substring() - 这个方法类似于slice()方法，只是它不允许有负数的位置。valueOf() - 用于返回一个字符串对象的原始值。

👉9 -JavaScript浏览器对象

这是编程中最有用的JavaScript应用之一。这些浏览器对象使JavaScript有可能注意到用户的浏览器活动，并将其属性纳入代码中，此外还有HTML元素。

下面是一个流行使用的JavaScript Window属性的列表。

  • history - 这提供了Window对象的历史。
  • innerHeight - 描述了一个窗口对象的内部高度区域。
  • innerWidth - 提供了一个窗口对象的内部宽度。
  • pageXOffset - 描述了水平方向上从页面中心偏移的像素数。
  • pageYOffset - 与pageXOffset属性也一样，但是是垂直方向的缩放。
  • document - 返回窗口的文档对象。
  • location - 返回窗口的位置对象。
  • name - 该属性设置或检索一个窗口的名称
  • screen - 返回窗口的屏幕
  • object.self - 返回当前打开的窗口。

下面列出了常见的JavaScript浏览器方法。

  • alert() - 这个方法在一个警报框中显示一条信息和一个OK按钮。
  • setInterval() - 这个方法用于在你的程序中定义的固定时间间隔内调用一个函数声明或表达式。
  • setTimeout() - 该方法在设定的时间间隔后调用一个函数或表达式。
  • clearInterval() - 移除由setInterval() 方法设置的时间间隔。
  • clearTimeout() - 移除由setTimeout()方法设置的间隔。
  • open() - 创建一个新的浏览器对象。
  • print() - 打印当前窗口的对象。
  • stop() - 这将停止该窗口的打开。
  • prompt() - 显示一个对话框，要求用户提供一些反馈。

👉 10 -JavaScript错误处理

在运行JavaScript代码的过程中，会出现各种各样的错误。在JavaScript中，有六种类型的错误被返回。

  • EvalError - 这表明在eval()方法中出现了错误。
  • RangeError - 对数字有用。它表明一个数字是否 "超出范围"。
  • ReferenceError - 表示在你的程序中是否有一个错误的引用。
  • SyntaxError - 表示在你的程序中出现了错误的语法。
  • TypeError - 表示发生了类型错误。URIError - 表示发生了encodeURI（）错误。

👉11 -JS文档对象模型(DOM)

文档对象模型描述了一个网页的代码结构。在JavaScript中，有几种方法可以建立和改变被称为节点的HTML元素。

节点属性- 以下是一些常见的JavaScript DOM节点

  • attributes - 这得到与一个元素相关的所有特性的实时列表。
  • baseURI - 这个属性返回元素的绝对基础URL。
  • childNodes - 返回一个元素的所有子节点的列表。
  • firstChild - 返回一个元素的第一个子节点。
  • lastChild - 返回一个元素的最后一个子节点。
  • nodeName - 返回节点的名称。
  • nodeType - 返回节点的类型。
  • nodeValue - 设置或返回一个节点的值。
  • parentNode - 返回元素的父节点
  • textContent - 设置或返回一个节点的及其子节点的内容。

节点方法。这些方法允许JavaScript操作DOM中的节点。

  • appendChild() - 这个方法添加一个新的子节点作为一个元素的最后一个子节点。
  • removeChild() - 这个方法从一个元素中删除一个子节点。
  • replaceChild() -替换元素中的一个子节点。
  • normalize() - 在一个元素中把相邻的节点连接在一起。
  • isEqualNode() - 判断两个节点是否相等。
  • isSameNode() - 确定两个元素是否属于同一个节点。

✨ 结论与链接

JavaScript 是一种通用的编程语言，在不同的行业和专业有不同的用途，学习这种语言可以让你在几年内从初级工程师提升到高级水平，并有良好的实践和一致性。

更多的资源和讲座，请随时访问。

JavaScript & React - Tutorial for beginners

avatar
文章
阅读
粉丝