30-Days-Of-JavaScript - 挑战30 天内学​​习 JavaScript 编程语言的分步指南。本挑战可能需要超过100天,请按照自己的节奏进行。

Created at: 2019-12-23 22:07:40
开发语言: JavaScript

30 天的 JavaScript

# 天 主题
01 介绍
02 数据类型
03 布尔值、运算符、日期
04 条件
05 阵 列
06 循环
07 功能
08 对象
09 高阶函数
10 布景和 map
11 解构和扩散
12 正则表达式
13 控制台对象方法
14 错误处理
15
16 断续器
17 网络存储
18 承诺
19 关闭
20 编写干净的代码
21 多姆
22 操作 DOM 对象
23 事件侦听器
24 小项目:太阳系
25 小项目:世界国家数据可视化1
26 小项目:世界国家数据可视化2
27 迷你项目:投资组合
28 迷你项目:排行榜
29 迷你项目:为角色制作动画
30 最终项目

🧡🧡🧡 快乐编码 🧡🧡🧡

支持作者创作更多教材
PayPal徽标

30 天的 JavaScript:简介

推特 关注

作者: Asabeneh Yetayeh
2020年1月

🇬🇧 英语 🇪🇸 西班牙语 🇷🇺 俄语 🇹🇷 土耳其语 🇦🇿 阿塞拜疆 🇰🇷 韩语 🇻🇳 越南语 🇵🇱 波兰语

第2天 >>

Thirty Days Of JavaScript

📔第 1 天

介绍

恭喜你决定参加为期 30 天的 JavaScript 编程挑战赛。在这个挑战中,你将学习成为JavaScript程序员所需的一切,以及一般来说,整个编程概念。在挑战结束时,你将获得30DaysOfJavaScript编程挑战完成证书。如果你需要帮助或想帮助他人,你可以加入电报组

30DaysOfJavaScript 挑战赛是初学者和高级 JavaScript 开发人员的指南。欢迎来到 JavaScript。JavaScript是网络的语言。我喜欢使用和教授JavaScript,我希望你也会这样做。

在这个一步一步的JavaScript挑战中,你将学习JavaScript,这是人类历史上最流行的编程语言。JavaScript用于为网站添加交互性,开发移动应用程序,桌面应用程序,游戏,如今JavaScript可用于机器学习AIJavaScript(JS)近年来越来越受欢迎,并连续六年成为领先的编程语言,并且是Github上最常用的编程语言。

要求

无需事先具备编程知识即可应对这一挑战。你只需要:

  1. 动机
  2. 一台电脑
  3. 互联网
  4. 浏览器
  5. 代码编辑器

设置

我相信你有动力和强烈的愿望成为一名开发人员,一台计算机和互联网。如果你有这些,那么你有一切可以开始。

安装节点.js

你现在可能不需要 Node.js但以后可能需要它。安装节点.js

节点下载

下载后双击并安装

安装节点

我们可以通过打开设备终端或命令提示符来检查节点是否安装在本地计算机上。

asabeneh $ node -v
v12.14.0

在制作本教程时,我使用的是Node版本12.14.0,但现在推荐的Node.js下载版本是v14.17.6,当你使用此材料时,你可能拥有更高的Node.js版本。

浏览器

那里有很多浏览器。但是,我强烈建议使用谷歌浏览器。

安装谷歌浏览器

如果你还没有谷歌浏览器,请安装。我们可以在浏览器控制台上编写小的JavaScript代码,但我们不使用浏览器控制台来开发应用程序。

谷歌浏览器

打开谷歌浏览器控制台

你可以通过点击浏览器右上角的三个点,选择更多工具 - >开发者工具或使用键盘快捷键来打开Google Chrome控制台。我更喜欢使用快捷方式。

开口镀铬

使用键盘快捷键打开 Chrome 控制台。

Mac
Command+Option+J

Windows/Linux:
Ctl+Shift+J

打开控制台

打开谷歌浏览器控制台后,请尝试浏览标记的按钮。我们将把大部分时间花在控制台上。控制台是 JavaScript 代码所在的位置。Google Console V8 引擎将你的 JavaScript 代码更改为机器代码。让我们在Google Chrome控制台上编写一个JavaScript代码:

在控制台上编写代码

在浏览器控制台上编写代码

我们可以在Google控制台或任何浏览器控制台上编写任何JavaScript代码。但是,对于这个挑战,我们只关注谷歌浏览器控制台。使用以下命令打开控制台:

Mac
Command+Option+I

Windows:
Ctl+Shift+I
控制台.log

为了编写我们的第一个JavaScript代码,我们使用了一个内置的函数控制台.log()。我们传递了一个参数作为输入数据,该函数显示输出。我们在控制台.log()函数中作为输入数据或参数传递。

'Hello, World'

console.log('Hello, World!')
具有多个参数的控制台.log

console.log() 函数可以采用逗号分隔的多个参数。语法如下所示:console.log(param1, param2, param3)

控制台记录多个参数

console.log('Hello', 'World', '!')
console.log('HAPPY', 'NEW', 'YEAR', 2020)
console.log('Welcome', 'to', 30, 'Days', 'Of', 'JavaScript')

从上面的代码片段中可以看出,console.log() 可以采用多个参数。

祝贺!你用 console.log() 编写了你的第一个 JavaScript 代码。

评论

我们可以向代码中添加注释。注释对于使代码更具可读性并在代码中留下注释非常重要。JavaScript 不执行我们代码的注释部分。在 JavaScript 中,任何以 // 开头的文本行都是注释,任何像这样封闭的文本行也是注释。

//

示例:单行注释

// This is the first comment  
// This is the second comment  
// I am a single line comment

示例:多行注释

/*
This is a multiline comment  
 Multiline comments can take multiple lines  
 JavaScript is the language of the web  
 */
语法

编程语言类似于人类语言。英语或许多其他语言使用单词,短语,句子,复合句和其他更多来传达有意义的信息。语法的英语含义是单词和短语的排列,以在语言中创建格式良好的句子。语法的技术定义是计算机语言中语句的结构。编程语言有语法。JavaScript是一种编程语言,像其他编程语言一样,它有自己的语法。如果我们不编写JavaScript可以理解的语法,它将引发不同类型的错误。稍后我们将探讨不同类型的 JavaScript 错误。现在,让我们看看语法错误。

错误

我故意犯了一个错误。因此,控制台会引发语法错误。实际上,语法非常翔实。它告知所犯的错误类型。通过阅读错误反馈指南,我们可以更正语法并解决问题。从程序中识别和删除错误的过程称为调试。让我们修复错误:

console.log('Hello, World!')
console.log('Hello, World!')

到目前为止,我们看到了如何使用控制台.log()显示文本。如果我们使用 console.log() 打印文本或字符串,则文本必须位于单引号、双引号或反引号内。例:

console.log('Hello, World!')
console.log("Hello, World!")
console.log(`Hello, World!`)

算法

现在,让我们练习在Google Chrome控制台上使用控制台.log()来编写JavaScript代码,以获取数字数据类型。除了文本之外,我们还可以使用JavaScript进行数学计算。让我们进行以下简单计算。可以在Google Chrome控制台上编写JavaScript代码,可以直接无需控制台.log()功能。但是,它包含在本简介中,因为大多数挑战将发生在文本编辑器中,其中函数的使用将是强制性的。你可以直接按照控制台上的说明进行游戏。

算术

console.log(2 + 3) // Addition
console.log(3 - 2) // Subtraction
console.log(2 * 3) // Multiplication
console.log(3 / 2) // Division
console.log(3 % 2) // Modulus - finding remainder
console.log(3 ** 2) // Exponentiation 3 ** 2 == 3 * 3

代码编辑器

我们可以在浏览器控制台上编写代码,但不适用于大型项目。在实际的工作环境中,开发人员使用不同的代码编辑器来编写代码。在这30天的JavaScript挑战中,我们将使用Visual Studio Code。

安装 Visual Studio Code

Visual Studio Code是一个非常流行的开源文本编辑器。我建议下载Visual Studio Code,但如果你支持其他编辑器,请随时关注你所拥有的内容。

Vscode

如果你安装了Visual Studio Code,让我们开始使用它。

如何使用Visual Studio Code

通过双击 Visual Studio Code 的图标打开它。当你打开它时,你将获得这种界面。尝试与带标签的图标进行交互。

Vscode ui

Vscode add project

Vscode 打开项目

脚本文件

安装实时服务器

运行脚本

编码运行

将 JavaScript 添加到网页

JavaScript可以通过三种不同的方式添加到网页中:

  • 内联脚本
  • 内部脚本
  • 外部脚本
  • 多个外部脚本

以下各节介绍将 JavaScript 代码添加到网页的不同方法。

内联脚本

在桌面或任何位置创建一个项目文件夹,将其命名为 30DaysOfJS,然后在项目文件夹中创建一个索引.html文件。然后粘贴以下代码并在浏览器中打开它,例如Chrome

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>30DaysOfScript:Inline Script</title>
  </head>
  <body>
    <button onclick="alert('Welcome to 30DaysOfJavaScript!')">Click Me</button>
  </body>
</html>

现在,你刚刚编写了第一个内联脚本。我们可以使用 alert() 内置函数创建弹出警报消息。

内部脚本

内部脚本可以写在头部正文中,但最好将其放在HTML文档的正文中。首先,让我们在页面的头部部分写字。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>30DaysOfScript:Internal Script</title>
    <script>
      console.log('Welcome to 30DaysOfJavaScript')
    </script>
  </head>
  <body></body>
</html>

这就是我们大多数时候编写内部脚本的方式。在正文部分编写 JavaScript 代码是最优选的选项。打开浏览器控制台以查看 的输出。

console.log()

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>30DaysOfScript:Internal Script</title>
  </head>
  <body>
    <button onclick="alert('Welcome to 30DaysOfJavaScript!');">Click Me</button>
    <script>
      console.log('Welcome to 30DaysOfJavaScript')
    </script>
  </body>
</html>

打开浏览器控制台以查看 的输出。

console.log()

来自 vscode 的 js 代码

外部脚本

与内部脚本类似,外部脚本链接可以位于标头或正文中,但最好将其放在正文中。首先,我们应该创建一个扩展名为.js外部JavaScript文件。所有以.js扩展名结尾的文件都是JavaScript文件。在项目目录中创建一个名为 introduction.js 的文件,然后编写以下代码,并在正文底部链接此.js文件。

console.log('Welcome to 30DaysOfJavaScript')

头部的外部脚本:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>30DaysOfJavaScript:External script</title>
    <script src="introduction.js"></script>
  </head>
  <body></body>
</html>

正文中的外部脚本:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>30DaysOfJavaScript:External script</title>
  </head>
  <body>
    <!-- JavaScript external link could be in the header or in the body --> 
    <!-- Before the closing tag of the body is the recommended place to put the external JavaScript script -->
    <script src="introduction.js"></script>
  </body>
</html>

打开浏览器控制台以查看 的输出。

console.log()

多个外部脚本

我们还可以将多个外部JavaScript文件链接到一个网页。在 30DaysOfJS 文件夹中创建一个文件,并编写以下代码。

helloworld.js

console.log('Hello, World!')
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Multiple External Scripts</title>
  </head>
  <body>
    <script src="./helloworld.js"></script>
    <script src="./introduction.js"></script>
  </body>
</html>

你的主.js文件应位于所有其他脚本之下。记住这一点非常重要。

多脚本

数据类型简介

在JavaScript和其他编程语言中,有不同类型的数据类型。以下是 JavaScript 基元数据类型:字符串、数字、布尔值、未定义、NullSymbol

数字

  • 整数:整数(负数、零数和正数)数 示例: ...-3, -2, -1, 0, 1, 2, 3 ...
  • 浮点数:十进制数 示例... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...

字符串

两个单引号、双引号或反引号之间的一个或多个字符的集合。

例:

'a'
'Asabeneh'
"Asabeneh"
'Finland'
'JavaScript is a beautiful programming language'
'I love teaching'
'I hope you are enjoying the first day'
`We can also create a string using a backtick`
'A string could be just as small as one character or as big as many pages'
'Any data type under a single quote, double quote or backtick is a string'

布尔 值

布尔值为 True 或 False。任何比较都会返回一个布尔值,该值可以是 true 或 false。

布尔数据类型可以是真值,也可以是假值。

例:

true // if the light is on, the value is true
false // if the light is off, the value is false

定义

在JavaScript中,如果我们不为变量赋值,则该值是未定义的。除此之外,如果函数未返回任何内容,则返回未定义。

let firstName
console.log(firstName) // undefined, because it is not assigned to a value yet

Null 在 JavaScript 中表示空值。

let emptyValue = null

检查数据类型

为了检查某个变量的数据类型,我们使用typeof运算符。请参阅以下示例。

console.log(typeof 'Asabeneh') // string
console.log(typeof 5) // number
console.log(typeof true) // boolean
console.log(typeof null) // object type
console.log(typeof undefined) // undefined

Comments Again

Remember that commenting in JavaScript is similar to other programming languages. Comments are important in making your code more readable. There are two ways of commenting:

  • Single line commenting
  • Multiline commenting
// commenting the code itself with a single comment
// let firstName = 'Asabeneh'; single line comment
// let lastName = 'Yetayeh'; single line comment

Multiline commenting:

/*
  let location = 'Helsinki';
  let age = 100;
  let isMarried = true;
  This is a Multiple line comment
*/

Variables

Variables are containers of data. Variables are used to store data in a memory location. When a variable is declared, a memory location is reserved. When a variable is assigned to a value (data), the memory space will be filled with that data. To declare a variable, we use var, let, or const keywords.

For a variable that changes at a different time, we use let. If the data does not change at all, we use const. For example, PI, country name, gravity do not change, and we can use const. We will not use var in this challenge and I don't recommend you to use it. It is error prone way of declaring variable it has lots of leak. We will talk more about var, let, and const in detail in other sections (scope). For now, the above explanation is enough.

A valid JavaScript variable name must follow the following rules:

  • A JavaScript variable name should not begin with a number.
  • A JavaScript variable name does not allow special characters except dollar sign and underscore.
  • A JavaScript variable name follows a camelCase convention.
  • A JavaScript variable name should not have space between words.

The following are examples of valid JavaScript variables.

firstName
lastName
country
city
capitalCity
age
isMarried

first_name
last_name
is_married
capital_city

num1
num_1
_num_1
$num1
year2020
year_2020

The first and second variables on the list follows the camelCase convention of declaring in JavaScript. In this material, we will use camelCase variables(camelWithOneHump). We use CamelCase(CamelWithTwoHump) to declare classes, we will discuss about classes and objects in other section.

Example of invalid variables:

  first-name
  1_num
  num_#_1

Let us declare variables with different data types. To declare a variable, we need to use let or const keyword before the variable name. Following the variable name, we write an equal sign (assignment operator), and a value(assigned data).

// Syntax
let nameOfVariable = value

The nameOfVriable is the name that stores different data of value. See below for detail examples.

Examples of declared variables

// Declaring different variables of different data types
let firstName = 'Asabeneh' // first name of a person
let lastName = 'Yetayeh' // last name of a person
let country = 'Finland' // country
let city = 'Helsinki' // capital city
let age = 100 // age in years
let isMarried = true

console.log(firstName, lastName, country, city, age, isMarried)
Asabeneh Yetayeh Finland Helsinki 100 true
// Declaring variables with number values
let age = 100 // age in years
const gravity = 9.81 // earth gravity  in m/s2
const boilingPoint = 100 // water boiling point, temperature in °C
const PI = 3.14 // geometrical constant
console.log(gravity, boilingPoint, PI)
9.81 100 3.14
// Variables can also be declaring in one line separated by comma, however I recommend to use a seperate line to make code more readble
let name = 'Asabeneh', job = 'teacher', live = 'Finland'
console.log(name, job, live)
Asabeneh teacher Finland

当你在 01-Day 文件夹中运行 index.html 文件时,你应该得到以下结果:

第一天

🌕你太棒了!你刚刚完成了第1天的挑战,你正在走向伟大的道路上。现在为你的大脑和肌肉做一些锻炼。

💻第1天:练习

  1. 写一行注释,说,注释可以使代码可读

  2. 再写一条评论,上面写着,欢迎来到30DaysOfJavaScript。

  3. 写一个多行注释,说,注释可以使代码可读,易于重用和信息丰富

  4. 创建变量.js文件并声明变量并分配字符串、布尔值、未定义和空数据类型

  5. 创建数据类型.js文件,并使用 JavaScript typeof 运算符检查不同的数据类型。检查每个变量的数据类型

  6. 声明四个变量而不赋值

  7. 声明四个具有赋值的变量

  8. 声明变量以在多行中存储你的名字、姓氏、婚姻状况、国家/地区和年龄

  9. 声明变量以在一行中存储你的名字,姓氏,婚姻状况,国家和年龄

  10. 声明两个变量 myAgeyourAge,并将它们分配初始值并记录到浏览器控制台。

I am 25 years old.
You are 30 years old.

🎉祝贺!🎉

第2天 >>