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

HTML과 JS의 만남

script 태그

• HTML의 태그 중 script 태그 안에 Javascript 코드를 쓸 수 있다.
• HTML로 작성한 코드와 다른 점은, Javascript로 쓴 코드는 동적이라는 것이다.
• 웹페이지에 글씨를 출력할 땐 document.right();를 쓴다.
  
  

이벤트

: 웹브라우저 내에서 일어나는 사건

<input type="button" value="hi" onclick="alert('hi')">

• onclick의 속성값으로는 반드시 JS 코드가 와야 한다.
• onclick 속성의 속성값은 사용자가 클릭을 했을 때 JS의 문법에 따라 해석되어 웹브라우저에서 출력된다.

<input type="text" onchange="alert('changed')">

• 입력창에서 사용자가 키보드를 이용해 무언가 입력하여 내용이 바뀌는 사건이 일어났을 때
• 이외에도 다양한 이벤트들이 있다. ex) onkeydown, onmouseover 등
  
  

콘솔

• 웹 브라우저에서 오른쪽 클릭 > 검사 > Console
  (Elements에서 Esc를 누르면 Console 창을 함께 볼 수 있다.)
• 파일을 만들지 않고 코드를 웹페이지에서 즉석으로 실행할 수 있다.
• 콘솔에서 실행시키는 JS는 웹페이지를 대상으로 실행된다.

alert('Hello, World!'.length)

• 위 코드를 콘솔에 입력해 실행시키면 바로 경고창이 뜨고 문자열의 길이를 알려준다.
  
  

JS의 데이터 타입과 연산

• 데이터 타입: Boolean, Null, Undefined, Number, String, Symbol
• 연산자와 메소드
  • Number 타입 - 산술 연산자
  • String 타입
    • .length 연산자
    • str.toUpperCase(): 문자열의 모든 문자를 대문자로 변환
    • str.indexOf('hi'): 문자열 내에서 hi 문자열이 앞에서부터 몇 번째 문자인지 알려줌
    • .trim(): 공백을 없애줌
    • '1'+'1'을 하면 결과는 '11'이 됨
• 변수와 대입 연산자
  - var(variable)을 변수 이름 앞에 붙여주면 좋음! ex.var x=1
  - 대입 연산자 =
  
  

웹브라우저 제어

document.querySelector("body")
documnet.querySelector("body").style.backgroundColor = 'black';

<input type="button" value="night" onclick=
  "documnet.querySelector('body').style.backgroundColor = 'black';">

• night 버튼을 클릭하면 body 태그를 선택하여 스타일 속성 중 backgroundColor을 black으로 변경하도록 한다.
  
  
  
  

오늘 공부하면서 느낀 점

• 평일에 시간 내서 공부하라면 할 수 있는 나 자신을 발견했다. 역시 사람은 하려고 하면 할 수 있구나...
• 과제도 강의도 밀리지 말자ㅠ 열심히 살아야지
• 오늘 강의를 약간 들었는데 자바스크립트는 뭔가 매우 새로운 느낌이라 신기하다. 앞으로도 재미있게 배울 수 있을 것 같다.