50(변수와 데이터 타입 2편)

학습 내용

null, undefined
// null : 변수 초기화로 명시적으로.. 빈 값을 변수 안에 할당한 상태
var n = null;

// undefined 변수를 선언만 한 상태
var u;

console.log(n);
console.log(u);

// null과 undefined 차이점
// console.log(typeof 10);
// console.log(typeof "Hello World");

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

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

등호가 3개일 경우에는 데이터 타입이 다르기 때문에 false로 출력된다.

• !
  // console.log(!true);
  // console.log(!false);

! : 부정을 의미

// console.log(!null); // true
// console.log(!!null); // !true

한 번 부정을 한 것을 다시 부정하게 되는 경우

// console.log(!undefined);
// console.log(!!undefined);

// console.log(10 + null); // null -> 0
// console.log(10 + undefined); // NaN (Not a Number);

숫자와 null이 결합하면 null 값은 0이 되고
숫자와 undefined가 결합하면 숫자가 아닌 값이 된다.

참조타입
// 함수 (function)
console.log(10 + 10);
console.log(20 + 30);
console.log(5 + 10);

// 임의의 숫자 두 개를 전달받아서 덧셈을 하는 기능을 만들고 싶다.

// 함수 선언
function sum() {

console.log("Hello");
console.log(10 + 10);

}

-> 기능을 만듦

// 함수 호출
sum();

-> 기능을 실행
여러번 출력 가능

Parameter (매개변수), Argument (인수)
// 매개변수 : num1, num2
function sum(num1, num2) {

console.log(num1 + num2);

}

// 인수 : 호출 시 전달되는 값
sum(10, 20);
sum(100, 50);

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

fullName("Jeongmin", "Lee");

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

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

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

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

var result = sum(10, 20); // 함수 호출 = 30, result = 30
console.log(result);

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

var volume = area(10, 20) * 100; // 200
console.log(volume);

https://brunch.co.kr/@brunch92ny/9

// 배열 (Array)
// var banana = "바나나";
// var apple = "사과";
// var melon = "멜론";


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


// 인덱스 (index)
console.log(fruit[0]);
console.log(fruit[2]);

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

length는 배열 안에 들어가 있는 갯수

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

// var num = [10, 20, 30, 3.14];
// var fruit = ["사과", "배", "바나나", "양상추"];

배열 안의 데이터는 동일한 타입이어야 한다

// 배열 안에 있는 배열 데이터에 접근하는 방법
var score = [[10,20,30], [100, 200, 300]];

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

// 객체 (Object)
// 이름, 나이, 스킬, 성별
// key - value = property
var student = {
	name: "Jeongmin",

	age: 29,

	skills: ["자바스크립트", "HTML", "CSS"]
};

console.log(student);
console.log(student.name);
console.log(student['name']);
console.log(student.skills[1]);

알파벳 순서대로 항목이 나열됨

var student = {
	name: "Jeongmin",
	age: 29,
	skills: ["자바스크립트", "HTML", "CSS"],

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

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


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

student.sum(100, 200);
console.log("Hello World");

// 원시 타입과 참조 타입 차이점
// 원시 타입
var str1 = "Hello World";
var str2 = str1;

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

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

원시타입 : 서로의 데이터 타입에 영향을 주지 않는다

// 참조 타입
var obj1 = {name: "Jeongmin"};
var obj2 = obj1;

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

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

// yellow, green, pink #dc143c, rgba(123, 123, 123, 0.5);

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()

// 콜백 함수 : 호출 기호 없이 특정 조건 하에 호출되는 함수
btn.addEventListener('click', function() {
	console.log("Hello");
})

// yellow, green, pink #dc143c, rgba(123, 123, 123, 0.5);

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()

// 콜백 함수 : 호출 기호 없이 특정 조건 하에 호출되는 함수
btn.addEventListener('click', function() {

	// 0 ~ 4
	var random = Math.floor(Math.random() * 5)
	// console.log(random);
	// console.log(colors[random]);

	// background-color, border-radius, margin-top
	bg.style.backgroundColor = colors[random];
})



// 1 ~ 6 숫자를 랜덤하게 가져오는 게임
// Math.random() 	 			: 0 ~ < 0.9999~
// Math.random() * 6 			: 0 ~ 5.99999 ~
// Mathfloor(Math.random() * 6) : 0 ~ 5
// Math.floor(Math.random() * 6) + 1 : 1 ~ 6
console.log(Math.random());
console.log(Math.rancom() * 6);
console.log(Math.floor(Math.random() * 6));
console.log(Math.floor(Math.random() * 6) + 1);

클릭하면 배경색 변경

main.js

console.log("Main");

var mainVar = "Main Var";

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

custom.js

console.log("custom");

console.log(mainVar);

mainFunc();