Easy for anyone.

이제 슬슬 서버사이드 언어인 PHP 와 jQuery 를 함께 사용하는 예제를 다루어 보도록 하겠습니다. 이번 강좌에서는 Select 필드의 항목이 변경되면 다른 필드가 동적으로 변경되는것을 해보도록 하겠습니다. 이 예제는, 여러 사이트의 회원가입 양식에서 보셨을텐데요. 예로, 내가 해당하는 국가를 선택하면 그에 따른 도시명들이 나열되는 select 필드가 동적으로 생성되는 예제입니다. 1. 먼저, Client Language 를 살펴보고, (jQuery 와 Html) 2. Server-side code 를 살펴본다음, 3. 코드에 대한 설명을 하도록 하겠습니다. 1. jQuery & html Code < ..

이번 시간에는 카테고리 별로 내용물을 분류해보도록 하겠습니다. (jQuery가 처음이신 분들은 강좌1부터 보시는걸 권장합니다. ) 우리가 무엇을 할것인지 보도록 하지요. 아래 예제를 참고해주세요. 카테고리 전체기사 경제/금융 사회 연예 스포츠 뉴스 목록 경제뉴스 1 스포츠뉴스 1 사회뉴스 1 경제뉴스 2 연예뉴스 스포츠뉴스 2 경제뉴스 3 사회뉴스 2 경제뉴스 4 스포츠 뉴스3 연예/스포츠 뉴스 경제뉴스 6 사회뉴스 3 사회/경제뉴스 위 예제처럼 카테고리를 클릭하면 리스트들이 각 분류에 맞게 정렬되는 것을 해볼것입니다. 어렵지 않아요. 1. 마크업 구조 보기 카테고리 전체기사 경제/금융 사회 연예 스포츠 뉴스 목록 경제뉴스 1 스포츠뉴스 1 사회뉴스 1 경제뉴스 2 ..

이번 강좌에서는 섬네일 이미지를 누르면 큰 이미지가 변환되도록 해보겠습니다. 1. 마크업 코드 2. jQuery 코드 $(document).ready(function(){ $("#thumnail a").click(function(e) { e.preventDefault(); var largeImgPath = $(this).attr("href"); var largeImgAlt = $(this).find("img").attr("alt").substr(0,4); $("#largeimg img").attr({src:largeImgPath,alt:largeImgAlt}); }); }); 먼저, e.preventDefault() 를 보도록 하지요. 이것은 무엇이냐 하면, 대상을 클릭했을때 발생하는 이벤트를 방지하는 ..

웹서핑을 하다 보면 스크롤바를 따라다니는 슬라이드 메뉴를 자주 볼수 있습니다. 오늘은 슬라이드 메뉴를 jQuery로 만드는 방법을 알아보도록 하지요. jQuery가 처음이신 분들은 강좌1 부터 보시는걸 권장합니다. 1. 슬라이드 메뉴의 Key Point 어떤 대상을 움직이려면 대상의 position 값은 absolute 또는, relative 값이 되어야 합니다.(css 에서 설정합니다.) 2. 마크업 보기 (주저리 주저리..컨텐츠 내용) (슬라이드 메뉴 내용) 예제에서는 이런 구조로 마크업 되어 있으며, slidemenu의 css 속성값은 아래와 같습니다. #slidemenu{background:#12cf3d;position:absolute;width:100px;top:50px;right:10px;} ..

이번 강좌에서는 펼침목록 만들기를 해보겠습니다. jQuery 를 처음 접하시는 분은 강좌 1부분부터 보시는걸 권장합니다. 그럼 예제1 부분에서 h3 엘리먼트 영역을 클릭시 아래의 엘리먼트 영역이 사라지는 것을 보도록 하지요. 소스 코드는 아래와 같습니다. $(document).ready(function(){ // 예제1 코드 $("#first h3").toggle(function(e){ // 선택자에 toggle이라는 이벤트를 주었습니다. e.preventDefault(); // 아직은 신경쓰지 않으셔도 되는 부분 $(this).next().slideUp(); //next()와 slideUp() 이라는 메서드가 보입니다. },function(e){ e.preventDefault(); $(this).nex..

오늘부터 저와함께 하루에 한두개정도씩 jQuery를 가지고 놀아 보겠습니다. 처음부터 현란한 예제로 시작하는것보다 간단한 예제를 가지고 시작해서 응용하실수 있도록 하겠습니다. 처음에만 간략하게 jQuery에 대해 설명해 드리며, 다음 예제부터는 쓸대없는 주석은 달지 않도록 하겠습니다. 우선 jQuery는 일종의 자바스크립트 라이브러리로써, 현재 다른 라이브러리로써는 prototype이라든가 네이버의 '진도'가 있습니다. 라이브러리라 함은 쉽게 설명하면, 프로그래밍언어에서 자주 사용하는 함수나 메서드등을 재사용이 가능하도록 모아놓은 것을 말합니다. 그럼 이제부터 예제를 시작합니다. 1. jQuery를 사용하기 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti..

window.onload = function() { var isMobilePage = (window.location.href.indexOf('/m/') != -1); if(isMobilePage) { var newHref = window.location.href; newHref = newHref.replace('/m/post/view/id/', '/'); newHref = newHref.replace('/m/', '/'); goPcPage(newHref, 'tistory.com'); } }; '--# Option Explicit를 최상단에 넣는다. Option Explicit 지정시 반드시 변수를 선언하고 사용해야된다..

아래는 function을 이용해 함수를 만든 후 호출시 연산하여 값을 반환한다.

대문자는 toUpperCase(), 소문자는 toLowerCase()를 이용한다. 1. toUpperCase() 2. toLowerCase()