삽질의 현장/- Javascript와 HTML 12

[삽잡이::html] GNB와 LNB에 대해서

웹 페이지들을 들어가게 되면메뉴들을 접할 수 있습니다.이때 이 메뉴들에도 특징들에 따라명칭을 다르게 부른다는 사실을 아십니까!?오~ 뭐야~ 뭐야~ 위의 그림과 같이 3가지의 Main Menu들이 있다고 생각해봅시다.이 Main Menu안에는 3가지의 Sub Menu들이 존재합니다. 이들을 우리는 아래와 같은 명칭으로 이해할 수 있습니다. GNB란, Global Navigation Bar의 약자입니다.Main 메뉴라고 생각하시면 될 듯합니다. 어떠한 메뉴를 누르더라도 변화 없이 고정되어있는 메뉴말입니다.즉, 모든 부분에 나타나고 있는 전역적인 Navigation Bar입니다. LNB란, Local Navigation Bar의 약자입니다.GNB에 속한 Menu Bar를 누를 경우소제목 형식으로 나오는 Sub..

[삽잡이::java]시스템 환경 정보들을 알려준다! System.getProperty( )

Property라는 의미 자체는 부동산, 재산, 소유등을 의미합니다. 프로그래밍 세계에서도 시스템 환경에 대한 재산, 소유와 같은 정보들을 알려달라고 요청할 수 있습니다. java 언어에는 System이라는 클래스가 있는데요,해당 클래스 안에는 getProperty( )라는 메서드가 존재합니다.해당 메서드를 통해서 정보를 알아낼 수 있다 이겁니다. (출처_ Java Document) 조금 더 자세하게 말씀드리자면,System 개체가 현재 작업 환경에 구성들을 설명할 수 있는 속성들을 가지고 있다는 것으로 이해하시면...더 이해하기... 쉬우실 수도.... 하하하.... 아무튼...getPropery() 메서드의 괄호 안에 값을 넣게 되면그에 맞는 값을 string형으로 반환해줍니다. 그렇다면~괄호 안에 ..

[삽잡이::jQuery] ajax의 error, success 그리고 complete

불금입니다.그래요 불금이에요.그런데, 어느 순간부터 그냥 집돌이가 되고 싶었어요. 불타는 금요일에 불타게 공부해봅시다! 예전에 ajax에 대해서 공부한 기억이 있습니다.(참고_ ajax가 뭐니? 축구팀이니?) ajax call을 하게 되면 비동기식으로 http 요청을 수행합니다.Server가 받아서 처리하고 결과를 보내주겠지요. Server에서 보낸 결과에 대한 응답에 따라Client에서는 처리할 준비를 해야합니다. 우리는 크게 3가지의 statement를 통해 결과에 대한 처리를 할 수 있습니다.(물론, 더 많아요...) 1234567891011121314$.ajax({ type : 'POST', url : sUrl, data : data, error : function(error) { alert("E..

[삽잡이::javascript] Javascript에서 PHP 변수 사용하기

애초에 PHP는 Server를 위한 언어이고 Javascript는 Client (Browser)를 위한 언어입니다. 둘의 성격은 다릅니다.서버와 클라이언트... 특히나 Client에서 Server로즉, Javascript에서 PHP로 데이터를 보낸다고 하더라고Server에서 바로 받는다는 보장이 없기에우리는 Ajax와 같은 녀석들을 통해 Server에 값을 전하고 응답을 기다려서 처리하곤합니다. 그런데, Server에서 Client로 보내는 것은 그럼 어찌할까요? 그래서 PHP 데이이터를 Javascript에서 어떻게 사용할 수 있을지 생각해봤습니다. 으아~~ 두뇌 풀가동~ 우선은 직접적으로 echo문을 활용하여');?>Colored by Color Scriptercs 대략 이러한 코드를 통해 설명했던 ..

[삽잡이::html] 안보이는데 전송은 한다! 히든 필드(Hidden Field)

태그 자체가 사용자 입력부분과 전송 기능을 제공해주는 태그라고 이해할 수 있습니다.해당 태그 안에는 hidden이라는 속성이 있는데요,Hidden이라는 언어 자체가 숨기는 의미가 있습니다.예 그렇습니다.화면에 출력은 되지 않지만,데이터를 보낼 때 유용하게 사용할 수 있습니다.아래 좋은 예시가 있습니다.같이 살펴보시죠~ 우와와 (출처_ w3sschools)HTML Element들을 보게 되면demo_form에 이름을 입력받을 수 있는 Text Box와제출할 수 있는 Submit 버튼이 있습니다.그런데 이상합니다. 하나가 남지요...뭐야 뭐야 예 그렇습니다.바로, Hidden Filed입니다.value 속성에 있는 값을 넘겨주게 됩니다.결과를 한번 볼까요!?우와~ 안보였던 country가 보이네요~ hidd..

[삽잡이::javascript] 요소를 찾아 씹어먹겠어! 속성 선택자

html에 있는 여러 Tag들에서 필요한 Element들을 찾아와야할 경우들이 많습니다. 이럴 때 jQuery의 속성 선택자를 사용할 수 있습니다. Element 요소 하나하나 다 가져다 사용하겠어!! 예전에 jQuery 홈피에서 Selector 보겠다고 썼던 글이 생각나군요. (참고_ [삽잡이::Javascript] 요소를 찾아야 jQuery를 씹어먹지~) 아무튼!올바른 요소를 선택해야 해당 요소를 가지고 지지고 볶을 수 있지 않겠습니까!? 자 우선 기본적으로 연산자를 생각해보겠습니다. '=' 연산자는 is 와 같습니다.예를 들어 name = '삽잡이'name이 삽잡이이면~ 이런 뜻으로 사용되는 연산자입니다. '!=' 은 not입니다. '^'은 통상적으로 XOR 연산으로 사용하는데jQuery 속성 선택..

[삽잡이::javascript] JSON Array를 만들어보자

Json이란JavaScript Object Notation 의 줄임말입니다. (출처_ w3schools) 이런식으로 생겨먹었습니다.사람이 읽기쉽고, Parsing하기도 쉽게 이루어져있는 형식입니다. 이름(name)과 값(value) 둘이 붙어서 쌍으로 다니는 형태로 이루어져있지요. JSON 형식은 데이터를 전송시 용이하게 사용됩니다. 기본적으로 중괄호({ }) 사이에 값과 쌍이 이러한 형태로 구성되어있습니다. 이렇게 Json 형식으로 데이터를 구성하기 위해서는대개 아래와 같은 형식으로 코드를 작성하곤 합니다. Object 형식의 aJson 이라는 녀석을 만들고,name과 그에 맞는 value를 채워넣어줍니다. 12345678var aJson = new Object(); aJson.korName = "삽잡..

[삽잡이::javascript] css에도 가상클래스가?! nth-child

세상에나... css에도 가상클래스가 있습니다.nth-child(n) 이라는 녀석입니다. n에 들어가는 숫자 번째의 자식 요소를 가리키게 됩니다. '도로명 안내시스템' 사이트에 잠시 다녀와봤습니다. 이때 내가 검색을 했을 때 일정한 개수로 결과 값이 나올까요? 아니죠... 이렇게... 일정하지 않을 때... 요소를 선택하기 위해서는 어찌해야할까요? 이때 이 친구를 부르는 것입니다. n번째 자식요소를 가리킨다!!! 굳~

[삽잡이::javascript] 새로운 페이지를 가져다주는 href와 replace

javascript를 야매(?)로 살금살금 가져다가 사용하다보니,그냥 아무 생각없이 쓰던 메서드들에 대한 대충 기능들만 알고 있지비슷한 기능인데 뭔 차이가 있는지 생각해본 적이 그리 많지 않습니다. 하지만 역시,,, 언젠간 왜!? 안되!!!! 라는 미스테리를 던져주고 기다리지요... 글쎄, jQuery로 작업 처리를 했는데,뒤로 가면 이전 주소가 남아있지 않는게 아니겠습니까... 왜...왜...왜!?!?!?!?!? 페이지 이동 시킬 때 많이들 href를 사용합니다.그런데, 제가 위에서도 말씀드렸듯이 야매(?)로 가져다 쓰다보니작업 처리를 하고 replace를 사용하여 새로운 페이지로 변경시키고 있었습니다. 그런데, 뒤로가기 버튼을 누르니... 이전 페이지는 행방불명이 되버렸지요... 그러한 이유는 바로!..

[삽잡이::Javascript] Form으로 한큐에 요소 찾자

자 여러분... 저는 요즘 jQuery를 공부하고 있습니다. 그럼 어디 한번 기분좋게 Element 를 찾아 다이나믹하게 웹 화면에 힘 좀 줘볼까요!? ... 이렇게 막일 하시렵니까....?(* 노가다는 일본말인거 아시죠? 한글을 사랑합시다!) 그럴 필요가 없습니다... 물론 경우에 따라 요소 하나하나를 찾아서 가공해야할 때도 있지만,한번에 가져올 필요가 있을 때에는바로, Form Filter를 사용하면 됩니다. form은 말이죠 '서식', '방식', '종류' 및 '유형'이라는 뜻을 가지고 있습니다. HTML에도 Form 요소가 있는데요,text, checkbox, radio등의 형식들이 해당됩니다. 더 자세한 내용은 역시 공식 홈페이지를 보면 되겠지요!?(참고_ http://www.w3schools.c..