200917_TIL

4550 단어 TILTIL

📚 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으로 변경하도록 한다.



오늘 공부하면서 느낀 점

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

좋은 웹페이지 즐겨찾기