Programming Storytelling

jQuery를 사용하면 맞춤 애니메이션을 만들 수 있습니다.jQuery 의 animate()메서드는 사용자 지정 애니메이션을 만드는 데 사용됩니다. 아래의 코드는 jQuery 애니메이션 메소드를 사용한 대표적인 예시이다. $(selector).animator({params},speed,callback); speed매개변수는 효과의 지속 시간을 지정한다. 선택적 콜백 매개 변수는 애니메이션이 완료된 후에 실행되는 함수이다.또 jQuery animator()은 여러속성을 조작 할 수 있는데 그와 관련된 예시도 함께 살펴보도록 하자. 아래의 코드는 동시에 여러 속성을 애니메이션으로 만든 것이다. $("button").click(function(){ $("div").animate({ left: '250px', ..

이벤트란 웹페이지가 응답 할 수 있는 모든 다른 방문자의 동작을 일컫는다. 만약 페이지의 모든 단락에 클릭 이벤트를 할당하고 싶다면 아래의 코드와 같은 형식을 쓰도록하자. $("p").click(function(){ // action goes here!! }); 다음 단계는 이벤트가 발생할 때 발생할 일을 정의 하는 것이다. 발생할 일은 함수 안에 적어 전달하면 된다. 이제 일반적으로 사용되는 jQuery 이벤트 메소드에 대해 살펴 보도록 하자. 1. $(document).ready() :이 메소드를 사용하면 문서가 완전히 로드 될 때 함수를 실행 할 수 있다. 2.dblclick() :이 함수는 사용자가 HTML요소를 두 번 클릭 할 때 실행된다. 3.mouseenter() :HTML 요소에 대한 이벤..

jQuery란 엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는 자바스크립트 라이브러리이다. 웹페이지에 jQuery를 삽입하기 위해선 jQuery를 다운 해야 하는데 다운 할 수 있는 jQuery에는 두가지가 있는데 첫번째는 제작 버전이고 두번째는 개발 버전이다. 먼저 제작 버전은 압축 및 압축되어 있는 라이브 웹 사이트 용이다. 그리고 개발 버전은 테스트 및 개발 용이다.즉,압축되지 않고도 읽을 수 있는 코드라는 뜻이다. 두 버전 모두 jQuery.com 에서 다운로드 할 수 있다. ##웹 페이지에 jQiery를 삽입하기## jQuery라이브러리는 단일 자바스크립트 파일이며 HTML 태그로 태그를 참조한다. jQuery를 삽입하는 방법은 아래와 같다..

클로저(closure)는 내부함수가 외부함수의 맥락에 접근할 수 있는 것을 가르킨다.쉽게 말해 함수 안에 함수를 또 선언 하는것이다. 우리가 대표적으로 알고 있는 함수표현식은 클로저나 콜백함수로 사용하기 쉽다는 장점이 있다. 이번 포스팅에서 그러한 사실에 대해서 함께 알아 보도록 하자. function outter() { function inner() { var title = 'programming good'; alert(title); } inner(); } 이런식으로 함수안에 함수를 선언하면 그안에서만 특정함수를 사용 할 수 있다는 장점이 있다.즉, 내부함수가 외부함수에 접근을 할 수 있다는 뜻이다.그리고 클로저는 내부함수가 죵료된 뒤에도 외부함수를 통해 함수를 호출 할 수 있다는 큰 장점이 있다. 이..

JSON이란 javascript개체 구문을 기반으로 구조화 된 데이터를 나타내는 표준 텍스트 기반 형식입니다. JSON은 javascript객체 리터럴 구문과 매우 유사하지만 javascript와 독립적으로 사용할 수 있으며 많은 프로그래밍 환경에서 JSON을 읽고 생성 할 수 있다. JSON은 문자열로 존재하며 네트워크를 통해 데이터를 전송하고자 할 때 유용하다. JSON을 활용한 대표적인 코드를 살펴보며 JSON형식을 사용한 배열을 익혀보도록 하자. { "name": "HYUN JI", "age": 22, "secretIdentity": "DONE77", "powers": [ "ONE", "TWO", "THREE" ] } JSON를 활용한 코드는 이런식으로 속성:값의 형태를 많이 띄우며 이러한 JSO..

데이터베이스(SQL)은 코딩을 통해서 제어 할 수 있지만 스프라이트시트는 클릭을 통해서만 제어가 가능하다. 이러한 편리한 기능을 사용하기 위해서는 간단한 설치과정이 필요한데 이 글에 쓰여진 방법대로 잘 따라오면 설치가 수월하게 잘될것이다. 첫번째로 구글(크롬)에 mysql community edition download 라고 검색한다. 검색을 하고나면 여러가지 검색 목록들이 뜰텐데 그 중에 mysql community edition 이라고 써져있는 목록을 클릭하면 mysql의 공식홈페이지로 이동하게 된다. 무료로 다운하기 위해서는 공식홈페이지 카테고리 가장아래에 있는 mysql commnity edition 이라고 되어있는 카테고리를 선택하기를 권장하며 그 카테고리라고 들어가면 아래 사진과 같은 창이 뜬..

이벤트 는 프로그래밍중인 시스템에서 발생하는 동작 또는 사건입니다. 웹의 경우 브라우저 창 내부에서 이벤트가 발생하고 그 안에있는 특정 항목에 이벤트가 첨부됩니다 웹에서 발생하는 이벤트를 정리 해 보자면 -사용자가 특정 요소 위에서 마우스를 클릭하거나 특정 요소 위로 커서를 가져가는 경우 -사용자가 키보드의 키를 누르는 경우 -사용자가 브라우저 창 크기를 조정하거나 닫는 경우 -웹 페이지로드 완료 -양식 제출 중 -재생중인 동영상 또는 일시 중지 되었거나 재생중인 동영상 -오류가 발생 했다는 경우 위의 경우 말고도 자바스크립트에서는 수많은 이벤트들이 존재한다. #이벤트핸들러란? 사용 가능한 각 이벤트에 이벤트가 발생할 때 실행되는 코드 블록 (이벤트 리스너 또는 이벤트 처리기로도 불린다.) ##addEv..

html에서 표를 만들어보는 방법을 알아보겠다. 이름 성별 주소 피카츄 여자 서울 위의 내용을 테이블로 만들고 싶다고 가정하자. 그럴땐 태그를 이용하면 되는데 는 table data의 약자이며 태그 만 사용해서는 테이블을 만들 수가 없다. 하지만 태그와 태그를 이용하면 이를 해결할수 있다. 그 방법은 태그로 같은 행을 묶어주고 전체 테이블을 태그로 정리하는 방식인데 이로써 진정한 테이블이 만들어 진다고 할 수 있다. 테이블에 테두리를 만들고 싶다면 태그아래에을 주면된다.여기서 값은 테두리의 수를 나타낸다.태그와 태그 두가지의 태그는 테이블의 헤더와 바디를 지정 해 준다. 지정해주지않아도 브라우저가 알아서 해주지만 표를 웹에 삽입하고 싶다면 이러한태그를 습관적으로 사용하도록하자. 그리고 추가적으로 태그는 ..