본문 바로가기

프로그래밍/jQuery237

jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name|="value"] [name|="value"] 는 태그의 name 속성명에 들어가 있는 문자중에 "value" 에 해당되는 문자가 앞쪽에 들어가 있는지 확인하는 선택자입니다. 원문 링크 http://api.jquery.com/attribute-contains-prefix-selector/ attributeContainsPrefix selector 개요 : 태그가 가진 속성(attributes)의 값(value)에 하이픈(-)이 포함되어 있을 때 해당 문자열로 시작되는 요소를 찾아 줍니다. jQuery('[attribute|="value"]') attribute 태그의 속성 value 속성의 값 예 제 문서에 모든 링크 중에 hreflang 속성(attribute)의 값이 "en" 으로 시작되는 요소를 찾아서 3px 의 테.. 2011. 1. 20.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : ":animated" ":animated" 는 화면에서 움직이는 요소를 찾아내는 선택자입니다.원문 링크 http://api.jquery.com/animated-selector/animated selector개요 : 화면에서 움직이는(animated) 요소를 찾아줍니다.예 제 화면에서 움직이는 요소를 찾아 색깔을 바꿔 줍니다. Run 미리보기 와. 간단하네요. jQuery 좋지 않으세요? ^^.그럼 즐프하세요. 2011. 1. 20.
jQuery 쉽게하기 - API 깨부시기, 선택자(Selectors) : All Selector ("*") 선택자(selector)는 jQuery에서 가장 중요한 요소입니다. 화면에서 원하는 곳을 선택하기 위해 적절한 선택자를 사용해야 하고, 그것을 원활히 처리할 수 있는 방법으로 마크업 구조를 짜야 합니다. 선택자에 할당된 내용은 꽤 많습니다. 하나당 하나씩 포스팅을 할 예정입니다. 예제가 많은 편이라 재미있는 내용이 되겠네요. jQuery 의 Selector 시작하겠습니다. All Selector ("*") 모든 요소를 선택할 때 사용합니다. 원문 링크 http://api.jquery.com/all-selector/ all selector 개요 : CSS 선택자(selector)와 일치하는 요소들(elements)을 사용하기 위한 문자열을 사용합니다. jQuery("*") 주의 : 이 선택자는 사용하지 않.. 2011. 1. 19.
jQuery 쉽게하기 - API 깨부시기, jQuery Core API(Application Program Interface, 응용프로그램 인터페이스)란 어떤 응용프로그램에서 제공한 메소드들의 모음입니다. 사전적으로 해석을 해보자면 "응용 프로그램과 대화하기" 가 되겠습니다. 사람사이의 대화방법은 몸짓, 말, 글을 사용합니다. 이것들을 인터페이스라고 할 수 있습니다. 단, 서로 의미가 통해야 합니다. 즉, 사전에 정의된 해석방법으로만 대화가 가능하죠. 고개 숙여 인사를 하는 박찬호를 보고 이상하게 생각했다는 미국인들과 같이 해석의 방법이 미리 정의되지 않은 대화방법으로는 오해 또는 소통이 불가하게 됩니다. 프로그램에서도 어떤 응용프로그램에 접근하기 위해 사전에 정의된 함수들의 모음이 존재하고, 이 모음을 외부에 노출하기 위해 정리한 것이 API 라고 할 수 있습니다... 2011. 1. 19.
jQuery 쉽게하기 - 기본부터 시작하자, 함수(Function) 편 함수(Function)란 객체의 행동을 나타내는 일련의 과정을 프로그램으로 표현한 것입니다. 즉 영어문법으로 보자면 동사가 됩니다. "~을 실행하다"의 의미로 받아 들이시면 됩니다. 모니터를 예로 들어볼까요. 모니터는 화면, 전원 단자, 비디오 단자, 파워버튼 등으로 이루어져 있습니다. 이것들이 모니터의 속성(Properties)이죠. 그럼 모니터로 할 수 있는 일을 정리해 보면 "화면을 표시한다" 라는 중요한 기능외에 "각도를 조절한다.", "밝기를 조절한다." 등의 부가기능들이 있습니다. "화면을 표시한다"라는 기능을 구현하기 위해 그 안에 뭔가 처리를 해야 합니다. 이런 일련의 내용들을 함수를 구현한다 정도로 정리가 되는 것 같습니다. 괜히 사족을 달아서 더 어려운 개념처럼 만든건 아닌가 모르겠네요.. 2011. 1. 18.
jQuery 쉽게하기 - 기본부터 시작하자, 배열(Array) 편 배열(ARRAY)은 프로그램을 배우기 시작하는 분들을 좌절시키는 첫판왕정도 되는 것 같습니다. "프로그램 별거 아니네"라고 방심하고 있다간 크리티컬 데미지 맞고 피 채울 시간도 없을지 모릅니다 ^^. 반 농담이구요. 배열을 만나면서 for Loop 도 의미있게 사용하게 되고 메모리에 대한 내용도 같이 엮여서 복잡해 지기 시작하죠. 그냥 그렇다구요 ^^;. 자 이번에는 JavaScript 의 Array 에 대해서 보도록 하겠습니다. ARRAY : 배열 자바스크립트의 배열은 몇 가지 내장 함수를 가진 변경 가능한 리스트(mutable lists) 입니다. 요 부분은 string 편에서 말씀드린 immutable 과 비교하시면서 보시면 될 거 같습니다. 자바스크립트의 배열 선언은 아래와 같이 합니다. var .. 2011. 1. 18.
jQuery 쉽게하기 - 기본부터 시작하자, Object 편 객체지향 프로그래밍(OOP)은 근대 소프트웨어의 근간이라고 할 수 있습니다. OOP(Object-Oriented Programming) 는 우주의 모든 유·무형의 사물을 객체화 시켜서 객체 끼리의 정보를 주고 받으며 개념을 구체화 시키는 것이라고 할 수 있습니다. 이 말이 더 어렵네요. ^^;; 객체라는 개념을 이해하는 순간이 프로그래밍 언어(language)의 반은 안다고 해도 과언이 아닐 것입니다. 나머지 반은 알고리즘과 같은 고유 스킬과 경험과 같은 지속 스킬 정도라고 해도 무방해 보입니다. 물론 제 의견입니다 ^^. 자, 이번에는 JavaScript 의 객체(Object)에 대해서 알아 보겠습니다. Object : 객체 JavaScript 의 모든 것은 모두 객체입니다. 객체를 만드는 가장 쉬운 .. 2011. 1. 17.
jQuery 쉽게하기 - 기본부터 시작하자, Number 편 JavaScript 의 변수 선언에는 자료형 표현이 없습니다. int a, String str 과 같은 변수타입이 없죠. 모든 변수는 var 로 표현됩니다. 아마 variable 의 약자인 것 같습니다. 게다가 var 를 생략해도 전혀 문제가 되지 않습니다. 이번에는 저번 포스트에 이어 다른 자료형들에 대해 어떻게 설명하고 있는지 보겠습니다. NUMBER : 숫자형 Javascript 의 Number 는 IEEE 754 의 64비트 배정도(double-precision 64-bit) 형식을 따릅니다. string 과 마찬가지로 변경 불가(immutable)한 값입니다. 그리고 C 언어의 기본적인 연산자들을 모두 지원합니다. 지원하는 연산자 : +, -, *, /, %, =, +=, -=, *=, /=, .. 2011. 1. 17.
jQuery 쉽게하기 - 기본부터 시작하자, string 편 기본은 언제나 중요합니다. 스포츠에서도 기본 폼이 좋은 사람은 발전 속도와 더불어 최고의 자리까지 올라가는 시간이 빠릅니다. 제가 좋아하는 농구도 폼이 좋은 사람이 골도 많이 넣더군요. ^^난데 없이 폼 얘기는 뭐냐? 라고 하시네요. 지금까지 jQuery에 대한 글을 쓰면서 정작 한것은 별로 없어 보입니다. 그냥 바로 멋진 예제들을 보여드리면서 흥미유발성 포스트가 어쩌면 더 맞는 내용일지도 모르겠습니다.특히나 이런 류의 포스트는 일정 수준 이상의 개발을 해보신 분들이 접하실 경우가 많기 때문에 따분한 개론 따위는 신경조차 쓰지 않으시죠. 뭐~ 저도 그런 편이니 딱히 뭐라고 할순 없네요. ^^;; 필요한 소스만 딱 떼어다가 쓰기에도 바쁜 세상이기는 합니다만 그래도 필요하신 분들은 있으실 겁니다. 그쵸? ^.. 2011. 1. 14.
jQuery 쉽게하기 - 파이어폭스의 파어어버그 사용하여 디버깅하기 유럽에서는 파이어폭스(FireFox)가 브라우져 점유율로 1위이네요. 2009년 하반기 기준으로 40% 정도였다고 하니 대단합니다. 우리나라는 익스플로러 천지인데 말이죠. 정말 먼 나라 얘기인 듯 합니다.이번 포스팅이 브라우져에 대한 얘기는 아닙니다. jQuery 쉽게하기 다음 포스팅이 Variables Types 인데요. 이 챕터에서 파이어폭스의 파이어버그를 사용하는 예제들로 구성되어 있어서 이렇게 포스팅을 하게 되었습니다. 사용을 해보지 않으신 분들이나 이미 사용하시는 분들도 계시겠죠. 일단은 사용을 하지 않는 분들을 기준으로 하여 글을 적을까 합니다.아마 처음 사용하시는 분들은 우리나라 웹사이트가 잘 열리지 않거나 Active-X 가 잘 지원되지 않아 당황스러울 수도 있습니다. 그래서 일단은 jQu.. 2011. 1. 14.
jQuery 쉽게하기 - 다른 라이브러리와 같이 쓰기 Javascript Library 들이 출현하면서 자바스크립트의 중요성은 비약적으로 높아졌습니다. Rich UI 를 구현함에 있어서 이 라이브러리들의 기여도는 결정적이였습니다. 풍부해진 사용자 경험(UX)을 바탕으로 웹 어플리케이션이란 용어도 등장하기 시작했습니다. 아마 앞으로는 웬만한 어플리케이션은 웹 기반이 되지 않을까 합니다.많아진 Javascript Library 들을 같이 사용해야 하는 경우가 있습니다. 이에 jQuery는 다음과 같은 권고 사항을 제시하고 있습니다.원문을 보시려면 여기를 클릭하세요.GENERAL : 개요jQuery 라이브러리와 Plugin 들은 jQuery 네임스페이스안에 종속되어 있습니다. 만약 여러분이 jQuery 외의 Prototype, MooTools, YUI 등과 같은.. 2011. 1. 13.
jQuery 쉽게하기 - 자주 묻는 질문과 답변, 두번째 FAQ 두번째 입니다. 내용 중에 AJAX에 대한 내용이 있는데요. 그 내용은 일단은 넘어가겠습니다. 하려면 넘 길어질 것 같습니다. 자 그러면 자주 묻는 질문과 답변 그 두번째 시작합니다. 1.6 요소(element)를 사용 가능/불가능 처리하려면? 어떤 요소의 사용할 수 있는 조건을 제어할 때 사용합니다. 눈으로 보시면 간단합니다. 아래 코드는 select 박스의 사용 설정을 바꾸는 내용입니다. // Disable #x $('#x').attr('disabled', true); // Enable #x $('#x').attr('disabled', false); 위처럼 disabled 속성값 요소인 true/false 로 제어하는 방법과 아래 처럼 disabled 속성을 제거하는 방법이 있습니다. // D.. 2011. 1. 13.
jQuery 쉽게하기 - 자주 묻는 질문과 답변, 그 첫번째 jQuery Forum을 통해 자주 올라온 질문들을 이곳에 모아 놓은 곳입니다. jQuery의 아주 기초적인 내용들로 구성되어 있어 아주 좋은 내용들이 많이 있습니다. jQuery.com 에서 바로보기 How do i...? 와 Why do...? 두 가지 섹션으로 구분되어 있습니다. 드디어 제 영어 실력이 뽀록이 나는 순간이네요. 저는 코드를 보고 문장을 유추했습니다. 쿨럭 ^^;; 1. How do I ... ? : 어떻게 하는 건가요? 1.1 class 또는 ID를 사용해서 아이템을 선택하는 방법은 무엇입니까? 요소(element)를 선택하는 방법에는 ID로 접근과 class명으로 접근하는 방법이 있습니다. 먼저 "myDivId" 라는 ID를 가진 요소(element)를 선택하기 위해서는 아래와 같.. 2011. 1. 12.
jQuery 쉽게하기 - jQuery 어떻게 쓰는 건가요? John Resig 이 소개하는 jQuery 사용법에 대해서 알아보겠습니다. 튜토리얼의 처음인데요. 친절히 레식아저씨께서 적어 주셨네요. jQuery.com의 GETTING STARTED 메뉴의 How jQuery Works(바로가기) 메뉴입니다. 내용이 좀 길어질수도 있겠네요. 좀 지루하실수도 있겠지만 jQuery 를 사용하기 위한 아주 기초적인 약속에 대해 보실 수 있는 부분이니 잘 보시면 나중에 분명 도움이 되실 것 같습니다. jQuery: The Basics Basic의 발음이 베이식인거 알고들 계신가요? 베이직이 아닌 베이식이더라구요. 어떨때는 제가 아는 모든게 다 잘못되어 있을 수도 있겠다라는 생각이 들곤 합니다. ^^;; 자~ 베이직이든 베이식이든 우리 말로 하면 기본이 됩니다. jQuery.. 2011. 1. 11.
jQuery 쉽게하기 - jQuery 를 다운받아 보자. 이번 포스트는 jQuery.com의 GETTING STARTED 의 Downloading jQuery 메뉴에 대해서 보려 합니다. 이 메뉴는 jQuery의 다운로드 방법이나 최신 버젼에 대한 간략한 정보들을 볼 수 있습니다. 내용은 몇 가지의 세부 사항들로 이루어져 있습니다. http://docs.jquery.com/Downloading_jQuery 의 부분입니다. 차례대로 한번 보도록 하겠습니다. ABOUT THE CODE jQuery 코드의 종류에 대해 간략히 설명되어 있습니다. 그리고 jQuery 개발에 대해 논의할 게 있으면 메일링 리스트에 가입하라는 내용도 간단히 보이네요. jQuery 는 Compressed와 Uncompressed 로 나뉘어져 있습니다. 해석해보면 압축버젼과 압축되기 전 버젼.. 2011. 1. 10.
jQuery 쉽게하기 - Documentation 의 Main Page jQuery에 대한 포스트는 jQuery.com 분석하는 내용으로 채울까 합니다. 사이트에 올라와 있는 모든 컨텐츠를 살펴보고 구현하며 포스트를 할 계획입니다. 물론 영어도 안되고 짧은 지식이라서 힘들겠지만 위 빨간 박스로 되어 있는 Documentation의 모든 메뉴를 다 볼 계획입니다. 하나하나 제 나름 해석하고 구현하여 작성하겠습니다. jQuery.com 으로 접속하시어 Documetation 메뉴를 선택해 보겠습니다. Main Page 서브메뉴가 Documentation 메뉴의 첫번째 메뉴입니다. 오늘 포스팅은 이 메뉴를 살펴보는 것으로 하겠습니다. Main Page 는 Documentation 메뉴안의 사이트맵 이라고 할 수 있겠습니다. 왼쪽 메뉴를 정리해서 바로가기 기능들로 구성해 놓았습니다.. 2011. 1. 10.
JQuery 쉽게하기 - 시작하기에 앞서 JQuery는 자바스크립트 라이브러리입니다. 라이브러리란 소프트웨어를 제작할 때 빈번히 쓰이는 기능들을 모아서 사용할 수 있도록 먼저 작업을 해 놓은 겁니다. 쉽게 말하면 자주 쓰는 함수들을 모아놓은 거죠. 조금 더 들여다보면 라이브러리를 사용함으로써 얻을 수 있는 이점들이 상당히 많습니다. 그런 내용들은 이미 많이 언급되어 있기 때문에 지면을 할애 하면서 기재하지 않겠습니다. 저는 JQuery를 잘 사용하지 않습니다. 이 라이브러리는 이전의 자바스크립트 라이브러리인 yui, prototype, dojo 들 보다 인기가 있는것 같습니다. 이 라이브러리들을 모두 사용해 보지 않았기 때문에 그들에 대한 장단점을 말할 수는 없습니다. 개발자 개인의 평가 또는 이전에 개발된 소스에 포함된 프레임워크를 접하면서 .. 2011. 1. 6.

티스토리툴바