Zenn
🙌

【初心者向け/ITスクール39日】JavaScriptを通して作成した二番目のWEB PAGE

2023/09/05に公開
CSS
HTML
JavaScript
tech

はじめに

今日は、ITスクールに通った39日目の日で、今日学んだ知識を記事にシェアしたいと思います。本記事が、ITを勉強を始めた方々にもロードマップになればいいと思います。

39日目は、HTML/CSSで作成したWEBページをJavaScriptと連携して、動的なページをクライアントに転送する実習をしました。

二番目のWEB PAGE

先輩エンジニア方々に問題

JavaScriptを利用して、リアルタイムでテーブルを作るWEBページを作成しました。
授業の時、学んだことをアレンジし、最初index.htmlのデザインとJavaScriptとCSSの効果を利用し、7行ごとに虹色のテーブルを作成するようにカスタマイズしました。

また、JavaScriptのIf文と入力する値が0, 負数の場合はrecursionを通して、もう一度入力してもらうように例外を処理しました。

最初はprompt関数から入力したデーターをそのままIf文に回してみましたが、オートキャストが行われ、行の数を入力せず、キャンセルボターンを押した場合もrecursionにより、無限ループになりました。キャンセルボタンを押すイベントから null が0に処理され、無限ループが行ったと思います。

以下が問題のコードです。


let setRow = function () {
          let input = prompt("行の数を入力してください。");
          if (input <= 0) {
            alert("行の数は 0 以下にはなれません。");
            return setRow();
          } else {
            row = input;
          }
        };

        setRow();

おそらく、null が0にオートキャストになったので、If文の条件文がtrueになったのが原因だと考え、promptからStringにStringからNumberにキャストしました。

let setRow = function () {
          let input = String(prompt("行の数を入力してください。"));
          Number(input);　　　//<-文字列が入る場合、undefined -> NaN
          if (input <= 0||input==NaN) {    //<- しかし、条件文がきかない
            alert("行の数は 0 以下にはなれません。");
            return setRow();
          } else {
            row = input;
          }
        };

        setRow();

しかし、問題点として、文字列を入力した場合はNaNとして、処理されずそのまま次の入力に進むことが分かりました。
こちらはまだ解決でできませんでした！

CSS+JavaScript

let rowNum = 1;
let tdNum = 1;
.
.
.
for (let i = 0; i < row; i++) {
          document.write("<tr>");
          for (let j = 0; j < column; j++) {
            switch (rowNum % 7) {
              case 1: {
                document.write("<td bgcolor='red' align='center'>");
                break;
              }
              case 2: {
                document.write("<td bgcolor='orange' align='center'>");
                break;
              }
              case 3: {
                document.write("<td bgcolor='#F6CB01' align='center'>");
                break;
              }
              case 4: {
                document.write("<td bgcolor='green' align='center'>");
                break;
              }
              case 5: {
                document.write("<td bgcolor='blue' align='center'>");
                break;
              }
              case 6: {
                document.write("<td bgcolor='navy' align='center'>");
                break;
              }
              case 0: {
                document.write("<td bgcolor='purple' align='center'>");
                break;
              }
            }
	    document.write(tdNum);
            document.write("</td>");
            ++tdNum;
          } //for
          document.write("</tr>");
          ++rowNum;
        } //for
        document.write("</table>");
      }

switch-caseを活用し、1番目は赤、7番目は紫色にプリントし、td内のcontentsはtdNumというカウンター変数を通して、動的なページを作成できるようにアレンジしました。

結果


JavaScript基礎文法1

昨日から本格的にJSを学びました。Javaの基礎をしっかり勉強し、より柔軟な言語でしたので、正直まとめることはないと判断しました。
データータイプを指定しなくてもいいことと配列がArrayListのように動的でObject+stack+queのように自由自在に扱えること、オートキャストが少し問題を起こす可能性などがJavaとは少し違うところですた。

そのため、JavaScriptの場合、簡単に文法中心に紹介したいと思います。

変数

let : Javaのような一般変数ですが、データー指定は必須ではありません。
const:定数の表現する変数です。変数名は同様大文字にします。
var: 昔よく使われた変数タイプですが、同じ変数名にも値を入れることができるので、ミスが起きる可能性がある変数です。

var a = 10;   
console.log(a);
var a = 20;   
console.log(a);
var a = 30;   
console.log(a);

10
20
30

JavaScriptの場合、変数を出力する際にこのような関数を呼び出します。

alert() : ポップアップするメッセージボックスに文字列を出力する関数
console.log() : ブラウザのコンソールにログを出力する関数=(println())
document.write() : WEBページに内容を出力する関数=(print())

データータイプ

String:　文字列タイプのデータータイプ。javaのように""でも代入できますが、'',``でも初期化、代入することができます。

let name1 = "jojo";
let message3 = `my name is ${name1}`;
document.write(message3 + `<br>`);

my name is jojo

Number:　整数/実数タイプのデータータイプ
Boolean:論理タイプのデータータイプ(true of false)
undefined : 値(value)を最初から持っていないデータータイプ

他者が組んだコードのデータータイプが分かりたい時にはtypeof演算子を活用します。

let name1 = "jojo";
document.write(typeof name1 + '<br>');

メッセージボックス

ブラウザ上に文字列とポップアップするボックのことです。

alart() :　入力した文字列をブラウザ上にポップアップします。
prompt() : 文字列をブラウザ上にポップアップし、入力をもらいます。

let reservation = prompt('예약일을 입력하세요.' , '2023-09-');

パラメターを二つし、default値を決めることができます。
confirm() : 文字列をブラウザ上にポップアップし、trueもしくはfalseを得ます。
OKボターンがtrue,キャンセルがfalseです。

演算子

document.write((10=="10")+"<br>"); //true(o)
document.write(("10" === 10) + "<br>");

javasciptはオートキャストが行われ、文字列と整数を比較してもtrueになる場合があります。
そのため、値とデータータイプを比較できる===を活用することができます。

イベント

onclick:htmlタグと連携し、クリックした時に起こすJavaScriptのメソッドなどを設定することができます。

     function minus(price) {
        if (money < 0 || price > money) {
          alert("잔액이 부족합니다.");
          return;
        }
        money -= price;
        alert("현재 금액" + money + "원");
      }

<button onclick="minus(500);">

この場合、ボターンを押せば、moneyという変数の値が500減少します。パラメターにデータータイプを指定する必要がないので、とても便利です。

Discussion