Javascript基本構文と簡単なプログラム

59073 ワード
JavaScript TIL テキストリンク
2021.08.03

基本構文


htmlに適用


  • htmlですぐに使用
    ヘッダーまたはbodyに<script></script>を使用してjavascriptコンテンツを入力します.

  • htmlにリンクして外部で使用
    js拡張子を持つファイルを作成し、html headで<script src=""></script>を使用してjsファイルをsrcにバインドします.

    • スクリーン出力


    基本的に、bodyに直接追加されたのはdocument.write()で、()の内容をbodyに追加します.console.log()を使用して、ブラウザチェックタブでコンソールウィンドウに印刷します.alert()は、ブラウザがロードされると、警告ウィンドウのように()出力されます.prompt()ブラウザがロードすると、入力ウィンドウがポップアップされ、()の内容が表示され、入力ウィンドウがポップアップされます.document.getElementById('id이름')を使用してhtmlに作成されたタグで、document.getElementById('id이름').innerHTML = 입력값のように()に入力された名前を選択します.タグ内部の値をinnerHTMLで=右側の値に置き換えます.
    (inputまたはbuttonのような単一のタグは、document.getElementById('id이름').valueのような内部値を選択することによって置き換えることができる.)

    演算子

  • +言ったようにもう一つ1+1を足すと2君がいい+言ったら君がいい
  • -マイナス記号演算子、1-1の場合は0
    △こんにちは.あなたは論理的に成り立たないので、間違いをします.
  • *演算子を乗算し、1*1は1を表します.
    (上記文字は成立しない)
  • /区切り演算子が1/1の場合は1
    (文字なし)
  • %他の演算子が5/3の場合は2
    (文字なし)

    • データ型


  • 数値(number)
    =1、2、NaN(a numberの略ではない)

  • 文字列
    =「こんにちは」

  • ブール値ブール値:ブール値は真と偽を表します
    = true, false

  • シンボル:ECMAScript 6から

  • undefined
    =値が定義されていません

  • オブジェクト(object)
    =nullなど
    • データ型の決定方法
    タイプデータ
    typeof 10;//数値タイプ
    typeof「文字列」;//stringタイプ
    typeof true;//ブール型
    typeof undefined;//未定義のタイプ
    typeof null;//objectタイプ
    データ型を変換する組み込み関数

  • eval():数式または文字列->実数

  • 番号():文字->数値

  • String()String():数値->文字

  • escape():ハングル->16進法

  • unescape():16進数->ハングル

  • isFinite():有限睡眠true,無限睡眠false

  • isNan():文字はtrue、数字はfalse

  • ParseInt(文字列、小数):文字列->整数(必要な小数に変換可能)

  • ParseFloat():文字列->浮動小数点、変換不可の場合はNaNを返します

    • 演算子


    増減演算子


    X++(後置演算子):使用後増加
    ++X(前演算子):線を増やして使用
    つまり、演算子の貼り付け先によって増加/減少時間が異なります.

    代入演算子


    a+=b --> a=a+b
    a-=b --> a=a-b
    a=b --> a=ab
    a/=b --> a=a/b
    a%=b --> a=a%b

    関係演算子


    <大きい.
    <=以上.> 작다 >= 작거나 같다==同じ(===)
    != 異なる(!==)

    論理演算子


    AND(&,&&)
    OR(|,||)
    XOR(^)
    AND演算子はすべての値が真の場合真です
    OR演算子が値の中で1つが真である場合真である
    XOR演算子は、値が異なる場合は真/値が等しい場合は偽
    !演算子が真の場合->偽/偽の場合->真
    論理演算子の例
    論理|演算子
    true || true;//true
    true || false;//true
    false || true;//true
    false || false;//false
    論理積演算子
    true && true;//true
    true && false;//false
    false && true;//false
    false && false;//false
    論理エラー(!)演算子
    !true;//false
    !false;//true

    ES 6以降に変更された変数宣言


    varは値を再宣言および変更できます
    letは再宣言できません
    constは値を再宣言および変更できません
        <script>
      var x = 6;
      var x = 12;

      let y = 6;
      let y = 12; -> 에러 발생
      y = 12;

      const z = 2;
      const z = '셋'; -> 에러 발생
      z = 5; => 에러 발생
    </script>

    自動変換


    JAvascriptでは、簡単に計算できます.
    形状を自動的に変換し、計算をエラーしません.
        <script>
      var num = 5; // 숫자
      var text = '5'; // 문자
      console.log(num + null); // 5 + 0 = 5
      console.log(text + null); // '5' + 'null' = 5null
      console.log(text + 2); // '5' + '2' = 52
      console.log(text - 2); // 5 - 2 = 3
      console.log(text * '2'); // 5 * 2 = 10
    </script>

    さんこうじょうけん


    変数=条件?true : false ;
    変数=条件?true : false;
    条件がtrueの場合はtrue、falseの場合は変数

    n.関数


    ブラウザを自動的に実行するのではなく、変更コードを必要な時点と論理点に適用するコードを実行します.
    きほんがた
    function関数名(パラメータ){関数実行時に適用されるコード}
    例
      <body>
    <input type="text" id="num1" size="2" />
    <input type="text" id="num2" size="2" />
    <button onclick="add()">+</button>
    <input type="text" id="result" />

    <script>
      function add() {
        var num1 = document.getElementById('num1').value;
        var num2 = document.getElementById('num2').value;
        var result = Number(num1) + Number(num2);

        document.getElementById('result').value = result;
      }
    </script>
  </body>
    1つの例はaddという関数を作成し、ボタンを押すと必要な機能を有効にします.空のパラメータの原因は、宣言された変数を受信したために適用される関数ではなく、実行される関数であるため、使用されない例です.

    backticで文字列を表す


    文字列を表すときは'1000원 입니다.'というように表現するのが一般的ですが、変数を表すときはprice + '원 입니다'というような変数と文字を別々に「」するようにして、簡便化のために新たに追加した文法はbacktic表現です.
    `${price}원 입니다.`
    前述したように変数に1000ウォンを入力すると1000ウォンが出力されます.

    文字列と増分演算子を使用した表の作成

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>table</title>
  </head>
  <body>
    <script>
      /* 문자열 += -> 누적해서 문자열이 연결되어 출력된다
        3X2 테이블 출력*/

      var tag = '<h1>테이블 만들기</h1>';
      var table = '<table border="1">';
      table += '<tr>';
      table += '<td>1-1</td>';
      table += '<td>1-2</td>';
      table += '<td>1-3</td>';
      table += '</tr>';
      table += '<tr>';
      table += '<td>2-1</td>';
      table += '<td>2-2</td>';
      table += '<td>2-3</td>';
      table += '</tr>';
      table += '</table>';

      document.write(tag);
      document.write(table);
    </script>
  </body>
</html>

    けいさんき

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>더하기 연산</title>
  </head>
  <body>
    <input type="text" id="num1" size="2" />
    <input type="text" id="num2" size="2" />
    <hr />
    <button onclick="add()">+</button>
    <button onclick="sub()">-</button>
    <button onclick="mul()">*</button>
    <button onclick="div()">/</button>
    <hr />
    <input type="text" id="result" />

    <script>
      function add() {
        var num1 = document.getElementById('num1').value;
        var num2 = document.getElementById('num2').value;
        var result = Number(num1) + Number(num2);
        document.getElementById('result').value = result;
      }
      function sub() {
        var num1 = document.getElementById('num1').value;
        var num2 = document.getElementById('num2').value;
        // var result = num1 - num2;
        // string - string 은 자동으로 숫자로 형변환하여 계산한다.
        var result = Number(num1) - Number(num2);
        document.getElementById('result').value = result;
      }
      function mul() {
        var num1 = document.getElementById('num1').value;
        var num2 = document.getElementById('num2').value;
        var result = Number(num1) * Number(num2);
        document.getElementById('result').value = result;
      }
      function div() {
        var num1 = document.getElementById('num1').value;
        var num2 = document.getElementById('num2').value;
        var result = Number(num1) / Number(num2);
        document.getElementById('result').value = result;
      }
    </script>
  </body>
</html>

    数字を入力して*ボタンを押すと

    投票年齢フィルタ

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>투표 확인 프로그램</title>
  </head>
  <body>
    <h1>투표 나이 판별기</h1>
    <input type="text" id="age" placeholder="나이를 입력하세요." />
    <button onclick="vote()">확인</button>
    <hr />
    <p id="result"></p>
    <script>
      function vote() {
        let age = document.getElementById('age').value;
        // 변수 변하는 값
        const minAge = 18; //상수 변하지 않는 값
        var result = age >= minAge ? '투표가 가능' : '투표가 불가능';
        document.getElementById('result').innerHTML = `당신은 ${result}합니다!`;
      }
    </script>
  </body>
</html>

    年齢を入力すると
    設定基準より高い

    設定基準を下回る

    センチメートルを変える▼m

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>100cm 단위 -> 1m 단위</title>
  </head>
  <body>
    <h1 id="result"><!-- innerHTML --></h1>
    <script>
      let cm = prompt('cm단위를 입력하세요!');
      const div = 100; // 변하지 않는 상수
      let m = cm / div;
      document.getElementById(
        'result'
      ).innerHTML = `${cm}cm는 미터단위로 환산하면 ${m}m입니다.`;
    </script>
  </body>
</html>

    入力後

    かんたんに帳簿をつける

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>용돈 계산기</title>
  </head>
  <body>
    <span>용돈 총액: </span
    ><input type="text" id="all" placeholder="총액을 입력하세요" />
    <span>원</span>
    <hr />
    <span>교통비: </span>
    <input type="text" id="fee1" placeholder="금액을 입력하세요" />
    <span>원</span>
    <span>식비: </span>
    <input type="text" id="fee2" placeholder="금액을 입력하세요" />
    <span>원</span>
    <span>기타: </span>
    <input type="text" id="fee3" placeholder="금액을 입력하세요" />
    <span>원</span>
    <hr />
    <button onclick="price()">계산하기</button>
    <p id="result"></p>
    <script>
      function price() {
        let all = document.getElementById('all').value;
        let fee1 = document.getElementById('fee1').value;
        let fee2 = document.getElementById('fee2').value;
        let fee3 = document.getElementById('fee3').value;
        const feeAll = Number(fee1) + Number(fee2) + Number(fee3);

        const result =
          Number(all) < feeAll
            ? `${feeAll - all}원 초과되었으니 지출을 줄이셔야합니다.`
            : `${all - feeAll}원 세이브되었으니 지출을 유지하셔도 좋습니다.`;

        document.getElementById('result').innerHTML = result;
      }
    </script>
  </body>
</html>

    金額を入力して総額を下回る費用の合計.

    金額を入力して総額を下回る費用の合計.
    Makefile
    [BaekJoon]74900(java)の作成