[Megabyte School]Javascript特別講座:基本概念を理解する

17407 ワード
JavaScript テキストリンク
Javascript特講開始前講師が強調した言葉

皆さん、パソコンが不器用です。詳細な命令だけが聞き取れる!



うん...?

俺は金だ...!!

HTMLコンテンツをJavascriptで置き換える


JavaScriptはUIを変更する役割を果たしています.下の図に示すように、HTMLドキュメントの内容を簡単に必要な内容から通知ウィンドウ、検索ウィンドウなど無限の内容に変更できます.
  • HTML 
    • <body>
    <div>Hello HTML!<div>
</body>
  • Javascript 
    • <script>
document.querySelector("div").innerHTML = "Hello Javascript";
</script>
    =>divラベルの「HelloWorld」を「HelloJavascript」に変更!

    Javascriptを使用したモダリティウィンドウの作成

  • HTMLを使用して要素を作成します.
    • 非表示は
  • CSSです.
  • JSで登場.
    • この3つを知っていれば、Javascriptを使って、私が望むUIを簡単に実現することができます.
    2つのボタンを作成し、これらのボタンをクリックするたびに通知ウィンドウが表示され、ボタンを作成して閉じてみます.
  • HTML 
    • <body>
  <div id="alertBox">
    <p id="target"></p>
    <span
      id="closeAlert">
      Close
    </span>
  </div>
  
  <div>
    <button 
    class="showAlert" 
    onclick="openModal('hello!')">
      Click me
    </button>
    <button
    class="showAlert2"
    onclick="openModal('hello2')">
      Click me
    </button>
  </div>
</body>
    HTMLでアラームウィンドウとして機能するid値「alertBox」divタグと、アラームウィンドウを表示するクラス値「showAlert」および「showAlert 2」が作成されている.
    そして、ボタンにはonclick機能が使用され、jsのopenModal関数でボタンをクリックするとプロンプトウィンドウが表示されます.
  • Javascript 
    • <script>
    function closeModal() {
      document.getElementById("alertBox").style.display = "none";
    }
    function openModal(k) {
      document.getElementById("alertBox").style.display = "block";
      document.getElementById("target").innerHTML = k;
    }
    document.getElementById("closeAlert").addEventListener("click", closeModal);
  </script>
    JSでは、通知ウィンドウラベルにdisplay: none;の値を付けたclosModal()関数と通知ウィンドウラベルが与えられ、ラベル内で内容を変更する関数openModal()が記述されている.openModal()関数は、上記のHTMLでonclick機能を使用します.
    また、提示ウィンドウの下部にあるspanのラベルをクリックすると、addEventListenerを用いて提示ウィンドウが消失する.
  • CSS 
    • #alertBox {
  display: none;
  padding: 20px;
  border: 1px solid #c6c6c6;
  border-radius: 15px;
  background-color: cornflowerblue;
}

#alertBox p {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

#alertBox span {
  font-size: 14px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 5px;
  cursor: pointer;
}
  • 完了画面

    • Javascriptを使用したInputウィンドウの作成


    今回、inputウィンドウで必要なテキストを作成し、ボタンをクリックして、下部に「Hello<作成されたテキスト」が表示されていることを確認し、スペースがある場合は「メッセージ」を入力します.こんなヒントが出てきます
  • HTML 
    • <body>
  <input type="text" name="" id="inputValue">
  <button
    id="submitBtn">
    Submit
  </button>
  <div id="result">

  </div>
</body>
    テキストを書くinputラベルをクリックすると、「Hello<書かれたテキスト>」文のbuttonラベル、最後にdiv「Hello<書かれたテキスト>」文と書くことができます.
  • Javascript 
    • <script>
    document.getElementById("submitBtn").addEventListener("click", () => {
      const value = document.getElementById("inputValue").value;
      if (value == 0) {
        alert("메세지를 입력하세요!");
      } else {
        if (value === " ") {
          alert("메세지를 입력하세요!");
        } else { 
          document.getElementById("result").innerHTML = `Hello ${value}!!`;
        }
      }
    })
</script>
    addEventListenerを使用して匿名関数を記述し、ボタンをクリックすることで入力したテキストを最後まで出力できます.if文のスペースを使用する場合は、alert文の「メールを入力してください」を使用します.プロンプトウィンドウが表示されます.そうしないと、入力ウィンドウの下部に「Hello<文字>」文が印刷されます.

    ピア演算子と一致演算子


  • 等しい演算子(==)
    同等演算子==は、2つの演算子を同じデータ型に変換して比較するよりも、一致演算子の方が広い演算子である.2つの比較オブジェクトのデータ型が同じ場合は、一致演算子のように比較されます.Booleanは、真と偽の2つのデータ型のみを表す.Booleanが偽物の場合は「負数」「数字0」「何もない空の内容」などがあります.
    すなわち、上記のコードでvalue(inputで記述されたテキストコンテンツ)とnumber 0(false)を比較し、何も記述されていない場合、alertが実行され、コンテンツ(ペア)が記述されている場合、elseに移動する.

  • 一致演算子(===)
    一致演算子===は、2つの被演算子のデータ型と値が完全に一致しているかどうかを比較するための非常に厳密な演算子である.
    上部のvalueにテキストを作成しますが、スペースキーの「」を使用している場合、2番目のif文はalertを実行します.そうしないと、「Hello<作成されたテキスト>」が出力されます.

  • フルスクリーン

    • Javascript trim()関数を使用してif文を完了


    javascript trim()関数を使用して上記の内容を表示することもできます.
    if (!value.trim()) {
  alert("INPUT THE MESSAGE");
} else {
  document.getElementById("result").innerHTML = `Hello ${value}!!`;
    終わります.
    Caffe学習シリーズ:モデルの各層データとパラメータの可視化
    webgl深さバッファ