元保育士アラサー女のぐんぐんストーリー🐻‍❄️ITエンジニアになるまでの道のり😤

IT知識ゼロ、パソコン苦手な元保育士が、独学でエンジニアになるまでの日々を投稿します😊

Javascriptの基礎文法、気合で覚えたぞー!!!平日は4時間勉強だ!!😤

転職活動を始めて来年の春には再就職をしたいと思うと、今からJavascriptをどんどん覚えポートフォリオ制作に早く手を付けなければいけません💦

 

 

”のんびりしてられないーー!!!!!!!”

 

 

そう思い今週は気合を入れてJavascriptの概念や基本的に文法を頭に叩き込みました!!

 

 

平日は4時間勉強!!

 

 

毎日アドレナリンが働いてました!!笑

 

 

 

 

Javascriptの基礎文法

  • 変数...データを格納するためのコンテナ。変数を宣言するには’let’、’const’、’var’キーワードを使う

 

  • 定数...中身が変わらない特別な箱で、入れたものがいつでも同じ

 

  • 配列...データをリストのようにまとめるためのもの

 

  • ループ文...for文、while文などの繰り返し処理

 

  • 条件分岐...if文を使い、条件によってコードを実行できる

 

  • if else文...条件によってコンピューターに何をすべきかを伝えるルール。条件が真=’‘if’/条件が偽=’else’で違う行動をとる

 

  • 関数...同じ作業を何度もコンピューターにお願いする時の「ルール」で、いつでも同じ操作をコンピューターにさせることができる。コンピューターに何か教えるための便利な方法。

 

  • オブジェクト...データを保管する箱のようなもの。この箱の中に色々な情報や特性(プロパティ)を入れることができる。例えば、人の情報をオブジェクトに入れると名前、年齢、好きな色などの情報を1か所にまろめることができる。オブジェクトは、情報を整理するのに便利なツール。

 

  • プロパティ...オブジェクトに関する情報。 例)車の色や大きさなど

 

  • メソッド...オブジェクトができる動作やアクション。 例)車が走る、止まるなど

 

  • DOM操作...コンピュータープログラムを使って、WEBページ上のテキスト、画像、ボタンなどを操作したり変更したりする。

例)WEB上の画像ギャラリーを見て、画像をクリックすると次の画像が表示される

  WEBサイトで「いいね」ボタンをクリックすると、「1いいね」が表示される

 

 

さらっと覚えてくらいですが深めすぎるととても時間がかかるので、7割くらい全体像を把握したところで実践に移ります!

 

 

今回使ったサイトは『ドットインストール』

 

 

1つの動画が3分程度で分かりやすくまとめられていて、Javascriptの勉強を継続できそうなので私にピッタリの学習サイトです✨

 

 

まずは”htmlのひな形”からです! 

 

 

動作確認の作業です! 

<!DOCTYPE html>
<html lang="Ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge>"
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My JavaScript</title>
</head>
<body>
    <script> src="main.js"></script>
</body>
</html>

 

 

確認できました!😆 

 

 

この動作確認の作業を説明する動画は3分でしたが、私はこれを終わらせるのに1時間もかかってしまいました…

 

 

何度繰り返してもエラーが出てしまいましたが、

どうやらファイルを保存していなかったのが原因だったようです😅

 

 

コードの打ち間違いがないかとか、原因を見つけるのに時間をかけ過ぎてしまいましたが、"alert"のウインドウが表示されて動作確認ができたのでとても安心しました笑

 

 

この調子でどんどん進めます!!!!!