자바스크립트 3일차

---

시작하기 전에

강사님의 자바스크립트 2/2 의 58분 ~ 끝까지 공부한 내용이다.

---

유념할 코드와 속성들

• 객체(object)

객체는 파이썬의 class와 비슷한 듯 하다. 배열과 비슷한 듯 하면서도 모든 양식의 요소(property)를 가질 수 있으며, 대신 요소를 선언 할 때 (key: value)의 형식으로 선언해야 하며, 요소만 호출할 땐 object.key, object['key']와 같이 호출할 수 있다.

var student ={
	name: "Taehun",
	age: 33,
	skills: ["자바스크립트", "HTML", "CSS"]
};
// 작성 순서가 아닌 key의 알파벳 순서대로 표시된다. age - name - skills 순.
console.log(student);
console.log(student.name);
console.log(student['name']);
console.log(student.skills[1]);
student.age = 100;
console.log(student.age);
student.gender = "남자";
console.log(student);

• 원시 타입과 참조 타입

변수를 선언할 때, 숫자, 불린, null, undefined, 문자열의 형태는 원시 타입이라 하며, 객체, 배열, 함수는 참조 타입이라 한다.
원시 타입을 각 변수에 복사할 때는 데이터 값 째로 복사되어 독립된 값으로 저장된다.
반면, 참조 타입을 복사할 때는 참조만 복사 되기 때문에 참조 타입의 요소 데이터를 바꿀 경우 참조 타입의 데이터 자체가 바뀌게 된다.

(원시 타입)
var str1 = "Hello World";
var str2 = str1;
str2 = "Nice";
console.log(str1);
console.log(str2);
(참조 타입)
var obj1 = {name: "Inkweon"};
var obj2 = obj1;
obj2.name = "Park";
console.log(obj1);
console.log(obj2);

• 랜덤 숫자 코드 + css 코드 제어

숫자를 랜덤으로 출력하는 코드는 다음과 같다.

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

Math.random() 으로 0보다 크거나 같고 1보다 작은 수가 랜덤으로 생성된다. Math.floor() 로 소수점을 버릴 수 있으며, 이 두가지를 이용해 0~5의 숫자를 랜덤으로 출력할 수 있다.

이 랜덤 코드와 css 코드 제어를 이용해(사실 아직 잘 이해가 안간다. 좀 더 조사가 필요한 부분) html 본문 배경색을 간단하게 바꿔볼 수 있다.

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];
})

• 다른 자바스크립트에서 호출

다른 자바스크립트 파일에서 생성된 요소 또한 호출/변형이 가능하다.

(main.js)
console.log("Main");
var mainVar = "Main Var";
function mainFunc(){
	console.log("Main Func");
}
(custom.js)
console.log("custom");
console.log(mainVar);
mainFunc();
(index.html)
	<script src="js/main.js"></script>
	<script src="js/custom.js"></script>

물론 html, css는 캐스캐이딩, 즉 위의 코드부터 아래로 순서대로 적용되므로 자바스크립트 참조 순서를 바꾸면 에러가 발생한다.

(index.html)
	<script src="js/custom.js"></script>
	<script src="js/main.js"></script>

---

참고할 링크

그림으로 배우는 자바스크립트

---

학습 소감

자바 스크립트를 배우니 생소하고 이해가 되지 않는 코드가 나오기 시작한다. 복습이 많이 필요할 것 같다.

진행한 코드 링크

오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.