오늘의 강의 내용

* 변수와 데이터 타입 2편

• console.log(typeof 데이터) : 데이터가 어떠한 데이터 타입을 가지고 있는지 사용자에게 알려주는 키워드

• console.log(typeof null) : object 태생적인 버그, 수정이 불가능

• 모든 java script 데이터 타입은 매개변수에 다 넣을수있다.

함수 return의 특징
1)return을 사용해서 함수를 호줄하였을때, 다른변수에 전달

2)return을 사용해서 다른 값과 결합을 하여 새로운 결과를 만들어 낸다.

3)전달을 하여 재활용을 할수있다.

• 배열(array)
  

• 특정 데이터에 접근할수있다면, 특정데이터를 변경할수 있다.

배열 규칙
1) 배열을 만들때 배열안에 있는 데이터는 가능하다면 동일한 데이터타입으로 하는것이 좋다.

2) 가능하다면 배열안에 있는 데이터는 동일한 성격을 가지고있는것이 좋다. (예: 사과,배,멜론, 양배추?) 다른 성격의 데이터를 별도로 처리하는데 불필요한 리소스를 차지하게 된다

• 객체 (object)
  하나의 변수안에 여러가지를 넣을때 사용
  

• object 안에 특정value 불러오는법

console.log(student.name); 
console.log(student["name"]);
// 두가지 방법 다 필요

• 원시타입의 특징
  

원본 데이터를 수정한다고 해서 복사본인 str2값이 변하지는 않느다.
원본을 수정을 하든, 복사본을 수정을 하든 서로의 데이터에는 영향을 주지 않는다.
원본과 복사본 개념이 들어가있는 데이터타입

• 참조타입의 특징
  

obj1을 수정 하든 obj2를 수정하든 서로의 데이터값은 같다.즉 서로의 데이터에 영향을 준다.
데이터값의 주소를 공유한다는 개념

서로 다른 파일을 연동 하여 사용하기

<!-- index.html언어 -->
<script src="js/main.js"></script>
<script src="js/custom.js"></script>

서로다른 파일에 변수가 있고, 함수를 선언한 경우 이후에 연동된 파일에서 이전에 작성된 변수명과 함수를 활용할수있다.

• 연동된 파일도 순차적으로 읽는다.
• 순서에 주의해야 한다. 먼저 존재 하는 파일을 연동!

<!-- main.js언어 -->
// null, undefined
// null : 변수 초기화로 명시적으로.... 빈 값을 변수 안에 할당한 상태
// var n = null;

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

// console.log(n);   //둘다 값이없는 상태
// console.log(u);


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


// console.log(typeof null);        //object 태생적인 버그, 수정이 불가능
// console.log(typeof undefined);   //undefined


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


// ! (부정)
// console.log(!true);     //false
// console.log(!false);    //true

// console.log(!null);   //true
// console.log(!!null);  //false 부정을 부정

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


// console.log(10 + null);  // 숫자를 만났을때 null ->0
// console.log(10 + undefined);   //Nan (not a number) 일종의 오류



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

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


/*
// 함수 선언
function sum() {
	// console.log("Hello");        
	console.log(10 + 10);
}

//함수 호출
sum();
sum();   
sum();   
sum();   
sum();   
sum();   
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("inkweon", "kim");
*/

/*
function area(width, height) {
	console.log(width);    //10
	console.log(height);   //undefined 누락된 매개변수

	// var result = width * height;
	// console.log(result);     //NaN 오류출력
}

area(10);
*/


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


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

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


// 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;         //넓이를 구하는공식
}

area(10, 20);   // 200가지고 있는 상태

var volume = area(10, 20) * 100;      //넓이를 구하는 공식에 높이값 100을 곱하여 부피를 구한것
console.log(volume);				  //즉 기존에 만들어놓은 넓이를 구하는 함수를 활용을 한것
*/


//배열 (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);
*/


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


// var num = [10, 20, 30, 3.14];

// var fruit = ["사과", "배", "바나나"];   //공통된 성격



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

console.log(score);
console.log(score[0]);     //10,20,30
console.log(score[1][2]);  //300
*/


// 객체 (object)
// 이름, 나이, 스킬, 성별
// key - value = property
/*
var student = {
	name: "inkweon",     //key - value
	age: 21,
	skills: ["자바스크립트", "HTML", "CSS"]
};

console.log(student);
console.log(student.name);     //변수명과 key
console.log(student["name"]);
console.log(student.skills[1]);     //HTML
console.log(student["skills"][1]);   


// 데이터 추가하기
student.age = 100;

console.log(student);


student.gender = "남자";

console.log(student);
*/


/*
var student = {
	name: "inkweon",     //key - value
	age: 21,
	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: "Inkweon"};
var obj2 = obj1;


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


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");      //document html영역에 영향을 미치는 객체
var btn = document.getElementById("btn");

// 함수명이 없는 함수 익명함수
// 콜백 함수 : 호출 기호 없이 특정 조건 하에 호출되는 함수
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.99999~ <1
// Math.random() * 6                 : 0 ~ 5.99999~
// Math.floor(Math.random() * 6)     : 0 ~ 5
// Math.floor(Math.random() * 6) + 1 : 1 ~ 6

// console.log(Math.random());          
// console.log(Math.random() * 6);          
// console.log(Math.floor(Math.random() * 6)); //내림처리          
// console.log(Math.floor(Math.random() * 100) + 1);



// 예약어 자바스크립트에서 사전에 정의해놓은 객체 이름들
// var, typeof, function, null ,undefined, false, true, console


// var var;        //에러뜸
// var function;   //두개이상의 명사조합으로 변수이름을 작성하면된다.


console.log("Main");

var mainVar = "Main Var";

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

<!-- style.css언어 -->
#color_bg {
	width: 500px;
	height: 500px;
	background: black;
}

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

	background: purple;
	color: #ffffff;

	font-size: 20px;
}

강의가 끝난후 소감

이번강의가 이전까지 강의중에서 손에 꼽을 정도로 복잡했던거 같다. 여러번 재반복 하여 들어야 이해가능한 부분도 많았다.

힘든점, 문제점

일단 어느정도 이해는 했으나 헷갈리는 부분들이 많아서
많은 연습이 필요할것 같았다.

개선방안

다시한번 자바스크립트 변수와데이터에 대하여 강의를 재청강 하여야 겠다.