JavaScript 썸네일형 리스트형 javascript code beautify (pretty print) HTML에서 코드를 이쁘게 표현하기 위한 javascript 라이브러리를 찾아봤다. 내가 하고 싶은 것은 아래 세가지 였고 다했다. 1. 내가 화면에 보여줄 code (xml)의 HTML escaping INPUT : "" OUTPUT : "" 해결 : 간단한 html escaping 함수 function escapeHtml(unsafe) { return unsafe .replace(/&/g, "&") .replace(//g, ">") .replace(/"/g, """) .replace(/'/g, "'"); } 2. 한줄로 되어 있는 xml string의 auto indentation INPUT bbb ]]> OUTPUT bbb ]]> 해결 : vkBeauti.. 더보기 javascript class 상속 javaacript class를 만들고 상속하는 방법을 책에서 찾았는데 내가 이해한데로 정리한다. 먼저 javascript의 Object 클래스를 살펴본다. 자바스크립트에서는 객체를 만들면 객체들은 항상 하나의 prototype을 참조하고 있다. 이해가 안되도 같이 보쟈. 자바스크립트 콘솔에서 아래와 같이 Object.prototype이라고 치면 Object의 prototype객체를 return한다. 그러니까 class가 정의된 순간부터 prototype이라는 변수(property)에 이미 객체를 생성해서 가지고 있는 것이다. 진짜인지 아닌지 보자. property가 상속되는 것을 보기 위해 sum이라는 함수를 하나 추가했다. class를 선언하기만 했는데 MyObj클래스의 내부에는 이미 prototyp.. 더보기 javascript this javascript의 this에 대해서 궁금했는데 잘 설명해 놓은 글이 있어서 링크해놓는다. http://www.quirksmode.org/js/this.html Owner 아래에서 this는 어떤 것을 가리키고 있을까? function doSomething() { this.style.color = '#cc0000';} 자바스크립트에서 this는 항상 "owner"를 가리킨다. owner란 function을 실행시킨 객체를 가리키며 다른말로, function을 소유하고 있는 object라고 이해하면 되겠다. 위에서 this는 window object를 가리킨다. ------------ window --------------------------------------| / \ | | | | | this |.. 더보기 CSS와 Javascript로 Dom에서 node 위치 변경하기 Rotate! 위의 돌아가는 네게의 창은 div 네개로 만들어져있다. HTML은 아래같이 해놓았다. (더보기를 클릭) Div 하나에 4개의 div를 넣고 각각에 색칠을 해놓은 것 뿐이다. 그럼 저걸 돌아가게 만들어보쟈~! Rotate! 위와 같이 rotate 함수를 만들어서 setInterval로 1초마다 호출해주면 div_container에서 class가 r_div인 div 네개를 꺼내서 돌아가는 것처럼 보이게 순서를 재배치 해준다. 브라우저가 div를 다시 그려주기 때문에 돈는 것 처럼 보인다. Rotate 버튼을 눌러도 돈다~~ 구글 크롬의 개발자 도구 (F12를 누르면 나옴) 에서 살펴보면 1초마다 layout을 변경하고 paint를 다시 하는 것을 볼 수 있다. 한마디로 좋지 않음 ㅎ node들.. 더보기 이전 1 다음
