Development /JavaScript 썸네일형 리스트형 jQuery : Animation jQuery는 웹화면에서 visual effect를 간편하게 만들고 변경할 수 있게 도와 줍니다. 이런 visual effect는 웹 화면에 대한 사용자의 만족도를 높이는 방법 중에 하나입니다. 본 글에서는 jQuery Animation 프레임워크를 살펴 보겠습니다. 1. jQuery Animation 프레임 워크의 일반적인 특징 애니메이션은 얼마만큼의 시간동안 visual effect를 나타내야 하는지를 지정해야 합니다. 그 시간은 ms(1/1000초)로 나타내거나 지정되어 있는 문자열로 나타낼 수 있습니다. jQuery에서 기본적으로 지정되어 있는 문자열은 “fast”, “slow”가 있습니다. (“fast” = 200ms, “slow” = 600ms)그 외의 문자열 지정법은 jQuery.fx.spe.. 더보기 [자바스크립트] .innerHTML script 태그 사용시 에러 해결법 .innerHTML script 태그 사용시 에러 해결법 innerHTML 아래와 같이 script 태그를 넣으면 에러가 생기는 것을 볼 수 있다. test.innerHTML = ""; 이유는 문자열에 script 가 들어가서 생기는 것이다. 이 에러를 해결하려면 아래와 같이 하면 된다 test.innerHTML = "document.write('innerHTML TEST')"; 더보기 [자바스크립트 완벽 가이드 정리] Window 객체 Window 객체 주 역할 : 클라이언트 측 자바 스크립트 프로그램의 전역 객체 1. 타이머 setTimeout(), setInterval() 사용하면 지정한 시간이 흐른 다음 한번 이상의 호출되는 함수를 등록할 수 있다 Window 객체의 메서드로 정의되어 있다 실제 브라우저 창과는 아무 관련이 없다 브라우저 내장객체 window 객체 프로퍼티 status 브라우저의 상태바에 문자열을 출력하는 경우에 사용 defaultStatus 브라우저의 상태바에 초기 문자열을 설정 length 창안의 프레임 수 name 창 이름 self 현재 창 자신, window와 같음 window 현재 창 자신, self와 같음 parent 프레임에서 현재프레임의 상위프레임 top 현재프레임의 최상위프레임 opener open.. 더보기 [자바스크립트 완벽 가이드 정리] 함수 함수 함수 : 한 번 정의하면 몇 번이든 실행할 수 있고 호출 할 수 있는 자바스크립트 코드블록 매개변수 : 함수 몸체 내에서 지역변수처럼 취급 메서드 : 어떤 객체의 속성으로 저장된 자바스크립트 함수 생성자 : 새로 생성된 객체를 초기화 하는데 쓰이는 함수 자바스크립트 함수는 다른 함수 내에 중첩되어 정의될 수 있고 , 함수는 해당 함수가 정의되어있는 유효범위에 속한 어떤 변수에도 접근 가능하다 (클로저) 1. 함수 정의하기 - function - 함수이름 식별자(함수이름) - 쉼표로 구분된 0개혹은 임의 개수의 식별자들과 이 식별자들을 둘러싼 한 쌍의 괄호 - 0개 혹은 임의 개수의 자바스크립트 구문을 포함하는 한쌍의 중괄호 function 함수이름(전달인자1, 전달인자2, … ,전달인자n) { 구문.. 더보기 [자바스크립트 완벽 가이드 정리] 배열 배열 배열 : 정렬된 값의 집합 원소 : 배열 안의 값 인덱스 : 배열의 위치번호 자바스크립트 배열 타입이 고정적이지 않음 (같은 배열에 있는 원소의 값이 서로 다를 수 있다) 32비트 인덱스를 사용한다 크기가 동적이다 배열을 생성하거나 크기가 변경되어 다시 할당을 하더라도 배열 크기를 다시 선언할 필요가 없다 모든 배열은 객체 (배열이 객체의 프로토타입으로부터 속성들을 상속 받은 객체이기 때문) 1. 배열 만들기 1.1 배열 리터럴 배열 리터럴 사용하기 - 대괄호 안에 쉼표로 구분해 나열 한 것 - 값으로는 상수 뿐 아니라 임의의 표현식도 사용할 수 있다 - 객체 리터럴 또는 다은 배열 리터럴을 포함할 수 있다 - 배열 리터럴에서 빠진 부분이 존재할 경우, 해당 부분의 원소 값은 undefined가 된.. 더보기 [자바스크립트 완벽 가이드 정리] 구문 구문 구문 : 어떤 일을 하기 위해 실행 1. 표현문 가장 간단한 형태 : 부수효과가 있는 표현식 할당문 , 함수호출 등이 있음 2. 복합문과 빈 구문 하나의 표현식 안에 여러 표현식을 합칠 때에는 쉼표(,)연산자를 사용 2.1 구문블록 구문블록은 여러 구분을 중괄호로 감싼 것 - 세미콜론으로 끝나지 않음 - 들여쓰기를 해주는 것이 좋다 (가독성, 이해도) - 안에서 선언된 변수는 지역변수가 아닌 전역변수이다 2.2 빈 구문 자바스크립트 인터프리터는 빈 구문을 만나면 아무것도 실행하지 않는다 - 종종 몸체가 비어있는 루프를 만들 때 유용 - 임의로 빈 구문 사용시 코드에 고의로 사용했다는 설명을 주석으로 표시 3. 선언문 식별자를 정의, 변수나 함수를 생성하는 중요한 역할을 담당 var, function.. 더보기 [자바스크립트] 클로저 클로저 클로저 : 함수 내에 선언된 로컬 변수를 외부에서도 참조할 수 있는 기능 보는 관점에 따라 모든 자바스크립트 함수가 클로저라고 볼 수 있음 사용처 this.XXXX를 넘기기 위해 사용한다 private변수(보호 해야 할 변수)에 사용한다 주의점 클로저는 변수만 기억할 뿐 값은 기억 하지 않는다 반복문(for문)에서는 클로저를 사용하지 않는다 클로저를 이해하기 위한 예문 function closureTest(a){ return function(b){ return a + b; } } var test = closureTest(1); alert(test(2)); 1. closureTest(1)을 호출한 순간 아래의 영역에 var a =1이 생성되고 function(b){ return a+b; }가 tes.. 더보기 [자바스크립트] 콜백 함수 콜백 함수 디자인 패턴 중 하나인 옵저버 패턴에서 나온 개념 이벤트가 발생시 함수를 통해 전달하는 것 시계의 알람 기능과 비슷하다 (정해진 이벤트 발생시 함수 동작) 특정기능을 수행하기 위한 로직과 기능 수행후 반환되는 결과 값을 가지고 표현하는 로직을 분리 가능 뷰의 분리라는 관점으로 MVC패턴과 유사 아래와 같은 예문을 보면 undefined 값이 출력된다. (결과값이 alert 함수보다 늦게 가져오기 때문) onload=function() { var name; $.getJSON("test.json", "", function(res) { name = res.name; }); alert(name); } 시간차를 두어 해결 할 수는 있다. setTimeout(function() { alert(name);.. 더보기 [Tip] 자바스크립트의 부동 소수점 문제 부동 소수점 문제 JavaScript는 IEEE 754 방식을 사용해서 0.1 + 0.1 + 0.1 = 0.30000000...01 이런 오차가 발생한다 (C#도 같은 문제가 발생한다고 함...) 그래서 화폐단위는 . 을 사용하지 않는 센트 단위로 하는 것이 좋다고 한다 해결하기 위해선 소수점 고정인 toFixed 함수를 사용해서 자릿수 고정 후 자동 반올림 처리를 하면 된다 .toFixed(소숫점을 표현할 자릿수); ex) var num = 3.14159; var n=num.toFixed(2); 결과 : 3.14 ps : 불안하다면 그냥 소수점을 만들지 않는 방식을 택하는 것이 좋을 것 같음!! 더보기 [Tip] 스크립트 폼 엔터 서브밋 폼이 2 개 이상인 경우 엔터를 눌러도 submit 이 안되는 경우가 있다. 그럴때 사용하면 된다. 키값을 체크해 키가 눌리면 submit 을 해주는 방식이다. * Enter 의 kyeCode는 13 이다!! onKeydown="javascript:if(event.keyCode == 13) form.submit();" 더보기 이전 1 2 다음
