HTML5를 활용해서 만들수 있는 좋은 예제들을 찾아보던 중 재미있는 예제를 발견했습니다.
마우스를 누르면 볼이 생겨나고 물리엔진이 적용된듯한 모습으로 공들이 튕기네요~!!
브라우저 화면을 좌우로 움직이면 공에 관성의 법칙까지 적용된 모습을 보실 수 있습니다.
HTML5 Canvas를 지원하는 최신 브라우저에서 작동합니다. (IE9이상)
http://mrdoob.com에서 더 많은 예제들을 만나 보실수 있습니다.
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
지나친 질투는 내가 나를 죽이는 일입니다.
사랑의 나무는 두 연인이 정성스럽게 아끼고 보살펴 줄 때,
즉 진실로 사랑하는 마음으로 보듬어 주고
공동의 이념으로 물을 줄 때 서서히 자라난다.
하지만 나무가 잘 자라더라도 어느 날 갑자기
해충이나 자연의 피해를 입을 수 있으므로 관심을 기울여야 한다.
흔히 사람들은 사랑에 빠지면 바보가 된다고 말한다.
이는 사랑하는 사람에게 자신의 모든 것을 주고 싶어 하기 때문인데,
이것이 지나치면 사랑이 극단적인 방향으로 치닫기도 한다.
특히 지나친 질투와 의심은 개인의 이미지뿐 아니라 자아에도
부정적인 영향을 미치고 잘 나가던 애정 전선에 문제를 초래하기도 한다.
따라서 사랑에 빠진 사람들은 이 두 마리의 벌레가
사랑의 나무를 갉아먹지 않도록 주의해야 한다.
나폴레옹의 조카인 나폴레옹 3세는 당시
세상에서 가장 아름다웠던 여성인 유제니를 사랑하여 그녀와 결혼했다.
부와 건강, 권력과 명성, 사랑과 존경심을 모두 가진 이들 부부에게는
부족한 것이 없었다. 나폴레옹 3세도 자신이 그렇게까지 강렬한 사랑에 빠질 줄은
몰랐을 만큼 모든 것이 완벽하고 낭만적이었다.
하지만 불꽃같이 타오르던 그들의 사랑에도 불행은 있었다.
나폴레옹 3세의 사랑과 황제의 권력으로도 황후인 유제니의 질투와 의심을
막을 수가 없었던 것이다. 질투심이 너무 심한 나머지 그녀는
그가 개인적인 시간을 갖는 것도 허락하지 않았다.
유제니는 프랑스의 황후이자 당대 최고의 미녀였다.
하지만 질투와 의심에 빠져 스스로 자신의 존귀함과 아름다움을 잃었고
달콤한 사랑도 유지하지 못했다.
질투심은 누구에게나 있다. 특히 젊은 연인들 사이에서는
여러 가지 이유로 질투심이 생긴다. 하지만 그 정도가 지나쳐
상대방을 자신의 품에 넣으려고만 하면 그럴수록 연인은
몰래 도망칠 수밖에 없고 또 문제가 생길 수밖에 없다.
원래 사랑은 이기적인 것이기 때문에 연인들이 질투하는 것은
전혀 이상할 것이 없다. 단지 그것이 극단적으로 표현될 때가 문제다.
어찌 됐건 연인들이 서로에게 상처 주지 않고 사랑의 감정을 잘 키우려면
질투의 장난에 놀아나서는 안 된다.
-류차오핑의 <첫번째 인생 교과서>중에서
세익스피어의 <오델로>에는 작품에 유명한 말이 있죠.
“공기처럼 가벼운 사소한 일도, 질투하는 이에게는 성서의 증거처럼 강력한 확증이다.”
지나친 질투는 내가 나를 죽이는 일입니다.