# 日 | トピック |
---|---|
01 | 序章 |
02 | データ型 |
03 | ブール値、演算子、日付 |
04 | 条件付き |
05 | 配列 |
06 | ループ |
07 | 機能 |
08 | オブジェクト |
09 | 高階関数 |
10 | セットとマップ |
11 | 破壊と拡散 |
12 | 正規表現 |
13 | コンソールオブジェクトメソッド |
14 | エラー処理 |
15 | クラス |
16 | JSON |
17 | Webストレージ |
18 | 約束 |
19 | 閉鎖 |
20 | クリーンなコードを書く |
21 | DOM |
22 | DOMオブジェクトの操作 |
23 | イベントリスナー |
24 | ミニプロジェクト:ソーラーシステム |
25 | ミニプロジェクト:世界の国々のデータ視覚化1 |
26 | ミニプロジェクト:世界の国々のデータ視覚化2 |
27 | ミニプロジェクト:ポートフォリオ |
28 | ミニプロジェクト:リーダーボード |
29 | ミニプロジェクト:キャラクターのアニメーション |
30 | 最終プロジェクト |
30日間のJavaScriptプログラミングチャレンジに参加することを決定しました。おめでとうございます。このチャレンジでは、JavaScriptプログラマーになるために必要なすべてのこと、そして一般的にはプログラミングの概念全体を学びます。チャレンジの最後に、30DaysOfJavaScriptプログラミングチャレンジ完了証明書を取得します。ヘルプが必要な場合、または他の人を助けたい場合は、電報グループに参加できます。
30DaysOfJavaScriptチャレンジは、初心者と上級者の両方のJavaScript開発者向けのガイドです。JavaScriptへようこそ。JavaScriptはWebの言語です。私はJavaScriptの使用と指導を楽しんでいますが、あなたもそうしてくれることを願っています。
このステップバイステップのJavaScriptチャレンジでは、人類の歴史の中で最も人気のあるプログラミング言語であるJavaScriptを学びます。JavaScriptは、Webサイトに双方向性を追加したり、モバイルアプリ、デスクトップアプリケーション、ゲームを開発したりするために使用されます。現在、JavaScriptは機械学習とAIに使用できます。 JavaScript(JS)は近年人気が高まっており、6年連続で主要なプログラミング言語であり、Githubで最も使用されているプログラミング言語です。
この課題に従うために、プログラミングの予備知識は必要ありません。必要なのは:
あなたには、開発者、コンピューター、インターネットになりたいというモチベーションと強い願望があると思います。あなたがそれらを持っているなら、あなたは始めるためのすべてを持っています。
現在Node.jsは必要ないかもしれませんが、後で必要になるかもしれません。node.jsをインストールします。
ダウンロードした後、ダブルクリックしてインストールします
デバイスターミナルまたはコマンドプロンプトを開くことで、ノードがローカルマシンにインストールされているかどうかを確認できます。
asabeneh $ node -v
v12.14.0
このチュートリアルを作成するとき、私はNodeバージョン12.14.0を使用していましたが、ダウンロードに推奨されるNode.jsのバージョンはv14.17.6です。この資料を使用するときには、Node.jsのバージョンが高い可能性があります。
そこには多くのブラウザがあります。ただし、GoogleChromeを強くお勧めします。
まだGoogleChromeをお持ちでない場合は、インストールしてください。ブラウザコンソールで小さなJavaScriptコードを記述できますが、アプリケーションの開発にブラウザコンソールを使用することはありません。
ブラウザの右上隅にある3つのドットをクリックするか、[その他のツール]-> [開発者ツール]を選択するか、キーボードショートカットを使用して、GoogleChromeコンソールを開くことができます。私はショートカットを使うのが好きです。
キーボードショートカットを使用してChromeコンソールを開くには。
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
Google Chromeコンソールを開いたら、マークされたボタンを調べてみてください。ほとんどの時間をコンソールで過ごします。コンソールは、JavaScriptコードを配置する場所です。Google Console V8エンジンは、JavaScriptコードをマシンコードに変更します。GoogleChromeコンソールでJavaScriptコードを書いてみましょう。
Googleコンソールまたは任意のブラウザコンソールで任意のJavaScriptコードを記述できます。ただし、この課題では、GoogleChromeコンソールのみに焦点を当てています。以下を使用してコンソールを開きます。
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()
複数の引数を取ることができます。
おめでとう!を使用して最初のJavaScriptコードを記述しconsole.log()
ました。
コードにコメントを追加できます。コメントは、コードを読みやすくし、コードにコメントを残すために非常に重要です。JavaScriptは、コードのコメント部分を実行しません。JavaScriptでは、JavaScriptの//で始まるテキスト行はコメントであり、このように囲まれたもの
//もコメントです。
例:1行のコメント
// 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!`)
console.log()
それでは、 GoogleChromeコンソールで数値データ型を使用してJavaScriptコードを書く練習をしてみましょう。テキストに加えて、JavaScriptを使用して数学的な計算を行うこともできます。次の簡単な計算をしてみましょう。GoogleChromeコンソールでJavaScriptコードを直接書くことができますconsole.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チャレンジでは、VisualStudioCodeを使用します。
Visual Studio Codeは、非常に人気のあるオープンソースのテキストエディターです。Visual Studio Codeをダウンロードすることをお勧めしますが、他のエディターを使用する場合は、お持ちのエディターを自由にフォローしてください。
Visual Studio Codeをインストールした場合は、使用を開始しましょう。
アイコンをダブルクリックして、VisualStudioCodeを開きます。それを開くと、この種のインターフェースが表示されます。ラベルの付いたアイコンを操作してみてください。
JavaScriptは、次の3つの方法でWebページに追加できます。
次のセクションでは、JavaScriptコードをWebページに追加するさまざまな方法を示します。
デスクトップまたは任意の場所にプロジェクトフォルダーを作成し、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ファイルです。プロジェクトディレクトリ内に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ファイルをWebページにリンクすることもできます。
helloworld.js30DaysOfJSフォルダー内にファイルを作成し、次のコードを記述します。
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のプリミティブデータ型は次のとおりです:String、Number、Boolean、undefined、Null、Symbol。
2つの一重引用符、二重引用符、またはバッククォートの間の1つ以上の文字のコレクション。
例:
'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またはfalseのいずれかの値です。
例:
true // if the light is on, the value is true
false // if the light is off, the value is false
JavaScriptでは、変数に値を割り当てない場合、値は未定義です。それに加えて、関数が何も返さない場合は、undefinedを返します。
let firstName
console.log(firstName) // undefined, because it is not assigned to a value yet
JavaScriptの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でのコメントは、他のプログラミング言語と似ていることに注意してください。コメントは、コードを読みやすくするために重要です。コメントには2つの方法があります。
// 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 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:
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行のコメントを書く
30DaysOfJavaScriptへようこそという別のコメントを書いてください
複数行のコメントを書いてください。コメントはコードを読みやすく、再利用しやすく 、有益なものにすることができます。
variable.jsファイルを作成し、変数を宣言し、文字列、ブール値、未定義、およびnullのデータ型を割り当てます
datatypes.jsファイルを作成し、JavaScripttypeof演算子を使用してさまざまなデータ型を確認します。各変数のデータ型を確認してください
値を割り当てずに4つの変数を宣言します
割り当てられた値で4つの変数を宣言します
変数を宣言して、名前、名前、結婚歴、国、年齢を複数行に保存します
変数を宣言して、名前、名前、結婚歴、国、年齢を1行に保存します
2つの変数myAgeとyourAgeを宣言し、それらに初期値を割り当てて、ブラウザーコンソールに記録します。
I am 25 years old.
You are 30 years old.