📚 edwith 부스트코스 : 자바스크립트의 시작

• HTML: 프로그래밍 언어가 아님
  HTML로 만든 웹페이지는 시간의 순서에 따라 실행되지 않고, 한 번 만들어지면 바뀌지 않기 때문
• Javascript: 프로그래밍 언어가 맞음
  사용자와 상호작용하고, 이를 위해서 시간에 따라 여러 기능이 실행되기 때문

조건문

: 프로그램에서 조건에 따라 다른 기능들이 다른 순서에 따라서 실행되도록 만들어주는 것

• if-else 문
  : if문의 괄호 안 불리언 데이터 타입이 true이면 if문의 중괄호 안의 코드가 실행되고, false이면 else문의 중괄호 안의 코드가 실행된다.

if(document.querySelector('#night_day').value === 'night') {
  document.querySelector('body').style.backgroundColor = 'black';
  document.querySelector('body').style.color = 'white';
  document.querySelector('#night_day').value = 'day';
}
else {
  document.querySelector('body').style.backgroundColor = 'white';
  document.querySelector('body').style.color = 'black';
  document.querySelector('#night_day').value = 'night';
}

비교 연산자

• 동등 비교 연산자 ===: 이항 연산자로 좌우가 같으면 True, 다르면 False
• 비교 연산자 <,>: 이항 연산자로 좌우의 값을 비교하여 식이 옳으면 True, 옳지 않으면 False
  • HTML에서는 태그를 나타낼 때 쓰이는 기호이므로 꺽쇠 기호 대신 <와 &rt;를 쓴다.

리팩토링 (중복 제거)

: 비효율적인 코드를 효율적으로 만들어서 가독성을 높이고 유지보수가 쉽도록 만드는 것, 코드의 기능적인 측면에는 변화가 없어야 한다.

• this: 자기 자신을 가리키기 위한 키워드
• 같은 부분이 계속 코드에서 반복된다면, 그 부분을 새로운 변수로 선언하여 코드의 길이를 줄일 수 있다.

var target = document.querySelector('body');
if(this.value === 'night') {
  target.style.backgroundColor = 'black';
  target.style.color = 'white';
  this.value = 'day';
}
else {
  target.style.backgroundColor = 'white';
  target.style.color = 'black';
  this.value = 'night';
}

반복문과 배열

배열

• 대괄호를 이용해 선언하고 각 요소들을 반점(,)으로 구분한다.
• 아래 제시된 기능들 외에도 다른 기능들이 많으니 찾아보자.

var fruits = ["apple", "banana"];
document.write(fruits[0]); // 배열의 값에 접근
document.write(fruits.length); // 배열의 길이 출력, 이 경우에는 2
fruits.push("coconut"); // 배열의 맨 뒤에 값 추가
fruits.splice("잘라낼 시작 위치", "제거할 원소 개수(생략가능)", "치환할 내용(생략가능)");

반복문

• while 문
  : while문의 괄호 안이 true 값을 가지는 동안 중괄호 내의 코드가 반복적으로 실행됨, false인 경우 while문을 빠져나옴

var i = 0;
while (i < fruits.length) {
  document.write('<li>'+fruits[i]+'</li>');
  i = i + 1;
}

활용

querySelectorAll이 찾은 모든 a 태그를 배열 형태로 alist에 저장

var alist = document.querySelectorAll('a');

문서 안의 모든 a 태그의 색깔을 powderblue로 변경

var i = 0;
while (i < alist.length) {
  alist[i].style.color = 'powderblue';
  i = i + 1;
}

+) console.log();를 콘솔 창에서 쓰면 괄호 안이 가리키는 값이 콘솔 창에 출력된다.

오늘 공부하면서 느낀 점

• 자바스크립트 공부할 때 https://mylko72.gitbooks.io/javascript-cookbook/content/index.html 여기 참고해보는 것도 좋을 것 같다.
• 자바스크립트는 신기한 언어인 거 같다. 일단 C보다는 똑똑한 듯.
• 뭔가 많이 공부한 것도 아닌데 왜 힘이 빠지는 걸까..? 내일은 조금 더 힘을 내서 공부해 봐야겠다...
• 내일은 자바스크립트의 시작 강의 끝내고 웹 프로그래밍 들어가야지!