スキルゼロ知識ゼロ経験ゼロからWeb制作で稼げる様になりたい！
HTML＆CSSからJavaScriptへ
基礎文法や関数、繰り返し処理などの書き方や重要そうなコードをまとめました。
JavaScript基礎文法
HTML＆CSSの項目を終えたので、次のJavaScriptに移ります。
JavaScriptにはバージョンがあり、ES6が最新となっているのでそちらを学習します。
HTMLやCSSとの違い
HTMLやCSSでもそうだったのですが、言語ごとにシートを分けて作成するみたいです。
ファイルの中にフォルダを作るイメージがわかりやすいかもしれません。
HTML ページ上にテキストや画像を作成
CSS HTMLで作成したもののレイアウトを変更
JavaScript テキストだけじゃなく計算や条件を作成して表示できる
イメージとしてはこんな感じでした。
重要そうなコード
基本的なコードと、よく使用しそうなコードをまとめておきます。
JavaScriptは文末に「；」が必要ですが、計算式の際は不要です。
「let 変数 = xx;」 繰り返し使用する数値を変数とし、後で変更することが可能。
「変数 = yy;」 変数は更新や計算することが可能。
「const 定数 = xx;」 似た様な定数。変数と違い変更することができません。
「`${変数}`」テンプレートリテラル 文字列の中に変数や定数を使用することが可能。
「&&」、「||」 ANDやORの処理をする際に使用します。
「x += y」 計算式の省略形。「x = x+y」を省略しています。
「if (条件式) { 処理 }」 条件分岐の設定ができます。
「else if 」ifで条件を満たさなかった時の第２条件の設定ができます。
「else 」どの条件も満たさなかった時の処理が設定できます。
「switch (条件式) {case(値): 処理 break;}」
breakを使用しないと処理が完了しないため、caseとbreakはセットで必要です。
繰り返し処理
繰り返し処理をするための準備
繰り返し処理をするための前提で変数や定数を学びましたが、
定義づけにバリエーションがありすぎて大変です。
配列 変数[ ]で代入。「”」と「,」で区切ることで複数の要素を代入することができます。
[ ]の中は0から順にインデックス番号が振られます。
変数[ ]=で配列の要素を更新することができます。
オブジェクト 定数{ }で代入。{プロパティ名:値,}を1つの要素としてプロパティと呼びます。
定数.プロパティ名=で値を更新することができます。
配列の中にオブジェクトを使用したり、逆にオブジェクトの中に配列を使用することができます。
コードをしっかり理解しておかないとごちゃごちゃになってしまうので、それぞれ分解して覚えましょう。
forのコードを使用することで、同じコードを1つにまとめられます。
変数を使用することで配列の要素を全て出力することができます。
for (変数の定義;条件式;変数の更新){ 処理 }
条件式は【配列.length】とすることで要素数を取得することも可能です。
関数
関数とはいくつかの処理をまとめたもののことを指します。
コードを定数に代入し、定数を関数をして使用します。
関数の書き方
関数は以下の様に代入し使用します。
const 定数 = (引数1,引数2) => { 処理 };
引数を使用して呼び出すことができます。
定数(引数1,引数2);
戻り値「return」を設定し、別の定数に代入して使用することもできます。
const 定数2 = 定数(戻り値);
関数の外側で作成した関数は全体適用。
関数やifの{}の内側で作成した関数はその中のみ。
内と外で同じ名前があるときは別々に扱われます。
まとめ
初めてJavaScriptに触れてみましたが、コードを書くということは今までと一緒でした。
HTMLの時に同じclassを作成したように、同じ計算をする際に使用するコードが多そうですが、
計算を多用する際の繰り返し処理や関数など、コードの理解ができてないと使用できないと感じました。
コメント