JavaScriptコンセプトのクリーンアップ

16801 ワード
JavaScript テキストリンク

n/a.環境

  • Atom
  • パッケージ:emmet、オープンブラウザ

    • 出力方法


    document.getElementById('one').innerHTML


    1.document:ドキュメント全体で、
    2.getElementById(「one」):ID(「」)をインポートします.
    3.innerHTML:HTMLを書き込む

    写し:document。write('');


    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
 
    document.write('write');
 
  </script>
</body>
</html>

    警告ウィンドウ:window。alert('');


    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
 
    window.alert('경고창');

  </script>
</body>
</html>

    開発者ツールコンソール:console。log('');


    <!DOCTYPE html>
<html lang="ko">
<head>
  <title>Document</title>
</head>
<body>
  <script>
    console.log('개발자 도구 콘솔');
  </script>
</body>
</html>

    コメント

    <!DOCTYPE html>
<html lang="ko">
<head>
<!-- HTML주석 -->
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* CSS 주석 */
  </style>
</head>
<body>
  <script>
    // JS주석
  </script>
</body>
</html>

    へんすう



    数値:


    文字列:


    boolean: true or fale


    Array:複数のデータ型を格納


    function:関数


    ディジタル演算


    しじえんざん


    平方：x**y


    重複をスキップ:x*=y

  • x=y : x = xy

    • 増減+、削減--


    ひかくえんざん


    値と変数のタイプは同じです:x==y

  • x=3;, y='3';
    もしそうであれば、x=yは真(同じ値の場合は真)であり、x=yは偽
    • である.

    関数:関数f(x,y){}




    String内蔵関数


    文字数:length


    アルファベットの位置で数値:。indexOf()


    xからy:。slice(x,y)


    アルファベットaをb:に置き換えます。replace('a','b')


    大文字、小文字:。toUpperCase();


    数値組み込み関数


    小数点n:に出力します。toFixed(n)


    文字列に変換:toString()


    Math


    最低価格:Math。max(a,b,c)


    Date



    シナリオ[]

  • let変数名=[];

    • 索引番号による抽出:配列名[n]


    名前を並べます。slice(n,m)(nから(m))


    アレイ端点要素pop()の削除


    pop()メソッドは、配列から最後の要素を削除し、その要素を返します.

    アレイ端点push()の挿入


    push()メソッドは、1つ以上の要素を配列の末尾に追加し、配列の新しい長さを返します.

    名前を並べます。join('')

  • 配列のすべての要素を接続し、文字列を構成します.
  • ""のテキストを各要素の間に配置します.
    • const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

    let配列名={object:{a:‘a’,b:‘b’}


    https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics
  • カッコ:アクセスするには、カッコ内のオブジェクトを入力する必要があります.
  • かっこ(年齢、既婚):['age']``['married']

    • 要素戻り関数


    単一要素戻り関数


    getElementsById()


    querySelector()


    複素要素戻り関数


    getElementsByClassName("):すべてのクラス名が重複


    QuerySelector All():名前がまったく同じクラス

    // getElementsByClassName only selects elements that have both given classes
var allOrangeJuiceByClass = document.getElementsByClassName('orange juice');
var result = "document.getElementsByClassName('orange juice')";
for (var i=0; i < allOrangeJuiceByClass.length; i++) {
    result += "\n  " + allOrangeJuiceByClass[i].textContent;
}

// querySelector only selects full complete matches
var allOrangeJuiceQuery = document.querySelectorAll('.orange.juice');
result += "\n\ndocument.querySelectorAll('.orange.juice')";
for (var i=0; i < allOrangeJuiceQuery.length; i++) {
    result += "\n  " + allOrangeJuiceQuery[i].textContent;
}

document.getElementById("resultArea").value = result;

    関数をボタンに固定し、文字をアイデンティティーで置換します。




    💔jQuery


    jQuery CDNの使用

  • https://releases.jquery.com/
  • 非圧縮、<script>に貼る

    • jQueryコンセプト


    jQuery
    DOM操作、AJAX電話、Event
    JavaScript図書館です.

    jQuery構文


    構文の詳細ページ

    使用法:$(selector).action():要素をイベントに割り当てます.To explain it in detail, $(selector) will call jQuery to select selector element(s), and assign it to an event API called .action() .
    $(document).ready(function(){
  alert("Hello World!");
  $("#blackBox").hide();
});
    上のコードは次の2つのコードのように表現できます.
    1.
    window.onload = function() {
  alert("Hello World!");
  document.getElementById("blackBox").style.display = "none";
};

    • window.addEventListener("load", () => {
  alert("Hello World!");
  document.getElementById("blackBox").style.display = "none";
});

    フィルタ



    💔JSON


    データの自動生成


    https://json-generator.com/
    ソフトウェア開発&テストバージョン管理の説明
    Javaとjspを使用してカレンダーを作成する