JavaScriptとは?

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

JavaScriptとは?


Cはオブジェクトベースのスクリプトプログラミング言語であり、HTMLとCSSで生成されたウェブページに生き生きとした効果を加えるために使用される。C++のようにコンパイルを必要としない1行1行で解釈してすぐにコマンドを実行するinterpreter言語HTMLの特定の要素を選択し、異なるイベント(マウスクリック、キーボード入力など)に応じて機能を追加して任意の操作を実行できます。


JavaScriptの使用方法


1.内部スクリプト


JavaScriptコードは、HTMLドキュメントに<<script>タグを付けて使用できます。HTMLドキュメントの任意の場所で使用できます。通常、HTMLドキュメントがすべてロードされた「本文」で使用されます。(主に簡単なスクリプトまたはテストに使用されます。)


2.外部スクリプト


JavaScriptファイルをHTMLから分離します。js拡張子のファイルに保存してロードできます。外部javascriptを使用するには、<script>にsrcプロパティをHTMLドキュメントの場所の標準ファイルパスとして入力するだけです。


内部スクリプト

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
<script>
자바 스크립트 코드
</script>
</html>

外部スクリプト

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
<script src="./index.js"></script>
</html>

JavaScriptでのセレクトプログラム


1.ラベルセレクタ

document.getElementsByTagName(태그명)[순서];
タグは同じ名前で複数生成できます.
だからgetElementではなくgetElement
ラベル名を追加する場合(「div」)はこのように追加すればよい.
ここで、最後の[順番]はindex 0から始まり、3人兄弟がいれば3番目を選ぶときは、2を足すことができます.

2.クラスセレクタ

document.getElementsByClassName(클래스명)[순서];
クラスは、タグのように同じ名前で複数作成することもできます.
したがって,上記のコードでは複素getelementsを用いる.
クラス名を入れる場合(「logo」)はこのように入ればよい.
そして複数なので、最後に[順番]であるインデックス番号を書きます.indexは0から始まります.

3.アイデンティティ選択者

document.getElementById(아이디명);
アイデンティティの特性は同じアイデンティティ名を使用しないため、これはルールです.
複数形式のgetElementではなくgetElementを使用し、後に順序も使用しません.

JavaScriptの簡単な選択プログラム


2番目のクエリー・ファイルが挿入されていない場合、スクリプトでクエリー・コレクタを使用すると、兄弟がいてもクエリー全体が選択されます。

document.querySelector('div');

querySelectorのみを使用している場合は、順序を指定できません。後にオールを付けてこそ可能だ


2番目のクエリー・ファイルが挿入されていない場合は、スクリプトでクエリー・コレクタを使用するときに兄弟を選択します。

document.querySelectorAll('div')[순서];
// [순서]는 자바스크립트와 마찬가지로 index 0 부터 시작.

同じクラスに同じ兄弟がいたら

document.querySelectorAll('.hello > p')[2];

<div class="hello">
	<p>안녕하세요</p>
	<p>안녕하세요</p>
	<p>안녕하세요</p>
</div>

// hello 클래스안에서 3번째 p가 해당

同じIDに同じ兄弟がいたら

document.querySelectorAll('#hello')[1];
// hello 아이디안에서 2번째 형제가 해당

出力文(output)


JavaScriptでは、さまざまな方法で成果物をWebブラウザに出力できます。JavaScriptで使用できる出力方法はいくつかあります。

  • window.Alert()メソッド
  • document.write()メソッド
  • console.log()メソッド
  • HTML DOM要素を使用したinnerHTML Property

    • window.alert()メソッド


    「ブラウザapiメソッド警告」ダイアログ・ボックスでは、ユーザーに入力を要求しないメッセージを送信しますが、ユーザーに確認を要求しません.
    別のダイアログボックスをポップアップして、ユーザーにデータを送信します.

    他のalert(コンテンツ)は必要ありません.書き終わったら終わりだ文字列/変数名/数値型などをコンテンツに含めることができます.

    document.write()メソッド


    Webページのロード時に実行し、最初にWebページにデータを出力します.
    ほとんどはテストまたはデバッグに使用されます.

    こう書くと、

    HTMLにテキストを入れたように、Webページに表示されます.

    console.log()メソッド


    Webページのコンソールからデータを出力します.
    ほとんどの主要なWebブラウザでは、F 12(開発者ツール)をクリックし、メニューのコンソールをクリックして表示します.コンソール画面から出力されたデータは、より詳細な内容に出力され、デバッグに役立ちます.

    こう書くと、

    これにより,Webページの開発者ツールで確認できる.
    また、出力文では、

    String(文字列)を表示するには、次の3つの方法があります.
    1つ目は単一引用符("")、2つ目は二重引用符(""")、3つ目は逆引用符(`)です.
    一重引用符と二重引用符は同じ使い方です.
    「スタート」で終わり、「スタート」で終わります.

    したがって、+を使用する場合、

    一番下の行のように、変数の前後文字列を別々に書く処理をしてこそ、別々に書くことができます.

    また`backticといいます.これは一重引用符や二重引用符とは異なり、両端に書くだけで、変数を追加する場合は${variablename}と書くだけです.
    backticではなく「」に${}を書き込むと、エラーが発生し、出力されません.
    backticは文字列修辞手法で、後でもっと詳しく処理します.

    JavaScriptコメント


    JavaScriptコメントJavaScriptコードを説明し、読みやすくします。また、代替コードのテスト時に実行を防止するためにも使用できます。コメントは、エラー検索のデバッグに非常に優れています。

    // 한줄 주석
/* 여러줄
   주석
*/
    ActivityはFragmentにhandlerでメッセージを伝えます
    レスポンス・ファクト