JavaScriptの概要と基本構文

10332 ワード
Java Script html テキストリンク
2022-03-17
01 : JavaScript?
02 : 기본문법
03 : 변수 표기법(명명규칙)

01 : JavaScript?


JavaScript JavaScriptとは?

  • JavaScriptは、Webページを動的かつプログラミング制御するために設計された言語です.
    プログラムにより、静的HTML、CSSコンテンツを動的に変更したり、ユーザーと対話したりすることができます.
    HTML、CSSとは異なり、JavaScriptはC言語、Javaなどの汎用プログラム言語に類似した構造を持つ.
    JavaScriptは、オブジェクトベースのスクリプト言語です.
    デフォルトでは、Webブラウザで説明される割り込み言語、ノードです.jsのようなフレームワークは、サーバプログラミングにも使用できます.
    現在はパソコンやスマートフォンなどのWebブラウザにjavascript interpreterが内蔵されている.
    • *割り込み言語:元のコード(プログラマによって作成されたソースコード)を行単位で読み出し、マシン言語(JVMは上位機)変換を行わずに直接解析してコマンドを実行します.

  • scriptラベルの内部で作成するか、jsファイル(外部ファイル)で作成してロードします.

  • 主に下端に配置されています.
    Documentオブジェクトモデル/ドキュメントオブジェクトモデル(DOM)オブジェクトを検索する場合、DOM直接制御ではなく、下の作業+最近jQueryなどのライブラリが使用されます.

  • 先読みして逐次進む

    • このクリップの優先排他タイプ、メタページのクリア

    02:基本文法


    1.JavaScriptソースの場所


    デフォルトでは、HTMLドキュメントのヘッダラベルの間にあります.
    他の場所に配置したり、外部ファイルや他のサーバで参照したりできます.
  • 内部スクリプト
    HTMLドキュメントにJavaScriptソースコードを配置するタイプ.
    ヘッドラベル、ボディラベルの上に置くこともできますし、両側に置くこともできます.
  • HTMLドキュメント構造(DOM)
    • へのアクセスが容易
  • ソースが複雑になると、管理が困難になり、共通の機能、コードの回収が困難になるという欠点がある.
    • <!DOCTYPE HTML>
<html>

<body>

  <p>스크립트 전</p>

  <script>
    alert( 'Hello, world!' );
  </script>

  <p>스크립트 후</p>

</body>

</html>
  • 外部スクリプト
    HTMLドキュメントの外に別のファイルを作成し、使用するためにロードします.
    この場合、JavaScriptファイルの場所はHTMLと同じサーバまたは外部サーバである可能性があります.
    • <script src="js01.js" type="text/javascript"></script>
    scriptタグはsrcプロパティと内部コードを同時に持つことはできません.(未実行)
    script src="..."外部ファイルに接続するか、スクリプトラベルにコードを記述するかを選択する必要があります.(ラベルとラベルの間で動作X)

    実行

    2.変数


    変化するデータを格納するメモリ領域.
  • 変数宣言
    変数名は大文字と小文字を区別します.
    プログラムで使用される変数名は避けるべきです.(window, document)
    変数名の前に数字や特殊記号は使用できません.(,$この特殊記号は使用可能です)
    領域変数、グローバル変数があります.
    デフォルトでは、小文字で始まるCamelCaseを使用します.

  • var, let, const
    ex)var userName="洪吉童";

  • 変数のデータ型は、格納値によって決まります.
    データ型を確認する演算子はtypeofで、格納されているデータ型を確認できます.

  • 基本型の種類は文字型、数字型、論理型です.

  • 変数のデフォルト値はundefinedです.(割り当てなし)

  • 変数名は定語を使用できません.

    • 📌 var, let, const


    ES 6以前はvarのみ存在していた.

  • var:領域変数の概念で、関数の範囲内で有効です.
    varを宣言しないと、自動的にグローバル変数になります.
    変数の使用範囲に加えて、いくつかの使用可能なものがあります.
    {}(ブロック有効範囲、スキャン)

  • let:変数名の重複は許可されていません.
    (すべてのバージョンのサポート)
    変数の使用範囲外では使用できません.
    {}(ブロック有効範囲、スキャン)
    未使用の変数(メモリ)はゴミ収集器で解除(削除)されます.
    (終了点から有効範囲外の点~)
    • 	 var str01 = "홍길동";
	 let str02 = "이순신";
	 console.log(str01,'var');  
	 console.log(str02, 'let'); 
	 
	var str01 = "이순신";
	console.log(str01,'var')
	//let str02 = '고길동'; 변수명 중복허용 불가 
	//console.log(str02, 'let');
    let n01 = 1;
var n02 = 2;
if(true){
	//블럭 유효 범위
	//중괄호 사이를 스코프라고 한다. (유효범위)
	//블럭 유효 범위에 선언된 변수는 지역변수
	/**********
		 지역변수
		 -블럭 유효 범위에 선언된 변수
		 -블럭 유효 범위밖에서 사용할 수 없다. 
	**********/
		 console.log(n01,'n01');
		 console.log(n02,'n02');	 
		 n01 = 10;
		 n02 = 20;
		 
		 var n03 = 0;
		 let n04 = 0;
	 }
	 console.log(n01,'n01');
	 console.log(n02,'n02');
	 
	 console.log(n03,'n03');
	 //console.log(n04,'n04'); let으로 선언된 지역변수는 사용불가
  • const:定数はもう別の値に代入できません.
    宣言するときは価値を代入しなければならない.
    • let foo = 'foo1';
const bar = 'bar1';
console.log(foo); // foo1
 
if (true) {
  let foo = 'foo2';
  console.log(foo); // foo2
  console.log(bar); // bar1
}
 
console.log(foo); // foo1
bar = 'bar2'; // error

    データ型-primitive(基本型)

  • Boolean: true, false
  • null:Null値を表す
  • 未定義:値が指定されていない変数には、値が
    • あります.
  • 番号:整数と浮動小数点、無限大とNAN(非数値)など.
  • String:文字列
    • -JavaScriptは値によってデータ型を決定します.
    -文字型、数値型、論理型
    var string;
string = "Java Script"; // 혹은 'Java Script'

    📌 フォントString


    var識別子(変数名)="";
    var識別子(変数名)="";
    var識別子(変数名)=new String("");
    var str001 = '홍길동'; 
console.log(typeof str001, str001);
    = 형을 알아보는 연산자. 
typeof String 값을 -> 콘솔로그에 던져준것.
    /*******************************
문자형 확인
********************************/
var str = '홍길동'; //문자형
var num = '100'; //문자형
var tag = '<h1>안녕하세요</h1>'; //문자형

console.log(typeof str, str, 'str');
console.log(typeof num, num, 'num');
console.log(typeof tag, tag, 'tag');![](https://media.vlpt.us/images/h220101/post/1cdc0d6a-d0ee-4b68-8a06-f8a4854f1401/image.png)

    📌 数値


    var識別子(変数名)=数値;
    -整数、小数
    var n001 = 10.1;
console.log(typeof n001, n001);
    /*******************************
숫자형 확인
********************************/
var number1 = 100; //숫자형
var number2 = Number('100'); //숫자형
//Number -> 인수값에 들어간 문자형을 숫자형로 변환해준다.

console.log(typeof number1, number1, ' number1 ');
console.log(typeof number2, number2, ' number2 ');
![](https://media.vlpt.us/images/h220101/post/30211ee1-383e-432c-b610-b4e8176fa31b/image.png)

    📌 ろんりブール


    var識別子(変数名)=falseのtrue;
    var b001 = true;
console.log(typeof b001, b001);
      var str0001 = '100'; //문자형
	 var n0001 = Number(str0001); //숫자형으로 변환 
	 console.log(n0001,str0001);
	 
	 var b0001 = '0';
	 var b0002 = 1;
	 var b0003 = 0;
	 var b0004 = '';
	 
	 //Boolean
	 //문자형에 값이 있으면 true
	 //숫자형에 0이 아니면 true 
	 console.log(Boolean(b0001), b0001); 
	 console.log(Boolean(b0002), b0002);
	 console.log(Boolean(b0003), b0003);
	 console.log(Boolean(b0004), b0004);
	 
	 if(""){ //확인하기 위한 조건문
		 console.log('값 있다.');
	 }else{
		 console.log('값 없다.');
	 }

    03:変数記号(命名規則)


    これは慣例に従って使用される変数マーキング法です.

    キャメル表記法


    一般変数名タグ、一般関数(メソッド)
    小文字で始まると、単語と単語を組み合わせたときの単語の頭文字だけが「大文字」と表記されます
    예) var userName;

    パスカルきごうほう


    クラス名、コンストラクション関数名
    最初の単語は大文字で始まり、残りは小文字で表し、単語と単語の組み合わせだけを組み合わせた単語の最初の文字は大文字で表します.
    -class UserInfo{}, function UserInfo(){}

    せんかいひょうしき


    単語と単語の間に「」を付けて単語を区別する
    예) var user_name;

    ハンガリー案


    前の語とデータ型を表す語と変数名を組み合わせて使用
    예) var setUserName;

    定数変数名表示


    Snakeシンボル+すべての文字列大文字
    JavaScriptのグローバル定数
    예) const USER_NUMBER = 10;

    使用した変数のタグ付け


    html要素のid属性値->キャラメル記号
    html要素のclass属性値->単語-単語
    単鎖表の創立と逆置コード、方法一
    MySQLデータベースへの接続エラー「Unable to find the requested.Net Framework Data Provider」