コース名称:大邱AI学校一般コース
講座:Webプログラミング金仁権43 JavaScript 1 210623(2/2)
件名:html/css/Java script

Java script

null, undefined

var n = null;
var u ;

null:変数初期化を使用してnull値を明示的に入力し、値がないことを示します.
未定義:変数のみ宣言

console.log(typeof u); // undefined
console.log(typeof n); // object

console.log(typeof null); // object
console.log(typeof undefined); // undefined

console.log(null == undefined); // true
console.log(null === undefined); // false

nullは、objectタイプの属性を有する.nullとundefinedの属性は同じであるが、データ型はundefinedとobjectであり、それらが異なるタイプであることがわかる.Null値の差異とデータ型の差異を示していますか.

否定文

console.log(!true); // false
console.log(!false); // true
-
console.log(!null); // true
console.log(!!null); // false
-
console.log(!undefined); //true
console.log(!!undefined); // flase
-
console.log(10 + null); // [null -> 0] 10
console.log(10 + undefined); // NaN (Not a Number)

Java scriptでは不定文の式は感嘆符(!)使用します.連続使用2再定義(?)ドアを作ることができます.nullおよびundefinedの演算では、nullを0の処理として演算することができ、undefinedの演算出力NaNの値、すなわち数字の値ではないので演算を行うことができない.

リファレンスデータ

関数(function)

Javaスクリプトでは使用/使用頻度が高く、重要な部分です.
関数宣言(ステップ)

function sum() {
	console.log("Hello")
	console.log(10 + 10)
}

関数の呼び出し(手順)

sum();

関数の構成は、宣言と呼び出しに分けられます.関数の名前と実行する機能を呼び出し、宣言を出力する関数を呼び出しと呼びます.

パラメータ/パラメータ

関数宣言パラメータ:num 1,num 2

function sum(num1, num2) {
	console.log(num1 + num2);
}

関数呼び出しArcgument:数値データ

sum(10, 20);
sum(100, 50)
}

結果

30
150

関数宣言フェーズで入力されたnum1およびnum2はパラメータParameterであり、関数呼び出しフェーズで入力された数値データはパラメータArgumentである.

function fullName(firstName, lastName) {
	console.log(firstName + " " + lastName)
}
fullName("Fidel","Castro")

関数のパラメータと引数は、複数の形式のデータを入力したり、宣言フェーズの引数の間にスペースなどを入力したりすることができます.

function area(width, height) {
	console.log(width);
	console.log(height);
	
	var result = width * height;
	console.log(result);
}
area(10, 20)

買収を受けて、演算することができます.

関数で使用可能なデータ型

function test(a) {
	console.log(a);
}

test(10);
test("Hello");
test(true);
test(null);

test(function a() {});
test([10, 20, 30]);
test({name: "Fidel"});

returnキーワード

return:関数と組み合わせて使用されるキーワード;関数が呼び出されたときに何らかの値を持つ状態
https://brunch.co.kr/@brunch92ny/9

function sum(num1, num2) {
	return num1 + num2;
}

var result = sum(10, 20); 
console.log(result);

function area (hor, ver) {
	return hor * ver;
}

var volume = area(10, 20) * 100;

console.log(volume);

アスペクト関数areaを用いて体積を表す変数volumeを生成する場合、returnキーワードがパラメータ値を受け入れて演算し、その値を関数値として送信する機能を実行することが理解される.個人的には、これは少し複雑な概念です.

アレイ(Arry)

var banana = "바나나";
var apple = "사과";
var melon = "멜론";

console.log(banana);
console.log(apple);
console.log(melon);


var fruit = ["바나나","사과","멜론"];
console.log(fruit);

大量データの集合

索引:データの座標値(位置値)

var fruit = ["바나나","사과","멜론"];
console.log(fruit);

console.log(fruit[0]);
console.log(fruit[2]);

配列を持つインデックスから特定のデータにアクセスできます.配列のインデックスは[0]から始まります.
「特定のデータにアクセスできます.」「特定のデータを修正(変更)できる」という意味です.かもしれません.

fruit[2] = "수박";
console.log(fruit);

3番目のデータは「メロン」から「スイカ」に変更されました.

var arr = [10, 
			 "Hello",
			 true, 
			 null, 
			 undefined, 
			 function a() {},
			 [10, 20, 30],
			 {name: "Hwang"}
];

console.log(arr);

アレイには、さまざまなタイプのデータも含まれます.
データ型ブレンド

var fruit = ["사과", "배", "바나나", "강철망치"];

ハイブリッドデータ特性

var fruit = ["사과", "배", "바나나", "강철망치"];

可能であれば、同じデータ型と同じ性質を維持することが望ましい.データ型の混合は後で使用するのが難しく,異なる性質のデータ配列では不要なリソースを用いてデータを整理する.

アレイ内のアレイへのアクセス方法

var score = [
	[10,20,30],
	[100,200,300]	
];

console.log(score);
console.log(score[1]);
console.log(score[1][2]);

配列内のデータにアクセスするときは、インデックスを使用するように、配列内のインデックス->配列データのインデックス順にアクセスできます.

オブジェクト

keyとvalueのデータが存在する空間を説明します.

var student = {
	name: "Fidel",
	age: 21,
	skills: ["혁명", "무장봉기", "저항"]
};

console.log(student);
console.log(student.name)
console.log(student["name"]) // 대괄호를 사용하여 키를 입력
console.log(student.skills[1]); // 객체안의 배열 데이터에 접근하는 방법

「age」、「name」、「skills」の値は、鍵およびそれに対応するデータがreturnであることを示す.

student.age = 100;

student.gender ="남자";

console.log(student)

配列と同様に、特定のデータにアクセスして変更したり、新しいデータを入力したりすることができます.

方法

メソッド:オブジェクトに作成された関数

var student = {
	name: "Fidel",
	age: 21,
	skills: ["혁명", "무장봉기", "저항"],

	test1: true,
	test2: null,
	test3: undefined,
	test4: {color:"blue"},

	// 메서드
	sum: function (num1, num2) {
		return num1 + num2;
	}
};

var result = student.sum(10,20);
console.log(student)
console.log(result)

studentオブジェクトに作成されるsum関数は、メソッドです.「result」変数では、10と20を引数として出力します.

元のタイプと参照タイプの違い

元のタイプ

var str1 = "Hello World";
var str2 = str1;

console.log(str1);
console.log(str2);

var str1 = "Hello World";
var str2 = str1;

str1 = "Nice"
// str2 = "Nice"

console.log(str1);
console.log(str2);

var str1 = "Hello World";
var str2 = str1;

// str1 = "Nice"
str2 = "Nice"

console.log(str1);
console.log(str2);

元のタイプのデータは変数でコピーできます.元のタイプのデータは、元のタイプとコピーの概念に分けられ、元のタイプの変更はコピーに影響しないか、コピーの変更は元のタイプに影響しません.

参照タイプ

var obj1 = {name: "Fidel"};
var obj2 = obj1;


console.log(obj1);
console.log(obj2);

var obj1 = {name: "Fidel"};
var obj2 = obj1;


obj1.name = "castro";
// obj2.name = "castro";


console.log(obj1);
console.log(obj2);

var obj1 = {name: "Fidel"};
var obj2 = obj1;


// obj1.name = "castro";
obj2.name = "che";


console.log(obj1);
console.log(obj2);

参照タイプのデータは、ソースとコピーが相互に影響します.
元のタイプのデータが元のデータをコピーする場合、ソースとコピーがそれぞれ独立したデータを持つセミネーミング参照タイプのデータのコピーは、値をコピーするのではなく、値を持つ固有の情報を共有する概念です.

JavaScriptの利用

いつでもどこでも色を変える機能を実現

<div id="color_bg">
		
		<button id="btn" type="button">클릭</button>

	</div>

#color_bg {
	width: 500px;
	height: 500px;
	background-color: black;
}


#btn {
	width: 100px;
	height: 50px;
	line-height: 50px;

	background: purple;
	color: #ffffff;

	font-size: 20px;
}

var colors = ['yellow',
		'green',
		'pink', 
		'#dc143c',
		'rgba(123, 123, 123, 0.5)'
];

var bg =  document.getElementById('color_bg');
var btn = document.getElementById('btn');

// 콜백 함수 : 호출 기호 없이 특정 조건 하에 호출되는 함수

btn.addEventListener('click', function() {
	var random = Math.floor(Math.random() * 5);
	console.log(colors[random]);
  
	bg.style.backgroundColor = colors[random]
});

ランダムに1～6個の数字を抽出するゲーム

Math.random() : 0 ~ 0.99999999...
Math.random() * 6 : 0 ~ 5.99999999...
Math.floor(Math.random() * 6) : 0 ~ 5
Math.floor(Math.random() * 6) + 1 : 0 ~ 6

console.log(Math.random());
console.log(Math.random() * 6);
console.log(Math.floor(Math.random() * 6));
console.log(Math.floor(Math.random() * 6) + 1);

1個未満の整数の関数(?)を生成します.方法(?)
Java Scriptには、使用頻度の高い機能を含む予約語があります.変数名を作成すると、予約語と同じ変数名でエラーが発生するため、予約語は変数名に使用できません.すべてのリザーブは1つの語であるため、変数名を使用する場合、2つ以上の語を組み合わせて使用すると、リザーブと重なるエラーを予防できます.
linkタグでcssファイルをhtmlファイルに関連付けるように、jsファイルはscriptタグでhtmlファイルに関連付けられます.複数のjsファイルをhtmlファイルに接続して使用するか、異なるファイルで作成した変数と関数を使用します.この場合、jsファイルに接続するスクリプトタグの順序に注意してください.使用するコードを含むファイルをスクリプトラベルにリンクし、適用するファイルを指定したスクリプトラベルに配置します.

Review

htmlとcssは、どちらも簡単ではありませんが、Java scriptも予想していました.多様な複雑な機能を実現する機能と考えられるため,適用方法から使用方法に至るまで,当初から多くの懸念があった.
変数や関数やメソッドなどのJava scriptは新しく学習された分野であるほか,構造やルールなども容易に身につけることができない.最初から難しかったし、負担もあったけど、興味のある分野があるかも.いつものように、今は理解しにくくても、もう少し外に出て整理する方法で解決できます.