script - 1

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

JavaScript


基本概念


Webサイトのキー機能とアニメーション効果を実現


以前はjavascriptはWebサイト領域のみで使用されていましたが、現在は複数の場所で使用可能になりました


1.混合応用


Java、kotlinを使用せず、javascriptだけでアプリケーションを同時に作成できます.

2.サーバー開発作業


JavaScript言語に基づくnode.jsはサーバ開発をサポートする

3.モノのインターネット


IOTの作成にも使用可能

Javascriptのプロパティ


人間になじみのある言葉


入門段階で素早く習得できる言語
high level language=人間に馴染みのある言葉
low level language=コンピュータが理解しやすい言語

Javascriptは3つの側面に分けて学習します


1.Javascriptコア


Javascript構文の特徴を学ぶ分野

2.クライアントJavascript


ブラウザ制御時に使用するJavaScript
たとえば、Googleで検索->現在のマウスの位置やブラウザウィンドウのサイズを取得したり、Javascriptを使用してhtml、cssにアクセスして変更などの操作に使用する領域を検索したりします.

3.サーバー側Javascript


node.jsの分野
サーバ開発に興味がある点

1、2回練習するだけでJavaScriptが使えます


Javascript言語を適用する2つの方法


1.htmlドキュメントでscriptタグを使用してJavascriptコードを使用する


ここでコンソールlogは、カッコ内の情報をconsoleタブに出力するコマンドです.
<body>
	<script>
   		console.log("hello"); 
    	</script>
</body>

2.scriptの使い方


script src=JavaScriptファイルパス
<script src="js/main.js"></script>

Javascriptコードもhtml,cssと同様に上から順に実行する.


連動注意点


スクリプトにJavascriptコードを入力した場合、scriptにバインドされます。


二者択一でXを混用する

<script src="js/main.js">
	console.log("aaa")
</script>

複数jsファイル


cssのように複数のファイルを作成できます

<script src="js/main.js"></script>
<script src="js/custom.js"></script>

2つの異なるファイルをつなぎ合わせる場合も、上から順にコードを読み出します

//main.js

console.log("Main");
//custom.js

console.log("custom");

main.jsで作成したカスタム。jsで使用可能


順序に注意して、常識的には先に存在するべきですが、後で使用することができます.
以前に作成した変数名と関数は、後で関連するファイルで使用できます.既存のファイルをバインドしてから、書き込むファイルをバインドする必要があります.
//main.js

var mainVar = "Main Var";

function mainFunc() {
	console.log("Main Func");
}
//custom.js

console.log(mainVar);

mainFunc();

Javascriptコア


Javascript 2種類のコメント方式


1.cssと同じ（完全コメント）

/*
console.log("comment");
console.log("aaa");
*/

使用2.//(単行コメント)

//console.log("comment");

特に、アノテーション全体ではアノテーション全体を使用できませんが、アノテーション全体では1行のアノテーションしか使用できません。

/*
//console.log("comment");
console.log("aaa");
*/

JavaScript変数


変数。


データを格納するスペースと考えられる(データを配置可能)



引越しの時、荷物を引越し箱に入れなければなりません。


漫画の本箱には漫画のデータが必要です。


ボックス自体が「変数」である場合は、漫画本ボックスの具体的な名称を「変数名」に指定します。



var


変数の作成(ボックス)


シャーシ内のデータX
var comic;

データの挿入


連環フレームにワンピースデータを割り当てた状態
comic = "원피스";

データ検証

console.log(comic);

varキーを使用して変数を作成するステータス=変数を宣言


変数にデータを割り当てる状態=変数の初期化


変数の作成(変数の宣言)とデータの読み込み(変数の初期化)

var apple = "사과";

console.log(apple);

複数の変数を作成する場合、varを繰り返し使用するよりも、変数を組み合わせて宣言できます。

var a;
var b;
var c;

var a, b, c;

同時に初期化することもできます


2つに分ける基準は配向の違いです

var d = 10,e = 20, f = 30

var d = 10, 
	e = 20, 
	f = 30

undefined


変数のみを宣言する場合、どの値が含まれますか?undefined


JavaScriptには、アルファベット、数値、配列、関数、オブジェクト、null、undefinedの複数のデータ型があります。


undefinedは複数のデータ型の1つです


すべての変数は宣言と同時にundefinedを自動的に割り当てます(重要)

var computer;

console.log(computer)

その他の内容


変数に作成されたデータは、いつでも変更できます。


家をマンションに変更しようとしたとき

var house;
house = "집";

console.log(house)
house = "아파트";

console.log(house)

初期変数を宣言して初期初期化する場合、undefined、undefinedを無条件に等号で割り当てられたデータに置き換える。


見えない領域なので重要な概念をしっかり覚えておきましょう!

var house;
console.log(house)

//undefined -> 집
house = "집"
console.log(house)

変数名を作成するテクニック


二つの名詞を連写する。


スコアはサッカースコア、バスケットボールスコア、履歴スコアです。他の開発者がコードを表示するときに理解しやすいように具体的に説明する必要があります(少なくとも2つの単語で変数を作成します)。

// 캐멀케이스(낙타등에 혹처럼 오르락 내리락)
var mathScoreStudent = 10;


//스네이크 케이스(뱀처럼 길게 늘린다라고해서)
var math_score_student = 10;

// 주의점
//케밥 케이스(사용불가)
var math-score-student = 100;

変数名の注意点


1.中間の高得点(-)は使用できません

//케밥 케이스(사용불가)
var math-score-student = 100;

2.変数の命名には特殊文字(変数の頭文字)を使用できますが、他の特殊文字を頭文字として使用することはできません。

var _math;
var $math;

3.変数は数値で組み合わせることができますが、数値を先に表示することはできません。

var apple10;

var 10apple; (사용불가)

[原句]なるべく詳しく書くことが大切です。

var w; (잘못된 예)

5.略語は使用不可


var, typeof, function, null, undefiend, false, console.. など、javascriptでは、予め定義されたキーワードを予約語と呼ぶ.
予約語は1つの単語で構成されているため、予約語エラーを回避するために2つ以上の名詞の組み合わせを使用して変数名を作成すると、エラーは発生しません.

データ型


JAvascriptには複数の等号のデータがあり、データのタイプをデータタイプと呼ぶ。



各データ型には固有のスキルがあります。


両陣営を分けて、それぞれの特徴を知る必要がある。


文字列(String)


文字列を作成する2つの方法(「」、「」)


注意事項を混用しない

var msg1 = "Hello World"
var msg2 = 'Welcome'

console.log(msg1);
console.log(msg2);

var msg3 = "Nice to meet you'; (잘못된 예)

略語タグの2つの方法


「」(二重引用符)で「」(一重引用符)を使用する
「」(一重引用符)で特殊文字(反スラッシュ:)を使用し、「(一重引用符)を使用します.
var msg4 = "She's girl";
var msg5 = 'She\'s girl';

console.log(msg4);
console.log(msg5);

コードが画面に出力され、黒で出力されると文字列(暗いモード-白)


数値(Number)


数値の場合、出力は青(暗いモード-紫)

var num1 = 10;
var num2 = -10;
var num3 = 3.14;
var num4 = -3.14;

console.log(num1);
console.log(num2);
console.log(num3);
console.log(num4);

演算子


加算、減算、乗算、除算、残高


文字列演算子


文字列「」は、「」にあるため


文字列の数値は、いくつかの4つの演算(加算を除く)に使用できます。


文字列で加算ハイフネーション

//숫자 사칙연산

var a = 20;
var b = 10;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);

//문자열 사칙연산

var str1 = "20";
var str2 = "10";

console.log(str1 + str2);
console.log(str1 - str2);
console.log(str1 * str2);
console.log(str1 / str2);
console.log(str1 % str2);

スペース文字を大きなスペースとして認識


htmlと違います。スペースは1つしか認識されていませんが、Javaでは、スペースはすべて文字として認識されます


文字列と数値を追加すると、最終結果値は文字列(黒)データ型(暗いモード-白い)として出力されます。

var firstName = "Woosung"
var lastName = "Kim"

console.log(firstName + lastName);
console.log(firstName + "       " +lastName);

var str11 = "현재 시간은 ";
var time = 10;
var str12 = "시 입니다.";

console.log(str11 + time + str12);

++, --


--変数の数値を一度に監視することを示します。


等号データを見るとき、重要なのは後から説明することです。


num 10に10のデータが含まれている場合、-1でnum 10(自己)に9を更新する


次のタスクを簡略化します。

var num10 = 10;

(num10 = num10 -1;) 같은의미

console.log(num10); //9
console.log(--num10); //8
console.log(--num10); //7

++も同じ

var num10 = 10;

console.log(++num10); //11
console.log(++num10); //12

注意点:++、--前に使用し、後に使用すると、結果が異なります。


console.logにnum 10の値を出力し、再び1を監視します。これは、しばらく休んだ後、値を-1に減算することを意味します。

var num10 = 10;

console.log(num10--); //변화없음
console.log(num10); //9

つまり、前に書いたのは差が1を減らして値consoleを更新することです。ログに印刷します


先差か後差か


++も同じ

var num10 = 10;

console.log(--num10);
console.log(num10);

ざんりゅうきごう


+=, -=, *=,/=, %=

概念自体は残りの記号でも同様に通用する。

var num20 = 20;

num20 += 10;    [num20 = num20 + 10; (같은의미)]

console.log(num20);

比較演算子


>, <, ==, ===, <=, >=


true、falseが結果を表すデータ型をbooleanと呼び、比較演算子を使用すると結果値は常にbooleanとなります。

var a = 10;
var b = 20;
var c = 30;

console.log(a > b);
console.log(a < b);
console.log(a >= b);
console.log(a <= b);

===、==両者は同じ意味を持つ!=、!=聖書には異なる意味がある。

var a = 10;
var b = 20;
var c = 30;

console.log(a == b);
console.log(a === b);

console.log(a != b);
console.log(a !== b);

等号数の差異


3つの等号を使用する場合、値を比較する場合はさらに厳しくなります.
厳密には、比較対象のデータ型が同じかどうかを示します.
データ型が異なるため、3つの等号出力はfalse
安全に符号化したい場合は===ではなく==を使用してください(==あまり使いにくいと思います)
var num10 = 10;
var num20 = 20;
var str10 = "10";
var str20 = "20";

console.log(num10 == str10);
console.log(num10 === str10);

console.log(num20 != str20);
console.log(num20 !== str20);

論理演算子


AND(&&), OR(||)


ANDどちらもtrueの場合true，ORの場合true

var num30 = 30;
var num40 = 40;
var num50 = 30;

console.log(num30 === num40 && num30 === num50);
console.log(num30 === num40 || num30 === num50);

boolean


trueとfalseの値のみ


変数に直接作成できます


booleanは、特定のサイトにログインしたときにアイデンティティとパスワードが正しいことを確認するために、論理演算子と組み合わせて使用できます。

var bool = true;
bool = false;
console.log(true);
console.log(false);
console.log(1 === 2);
console.log(10 < 20);

console.log(10 === 10 || 20 === 30);
中国語の文字化けし問題のまとめ
次のjQueryをVanilla JSで置き換える