| ＃ 天 | 主题 |
|---|---|
| 01 | 介绍 |
| 02 | 数据类型 |
| 03 | 布尔人，运营商，日期 |
| 04 | 有条件 |
| 05 | 数组 |
| 06 | 循环 |
| 07 | 功能 |
| 08 | 对象 |
| 09 | 高阶功能 |
| 10 | 设置和地图 |
| 11 | 破坏和传播 |
| 12 | 正则表达式 |
| 13 | 控制台对象方法 |
| 14 | 错误处理 |
| 15 | 课程 |
| 16 | JSON |
| 17 | 网络存储 |
| 18 | 承诺 |
| 19 | 关闭 |
| 20 | 编写干净的代码 |
| 21 | dom |
| 22 | 操纵DOM对象 |
| 23 | 活动听众 |
| 24 | 迷你项目：太阳系 |
| 25 | 迷你项目：世界国家数据可视化1 |
| 26 | 迷你项目：世界国家数据可视化2 |
| 27 | 迷你项目：投资组合 |
| 28 | 迷你项目：排行榜 |
| 29 | 迷你项目：动画字符 |
| 30 | 最终项目 |
???愉快的编码？？？
作者：asabeneh Yetayeh
2020年1月
？英语 ？？西班牙语 ？？意大利语??俄语？土耳其语??阿塞拜疆 ？？韩国人 ？？越南语??抛光 ？？葡萄牙语
第2天>>
恭喜决定参加30天的JavaScript编程挑战。在这个挑战中，您将学习成为JavaScript程序员所需的一切，并且通常是整个编程概念。在挑战结束时，您将获得30DaysofjavaScript编程挑战完成证书。如果您需要帮助，或者如果您想帮助他人，则可以加入专用的电报组。
30DaysofjavaScript挑战是初学者和高级JavaScript开发人员的指南。欢迎来到JavaScript。 JavaScript是网络的语言。我喜欢使用和教JavaScript，希望您也这样做。
在此逐步的JavaScript挑战中，您将学习JavaScript，这是人类历史上最受欢迎的编程语言。 JavaScript用于为网站添加交互性，以开发移动应用程序，桌面应用程序，游戏和现在的JavaScript可用于服务器端编程，机器学习和AI 。
近年来， JavaScript（JS）的知名度已提高，并且在过去十年中一直是领先的编程语言，并且是Github上最常用的编程语言。
这个挑战很容易阅读，用对话英语，引人入胜，激励性，同时又非常苛刻。您需要分配很多时间来完成这一挑战。如果您是视觉学习者，则可以在Washera YouTube频道上获得视频课程。订阅频道，评论并在YouTube Vides上提出问题并积极主动，作者最终会注意到您。
作者喜欢听取您对挑战的看法，通过表达您对30DaysofjavaScript挑战的想法来分享作者。您可以在此链接上留下推荐
不需要对编程的先验知识才能遵循这一挑战。您只需要：
我相信您有动力和强烈的渴望成为开发人员，计算机和互联网。如果您有这些，那么您将有一切开始。
您现在可能不需要Node.js，但是您可能需要它以供以后使用。安装node.js。
下载双击并安装后
我们可以通过打开我们的设备终端或命令提示，检查在本地计算机上是否安装了节点。
asabeneh $ node -v
v12.14.0在制作本教程时，我正在使用节点版本12.14.0，但是现在推荐的node.js的推荐版本为v14.17.6，当您使用此材料时，您可能拥有更高的node.js版本。
那里有很多浏览器。但是，我强烈建议Google Chrome。
如果您还没有，请安装Google Chrome。我们可以在浏览器控制台上编写小型JavaScript代码，但是我们不使用浏览器控制台来开发应用程序。
您可以通过单击浏览器右上角的三个点，选择更多工具 - >开发人员工具或使用键盘快捷方式来打开Google Chrome控制台。我更喜欢使用快捷方式。
使用键盘快捷键打开Chrome控制台。
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
打开Google Chrome控制台后，尝试探索标记的按钮。我们将大部分时间都花在控制台上。控制台是您的JavaScript代码进入的地方。 Google Console V8引擎将您的JavaScript代码更改为机器代码。让我们在Google Chrome Console上编写JavaScript代码：
我们可以在Google控制台或任何浏览器控制台上编写任何JavaScript代码。但是，对于这一挑战，我们只关注Google Chrome控制台。使用以下方式打开控制台：
Mac
Command+Option+I
Windows:
Ctl+Shift+I为了编写我们的第一个JavaScript代码，我们使用了内置函数Console.log（） 。我们将一个参数作为输入数据传递，并且该函数显示输出。我们将'Hello, World'作为输入数据或Console.log（）函数中的输入数据传递。
console . log ( 'Hello, World!' ) 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中，以//在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!' )到目前为止，我们看到了如何使用console.log()显示文本。如果我们使用console.log()打印文本或字符串，则文本必须在单引号，双引号或回答中。例子：
console . log ( 'Hello, World!' )
console . log ( "Hello, World!" )
console . log ( `Hello, World!` ) 现在，让我们在Google Chrome Console上使用console.log()练习更多编写JavaScript代码，以了解数字数据类型。除文本外，我们还可以使用JavaScript进行数学计算。让我们进行以下简单计算。可以在Google Chrome Console可以直接使用console.log()函数的Google Chrome控制台上编写JavaScript代码。但是，它包含在此引言中，因为大多数挑战都将发生在文本编辑器中，在该编辑器中，该功能的使用将是强制性的。您可以直接使用控制台上的说明进行播放。
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代码。
Visual Studio代码是非常流行的开源文本编辑器。我建议下载Visual Studio代码，但是如果您赞成其他编辑，请随时遵循所拥有的内容。
如果您安装了Visual Studio代码，请让我们开始使用它。
通过双击其图标打开Visual Studio代码。打开它时，您将获得这种接口。尝试与标记的图标进行交互。
JavaScript可以以三种不同的方式添加到网页中：
以下各节显示了将JavaScript代码添加到网页的不同方法。
在桌面或任何位置上创建一个项目文件夹，将其命名为30Daysofjs，然后在项目文件夹中创建一个index.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()内置功能创建弹出警报消息。
内部脚本可以写在head或body中，但首选将其放在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()的输出。
与内部脚本类似，外部脚本链接可以放在标题或主体上，但首选将其放入体内。首先，我们应该使用.js扩展名创建一个外部JavaScript文件。所有以.js扩展结尾的文件都是JavaScript文件。在项目目录中创建一个名为“ rutive.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 >您的main.js文件应低于所有其他脚本。记住这一点非常重要。
在JavaScript以及其他编程语言中，有不同类型的数据类型。以下是JavaScript原始数据类型：字符串，数字，布尔值，未定义，空和符号。
在两个单语引号，双引号或反向的两个引号之间的一个或多个字符集合。
例子：
'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 // 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 yetjavaScript中的null表示空值。
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 请记住，在JavaScript中发表评论类似于其他编程语言。评论对于使您的代码更可读性很重要。有两种评论方法：
// commenting the code itself with a single comment
// let firstName = 'Asabeneh'; single line comment
// let lastName = 'Yetayeh'; single line comment多行评论：
/*
let location = 'Helsinki';
let age = 100;
let isMarried = true;
This is a Multiple line comment
*/ 变量是数据容器。变量用于将数据存储在存储位置。声明变量时，保留内存位置。当变量分配给值（数据）时，内存空间将填充该数据。要声明变量，我们使用VAR ， LET或CONST关键字。
对于在不同时间更改的变量，我们使用LET 。如果数据根本不变，我们使用const 。例如，PI，国家名称，重力不变，我们可以使用const 。我们不会在此挑战中使用VAR，我不建议您使用它。这是错误的宣告变量的方式，它具有很多泄漏。我们将在其他部分（范围）中详细介绍VAR，LET和CONST。就目前而言，上述解释就足够了。
有效的JavaScript变量名称必须遵循以下规则：
以下是有效的JavaScript变量的示例。
firstName
lastName
country
city
capitalCity
age
isMarried
first_name
last_name
is_married
capital_city
num1
num_1
_num_1
$num1
year2020
year_2020列表中的第一个和第二个变量遵循JavaScript中声明的骆驼例约定。在此材料中，我们将使用骆驼变量（CamelwithOneHump）。我们使用骆驼（Camelwithtwohump）来声明类，我们将在其他部分中讨论类和对象。
无效变量的示例：
first - name
1 _num
num_ # _1让我们声明具有不同数据类型的变量。要声明变量，我们需要在变量名称之前使用LET或CONST关键字。按照变量名称，我们编写一个相等的符号（分配运算符）和一个值（分配的数据）。
// Syntax
let nameOfVariable = value名称是存储不同价值数据的名称。有关详细示例，请参见下文。
声明变量的示例
// 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天文件夹中运行index.html文件时，您应该得到以下内容：
？你很棒！您刚刚完成了第一天的挑战，您正在走向伟大。现在为您的大脑和肌肉做一些运动。
写一个单行评论，说明可以使代码可读
写另一个评论，说，欢迎使用30DaysofjavaScript
写一个多行评论，其中说，评论可以使代码可读，易于重复使用和信息丰富
创建一个变量。JS文件并声明变量并分配字符串，布尔值，未定义和空数据类型
创建datatypes.js文件，然后使用JavaScript Typeof操作员检查不同的数据类型。检查每个变量的数据类型
声明四个变量而不分配值
声明具有分配值的四个变量
声明变量以存储您的名字，姓氏，婚姻状况，国家和年龄多行
声明变量以将您的名字，姓氏，婚姻状况，乡村和年龄存储在一行
声明两个变量myage和Yourage ，并将它们分配给它们，并将其登录到浏览器控制台。
I am 25 years old.
You are 30 years old.？恭喜！ ？
第2天>>
