Html Css JS Tester + Exampleを使ってJavascriptの復習をしてみた。 - ネットワークエンジニアで高きを目指せ（横浜編）

Html Css JS Tester + Exampleを使ってJavascriptの復習をしてみた。

前書き

何事も基礎って大事ですよね！Javascriptの勉強から逃げるためにCCNAの勉強を再開などしていますが、なんだかんだ言って「やっぱり頑張ろうか。。」という想いがあり、じゃあ基礎からって感じになっています。今回Javascriptのめっちゃ基礎的な勉強を超久々にやったので記事にいたしました。なんで記事にする必要があるの？って疑問に思う方も心優しい気持ちで見てやってください。

今週のお題「もしもの備え」

もしもの備えのために

「We Interrupt This Semester for an Important Bulletin」という本を購入して、第一章を読み終えました。ようやく主人公が女性であり、Chipのガールフレンドである点理解できました。前回からたった11ページしか進んでなくて、この本全部で184ページあるんですが、何とか読み進める予定です。

あ、応援してくださる方は下記、ポチっていただけると助かります。

にほんブログ村

本記事のネットワーク系語呂合わせの紹介は以下の通り。

〇Javascriptの基礎を学べるアプリ紹介。

〇既存のオブジェクトにプロパティを追加する方法

〇for.. in文を使ってオブジェクトの中身を書き出す。

■Javascriptの基礎を学べるアプリ紹介

さて、今回は下記のアプリ（Html Css JS Tester + Example）を使用して
基礎を学んでいくことにしました。

なんでこのアプリなのかというとサンプルが豊富にあって、しかもどいつもこいつも簡単なプログラムばかり、すぐに実装できるし、動きも確認しやすいところが気に入りました。

■ＨＴＭＬでの準備

もう超シンプルに、下記準備しておきました。

それぞれIDをdemo1-5まで振ってます。

<!DOCTYPE HTML>
<HTML lang="ja">
<HEAD>

</HEAD>
<BODY>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>

<script src="test.js"></script>
</BODY>
</HTML>

後は好きに変えていきます。

■既存のオブジェクトにプロパティを追加する方法

では早速。基礎勉強始め！っていうかサンプル打ち込んで内容を変更していくだけなんですけどね。

学ぶことは何一つないかもしれません。
まあ所詮自己満足のブログなんで大目に見てください。

let LLDP = {
        Default:"IEEE802.1ab",
        MulticastMacAddress:"0180.c200.000e",
        Transmit_Interval:30,
        HoldTimer:120,
    };

とりあえずLLDPというオブジェクトを作りました。
そこにプロパティを追加していっています。追加したのは以下の四つです。

Default = IEEE802.1ab
MulticastMacAddress = 0180.c200.000e
Transmit_interval = 30
HoldTimer = 120

ここに新たにLayer = 2を追加しようと思います。

LLDP.Layer = 2;

これだけで先ほどのオブジェクトの中に新たにLayer:2を追加することができました。

さてこの結果をinnerHTMLを使用して表示させようと思います。

document.getElementById("demo1").innerHTML = 
    "LLDP " + LLDP.Default + 
    " _ " + LLDP.MulticastMacAddress +
    "_"+ "Layer" + LLDP.Layer;

demo1を読み取り、そこに=以下の内容を表示させます。
上記の結果は以下の通りです。

f:id:tsuyunaruhito:20200907060421p:plain

さて無事、LLDP.Layerで2を表記させるに至りました。

一個目の基礎勉強終了したので次に行きます。

区切るためだけに準備されたdemo2の出番です。

    document.getElementById("demo2").innerHTML = "--------------------------------------"; 

区切る

■for.. in文を使ってオブジェクトの中身を書き出す。

次はfor in文を使ってみようかと思います。

let XYZ = "";
    let CDP = {MulticastMacAddress2:"0100.0CCC.CCCC", Transmit_Interval2:60,HoldTimer2:180};
    let x;
    for(x in CDP){
        XYZ += CDP[x]+" ";
    }

for..in 文は、指定したオブジェクトのプロパティに対して、反復処理をします。

こちら下記のＸＹＺを実行することで下記のように反複処理が行われます。

    document.getElementById("demo3").innerHTML = XYZ; 

下記処理の結果です。

■終わりに

今回アプリ「Html Css JS Tester + Example」を使って基礎的な勉強をしてみました。

ひたすらサンプルを動かしたい方は本アプリを見ながら一回動かしてみてはいかがでしょうか。

interier.hatenablog.com

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

なんか1000人超えてから特に苦労することなく1027人くらいまで増えていました！
次は目指せ1500人。何卒応援よろしくお願い致します！

↓↓↓↓↓

読者登録をしていただけると大変助かります。

本サイトが参考になったらクリックをお願いします。

人気ブログランキング