🎊학습한 내용

JavaScript

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


// null이 object로 나오는 이유 태생적인 버그
console.log(typeof null);
console.log(typeof undefined);


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


// 참조타입
// 함수 (function)
// 함수 선언
function sum() {
	console.log(10 + 10);
}

// 함수 호출
sum();



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

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

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


// 누락된 매개변수는 undefined 
// 매개변수 안에는 모든 데이터 타입이 가능



// return
function sum(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);



// 배열 (Array)
var fruit = ["바나나", "사과", "멜론"];
// 인덱스 (index)
console.log(fruit[0]);
console.log(fruit[2]);

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


// 배열 주의점
// 가능한 동일한 데이터 타입
var num = [10, 20, 30, "Hello World"];
// 가능한 동일한 성격 데이터
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: "Bibi",
	age: 20,
	skills: ["자바스크립트", "HTML", "CSS"]
};

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

student.age = 100;
console.log(student);

student.gender = "남자";
console.log(student);



var student = {
	// 메서드 ( 객체 안쪽에 만들어진 함수 )
	sum: function (num1, num2) {
		return num1 + num2
	}
};

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



// 원시 타입과 참조 타입 차이점
// 원시 타입
// 원본 데이터를 수정 해도 복사본에는 영향을 주지 않는다.
// 참조 타입
// 수정시 양쪽 모두 영향


// 예약어
// var, typeof, function, null, undefined, false, true, console
// 변수 이름으로예약어 사용하면 안됨, 두개 이상의 명사 조합으로 작성




// 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('click', function() {

	// 0 ~ 4
	var random = Math.floor(Math.random() * 5);

	// JavaScript는 카멜케이스
	bg.style.backgroundColor = colors[random];
})

클릭버튼 누르면 color-bg 의 배경색 바꾸기

이하 내용은 github 업로드

☔학습한 내용 중 어려웠던 점

❌

🎁해결방법

❌

🎉학습소감

JavaScript는 이전보다는 어려운 부분이 많아서 더욱 열심히 해야겠다. 기본 강의 외에도 여러 자료를 찾아가면서 어떤 식으로 코드가 작성되고 실행되는지 이해해야 할 것 같다.🐴