[2021-07-14] WEB2-JavaScript (1-20강)

◑ JavaScript

- 사용자와 웹 페이지가 서로 상호작용할 수 있도록 하는 용도

- <script>  </script> : html의 언어로 이 안에 있는 코드는 자바스크립트임을 알려주는 태그

- html vs JavaScript

html	정적이다.(곧이 곧대로)
JavaScript	동적이다.(계산능력 갖춤)

- 웹 페이지에서 오른쪽 마우스>검사>Console에서 JavaScript 언어만 입력하고 Enter 치면 바로 수행됨

---

◑ 사건(event)

- 웹 브라우저 위에서 일어나는 일들

 

 

* 버튼을 만드는 태그 : <input type="button">

  * button에 적을 텍스트값 지정하는 속성 : value=" "

  * [이벤트] : onclick 속성(클릭 시 수행할 사건 = ex. 'hi'라는 경고장(alert) 뜨게 하기)

  * 여기서 alert(' '); → 이 부분이 JavaScript!

 

 

 

* text 입력창을 만드는 태그 : <input type="text">

* [이벤트] : onchange 속성(text 입력창 내부 값이 변경되면 수행할 사건)

---

◑ 변수와 대입연산자

- 변수의 선언 : var 변수이름 = "문자열" or 상수;

---

< 조건문 >

 

◑ 비교 연산자와 Boolean

- 비교 연산자 : 두 값이 서로 같은지 다른지 판별하여 true or false 값을 도출하는 연산자

※ JavaScript에서의 비교 연산자
등호	===
부등호	&lt (less than <) &gt (greater than >)

 

※ document.write( );  :  ( )안의 내용이 출력되는 JavaScript 코드 (=print)

※ <br>  :  줄바꿈 (=\n)

 

 

◑ 조건문의 활용

- id 태그는 태그 자체에 부여하는 것이므로 <input 태그에 부여 가능!

- document.querySelector('활용되는 형태(. #붙인) 선택자 이름').value  :  해당 선택자의 value값 읽어온다.

- [주의] 조건문에서 등호(비교연산자)는 ===인데, 일반 코드에서 등호(대입연산자)는 =이다.

 

---

◑ 리팩토링 (refactoring) : 중복의 제거

- 웹의 동작은 그대로 유지한 채 코드를 효율적으로 바꾸어 코드의 가독성을 높이고,

   유지보수를 용이하게 하도록 코드를 개선하는 방식(ex. 중복의 제거)

 

(1) this : 해당 이벤트가 속해있는 태그 자기 자신을 가리킴

→ 태그에서 스스로를 id로 지정하고 조건문에서 document.querSe- 할 필요X

 

(2) 중복되는 대상은 하나의 변수에 담아서 그 변수 이름으로 표현

---

◑ 배열 (Array)

1.  배열의 선언

 

2. 배열의 크기 확인

 

3. 배열 원소 불러오기

 

4. 배열에 원소 추가 - 맨 뒤에 : push()