[JS] 1. 웹과 자바스크립트

참고 자료

boostcourse 생활코딩: 자바스크립트의 시작

JavaScript

• 웹 브라우저 상에서 동작하는 언어로, 정적인 HTML을 유저가 조작하는 이벤트대로 바꿔 상호작용하게 한다.

• 파이썬과 같은 동적 언어이다. 변수에 숫자가 들어가면 숫자형이 되고, 문자가 들어가면 문자열이 된다.

• Code Editor 없이 브라우저의 console에서 코드를 칠 수 있다.

메서드와 함수

alert()

알람이라는 의미이다. alert() 괄호 내부의 값을 브라우저에서 알림창에 넣어 띄워준다.

alert("안녕하세요");

위와 같이 파이썬의 print() 함수처럼 사용한다.

.length

문자열 뒤에 .length를 붙이면 문자열의 개수를 세어준다. python의 count()와 같다.

console.log("안녕하세요".length);

// [결과] 5

.trim()

문자열 뒤에 .trim()을 붙이면 문자열 양 옆의 공백을 제거해준다. python의 strip()와 같다. 다만 strip()과 달리 괄호 내부에 제거하고자 하는 구체적인 텍스트를 넣어 제거하는 것은 안 되고 공백만 제거한다. 모든 공백문자(space, tab) 등이 제거된다.

console.log("      안녕하세요       ".trim());

// [결과] 안녕하세요

이벤트

브라우저 상에서 일어나는 여러 사건들을 말한다. 보통은 유저가 HTML 파일 또는 사이트에 어떠한 동작을 하였을 때이고, 이 중 유의미한 동작, 예를 들면 마우스를 올리는(onmouseover) 동작이나, 클릭(onclick)하는 경우이다.

HTML의 요소 스타일 변경하기

document.querySelector("body").style.color = "black";

‘문서(document)의 어떤 selector인지 물어봐서(querySelector(selector)) 스타일(style) 중에 글자색(color)를 검정색(black)으로 바꿔달라’는 내용이다. 실제 적용은 다음과 같이 한다.

<input
  type="button"
  value="day"
  onclick="
  document.querySelector('body').style.color = 'black';
  document.querySelector('body').style.backgroundColor = 'white';
"
/>

<!-- day 버튼을 누르면 body 태그의 글자색은 검정색, 배경색은 흰색이 되게 하라. -->

<input
  type="button"
  value="night"
  onclick="
    document.querySelector('body').style.color = 'white';
    document.querySelector('body').style.backgroundColor = 'black';
"
  onmouseover="
      document.querySelector('body').style.backgroundColor='gray';
"
  onmouseleave="
      document.querySelector('body').style.backgroundColor='white';
"
/>

<!-- night 버튼을 누르면 body 태그의 글자색은 흰색, 배경색은 검정색이 되게 하라. -->
<!-- 마우스를 올리면 배경색이 회색이 되고, 마우스를 떼면 하얀색이 되게 하라. -->

이렇게 브라우저 상에서 유저의 동작, 이벤트에 따라 HTML을 변화하게 하는 것이다.

느낀점

프론트엔드 개발자가 되겠다는 사람이 자바스크립트가 막막해서 내내 못하고 있었다는 사실이 참 불편했는데, 정말 기초적인 부분이었더라도 정식으로 공부를 하게 돼서 벅찬 기분이 든다. 아직 자바스크립트를 제대로 한다라고 말하려면 한참 남았지만, 파이썬에서 배웠던 프로그래밍 언어나 함수적인 부분이 있기 때문에 따라가기가 정말 수월하다고 느꼈다.

Quiz는 생각보다 난이도가 있어서 놀랐다. 다 맞았지만 CSS나 HTML의 문법적인 것들이 나와서 풀었던 것이지 JS만 쌩으로 이 난이도로 나오면 쉽지 않을 것 같다.

그래도 아직까지는 JS를 배우는 것으로 너무 즐겁고 기쁘다!