javascript
[ JavaScript ] 자바스크립트 var, let, const 의 차이
보통 JavaScript 에서 변수를 선언할 때 "var" 로 선언하곤 한다. 이 외에도 "let" 이나 "const" 가 존재하는데, 이 세 가지의 변수 선언 방법의 차이에 대해 알아보자. 1. "var"는 함수 단위, "let"과 "const"는 블럭 단위의 스코프(범위)를 가진다. 무슨 말인가 하니, 먼저 var 를 아래처럼 선언해놨다고 가정하자. 이를 실행해 콘솔에 찍히는 1~5번 a를 확인해보면, 3번 a에서 var a = 100 ; 을 선언했더니 4번 a와 5번 a도 100으로 바뀌어 찍히는 걸 확인할 수 있다. 이는 1번 a에서 var 변수를 이미 할당해놓았고, 하위의 모든 블럭내에서 a를 재선언하면, 최초 선언된 a변수가 전역변수로써 기능을 수행하기에 새로 만들어내는 것이 아니라 이 a를 ..
[ JQuery ] 제이쿼리 동적으로 생성된 버튼에 이벤트 달기
JQuery 로 버튼에 이벤트를 달 때 우리는 보통, $(document).ready(function( ) { ... }) 안에 이벤트 선언을 하던, $(function() { ... }) 안에 이벤트 선언을 한다. 만약 아래처럼 첫 번째 버튼을 클릭하면 두 번째 버튼을 그려주는 코드가 있다고 가정하자. 첫 번째 버튼 첫 번째 버튼 ( firstButton ) 을 클릭하면 두 번째 버튼 ( secondButton ) 이 성공적으로 생성될 것이다. 이는 $(document).ready(function( ) { ... }) 안에 첫 번째 버튼의 이벤트를 선언해놨기에, 화면이 열리면서 해당 코드를 읽어 첫 번째 버튼에게 이벤트를 적용시켜주기 때문이다. 자, 그렇다면 이렇게 동적으로 생성 된 두 번째 버튼 ( ..
[ JQuery ] 제이쿼리 셀렉터 ( Selector ) ID, CLASS로 찾기
셀렉터(Selector)란? 이전 포스팅에서 JQuery 를 사용하는 이유가 엘리먼트를 쉽게 선택하고 이를 제어하기 위함이라 언급했다. 여기서 말한 엘리먼트를 쉽게 선택할 수 있도록 해주는 녀석이 바로 Selector 이다. JQuery 를 사용하는 가장 큰 이유가 이 Selector 라는 놈을 사용하기 위해서라고 해도 손색이 없다. 서론은 그만하고, 본론으로 넘어가보자. HTML 에선 태그들에게 id, class 등을 아래와 같이 선언하곤 하는데, AAAAA BBBBB 기존의 JavaScript 로 위의 엘리먼트들의 html 값을 뽑아내고 싶다면 getElementById, getElementsByClassName 등을 이용했을 것이다. 하지만 JQuery 는 저렇게 할 필요 없이 id 는 "#" 으로..
[ JQuery ] 제이쿼리란 무엇인가?
JQuery 란? 우리는 화면을 그려낼 때 JavaScript 를 기반으로 자주 만들어내곤 한다. 물론 JavaScript 만 써도 충분히 화면 작업이 가능하다. 하지만 보다 효율적이고 직관적이게 엘리먼트를 선택하고 제어할 수 있도록 해주는 JavaScript 라이브러리가 존재하는데 이게 바로 JQuery 이다. JavaScript 를 보다 쉽게 쓰기위해 사용하는 쿼리라고 생각하면 된다. 그럼 예제를 통해 JQuery 에 대해 알아보도록 하자. 시작하기 앞서 JQuery 를 사용하려면 아래의 경로를 head 태그 내에 명시해주어야 한다는 걸 알고 넘어가자. 자, 그럼 본론으로 돌아가서 만약 alert message 를 띄우는 button 을 만든다고 가정할 때, JavaScript 로만 만들면 아래와 비..
[ ExtJS ] Button을 만들고 Event Listeners 달기.
이전 포스팅에서 언급한 Hbox, Vbox 로 간단한 화면을 만들어 버튼을 추가해보자. 먼저, 아래의 코드를 가진 test.html 이 있다고 가정하자. 여기서 xtype 은 input component 라고 생각하면 된다. textfield, datafield, numberfield 등 여러 type 을 지원하며, default 는 textfield 로 잡혀있다. 그리고 layout 은 vbox 이므로 item 들을 세로로 정렬해준다. 현재 test.html 의 실행화면은 아래와 같다. 자, 이제 버튼을 추가해보자. 아래와 같이 코드를 수정한다. 그럼 아래처럼 First Button 과 Second Button 이 생성된다. 이제 각 버튼을 클릭할 때 메세지 창을 띄우도록 이벤트를 추가해보자. 버튼에 ..