30天的JavaScript之旅

_{Autor:
Asabeneh Yetayeh

Enero de 2020}

🇬🇧 [English](../readMe.md) 🇪🇸 [Spanish](../Spanish/readme.md) 🇷🇺 [Russian](../RU/README.md) ᴢʜ [Chinese](./README.md)

![Thirty Days Of JavaScript](./images/day_1_1.png) - [30天的JavaScript之旅](#30天的JavaScript之旅) - [📔 第一天](#-day-1) - [简介](#简介) - [必要条件](#必要条件) - [设置](#设置) - [安装 Node.js](#安装-nodejs) - [浏览器](#浏览器) - [安装chrome浏览器](#安装chrome浏览器) - [打开chrome浏览器控制台](#打开chrome浏览器控制台) - [在浏览器控制台上写代码](#在浏览器控制台上写代码) - [Console.log](#consolelog) - [带有多个参数的Console.log](#带有多个参数的consolelog) - [注释](#注释) - [语法](#语法) - [运算](#运算) - [代码编辑器](#代码编辑器) - [安装 Visual Studio Code](#安装-visual-studio-code) - [如何使用 Visual Studio Code](#如何使用-visual-studio-code) - [将JavaScript添加到网页中](#将javascript添加到网页中) - [内嵌式脚本](#内嵌式脚本) - [内部脚本](#内部脚本) - [外部脚本](#外部脚本) - [多个外部脚本](#多个外部脚本) - [数据类型介绍](#数据类型介绍) - [数值](#数值) - [字符串](#字符串) - [布尔值](#布尔值) - [Undefined](#undefined) - [Null](#null) - [检测数据类型](#检测数据类型) - [再次强调注释](#再次强调注释) - [变量](#变量) - [💻 Day 1: 练习](#-day-1-练习) # 📔 第一天 ## 简介 **祝贺**您决定参加为期30天的 JavaScript 编程挑战。在这个挑战中，你将学到成为一名 JavaScript 程序员所需要的一切，总的来说，就是整个编程的概念。在挑战的最后，你将获得一个 30DaysOfJavaScript 编程挑战完成证书。如果你需要帮助或者你想帮助别人，你可以加入[电报组](https://t.me/ThirtyDaysOfJavaScript)。 **A 30DaysOfJavaScript** 挑战是为初学者和高级 JavaScript 开发人员提供的指南。欢迎来到 JavaScript 。JavaScript 是网络的语言。我喜欢使用和教授JavaScript，我希望你也会这样做。在这个循序渐进的 JavaScript 挑战中，你将学习人类历史上最流行的编程语言--JavaScript。 JavaScript被用来 **_为网站增加互动性，开发移动应用、桌面应用、游戏_**，如今 JavaScript 还可以被用于 **_机器学习_** 和 **_人工智能_**。近年来，**_JavaScript（JS）_** 越来越受欢迎，并连续六年成为领先的编程语言。连续6年成为领先的编程语言，并且是 Github 上使用最多的编程语言。 ## 必要条件遵循这一挑战，不需要事先了解编程知识。你只需要: 1. 积极性 2. 电脑 3. 互联网 4. 浏览器 5. 代码编辑器 ## 设置我相信你有成为一名开发者的动机和强烈愿望。一台电脑和互联网。如果你有这些，那么你就有一切可以开始的东西。 ### 安装 Node.js 你现在可能不需要node.js，但你以后可能需要它。安装 [node.js](https://nodejs.org/en/). ![Node download](images/download_node.png) 下载后，双击并安装 ![Install node](images/install_node.png) 我们可以通过打开设备终端或命令提示符来检查 node 是否安装在我们的本地机器上。 ```sh asabeneh $ node -v v12.14.0 ``` 制作本教程时，我使用的是12.14.0版本的 node，但现在 node.js 的推荐下载版本是12.17.0。 ### 浏览器现在有很多浏览器。然而，我强烈推荐谷歌浏览器。 #### 安装chrome浏览器如果你还没有 [chrome浏览器](https://www.google.com/chrome/)，请安装。我们可以在浏览器控制台编写小的 JavaScript 代码，但我们不使用浏览器控制台来开发应用程序。 ![Google Chrome](images/google_chrome.png) #### 打开chrome浏览器控制台你可以通过点击浏览器右上角的三个点，选择 _更多工具->开发工具_ 或使用键盘快捷键来打开浏览器控制台。我更喜欢使用快捷键。 ![Opening chrome](images/opening_developer_tool.png) 使用键盘快捷方式打开 Chrome 浏览器的控制台。 ```sh Mac Command+Option+J Windows/Linux: Ctl+Shift+J ``` ![Opening console](images/opening_chrome_console_shortcut.png) 在你打开 chrome 浏览器的控制台后，尝试探索标记的按钮。我们将在控制台中花费大部分时间。控制台是你的 JavaScript 代码所处的地方。Google Console V8 引擎会将你的 JavaScript 代码变成机器代码。让我们在 chrome 浏览器的控制台写一段 JavaScript 代码: ![write code on console](./images/js_code_on_chrome_console.png) #### 在浏览器控制台上写代码我们可以在 Chrome 控制台或任何浏览器控制台编写任何JavaScript代码。但是，在这个挑战中，我们只关注谷歌浏览器的控制台。用以下方法打开控制台: ```sh Mac Command+Option+I Windows: Ctl+Shift+I ``` ##### Console.log 为了编写我们的第一段 JavaScript 代码，我们使用了一个内置函数**console.log()**。我们传递了一个参数作为输入数据，然后函数显示输出。我们在 console.log() 函数中传递了'Hello, World'作为输入数据或参数。 ```js console.log('Hello, World!') ``` ##### 带有多个参数的Console.log **conole.log()**函数可以接受用逗号分隔的多个参数。其语法如下：**console.log(param1, param2, param3)** ![console log multiple arguments](./images/console_log_multipl_arguments.png) ```js 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 错误。现在，让我们来看看语法错误。 ![Error](images/raising_syntax_error.png) 我故意犯了一个错误。结果，控制台提出了语法错误。实际上，语法的信息量很大。它告知了所犯错误的类型。通过阅读错误反馈准则，我们可以纠正语法并解决问题。识别和消除程序中的错误的过程被称为调试。让我们来解决这些错误: ```js console.log('Hello, World!') console.log('Hello, World!') ``` 到目前为止，我们看到了如何使用 _console.log()_ 来显示文本。如果我们使用 _console.log()_ 打印文本或字符串，文本必须在单引号、双引号或反斜线引号内。 **示例:** ```js console.log('Hello, World!') console.log('Hello, World!') console.log(`Hello, World!`) ``` #### 运算现在，让我们多练习一下在 chrome 控制台使用 _console.log()_ 来编写数字数据类型的 JavaScript 代码。除了文字之外，我们还可以用 JavaScript 进行数学计算。让我们来做以下简单的计算。控制台可以直接接受参数，不需要**_console.log()_**函数。然而，在这个介绍中包括了它，因为这个挑战大部分是在文本编辑器中进行的，在那里必须使用该函数。你可以直接使用控制台的指令进行游戏。 ![Arithmetic](images/arithmetic.png) ```js 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](https://code.visualstudio.com/)，但如果你赞成使用其他编辑器，请随意使用你的东西。 ![Vscode](images/vscode.png) 如果你安装了Visual Studio Code，让我们开始使用它。 #### 如何使用 Visual Studio Code 通过双击Visual Studio Code的图标来打开它。当你打开它时，你会得到这样的界面。试着与标记的图标互动。 ![Vscode ui](./images/vscode_ui.png) ![Vscode add project](./images/adding_project_to_vscode.png) ![Vscode open project](./images/opening_project_on_vscode.png) ![script file](images/scripts_on_vscode.png) ![Installing Live Server](images/vsc_live_server.png) ![running script](./images/running_script.png) ![coding running](./images/launched_on_new_tab.png) ## 将JavaScript添加到网页中可以通过三种不同的方式将JavaScript添加到网页上: - **_Inline script_** - **_Internal script_** - **_External script_** - **_Multiple External scripts_** 以下部分显示了将 JavaScript 代码添加到你的网页的不同方法。 ### 内嵌式脚本在你的桌面或任何位置创建一个项目文件夹，命名为30DaysOfJS，并在项目文件夹中创建一个**_index.html_**文件。然后粘贴以下代码并在浏览器中打开，例如[Chrome](https://www.google.com/chrome/)。 ```html 30DaysOfScript:Inline Script ``` 现在，你刚刚写了你的第一个内嵌脚本。我们可以使用 _alert()_ 内置函数创建一个弹出式警报信息。 ### 内部脚本内部脚本可以写在 _head_ 或 _body_ 中，但最好把它放在HTML文档的body中。首先，让我们写在页面的头部部分。 ```html 30DaysOfScript:Internal Script ``` 大多数时候，我们就是这样写内部脚本的。将JavaScript代码写在正文部分是最理想的选择。打开浏览器的控制台，看看 console.log() 的输出情况 ```html 30DaysOfScript:Internal Script ``` 打开浏览器的控制台，查看 console.log() 的输出。 ![js code from vscode](./images/js_code_vscode.png) ### 外部脚本与内部脚本类似，外部脚本链接可以放在标题或正文中，但最好放在正文中。首先，我们应该创建一个扩展名为 .js 的外部 JavaScript 文件。。所有以.js结尾的文件都是JavaScript文件。在你的项目目录内创建一个名为 introduction.js 的文件，并写下以下代码，在正文的底部链接这个 .js 文件。 ```js console.log('Welcome to 30DaysOfJavaScript') ``` 外部脚本在 _head_ 中: ```html 30DaysOfJavaScript:External script ``` 外部脚本在 _body_ 中: ```html 30DaysOfJavaScript:External script //it could be in the header or in the body // Here is the recommended place to put the external script ``` 打开浏览器控制台，查看 console.log() 的输出。 ### 多个外部脚本我们还可以将多个外部 JavaScript 文件链接到一个网页上。在30DaysOfJS文件夹内创建一个helloworld.js文件，并编写以下代码。 ```js console.log('Hello, World!') ``` ```html Multiple External Scripts ``` _你的 main.js 文件应该在所有其他脚本的下面_。记住这一点是非常重要的。 ![Multiple Script](./images/multiple_script.png) ## 数据类型介绍在 JavaScript 和其他编程语言中，有不同种类的数据类型。以下是 JavaScript 的原始数据类型：_String, Number, Boolean, undefined, Null_, and _Symbol_。 ### 数值 - Integers: 整数（负数、零数和正数）。例如: ... -3, -2, -1, 0, 1, 2, 3 ... - Float-point numbers: 小数点后的数字例如: ... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ... ### 字符串两个单引号、双引号或反斜线之间的一个或多个字符的集合。 **例如:** ```js '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 as big as many pages') ``` ### 布尔值一个布尔值要么是真，要么是假。任何比较都会返回一个布尔值，即真或假。布尔数据类型是一个真或假的值。 **例如:** ```js true // if the light on ,the value is true false // if the light off, the value is false ``` ### Undefined 在 JavaScript中，如果我们不给一个变量赋值，这个值就是未定义的。除此之外，如果一个函数没有返回任何东西，它就会返回 undefined。 ```js let firstName console.log(firstName) //not defined, because it is not assigned to a value yet ``` ### Null 在 JavaScript 中，Null意味着一个空值。 ```js let emptyValue = null ``` ## 检测数据类型为了检测某个变量的数据类型，我们使用**typeof**操作符。请看下面的例子。 ```js 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 中的注释与其他编程语言类似。注释对于使你的代码更具有可读性非常重要。有两种注释的方式。 - _单行注释_ - _多行注释_ ```js // commenting the code itself with a single comment // let firstName = 'Asabeneh'; single line comment // let lastName = 'Yetayeh'; single line comment ``` 多行注释: ```js /* 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 变量名不应该以数字开头。 - 除了美元符号和下划线之外，JavaScript 变量名称不允许使用特殊字符。 - 一个 JavaScript 变量名遵循驼峰命名。 - 一个 JavaScript 变量的名称不应该在单词之间有空格。以下是有效的 JavaScript 变量的例子。 ```js firstName lastName country city capitalCity age isMarried first_name last_name is_married capital_city num1 num_1 _num_1 $num1 year2020 year_2020 ``` 列表中的第一个和第二个变量遵循在 JavaScrip 中变量声明采用 `小驼峰` 惯例。在本材料中，我们将使用 `小驼峰` 变量。无效变量的例子: ```sh first-name 1_num num_#_1 ``` 让我们来声明不同数据类型的变量。要声明一个变量，我们需要在变量名称前使用 _let_ 或 _const_ 关键字。在变量名称后面，我们写一个等号（赋值运算符），和一个值（分配的数据）。 ```js // Syntax let nameOfVariable = value ``` **声明变量的例子** ```js // 声明不同数据类型的不同变量 let firstName = 'Asabeneh' // 人名 let lastName = 'Yetayeh' // 姓氏 let country = 'Finland' // 国家 let city = 'Helsinki' // 首都 let age = 100 // 年龄 let isMarried = true console.log(firstName, lastName, country, city, age, isMarried) ``` ```sh Asabeneh Yetayeh Finland Helsinki 100 True ``` ```js // 声明具有数值的变量 let age = 100 // 年龄 const gravity = 9.81 // 地心引力 m/s2 const boilingPoint = 100 // 水的沸点，维度为 oC const PI = 3.14 // 几何常量 console.log(gravity, boilingPoint, PI) ``` ```sh 9.81 100 3.14 ``` ```js // 变量也可以在一行中声明，用逗号隔开 let name = 'Asabeneh', // name of a person job = 'teacher', live = 'Finland' console.log(name, job, live) ``` ```sh Asabeneh teacher Finland ``` 当你运行01-Day文件夹中的 _index.html_ 文件时，你应该得到这个结果: ![Day one](./images/day_1.png) 🌕 你真了不起! 你刚刚完成了第一天的挑战，你正在走向伟大的道路上。现在为你的大脑和肌肉做一些练习。 # 💻 Day 1: 练习 1. 写一个单行注释，上面写着：_注释可以使代码变得可读_ 2. 再写一条注释，内容是：_欢迎来到30DaysOfJavaScript_。 3. 写一个多行注释，说：_注释可以使代码可读，易于重复使用_ _和信息量大_。 4. 创建一个 variable.js 文件，声明变量并指定字符串、布尔值、undefined 和 null 的数据类型 5. 重新创建 datatypes.js 文件，并使用 JavaScript **_typeof_** 操作符来检查不同的数据类型。检查每个变量的数据类型 6. 声明四个变量而不赋值 7. 声明四个变量，并分配数值 8. 声明变量，在多行中存储你的名字、姓氏、婚姻状况、国家和年龄。 9. 声明变量，在一行中存储你的名字、姓氏、婚姻状况、国家和年龄。 10. 声明两个变量 _myAge_ 和 _yourAge_，给它们分配初始值并记录到浏览器控制台。 ```sh I am 25 years old. You are 30 years old. ``` 🎉 恭喜您 ! 🎉 [Day 2 >>](./02_Day_Data_types/02_day_data_types.md)