[Javascript] Javascript 입문 07 (170316)

Javascript 입문 07

• Global 영역 변수 선언의 문제점

- global 영역에 변수를 선언하면 자바스크립트로 조작하여 이용가능

- 변수가 중복될 수 있다.

- 협업하기 쉽지 않다.

• function 생성 시 onclick 기능보다 addEventListener를 많이 사용하는 이유

- onclick 이용 시 함수를 global 영역에 만들 수 밖에 없다. 이럴 경우 앞서 언급한 문제점이 나타난다.

- addEventListener를 이용할 경우 addEventListener("click", function(){ }); 에서 function안에 입력하기 때문에 변수를 선언하면 function 외부에서는 참조가 불가능하다.

• QUIZ > 

버튼을 누르면 누른 횟수가 count되도록 해보세요.

ANSWER >

• global영역의 참조값 숨기기

이 때 countValue가 global영역에 놓여있기 때문에 아래와 같이 접근이 가능하다.

이것은 나중에 큰 문제를 발생할 수 있기 때문에 다른 방법을 이용해야 좋다.

함수를 생성한 뒤 바로 호출을 해준다면 변수는 함수 속에 포함되게 되고 실행은 그대로 할 수 있다. 따라서 위 사진과 같이 빈 함수인 (function() {  } ) ( ) 을 이용한다.

그러면 아래와 같은 형태가 된다.

** 출력 결과 **

countValue값이 참조되지 않는다.

• QUIZ 2 > 
  

두개의 input창에 숫자를 입력한 뒤 +버튼을 누르면 연산한 result값이 출력되도록 하세요! ( HINT : parseFloat()을 이용하세요)

ANSWER >

** 출력 결과 **

• confirm 명령

- 확인/취소 버튼으로 alert가 뜬다. 

- 이 때, 버튼을 누르면 확인은 true, 취소는 false로 boolean값이 변수 안에 들어간다.

• 조건부 명령어 if

- if (조건) {    } 형태이다.

- 조건이 true이면 {    }를 실행하고 그렇지 않으면 실행하지 않는다.

- 조건 안에 들어가는 boolean타입의 변수는 대화식(ex: isMan, isRead 등)으로 짓는 것이 가독성이 좋다.

• confirm과 if를 이용한 예제

** 출력 결과 **

 if문을 통과하여 굿모닝이라는 alert창이 나타난다.

• 논리연산이 포함된 if문

- if문의 조건 속에 논리연산을 포함할 수 있다.

- 조건이 참일 경우 명령을 실행한다.

• prompt

- alert창에 사용자가 입력할 수 있는 input 칸이 존재한다.

• prompt 창을 이용한 QUIZ >

- prompt창에 입력한 수가 홀수이면 알림창에 "입력한 수는 홀수입니다"를 출력하고 그렇지 않으면 아무런 동작을 하지 않도록 하세요.

ANSWER > 

** 출력 결과 **

- prompt창은 아래와 같이 나타난다.