생활코딩 WEB3 - javascript편(1/6)

> 웹이 동적으로 사용자와 상호작용 할 수 있게 하기 위해 js를 이용.

JavaScript는 '정보'라는 이미지를 움직이도록 하는 역할.

 

 

기능 추가

- 버튼을 통해 야간모드 / 주간모드 설정

 

웹 브라우저는 한번 출력이 되면 자기 자신을 바꿀 수 있는 능력이 없는데,

이를 가능하게 해주는 것이 바로 JavaScript 이다.

 

Elements = Tag (요소 = 태그)

 

 

___

 

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

 

style 속성의 값으로는 반드시 CSS가 오듯이,

onclick 속성의 값으로는 반드시 JavaScript가 와야 한다.

 

즉, 위 코드에서 onclick=" " 부분의 안에 존재하는 코드가 바로 JavaScript가 된다.

 

 

 

---

 

 

1. html 내 <script> 태그

<h1>Javascript</h1>
<script>
  document.write('hello world');
</script>

<h1>html</h1>
hello world

** 문서에 작성시 

document.write()

 

 

위와 같이 script 태그를 이용하여 자바스크립트로 hello world를 출력하는 것과,

html 문서에 그냥 hello world라고 출력하는 것에 있어 결과상의 차이는 없다.

 

 

이번엔, '1+1'이라는 값을 입력해보자.

 

자바스크립트는 동적이기때문에 1+1의 연산이 된 결과인 2가 출력되었고,

html은 정적이기 때문에 절대 스스로 계산을 할 수 없다. 즉, 문자 그대로가 출력된다.

 

 

---

 

2. 이벤트(Event)

 

자바스크립트가 사용자와 상호작용 하는데 핵심적인 역할을 함.

 

input type="button"으로 버튼을 만들고, 버튼을 누르면 경고창이 뜨도록. (자바스크립트 이용)

 

** input태그에서는 type, value(버튼 안에 써진 텍스트), name(서버로 전달되는이름)이라는 속성이 있다.

- type 속성값으로는 text, password, checkbox, file, image, submit, button, radio 등이 있다.

 

 

** 자바스크립트에서 경고창을 띄우는 코드는 alert('내용') 과 같다.

 

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

 

- onclick이라는 속성의 속성값으로는 반드시 javascript가 와야한다.

- onclick 값의 속성값은 웹브라우저가 기억하고 있다가,  onclick 속성이 위치하는 태그를 클릭했을때

기억하고 있던 코드를 해석하여 실행함.

 

 

즉, 어떠한 일(버튼을 클릭하는 것) 이 일어나서 -> 자바스크립트가 실행된 것 이므로

'어떠한 일'을 이벤트(Event)라고 한다.

 

버튼 클릭시 경고창 나타남 (alert)

onclick 외에도 다양한 이벤트들이 존재하는데,

예를 들면 input type="text"를 만들면 글자를 입력할 수 있는 칸이 나오는데,

onchange 속성은 안에 내용이 바뀌었을때에 해당하는 이벤트이다.

 

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

 

 

 

추가로, 키를 눌렀을때 발생하는 이벤트 속성은을 찾아보자.

 

** 검색할 줄 알아야 모르는 속성을 찾을 수 있다.

구글에 >> javascript key down event attribute 라고 검색해보자.

 

 

 

다음과 같이 검색 결과가 나온다. 즉, onkeydown이라는 속성을 이용하면 된다.

 

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

 

 

onclick, onchange, onkeydown과 같이 앞에 'on'이 들어가는 속성들을 Event(이벤트) 라고 한다.

 

 

 

---

3. 콘솔

 

구글 개발자도구(F12)에서 Elements 옆에 Console 창을 눌러보자.

 

 

이 콘솔창을 이용하여 자바스크립트를 입력해볼 수 있다.

 

이는 계산이 필요할 때 계산기 프로그램을 쓰는 것 처럼,

콘솔을 이용하여 필요한 자바스크립트의 기능을 실행해볼 수 있다.

 

위와 같이 웹사이트 내 문자의 개수를 세고싶다면, ' ' 로 감싸준 후 .length를 실행하면

콘솔을 통해 문자의 개수를 알아낼 수 있다.

 

 

** 콘솔 창 tip!

- element를 보고있는 상태에서 [Esc]키를 누르면 아래에 콘솔창이 뜨게 할 수 있음.

- 콘솔창에서, 이전에 실행했던 명령을 한번 더 하려면 위쪽 화살표키(↑)를 누르면 됨.