Easy for anyone.

자바 스크립트의 큰 기능은 브라우저 쿠키를 허용하는 것이다. 이 튜토리얼에서는 어떻게 쿠키를 수행하는지에 대해서 볼 것이다. 간단한 예제를 통해서 모든 페이지마다 이름과 이스플리이를 기억하도록 해 볼 것이다. What are cookies? (쿠키는 무엇인가?) 쿠키는 웹 브라우저에 저장하는 간단한 양의 데이터 조각이다. 이것은 사용자와 매번 페이지에 방문할때 나타내는 정보를 저장하도록 해준다. 각 사용자는 유일한 세트의 쿠키를 가지고 있다. 쿠키는 일반적으로 웹 웹 서버에 의해서 이용되며, 웹사이트 방문을 트래킹 하거나, 사이트에 로그인 하거나, 쇼핑카트를 저장하는 일을 수행한다. 어쨋든 우리는 웹서버를 이용하지 않도고 쿠키를 이용ㄹ할 수 있다. 우리는 JavaScript를 이용해서 이러한 기능을 수행..

과제 폼 입력에 사용자가 숫자와 +, - 기호만 입력할수 있게 하고 싶다. 해결 먼저 아래와 같이 라벨과 submit 버튼 그리고 오류메세지 필드를 만들어 봅시다. 핸드폰 번호를 입력하세요. 숫자와 +,- 만 입력하실수 있습니다. 각 엘리먼트의 class 속성에 각각 "test_label" , "test_infobox", "test_submit", "test_error"를 지정해줍니다. 스크립트 소스는 아래와 같습니다. $(document).ready(function() { $('.test_error').hide(); $('.submit..

문제 버튼이나 링크를 클릭해서 폰트의 크기를 변경하고 싶다. (대부분의 뉴스 사이트에서 구현되어 있는 기능) 해결 jQuery를 통해 현재의 폰트 사이즈를 알아낸 다음 그 수치에 버튼을 클릭할때마다 +1 이나 -1 을 해줌으로써 폰트 사이즈를 변경합니다. 토의 위 그림 1-1 에서 볼수 있듯이 크게, 작게 링크를 클릭하게 되면 현재 폰트 사이즈에서 +1이나 -1을 해줍니다. 예제 소스는 아래와 같습니다. 폰트 사이즈 바꾸기 - 웹눈의 웹이야기 < script type="text..

우리가 선택하고자 하는것이 무엇이든지, jQuery 는 달러 사인으로 된 함수: $() 로 시작을 하게 됩니다. $() 함수는 일반적으로 html 태그와 ID , Class 속성값과 함께 사용됩니다. 표1. CSS와 jQuery 의 선택자 비교문 Selector CSS jQuery 설명 ID #ID_Name $('#ID_Name') ID값이 'ID_Name' 을 가지는 하나의 엘리먼트를 선택합니다. Class .Class_Name $('.Class_Name') Class 속성값이 'Class_Name' 값을 가지는 모든 엘리먼트를 선택합니다. Tag P $('P') 모든 P 태그를 선택합니다. 여기서 주목할만한 점은 Class Selector와 Tag Selector는 해당하는 엘리먼트를 하나만 선택하는..

# 기본 셀렉터 * : 모든 엘리먼트와 일치 E : 태그명이 E인 모든 엘리먼트와 일치 E F : E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치 E>F : E의 바로 아래 자식이면서 태그명이 F인 모든 엘러먼트와 일치 E+F : E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치 E~F : E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치 E:has(F) : 태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트와 일치 E.C : 클래스명 C를 가지는 모든 엘리먼트 E와 일치, E의 생각은 *.C와 동일함 E#I : 아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일함 E[A] : 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치 E[A=V] : 값이 V인 ..

이제 슬슬 서버사이드 언어인 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..