HTML5를 활용해서 만들수 있는 좋은 예제들을 찾아보던 중 재미있는 예제를 발견했습니다.
마우스를 누르면 볼이 생겨나고 물리엔진이 적용된듯한 모습으로 공들이 튕기네요~!!
브라우저 화면을 좌우로 움직이면 공에 관성의 법칙까지 적용된 모습을 보실 수 있습니다.
HTML5 Canvas를 지원하는 최신 브라우저에서 작동합니다. (IE9이상)
http://mrdoob.com에서 더 많은 예제들을 만나 보실수 있습니다.
카테고리 보관물: Front-End Development
SyntaxHighlighter
자바스크립트 와 CSS등…을 편집기처럼
스타일링 해서 게시글에 표현하고 싶을때 사용하시면 됩니다.
사용법은 아래와 같습니다.
- http://alexgorbatchev.com 에 접속한다.
- 우측 Download 페이지로 이동한다.
- 다운받은 파일에서 아래 파일을 자신의 경로에 맞춰서 페이지 <head> 내부 또는 </body> 위에 입력시킨다.
<link href=”stylesheets/shCoreDefault.css” rel=”stylesheet” type=”text/css” /> (필수)
<script src=”javascripts/lib/shCore.js” type=”text/javascript”></script> (필수)
<script src=”javascripts/lib/shBrushJScript.js” type=”text/javascript”></script> (스크립트 스타일링시 필요)
<script src=”javascripts/lib/shBrushCss.js” type=”text/javascript”></script> (CSS 스타일링시 필요)
<script type=”text/javascript”>SyntaxHighlighter.all();</script> (스타일링 실행 필요) - 아래와 같이 js스타일링, css스타일링을 원하는 곳에 <pre class=”brush: js;”>, <pre class=”brush: css;”>태그로 감싸준다.
- 짠~! 잘나오면 성공~!
function myFunction(){
var foo;
if(foo == true){
}
}
Javascript 배열 메서드
Javascript Array클래스에 정의되어있는 배열 메서드에 대하여 알아보자.
join()
Array.join()메서드는 배열의 모든 원소를 문자열로 변환하고 이어 붙여서 반환한다.
var a = [1, 2, 3]; //3개의 원소를 가진 배열을 생성
var s = a.join(); //s == “1,2,3”
s = a.join(“, “); //s == “1, 2, 3”
Array.join() 메서드는 String.split() 메서드와 반대되는 기능을 한다.
reverse()
Array.reverse() 메서드는 이름에서도 알 수 있듯이 배열 안의 원소 순서를 반대로 정렬하여 반환한다.
var a = new Array(1,2,3); // a[0] = 1, a[1] = 2, a[2] = 3
a.reverse(); // now a[0] = 3, a[1] = 2. a[2] = 1
var s = a.join(); // s == “3,2,1”
sort()
Array.sort() 메서드는 배열 안의 원소들을 정렬하여 반환한다.
var a = new Array(“c”, “a”, “b”);
a.sort();
var s = a.join(“, “); // s== “a, b, c”
알파벳순이 아니라 다른 순서로 배열을 정렬하려면 sort() 메서드의 전달인자를 통해 비교 함수를 직접 명시해주어야 한다. 비교 함수는 전달인자를 두개 받아서, 정렬된 배열 상에서 어떤 것이 먼저 나타나야 하는지 판단하는데 사용 된다. 만약 첫 번째 전달인자가 두 번째보다 먼저 나타나야 한다면 비교 함수는 0보다 작은 숫자를 반환해야 한다. 첫 번째 전달인자가 두 번째보다 뒤에 나타나야 한다면 0보다 큰 숫자를 반환하며 두 값이 동등하다면 0을 반환해야 한다.
var a = [33, 4, 1111, 222];
a.sort(); // 알파벳순 : 1111, 222, 33, 4
a.sort(function(a,b) { // 번호순 : 4, 33, 222, 1111
return a-b;
});
concat()
Array.concat() 메서드는 본래 배열의 모든 원소에 concat() 메서드의 전달인자들을 전부 이어붙인 배열을 새롭게 생성하여 반환한다.
var a = [1, 2, 3];
a.concat(4, 5); // [1,2,3,4,5]
a.concat([4,5]); // [1,2,3,4,5]
a.concat([4.5], [6,7]); // [1,2,3,4,5,6,7]
a.concat([4, [5,[6,7]]]); // [1,2,3,4,5,[6,7]]
slice()
Array.slice() 메서드는 배열의 일부분 혹은 부분 배열을 반환한다.
var a = [1,2,3,4,5];
a.slice(0, 3); // [1,2,3]
a.slice(3); // [4,5]
a.slice(1, -1); // [2,3,4]
a.slice(-3,-2); // [3]
splice()
Array.splice() 메서드는 배열에 원소를 삽입하거나 원소를 제거하려 할 때 범용적으로 사용할 수 있는 메서드이다.
var a = [1,2,3,4,5,6,7,8];
a.splice(4); // [5,6,7,8] , a는 [1,2,3,4];
a.splice(1,2); // [2,3] , a는 [1,4];
a.splice(1,1); // [4] , a는 [1]
push() & pop()
위 메서드를 사용하면 배열을 마치 스택인 것처럼 조작할 수 있다.
push() 메서드는 하나 혹은 그 이상의 원소들을 배열의 끝 부분에 이어 붙이고 배열의 새로운 길이를 반환한다.
pop() 메서드는 push()와 반대로 작동한다. 즉 pop() 메서드는 배열의 마지막 원소를 제거하고 배열의 길이를 감소시킨 후 배열에서 제거한 원소를 반환한다.
var stack = []; // stack:[]
stack.push(1,2); // stack:[1,2] 2를 반환
stack.pop(); // stack:[1] 2를 반환
stack.push(3); // stack:[1,3] 3를 반환
stack.pop(); // stack:[1] 3를 반환
stack.push(4,5); // stack:[1, [4,5]] 2를 반환
stack.pop(); // stack:[1] [4,5]를 반환
stack.pop(); // stack:[] 1를 반환
unshift() & shift()
push(), pop()과 유사하며 이 메서들은 배열의 끝이 아니라 배열의 맨 앞에 원소를 삽입하고 제거한다.
var a = []; // a:[]
a.unshift(1); // a:[1]
a.unshift(22); // a:[22, 1]
a.shift(); // a:[1]
a.unshift(3,[4,5]); // a:[3,[4,5],1]
a.shift(); // a:[[4,5],1]
a.shift(); // a:[1]
a.shift(); // a:[]
출처 : http://using.tistory.com/40