| ＃ 天 | 主題 |
|---|---|
| 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天>>
