30-Days-Of-JavaScript - 30日間のJavaScriptプログラミングチャレンジは、30日間でJavaScriptプログラミング言語を学ぶためのステップバイステップガイドです。このチャレンジには100日以上かかる場合がありますので、自分のペースに従ってください。

(30 days of JavaScript programming challenge is a step-by-step guide to learn JavaScript programming language in 30 days. This challenge may take more than 100 days, please just follow your own pace. )

Created at: 2019-12-23 22:07:40
Language: JavaScript
URL: https://github.com/Asabeneh/30-Days-Of-JavaScript

30日間のJavaScriptの

# 日 トピック
01 紹介
02 データ型
03 ブール値、演算子、日付
04 条件
05 配列
06 ループ
07 関数
08 オブジェクト
09 高階関数
10 セットとマップ
11 破壊と拡散
12 正規表現
13 コンソール オブジェクト メソッド
14 エラー処理
15 クラス
16 ティッカー
17 ウェブストレージ
18 約束
19 クロージャ
20 クリーンなコードの記述
21 ティッカー
22 DOM オブジェクトの操作
23 イベントリスナー
24 ミニプロジェクト:太陽系
25 ミニプロジェクト:世界の国々データ可視化1
26 ミニプロジェクト:世界の国々データ可視化2
27 ミニプロジェクト:ポートフォリオ
28 ミニプロジェクト: リーダーボード
29 ミニプロジェクト:キャラクターのアニメーション化
30 最終プロジェクト

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

著者がより多くの教材を作成するのをサポートする
PayPal ロゴ

30日間のJavaScript:はじめに

ツイッターフォロー

著者:アサベネ・イェタイエ
2020年1月

2日目>>

30日間のJavaScript(ジャバスクリプト)

📔1日目

紹介

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

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

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

必要条件

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

  1. モチベーション
  2. コンピュータ
  3. インターネット
  4. ブラウザ
  5. コード エディター

セットアップ

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

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

現時点ではNode.jsは必要ないかもしれませんが、後で必要になる場合があります。ノード.jsをインストールします。

ノードのダウンロード

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

インストールノード

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

asabeneh $ node -v
v12.14.0

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

ブラウザー

そこには多くのブラウザがあります。ただし、グーグルクロームを強くお勧めします。

グーグルクロームのインストール

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

グーグルクローム

グーグルクロームコンソールを開く

Google Chrome コンソールを開くには、ブラウザの右上隅にある 3 つのドットをクリックするか、[その他のツール] > [開発者ツール] を選択するか、キーボード ショートカットを使用します。私はショートカットを使うのが好きです。

クロームを開く

キーボードショートカットを使用してChromeコンソールを開きます。

Mac
Command+Option+J

Windows/Linux:
Ctl+Shift+J

コンソールを開く

Google Chrome コンソールを開いたら、マークされたボタンを調べてみてください。ほとんどの時間をコンソールに費やします。コンソールは、JavaScript コードが格納される場所です。Google Console V8 エンジンは、JavaScript コードをマシンコードに変更します。 Google Chrome コンソールで JavaScript コードを書いてみましょう。

コンソールでコードを記述する

ブラウザコンソールでのコードの記述

Googleコンソールまたは任意のブラウザコンソールで任意のJavaScriptコードを書くことができます。ただし、この課題では、Google Chromeコンソールにのみ焦点を当てています。以下を使用してコンソールを開きます。

Mac
Command+Option+I

Windows:
Ctl+Shift+I
コンソール.log

最初の JavaScript コードを記述するために、組み込みの関数コンソール.log() を使用しました。引数を入力データとして渡し、関数が出力を表示します。コンソール.log() 関数の入力データまたは引数として渡しました。

'Hello, World'

console.log('Hello, World!')
コンソール.log複数の引数を使用

console.log() 関数は、複数のパラメーターをコンマで区切って受け取ることができます。構文は次のようになります:コンソール.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 で // で始まるテキスト行はすべてコメントであり、このように囲まれたものもコメントです。

//

例: 単一行コメント

// 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.log()を使用してJavaScriptコードを書く練習をしましょう。 テキストに加えて、JavaScriptを使用して数学的計算を行うこともできます。次の簡単な計算をしてみましょう。 グーグルクロームコンソール上でJavaScriptコードを書くことは可能ですコンソール.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チャレンジでは、Visual Studio Codeを使用します。

Visual Studio Code のインストール

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

VSCODE

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

Visual Studio Code の使用方法

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

Vscode ui

Vscode プロジェクトの追加

Vscode オープンプロジェクト

スクリプト ファイル

ライブサーバーのインストール

スクリプトの実行

コーディング実行中

ウェブページへの JavaScript の追加

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

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

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

インライン スクリプト

デスクトップまたは任意の場所にプロジェクト フォルダーを作成し、30DaysOfJS という名前を付けて、プロジェクト フォルダーにインデックス.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() 組み込み関数を使用して、ポップアップアラートメッセージを作成できます。

内部スクリプト

内部スクリプトは頭または本文に記述できますが、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()

VSCode からの JS コード

外部スクリプト

内部スクリプトと同様に、外部スクリプトリンクはヘッダーまたは本文に配置できますが、本文に配置することをお勧めします。 まず、拡張子の付いた外部JavaScriptファイルを作成する必要があります.js。拡張子.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()

Multiple External Scripts

We can also link multiple external JavaScript files to a web page. Create a file inside the 30DaysOfJS folder and write the following code.

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>

Your main.js file should be below all other scripts. It is very important to remember this.

Multiple Script

Introduction to Data types

In JavaScript and also other programming languages, there are different types of data types. The following are JavaScript primitive data types: String, Number, Boolean, undefined, Null, and Symbol.

Numbers

  • Integers: Integer (negative, zero and positive) numbers Example: ... -3, -2, -1, 0, 1, 2, 3 ...
  • Float-point numbers: Decimal number Example ... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...

Strings

A collection of one or more characters between two single quotes, double quotes, or backticks.

Example:

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

Booleans

A boolean value is either True or False. Any comparisons returns a boolean value, which is either true or false.

A boolean data type is either a true or false value.

Example:

true // if the light is on, the value is true
false // if the light is off, the value is false

Undefined

In JavaScript, if we don't assign a value to a variable, the value is undefined. In addition to that, if a function is not returning anything, it returns undefined.

let firstName
console.log(firstName) // undefined, because it is not assigned to a value yet

Null

Null in JavaScript means an empty value.

let emptyValue = null

Checking Data Types

To check the data type of a certain variable, we use the typeof operator. See the following example.

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

Comments Again

Remember that commenting in JavaScript is similar to other programming languages. Comments are important in making your code more readable. There are two ways of commenting:

  • Single line commenting
  • 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

When you run index.html file in the 01-Day folder you should get this:

Day one

🌕あなたは素晴らしいです!あなたは1日目のチャレンジを終えたばかりで、偉大さへの道を進んでいます。今、あなたの脳と筋肉のためにいくつかの運動をしてください。

💻1日目:演習

  1. コメントはコードを読みやすくすることができますという1行のコメントを書く

  2. という別の単一のコメントを書く,ようこそ30DaysのJavaScriptの

  3. コメントはコードを読みやすく、再利用しやすく、有益なものにすることができます

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

  5. データ型.jsファイルを作成し、JavaScript型演算子を使用してさまざまなデータ型をチェックします。各変数のデータ型を確認する

  6. 値を代入せずに 4 つの変数を宣言する

  7. 割り当てられた値を持つ 4 つの変数を宣言する

  8. 名、姓、婚姻状況、国、年齢を複数行で格納する変数を宣言します

  9. 名、姓、婚姻状況、国、年齢を1行に格納する変数を宣言します

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

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

🎉万丈！🎉

2日目>>

About

Author：Asabeneh

Watch
Star
Fork