08.30~09.01 자바스크립트 생활코딩
임시저장을 하고 껐다가 제목을 안써서 저장이 안되고 날라갔다..ㅎ ㅏ..
다음부턴 제목을 뭐라도 써놓기로 다짐한다..
6강부터..
6강 데이터타입
Mozilla에서 자바스크립트 데이터 타입은
Boolean, Null, Undefined, Number, String, Syntax 6가지로 정의하고 있다.
여기선 문자열과 숫자부터 배운다.
1+1 = 2, "1"+"1"="11"
전자는 데이터 타입이 숫자이므로 1+1 = 2가 되고
후자는 데이터 타입이 문자열이므로 "1"+"1"="11"이 된다.
7강 변수와 대입 연산자
x = 1; x = 2; 와 같이 x의 값은 변할 수 있는 값으로 변수.
1 = 2; 는 당연히 성립이 안된다. 1과 2와 같은 수는 항상 같은 값을 가지는 상수이기 때문에!
= 의 의미는 '오른쪽 항의 값을 왼쪽의 변수에 대입한다'로 이해한다. 이를 대입 연산자 라고 한다.
9~12강 CSS기초와 선택자
원래 CSS를 사용하기 위해서 <style></style> 태그 사이에 값을 넣어줬는데 이는 자바스크립트에서도 가능하다.
document.querySelector(' ').style.backgroundColor = 'black'
이는 ' '가 속해있는 태그의 배경색을 검정색으로 설정하는 코드이다.
여기서 ' ' 사이에 class나 id, 또는 태그의 값이 들어올 수 있는데
class는 그룹핑, id는 한 가지 대상을 식별한다는 것
class는 반, id는 학번으로 생각하면 쉽겠다.
class는 한 문서에 여러번 사용이 가능하지만 id는 한 번만 써야한다.
class=hoon 은 '.hoon'
id=hoon 은 '#hoon'
만약 div와 같은 태그를 꾸미고 싶다면 'div'를 그대로 써준다.
13강 프로그래밍
프로그래밍은 순서를 만드는 일이며
조건, 시간의 순서에 따라서 여러 기능을 수행한다.
14강 조건문에 들어가기에 앞서
toggle ; 토글
토글이란 하나의 설정 값으로부터 다른 값으로 전환하는 것이다. 토글이라는 용어는 오직 두 가지 상태밖에는 없는 상황에서, 스위치를 한번 누르면 한 값이 되고, 다시 한번 누르면 다른 값으로 변하는 것을 의미한다.
토글 스위치는 두 가지 상태만을 가지고 있는 스위치이다. 예를 들어, 한번 누르면 불이 들어오고 한번 누르면 불이 나가는 스위치가 토글 스위치이다. 컴퓨터 키보드에서, Caps Lock 키도 일종의 토글 스위치인데, 왜냐하면 그 스위치를 누르는 것은 현재의 설정 값이 무엇이냐에 따라 두 가지 의미로 동작할 수 있기 때문이다. 만약 Caps Lock이 이미 설정된 상태라면, 그 키를 눌렀을 때 Caps Lock이 해제된다. 그러나, 반대로 Caps Lock이 해제된 상태에서 그 키를 눌렀다면, Caps Lock이 설정된다.
토글 스위치는 소프트웨어에도 존재하는데, 예를 들어 대화상자 내에 있는 체크박스도 일종의 토글 스위치라고 할 수 있다.
하나의 버튼 두 개의 기능!
15강 비교 연산자와 불리언(Boolean)
비교 연산자는 === 를 사용한다
a===b a와b의 값이 같다면 true를, 다르다면 false를 반환한다.
불리언(Boolean)은 true와 false를 묶어 말하는 데이터 타입이다.
16강 조건문
if문의 괄호()에는 true나 false값이 오게 되어있는데
if(조건){ 반환할 값 }
else { 반환할 값} 으로 사용한다.
조건의 값이 true일 경우 if { }의 값이 반환되고 false일 경우 else { }의 값이 반환된다.
17강 조건문의 활용
<input id='hoon' type="button" value="day">에서 value의 값을 추출하는 코드는
document.querySelector('#hoon').value가 된다. 이를 콘솔에 찍어보면 day 가 반환된다.
<input id='hoon' type="button" value="day" onclick=" if (document.querySelector('#hoon').value === 'day') { document.querySelector('body').style.backgroundColor = 'black' document.querySelector('#hoon').value = 'day22' } else { document.querySelector('body').style.backgroundColor = 'white' document.querySelector('#hoon').value = 'day' } ">
이를 하나씩 뜯어보면 'hoon'이라는 고유값을 가진 'day'라고 써있는 버튼을 클릭했을 때
만약 value의 값이 'day'라면 body태그의 배경색을 검정색으로 바꾼 뒤 value의 값을 'day22'로 바꿔주고
만약 value의 값이 'day'가 아니라면 body태그의 배경색을 하얀색으로 바꾼 뒤 value의 값을 'day'라고 바꾼다.
라는 내용의 코드이다.
18강 리팩토링
코딩을 하고나면 코드가 비효율적인 면들이 생기기 마련인데 동작하는 것은 놔두면서 코드를 효율적으로 만들어 코드의 가독성을 높이고 유지보수를 하기 편리하게 만들어 코드를 개선하는 작업을 리팩토링 이라고 한다.
위의 코드를 리팩토링을 한다면
document.querySelector('#hoon')는 결국 자신을 가리키고 있기 때문에 this로 바꿔주고,
this로 바꾸면서 id 값이 불필요하므로 id=hoon도 삭제.
중복되는 코드도 제거하기 위해 변수로 바꿔준다.
let target = document.querySelector('body')
let targetId = document.querySelector('#hoon')
<input id='hoon' type="button" value="day" onclick=" let target = document.querySelector('body'); let targetId = document.querySelector('#hoon'); if (targetId.value === 'day') { target.style.backgroundColor = 'black' targetId.value = 'day22' } else { target.style.backgroundColor = 'white' targetId.value = 'day' } ">
위 작업을 거치고나면 이런 코드가 되겠다.
21강 반복문(Loop)
순서대로 실행되는 프로그램 실행 순서의 흐름을 제어하는 제어문이라고 할 수 있다.
while()의 ()안에는 조건문처럼 true나 false 값이 온다.
반복문은 언제 종료 될 것인지 지정하는 것이 필요하다.
변수 let i = 0; 을 사용, ()안에는 종료 시점을 적는다.
<script> document.write('<li>1</li>'); let i = 0; while(i < 4){ document.write('<li>2</li>'); document.write('<li>3</li>'); i = i + 1; } document.write('<li>4</li>'); document.write('<li>5</li>'); </script>
i는 0일 때, 4보다 작으므로 2,3이 출력되고
0에 1을 더해준다. 또 다시 처음으로 돌아와서
i가 1일 때, 4보다 작으므로 2,3이 출력되고
1에 1을 더해준다. 또 다시 처음으로 돌아와서
.
.
.
i가 4일 때, 4와 같으므로 (i < 4)의 값은 false가 되고 반복문이 종료되고 4,5가 출력된다.
22강 배열과 반복문
배열은 컴퓨터에서는 0부터 수를 센다.
string.length의 .length는 string 배열의 개수를 반환한다.
배열의 값이 let man = ['hoon', 'kook', 'hyuk'] 이라고 했을 때,
여기서 배열의 개수를 나타내는 .length를 사용하면 man.length; 의 값은 데이터가 3개이기 때문에 3이 출력된다.
그리고,
man[0] = hoon
man[1] = kook
man[2] = hyuk
이렇게 출력이 된다.
[]안의 값보다 .length의 값이 1이 높다는 것을 볼 수 있다.
따라서 while()의 ()안에는 이렇게 입력하여 반복문을 종료시킬 수 있다.
while( i < man.length)
배열에 데이터가 추가되더라도 ()안의 값을 따로 수정해줄 필요가 없어 효율적인 코드가 된다.
23강 배열과 반복문의 활용
document.querySelector('')는 해당되는 태그 중 하나만 가져오는 특성을 가지고 있다.
24~25강 함수
function hoon() {
document.write('123')
ducument.write('456')
}이라는 함수를 만들었을 때
다른 것 필요없이 hoon()을 써주면 이 함수가 실행된다.
항상 onclick이라든지 어떤 문구가 따라와야 하는 줄 알고있었는데 아니었다.
26강 함수:매개변수와 인자
함수는 입력과 출력으로 이루어져 있는데 입력에 해당되는 것이 매개변수(parameter) 인자(argument), 출력은 return
함수에 어떤 입력값을 주면 그 입력값에 따라 다른 값을 출력하게 하기
function sum(left, right) {
document.write(left+right+'<br>');
}
sum(2,3);
sum(55,100);
sum(2, 3)의 2와 3은 인자(argument)라고 부른다.
2와 3을 받아 함수 안으로 매개해주는 변수들을(여기선 left, right) 매개변수라고 부른다.
변수명은 임의로 설정해도 된다.
27강 함수:리턴(return)
위에 있는 코드만 사용하면 화면 더한 값만 띄워주고 끝난다.
하지만 return을 사용하면? 함수를 통해 얻은 값을 다양한 곳에서 사용이 가능하게 된다.
리턴이 있는 경우
function sum2(left, right){
return left+right;
}
document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>');
3rem 크기의 5가 출력된다.리턴이 없는 경우
function sum2(left, right){
document.write(left+right);
}
document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>');
합해진 값 5만 출력되고 undefiend가 출력된다29강~30강 객체 쓰기와 읽기
배열은 순서대로 저장된다.
객체는 순서없이 저장할 수 있다. 꺼내 써야하기 때문에 이름을 지어주고 보관해야한다.
쉽게 생각해서 이름있는 정리정돈 상자라고 생각.
배열은 대괄호[]를 사용하고, 객체는 중괄호 {}를 사용한다.
//coworkers라는 객체에 hoon이라는 정보를 programmer라는 딱지를 붙여 저장한 것
let coworkers = {
"programmer":"hoon, hyuk",
"designer":"leezche"
};
//정보를 꺼내올 때는 객체.딱지
document.write("programmer : "+coworkers.programmer+"<br>");
//정보를 추가할 때는 객체.딱지 = 정보
coworkers.friend = "kook";
document.write("친구 : "+coworkers.friend+"<br>");
//다른 방법으로 추가 객체["딱지"] = 정보
coworkers["add friend"] = "junho"
document.write("추가 : "+coworkers["add friend"]); 31강 객체와 반복문
//coworkers라는 객체에 있는 딱지들(key값)을 가져오는 반복문
//즉 key라고 하는 것은 원하는 정보에 들어가기 위한 열쇠! 배열에서는 인덱스라는 표현을 쓴다.
for (let key in coworkers) {
document.write(key+'<br>');
}
//그렇다면 여기서 정보를 불러오려면? 딱지는 key로 가져왔으니 위의 객체["딱지"]의 []안에 key를 넣는다.
for (let key in coworkers) {
document.write(key+' : '+coworkers[key]+'<br>');
}32강 객체프로퍼티와 메소드
객체에 소속된 변수의 값으로 함수를 지정할 수 있고 그렇게 되면 객체에 소속된 함수를 만들 수 있다. 이 소속된 함수는 '메소드' 라고 부른다.
<script>
//showAll이라는 메소드를 추가하고 싶을 땐?
coworkers.showAll = function() {
for(let key in coworkers) {
document.write(key+ ' : '+coworkers[key]+'<br>');
}
}
//showAll 이라고 하는 함수 안에서 이 함수가 소속된 객체를 가리키는 약속된 기호가 있는데 이게 바로 this
//따라서 let key in coworkers의 변수인 coworkers가 다른 변수명을 가져도 this를 사용하면 문제가 없다.
//위의 코드는
function showAll() 과 같다.
</script>35강 라이브러리와 프레임워크
라이브러리 : 내가 만들고있는 프로그램에 사용할 부품을 가져오는 느낌
프레임워크 : 내가 만들고자하는 것에 따라, 기획 의도에 따라 사용하는 느낌
검색하고 보면서 느낀건 라이브러리는 내가 가져와서 사용하는 느낌이고 프레임워크는 내가 들어가서 사용하는 느낌? 또 프레임워크가 더 큰 개념이기에
쉽게 말하면 프레임워크로 들어가서 작업을 하다가 라이브러리를 가져와서 사용하는(?) 그런 느낌으로 이해했다.
