見出し画像
Photo by norinity1103

Web言語マスター復活への道/6日目

alice

おはようございます☀️　4連休ずっと晴れてましたね！
最終日だけ服買いに出かけました🚶‍♀️

目標

・javascriptの基礎を学ぶ

本日の作業

・javascriptの基礎を学ぶ

まずは基本的な使い方について
簡単なフォーマットができているhtmlに、javascriptで動きを付けます。
bodyで<script src=...>でcoding.jsを参照してます。最終的にページを開くと"こんにちは！"と表示するようにします。いっちばん基礎です。

index.html

<!DOCTYPE html>
<html lang="ja">
   <head>
       <meta charset="utf-8">
       <title>JavaScript</title>
   </head>
   <body>
       <script src="coding.js"></script>
   </body>
</html>

coding.js

alert("こんにちは！");

結果

画像1


毎回htmlを読ませる動作が面倒なので、開発者ツールを使って確認するのがよいそうです。今回利用している環境はEdge Chromiumですので、右クリック>開発者ツールで調査する>コンソール　で実行していきます。
先ほどのコードを書いて実行すると、ダイアログに挨拶が表示されました。ここで気づきましたが、"alert"はコマンドの一つみたいなもんだったってわけですね。

画像2

また、コンソール内に表示するにはconsole.log("こんにちは")と打ち込むことで、"こんにちは"と返ってきます。いちいちダイアログを表示させたくないときに使うのかしら

画像3


変数
今回の場合、"name"に"太郎さん"とう情報を代入させて、今後 name=太郎さん　と使いまわせるようにするという技。挫折当時はここで一回"変数？？？？？？"と思いました。すっと理解できてるってことは成長してるってことやね（自慢

画像4

文字列と変数
文字列と変数を組み合わせることもできます。
最初にname=太郎さん　としており、その後hello = name + "、こんにちは"とし、console.log(hello);で出力できています。

画像5


関数
ここもつっかえた記憶があります。
要するに、「決められた動きをしてください」とあらかじめ入力されており、それを呼び出す作業をしています。
キャプチャでいうところの、helloconsole=「"こんにちは"とコンソールに表示します」　と決め、functionでhelloconsoleが実行されたら中身の「"こんにちは...」を呼び出す作業をしている、ということになります。数学でやってたけど、まんま公式で覚えてたので、当時はあまり理解できてなかったですね。

画像6


引数と戻り値
これもざっと説明しますと、よく自動販売機に例えられますね。お金を入れる=（引数）と 飲み物がでてくる＝（戻り値）という感じです。
キャプチャですと、name=お金　こんにちは太郎さん=飲み物　で、最初に定義していたname=太郎さん　がconsole.log("こんにちは" + name)の"name"部分に入れられて"こんにちは太郎さん"と表示された、ということになります。　Web言語はじめて取りかかって乗り越えた人すごいです。ほんと難しいと思います。

画像7

for 文、if else文
試しました。ここらへんは一般サイトと大体同じ説明になると思うので割愛します、for文の例文もう少しシンプルでもいいのになとは思いました

画像8

画像9

arrayオブジェクト
参考サイトにはオブジェクトやらメソッドやら、横文字ばかりでビビらせにきてますが、簡単にいいますと、JavaScriptが扱いやすいように内部情報をつけてあげているということです。
membersで入力したのは3人の名前ですが、裏では番号が振られてます。Johnの前から0, JohnとKerryの間で1, ,,,　というように。
0 | John | 1 | Kerry | 2 | James | 3
今回はslice(1)=裏で振っている1以降のmembersを出力させて！ということになります。
メリットは、わざわざ人名を指定してあげなくとも番号で呼び出すことができる点にあります。名前でログインするよりもユーザーIDでログインした方がPC的にも管理しやすいってことですね。

画像10



感想

個人的にはCSSの方が覚える量あったような気がしてます。
全体的に横文字で”JavaScriptではこれが当たり前だからな（ﾄﾞﾔ　みたいな笑
初心者サイトではそういう言葉は使わずに、間違っててもいいからそれっぽい日本語で書いてあげる方が重要だと思います。
明日とあさってでjavascriptの基礎コードを書き終えます😉

この記事が気に入ったらサポートをしてみませんか？