[JavaScript] 자바스크립트란? 자바스크립트 팝업 Pop up

JavaScript

jQuery를 이용하지 않고 자바스크립트로 이벤트를 개발하는 것이다

자바스크립트로만 사용을 한다면 jQuery를 사용하지 않기 때문에 굉장히 가볍다

# 자바 스크립트

자바스크립트에는 프로토 타입, 오브젝트, 클로저 개념을 알아야 한다

자바스크립트는 전역 변수를 근간으로 하는 언어이다

하지만 자바스크립트에서는 전역 변수를 사용하지 말라고 한다

-> why? 데이터가 꼬이기 쉽기 때문에

그렇기 때문에 나온 방식이 클로저이다 (전역 변수를 사용하지 않음)

클로저는 function이 function을 부르는 방식이다 

function의 리턴이 function이 된다

# UI와 UX

UI와 UX의 차이

UI는 단순히 인터페이스이다

어떠한 것을 클릭하면 그에 맞는 기능이 수행된다는 의미이다

UX는 사용자가 사용하는 인터페이스들의 위치들 예를 들어 윈도우의 왼쪽 밑의 버튼으로 시작 버튼이라는 것을 인지하고 있다

그런 것 처럼 게임에서도 사람들의 익숙한 버튼이나 위치들을 의미한다

# 이벤트 리스너

실습을 위해서 이클립스가 아닌 NotePad++로 HTML 개발을 해본다

우선 jQuery를 이용하지 않고 버튼을 생성해서 클릭 시 이벤트를 주도록 해본다

onclick의 옵션을 통해서 클릭 이벤트를 줄 수 있다

클릭 시 아래와 같이 알림창을 확인할 수 있다

위와 같이 작성하면서 더블 클릭 이벤트를 줄 수도 있는데 그 옵션은 onclick이 아닌 ondblclick을 사용하면 된다

더블 클릭 시 이벤트가 발생하는 것을 볼 수 있다

위와 같이 작성하는 경우는 jQuery를 사용하지 않는 경우에 사용하면 된다

이제는 div를 줘서 클릭 이벤트를 주기로 한다

위와 같이 div가 생성되어 있다면 똑같이 onclick을 줄 수 있다

div 클릭시 문제없이 출력 되는 것을 볼 수 있다

onclick은 Tag를 가리지 않고 모두 적용이 가능하다 onclick이 적용되었으므로 ondblclick도 적용이 된다

또한 a 태그도 onclick도 가능하다 

href의 javascript:void(0)은 아무 행동도 취하지 않도록 하는 것이다

이제는 span을 통해서 function을 생성해서 적용시켜 본다

위와 같이 hello로 정의 되지 않은 기능을 적었다면 에러가 발생하며 작동이 되지 않을 것이다

function으로 새로운 기능을 정의해주면 된다

head 부분에 script로 hello를 정의하면 된다

클릭 한다면 위와 같은 창이 뜨고 된다는 것을 알 수 있다

클릭 이전에 마우스로 선택을 했을 때 와 선택 해제시도 이벤트를 줄 수 있다

이제 태그 안에 옵션을 주지 않고 fuction을 주는 방식을 사용해 본다

우선 스크립트 안에 $(document).ready와 비슷한 구조로 window.onload가 있다 그렇다면 홈페이지가 로드되면 기능을 수행된다

이제 안에서 p 태그를 작성하고 그 태그를 클릭 시 이벤트를 줄 수 있다

위와 같이 다른 이벤트들도 줄 수 있다

onmouseover로 마우스를 올렸을 때 알림을 줄 수 도 있고

마우스의 위치 까지도 줄 수 있다

아래와 같은 결과를 볼 수 있다

마우스를 나갔을 때도 이벤트가 가능한 것을 알 수 있다

# 팝업

팝업을 실습해보기 위해서 새로운 html을 생성한다

span을 주고 클릭 시 새로운 창을 띄우는 것이다

이제는 popup.html에서 js.html으로 데이터를 넘기는 방식으로 실습을 진행해본다

위의 소스는 text1을 불러와서 text1의 value에 '허허허'라는 값을 채우는 것이다

익스플로러만 확인이 가능하지만 팝업창으로 데이터를 넘기는 것도 가능하다