JavaScriptの30日

🧡🧡🧡ハッピーコーディング🧡🧡🧡

より多くの教材を作成するために著者を サポートする

30日間のJavaScript：はじめに

_{著者： AsabenehYetayeh
2020年1月}

🇬🇧 英語 🇪🇸 スペイン語 🇮🇹 イタリアの 🇷🇺 ロシア 🇹🇷 トルコ語 🇦🇿 アゼルバイジャン 🇰🇷 韓国語 🇻🇳 ベトナム語 🇵🇱 研磨

2日目>>

• JavaScriptの30日
• 📔1日目
  • 序章
  • 要件
  • 設定
    • Node.jsをインストールします
    • ブラウザ
      • GoogleChromeのインストール
      • GoogleChromeコンソールを開く
      • ブラウザコンソールでコードを書く
        • Console.log
        • 複数の引数を持つConsole.log
        • コメントコメント
        • 構文
      • 算数
    • コードエディタ
      • VisualStudioCodeのインストール
      • VisualStudioCodeの使用方法
  • WebページへのJavaScriptの追加
    • インラインスクリプト
    • 内部スクリプト
    • 外部スクリプト
    • 複数の外部スクリプト
  • データ型の概要
    • 数字
    • 文字列
    • ブール値
    • 未定義
    • ヌル
  • データ型の確認
  • もう一度コメント
  • 変数
• 💻1日目：演習

📔1日目

序章

30日間のJavaScriptプログラミングチャレンジに参加することを決定しました。おめでとうございます。このチャレンジでは、JavaScriptプログラマーになるために必要なすべてのこと、そして一般的にはプログラミングの概念全体を学びます。チャレンジの最後に、30DaysOfJavaScriptプログラミングチャレンジ完了証明書を取得します。ヘルプが必要な場合、または他の人を助けたい場合は、電報グループに参加できます。

30DaysOfJavaScriptチャレンジは、初心者と上級者の両方のJavaScript開発者向けのガイドです。JavaScriptへようこそ。JavaScriptはWebの言語です。私はJavaScriptの使用と指導を楽しんでいますが、あなたもそうしてくれることを願っています。

このステップバイステップのJavaScriptチャレンジでは、人類の歴史の中で最も人気のあるプログラミング言語であるJavaScriptを学びます。JavaScriptは、Webサイトに双方向性を追加したり、モバイルアプリ、デスクトップアプリケーション、ゲームを開発したりするために使用されます。現在、JavaScriptは機械学習とAIに使用できます。 JavaScript（JS）は近年人気が高まっており、6年連続で主要なプログラミング言語であり、Githubで最も使用されているプログラミング言語です。

要件

この課題に従うために、プログラミングの予備知識は必要ありません。必要なのは：

1. 動機
2. コンピュータ
3. インターネット
4. ブラウザ
5. コードエディタ

設定

あなたには、開発者、コンピューター、インターネットになりたいというモチベーションと強い願望があると思います。あなたがそれらを持っているなら、あなたは始めるためのすべてを持っています。

Node.jsをインストールします

現在Node.jsは必要ないかもしれませんが、後で必要になるかもしれません。node.jsをインストールします。

ダウンロードした後、ダブルクリックしてインストールします

デバイスターミナルまたはコマンドプロンプトを開くことで、ノードがローカルマシンにインストールされているかどうかを確認できます。

asabeneh $ node -v
v12.14.0

このチュートリアルを作成するとき、私はNodeバージョン12.14.0を使用していましたが、ダウンロードに推奨されるNode.jsのバージョンはv14.17.6です。この資料を使用するときには、Node.jsのバージョンが高い可能性があります。

ブラウザ

そこには多くのブラウザがあります。ただし、GoogleChromeを強くお勧めします。

GoogleChromeのインストール

まだGoogleChromeをお持ちでない場合は、インストールしてください。ブラウザコンソールで小さなJavaScriptコードを記述できますが、アプリケーションの開発にブラウザコンソールを使用することはありません。

GoogleChromeコンソールを開く

ブラウザの右上隅にある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

Console.log

最初のJavaScriptコードを作成するために、組み込み関数console.log（）を使用しました。入力データとして引数を渡し、関数は出力を表示します。

'Hello, World'

console.log('Hello, World!')

複数の引数を持つConsole.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()

おめでとう！を使用して最初の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()

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を使用します。

VisualStudioCodeのインストール

Visual Studio Codeは、非常に人気のあるオープンソースのテキストエディターです。Visual Studio Codeをダウンロードすることをお勧めしますが、他のエディターを使用する場合は、お持ちのエディターを自由にフォローしてください。

Visual Studio Codeをインストールした場合は、使用を開始しましょう。

VisualStudioCodeの使用方法

アイコンをダブルクリックして、VisualStudioCodeを開きます。それを開くと、この種のインターフェースが表示されます。ラベルの付いたアイコンを操作してみてください。

WebページへのJavaScriptの追加

JavaScriptは、次の3つの方法でWebページに追加できます。

• インラインスクリプト
• 内部スクリプト
• 外部スクリプト
• 複数の外部スクリプト

次のセクションでは、JavaScriptコードをWebページに追加するさまざまな方法を示します。

インラインスクリプト

デスクトップまたは任意の場所にプロジェクトフォルダーを作成し、30DaysOfJSという名前を付けて

index.html

<!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

<!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.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のプリミティブデータ型は次のとおりです：String、Number、Boolean、undefined、Null、Symbol。

数字

• 整数：整数（負、ゼロ、正）の数例：... -3、-2、-1、0、1、2、3 .. ..
• 浮動小数点数：10進数例... -3.5、-2.25、-1.0、0.0、1.1、2.2、3.5..。

文字列

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つの方法があります。

• 1行のコメント
• 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. コメントはコードを読みやすくすることができるという1行のコメントを書く

2. 30DaysOfJavaScriptへようこそという別のコメントを書いてください

3. 複数行のコメントを書いてください。コメントはコードを読みやすく、再利用しやすく 、有益なものにすることができます。

4. variable.jsファイルを作成し、変数を宣言し、文字列、ブール値、未定義、およびnullのデータ型を割り当てます

5. datatypes.jsファイルを作成し、JavaScripttypeof演算子を使用してさまざまなデータ型を確認します。各変数のデータ型を確認してください

6. 値を割り当てずに4つの変数を宣言します

7. 割り当てられた値で4つの変数を宣言します

8. 変数を宣言して、名前、名前、結婚歴、国、年齢を複数行に保存します

9. 変数を宣言して、名前、名前、結婚歴、国、年齢を1行に保存します

10. 2つの変数myAgeとyourAgeを宣言し、それらに初期値を割り当てて、ブラウザーコンソールに記録します。

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

🎉おめでとう ！🎉

2日目>>