도드넷

Come feel my little world. JAVASCRIPT#50 - OPEN API란? 1. 오픈에이피아이 OPEN API란 무엇인가? - 인터넷을 통해 이용가능한 무료 공개 스크립트 덩어리 2. OPEN API를 사용해보자- 1. 키값을 받는다.- 2. 를 에 추가한다. - 3. 객체를 생성한다. 3. Google Map API 사용하기- 1. 구글맵 JS 튜토리얼에 들어가서 키값을 받는다. - 2. 을 HTML 에 추가해준다.- 3. 튜토리얼에 따라 필요한 옵션을 추가하고 빼서 구글맵 객체를 생성해준다. 구글맵 객체 생성하기 : new google.maps.Map(맵을넣을요소, 옵션); var GM = document.getElementById("GM"); var options = { cen..

Ponies are my deity. JAVASCRIPT#49 - jQuery UI 4부 Effect 1. 클래스 더하기 클래스 빼기- addClass(newclass, 500, callback);- removeClass(newclass, 500, callback); 2. effect- $("div").effect("bounce", "slow"); 3. show- $("#effect").show(selectedEffect, options, 500, callback);- 해석 : #effect를 선택해서 selectedEffect를 적용하라 옵션은 options를 참고하며 적용시간은 0.5초이다. 끝나면 callback 함수를 불러내라. effect() vs show() : 차이없음. 4. hide- $(..

A pony and My sunshine my light my dream. JAVASCRIPT#48 - jQuery UI 3부 Accordion 탭과 메뉴 1. 슬라이드형 목록 및 메뉴 형성- 초기화 : $(셀렉터).accordion();* 여기서 셀렉터는 전체 목록을 감싸는 div의 id - 방식 : 는 클릭가능한 메뉴이름 이하 는 메뉴 컨텐츠. 2. 자동완성 기능 사용하기- 초기화 : $(셀렉터).autocomplete({source:소스이름});* 여기서 셀렉터는 인풋 요소의 아이디 - 방식 : input에 무언가를 입력하면 소스이름에서 부터 추천목록을 뽑아서 인풋아래에 보여준다.- 소스이름??? : 가장 쉽게는 자신이 만든 배열이 들어갈수 있음, 이외에는 뭐 쿠키같은곳에서 가져오는 방식일듯. 3...

Who and What is ruling you? Question of the day. JAVASCRIPT#47 - jQuery UI 2부 draggable과 selectable 1. 요소 드래그 가능하게 하기.$(셀렉터).draggable(); 2. 드래그 가능구역 제한하기- 부모요소로 제한 : $(셀렉터).draggable({ containment: "parent" }); - 제한구역 요소지정하기 : $(셀렉터).draggable({ containment: "#id"}); 3. 선택가능 요소로 만들기- $(셀렉터).selectable();- 위처럼 초기화되면 선택된 요소는 ui-selected 가 적용되고 선택중인 그러니까 마우스 다운시 ui-selecting이 적용된다. 4. 표같은 목록만들기 CS..

Darling, I kind of like the misery you put me through. JAVASCRIPT#46 - jQuery UI란? 1. 제이쿼리 UI란? - jQuery UI는 User Interface 를 제공하는 제이쿼리 플러그인으로 여러가지 시각효과 기능과 위젯을 지원한다. 2. 제이쿼리 UI 설치하기 다운로드해서 2개의 파일을 자신의 프로젝트 폴더에 추가한다. jquery-ui.jsjquery-ui.css 이후 메인 html 파일에서 위의 js와 css를 추가해준다. 3. 제이쿼리 UI 사용해보기- jQuery UI는 좀 다른 방식으로 작동하는데, 아래와 같이 써야한다.jQuery UI에서 제공하는 progressbar 라는 걸 사용해보도록 하자. HTML 파트 JS 파트 $("..

I die for you, i kill for you, i live for only you AJ. JAVASCRIPT#45 - jQuery fn 오브젝트, .extend() 메소드와 플러그인 제작의 기초. 1. .fn - 아래 코드를 보자. 무슨생각이 드는가. $.fn.wow = function() { alert("i say wow"); } 우리는 $가 셀렉터에 관련된것임을 안다. 하지만 다른형태인 점fn점wow라는 형태를띄고 있다 어떻게 해석해야할까? 위의 코드는 간단히, wow(); 라는 메소드를 정의하고 있다고 보면 된다. 좋다 그러면 점fn .fn의 의미는 뭘까? 이는 아직 정해지지않은 자바스크립트에서 지원하는 오브젝트 전체를 뜻하는 가명이다. 위처럼 .fn으로 생성된 메소드는 아무나 이용하고 접..

She's fat and she don't run too fast but she's faster than me :0 JAVASCRIPT#44 - jQuery 플러그인 1. 제이쿼리 플러그인- 플러그인이란? 부착 탈착 더하기 빼기가 가능한 부가기능. 간단히 더하거나 뺄수있는 스크립트 덩어리. 2. 플러그인 찾는 방법 - 요기링크 : 플러그인을 찾아보자 3. 자바스크립트 플러그인 적용하는 방법 - 1. 추가하려는 플러그인을 다운로드해서 핵심 JS 파일을 찾는다.* 통째로 복사해서 폴더만들어서 붙여넣기해도 좋음. (용량증가 문제발생) - 2. 자신의 프로젝트 루트폴더에 붙여넣는다. - 3. 자신의 HTML 파일에가서 해당 스크립트를 추가해준다. - 4. demo 및 doc 을 참고해서 해당 플러그인이 제공하는..

It ain't gonna be easy but i won't give up easily either. Bring it! JAVASCRIPT#43 - jQuery 여러가지 시각효과 1. 숨기기/보이기- hide()- show()- 파라미터로 얼마나 보여줄지 얼마나 사라지게할지 밀리세컨트로 전달가능하다. 2. 페이드 효과- fadeOut() : 서서히 어두워져서 사라지기 - fadeIn() : 서서히 밝아져서 나타나기 3. 슬라이드- sildeDown() : 숨겨진 내용을 가리키를 아래로 내리듯 들어내게함. - sildeUp() : 내용을 가리게를 올리듯 감춤. * 숨겨졌는지 아는방법- $(셀렉터).is(":hidden") 가 참을 반환하면 숨김상태이고 아니면 아니다..(?!)- 숨긴 객체만 선택하려면 $..

Over my head. better off dead. JAVASCRIPT#42 - AJAX 1. AJAX - AJAX는 Asynchronous JavaScript And XML 의 약자이다. - AJAX는 비동기 서버통신 기술, 스크립트를 의미한다. 2. 매우 간단한 AJAX의 예제 - 서버 구현이 안되서 그러는것 같은데 IE에서만 정상 작동. ㅡㅡ 개짜증. 예제가 안되면 어쩌라는거. 여튼 위코드는 네이버 서버랑 통신해서 WTF div 부분을 www.naver.com html 긁어와서 대채하게함.. ajax는 책 자체 설명도 예제도 별로고 서버 실제로 구축해야 재대로 구현하고 실험할수있는 기능이라 일단 이 정도만하고 넘어감... 뒤에보니까 무슨 실습에서 다시 ajax 튀어나오니까 그때 다시보도록 하지...

I'm nothing without you AJ. JAVASCRIPT#41 - HTML FORM에 대하여 폼 이벤트 1. html 폼 form 태그에 대하여 - form 태그는 input 태그의 모음, 집합체로 보면 된다. form 태그 형태 예제 * submit 이벤트 - form 태그안에 존재하는 input 태그의 submit 타입 버튼을 통해 호출됨.- 입력된 데이터 값은 인풋태그에 할당된 name값이나 id값 으로 셀렉트후 val()로 접근가능. - form자체가 값을 집합시키거나 가지지는 못하는듯. 2. select 이벤트 vs change 이벤트 - select 이벤트는 인풋태그내의 내용이 선택(클릭,드래그)되면 발동. (셀렉트 태그와 관련없음 인풋관련 이벤트!) - change 이벤트는 셀렉..