[Java / 자바] 자바스크립트

공부/Java  2015.07.04 01:10

안녕하세요. 명월입니다.


저번 포스트까지 우리는 웹의 태그,CSS 스타일에 대해 간략하게 공부했습니다. 웹의 태그와 CSS만으로는 문서의 정적인 표현이 가능하겠으나 프로그램의 동적의 개념을 설명하기에는 조금 부족합니다.
물론 CSS의 SELECTER와 EFFECT를 조합해서 동적인 표현을 할 수는 있지만 유저의 행동에 대한 반응일 뿐 프로그램이라고 하기에는 무언가 부족합니다.
그래서 조금 더 프로그램 언어라고 접근을 할 수 있는 클라이언트 언어가 있는데 그것을 자바스크립트라고 합니다.


예전에는 자바스크립트라고 하면 웹문서에서 간단하게 동작되는 프로그램 언어라는 표현이었는데 구글의 자바스크립트 V8엔진 기점으로 폭발적인 발전을 지금에는 웹의 언어로써 자리를 잡았습니다. 또 최근에는 자바스크립트가 웹에서만 사용하는 것이 아닌 서버사이드에서도 스크립트 언어로 사용되는 경우도 있네요(Node.js). 그러나 저도 아직 공부를 해 본 적이 없어서 딱히 설명은 못하겠네요... 나중에 기회가 되면 공부해 보겠습니다.
본 포스트는 자바스트립트의 기초적인 설명만 기술해 놓으니깐 나중에 기회가 되면 하나의 카테고리를 만들어서 심도있는 공부하겠습니다.



위 소스는 간단한 자바스크립트에 대한 예제입니다. 간단하가 설명을 하면 BODY 부분에는 INPUT 텍스트박스 하나, 버튼 하나가 있고 SPAN 형식의 Label 객체가 있습니다. 여기에서 button를 누르면 onclick의 이벤트가 발생 head에 있는 check를 호출하게 되어있습니다. check의 함수는 testObject의 값을 obj변수에 담고 그 결과를 result라는 객체에 자식노드의 값으로 만드는 형태로 되어있습니다.
실제 웹 화면에서 실행을 시켜 나온 결과 화면 입니다.


자바스트립트 예제 결과 화면


여기까지는 큰 어려운 없는 언어의 형태입니다. 지금우리는 onclick의 이벤트를 알고 그 이벤트를 받아 자바스크립트를 실행 시켰으나 그 위의 onchange, onfocus등의 많은 INPUT 오브젝트 이벤트, getElementById과 같은 내장함수가 있으나 나중에 따로 포스팅을 하겠습니다.


자바스크립트에서 비교적 자주 사용되는 내장함수 몇개만 더 소개를 하겠습니다.


원래 프로그램의 꽃은 어느 언어에서든 쓰레드 입니다. 특히 최근 서버사이드 개발에서는 parallel(병렬처리)을 얼마나 잘쓰냐 동기화를 얼마나 안정적이냐가 가장 큰 이슈입니다.(뭐 저만 이슈일 수도 있습니다..^^;;)그런데 이 클라이언트 부분에서도 쓰레드 형식의 setTimeout라고 하는 내장함수가 있습니다. 예제를 통해 자세히 공부하겠습니다.



위 예제에서는 onload의 이벤트와 Date의 내장함수를 사용했네요..그리고 body부분에는 span요소를 추가를 하였습니다.
소스의 흐름을 소개하면 먼저 body의 로드가 되면 time의 함수가 호출이 되고 time에서는 setTimeout라고 하는 자바스크립트 내장함수가 호출이 됩니다.
앞서 소개한 의미대로 1000ms(1초)를 지연시켜서 thread함수(reflect형식이네요.)를 호출합니다.그리고 thread함수가 호출되면 time의 요소에 현재시간을 집어 넣고 재귀 형식으로 다시 thread를 호출하는 식의 무한 반복이 되겠습니다.


setTimeout 결과 화면


위 결과 화면은 이미지라서 1초 단위에 시간이 바뀌는게 표현이 잘 안되네요..그러나 실제 작성해서 보시면 시계 같은 웹페이지가 만들어 진 것입니다.


지금까지는 우리가 BODY에 있는 요소에 데이터를 취득 또는 입력하는 형식의 자바스크립트를 공부했습니다. 그렇다면 이번에는 직접 자바스크립트에서 이 요소들을 동적변경이 가능하도록 공부하겠습니다. 설명으로는 한계가 있으니 소스로 확인해 보도록 하겠습니다.



위 예제를 보면 BODY에 append라고 하는 버튼이 하나 추가가 되었고 거기에 add함수를 호출 할 수 있는 onclick이벤트가 붙었습니다.
저 append버튼을 클릭을 하면 호출되는 add함수에서는 두개의 요소(Element)를 생성하는데 div형태와 input형태를 생성하고 있습니다.
div의 요소는 New Dom Hello world!라는 글귀가 자식노드로 만들어 지고 button은 New Button의 이름만 넣어지는 형태 만들어집니다.
이 두 요소는 최종적으로 body의 가장 밑에 추가가 되는 형태입니다.


createElement 결과 화면


최초 기동했을 때의 화면입니다. body에서 작성한 그대로 표현이 되었습니다.여기서 append버튼을 눌러보겠습니다.


createElement 결과 화면2


버튼을 누르니 요소(Element)구 두개 추가가 되었습니다.


지금까지 우리는 자바스트립트를 조금 알아보았습니다. 각 요소의 이벤트와 자바스크립트의 내장함수는 여기서 설명할 수 없을 정도로 많이 있습니다. 기회가 된다면 따로 카테고리를 만들어서 자세히 공부해 볼 수 있으면 좋겠습니다. 자바스크립트와 관련된 사이트를 연결해 놓으니 참고 하세요.


링크 - W3CSCHOOL


위 링크는 자바스크립트 뿐아니라 웹에 관계된 정보가 많으니 한번 둘러보는 것도 좋을 듯 싶습니다.



댓글 0개가 달렸습니다.
댓글쓰기