자바스크립트(JavaScript) 기초 - JS 개념

< 자바스크립트(JavaScript) 기초 - JS 개념 >

1. JavaScript 동작의 기본 형태

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

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

<input type="text" onkeydown="alert('key down!')">

2. JavaScript 이벤트(event) : onclick, onchange, onkeydown, ...

3. JavaScript 기본 코드

alert('hi')

document.write('hello') (hello를 화면에 출력함)

document.write(1+1); (1+1의 결과값을 화면에 표시함)

string.length (문자열의 글자수를 알려줌)

string.toUpperCase() (문자열을 대문자로 변경)

string.indexOf('w') (문자열에서 w가 위치하는 index 번호를 알려줌)

string.indexOf('world') (문자열에서 world 가 시작되는 index 번호를 알려줌)

string.trim() (문자열을 공백이 제거된 문자열로 바꿔줌)

4. 변수사용시 앞에 var을 붙이자(없어도 작동은 함) : var name = '~~~'

(var == variable(변수))

5. 버튼 클릭시 배경색, 글자색 변경하는 JS code

  <input type="button" value="night" onclick="

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

    document.querySelector('body').style.color = 'white';

  ">

  <input type="button" value="day" onclick="

    document.querySelector('body').style.backgroundColor = 'white';

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

  ">

 - querySelector('css 선택자') (tag, .~~, #~~ 등)

 - getElementById('id_value')

6. JS의 주석 : // (대부분의 에디터에서 블록잡고 control + / 하면 주석 처리됨)