Razelo 기술노트

자바스크립트에 대해 궁금한 걸 몇개 검색하다보니 with 문이라는 구문이 눈에 들어왔다. 처음 보는 구문이라 자세히 살펴보니 재밌는 기능이라는 생각이 들었다. 어려운 기능도 아니다. 쉽다. { } 안에 있는 수식들을 잘 살펴보면 Math 가 빠져있다. 그 이유는 이미 with 에서 Math를 생략하고 써도 된다고 말해주고 있기 때문이다. 결과도 y값 찍어보면 잘 나오는 걸 확인할 수 있다. 반복적으로 사용하는 경우에 코드를 줄일 수 있는 좋은 방법인 것 같다.

자바스크립트의 함수는 1급 객체이다라는 말이 있다. 이 말은 무슨 말일까? first-class-citizens 라고 할 수 있다. 보통 다른 객체들에게 적용 가능한 연산을 모두 지원하는 객체를 말한다. 이러한 연산에는 매개변수로 전달되고, 함수에서 반환되고, 수정되고, 변수에 할당되는 작업이 포함된다. 쉽게 말해서 프로그래밍 언어에서 type을 전달, 반환, 할당할 수 있는 경우 해당 type을 1급 객체로 간주한다. 그러므로 javascript에서 함수는 다음과 같은 조건을 만족하므로 1급 객체라고 할 수 있는 것이다. 1. 함수를 변수나 데이터에 할당할 수 있다. 2. 함수를 인자로 전달할 수 있다. 3. 함수를 리턴할 수 있다.

모던 자바스크립트 입문을 공부하는 도중 좀 복잡한 코드를 마주하게 되었다. 코드를 읽다가 도움이 될 수 있는 단서를 하나 발견했는데, 바로 가중 산술 평균이다. 가중 산술 평균은 가중 산술 평균은 자료의 평균을 구할 때 자료 값의 중요도나 영향 정도에 해당하는 가중치를 반영하여 구한 평균값이다. 라고 위키에 정의되어 있다. 그리고 아주 아주 친절한 부가설명도 존재한다. 출처: ko.wikipedia.org/wiki/%EA%B0%80%EC%A4%91_%EC%82%B0%EC%88%A0_%ED%8F%89%EA%B7%A0 딱 한번만 읽어봐도 이해가 될 정도로 간단한 예제이다. 즉 가중치를 분모로 잡아서 모두 더하고, 분자에는 해당 값들과의 곱을 더해서 평균을 구하는 것이다. 따라서 위처럼 픽셀의 정중앙의 값을 ..

최근에 모던 자바스크립트 입문이라는 책을 통해 자바스크립트를 공부 중인데, 17장에 보면 MVC 모델을 기반으로 하여 생명 게임 시뮬레이터를 실습하는 부분이 있다. 상당히 퀄리티 좋은 예제이고, 챕터 전체가 한 예제를 다루는 (입문으로 치면) 꽤 난이도 괜찮은 예제이다. 예제 중에서 특정 객체의 메소드가 이해가 되지 않아서 직접 어떻게 동작하는 지 그려보면서 알아봤는데, 이런 방법도 있구나 하고 놀라게 되었다. 해당 코드는 다음과 같다. state.getSumAround = function(ix,iy) { var dx = [ 0, 1, 1, 1, 0,-1,-1,-1]; var dy = [ 1, 1, 0,-1,-1,-1, 0, 1]; // 주기적 경계 조건 for(var k=0,sum=0; k

예제를 진행하면서 자주 등장하는 이 세가지의 기능이 무엇이 다른지 궁금해서 알아보았다. // HTML 이 다음과 같다고 가정할 때, Keep Calm and Drink Coffee Sometimes, Tea // JavaScript const statement = document.querySelector('#statement'); statement.innerHTML; // Keep Calm and Drink CoffeeSometimes, Tea statement.innerText; // Keep Calm and Drink Coffee statement.textContent; // Keep Calm and Drink CofeeSometimes, Tea 위의 하나의 코드만으로도 세가지의 차이점을 명확하게 알..

모던 자바스크립트 입문 이라는 책에서 15장 마지막 예제가 있는데, (그림판을 만드는 예제이다.) 예제 파일에 있는 코드가 난독화되어있다. 아마 설명을 보고 직접 작성하라는 뜻이겠지만... 답답해서 먼저 복호화 시켰다. 아래는 코드 난독화를 다시 복호화시킬 수 있는 사이트이다. www.strictly-software.com/unpack-javascript Javascript Unpacker Tool - Strictly Software This Javascript unpacker tool has now been upgraded to allow it to unpack multiple eval statements. So if your packed code has itself been packed a few t..

버튼 cancelable 값을 alert 로 찍어보는 예제이다. 그런데 해당 예제를 실행하는 와중에 이해가 안되는 동작이 존재했다. 우선 처음 실행했을 때 동작은 다음과 같다. 보다시피 alert 창으로 cancelable 프로퍼티의 값이 찍히게 된다. 내가 설정한 false 값으로 잘 출력되는 것을 볼 수 있다. 그리고 여기서 확인을 누르면 다음과 같이 표시된다. button 태그를 body에 정의해놓았다. 그런데 여기서 버튼을 다시 클릭하게 되면 다음과 같은 결과를 확인할 수가 있다. 맨 처음의 cancelable 의 값이 찍힌 건 false 였다. 스크립트에서 event.initEvent("click",true,false); 에서 세번째의 인수인 cancelable에 false를 잘 전달했는데, 갑..

노드를 생성하는 메서드들을 살펴보던 중 createDocumentFragment()라는 메서드를 발견했다. 다른 메서드들은 무난하게 설명이 이해가 됬는데, 이 메서드는 설명란에 도큐먼트 프래크먼트 라고만 적혀 있었다. 그래서 찾아보게 되었다. 해당 블로그에서 많은 도움을 얻었다. 출처: programmer-seva.tistory.com/60 DocumentFragment 노드를 생성해서 사용하면 라이브DOM 트리 외부에 경량화된 문서 DOM을 만들 수 있다. 마치 라이브 DOM 트리처럼 작동하되, 메모리상에서만 존재하는 빈 문서 템플릿으로 생각하면 된다. 자식 노드를 메모리상에서 손쉽게 조작한 후 라이브 DOM에 추가하는 것도 가능하다. 라고 설명 되어있는데, 해당 블로그의 코드들을 살펴보고 설명을 계속..

Navigator 객체를 살펴보던 중 재밌는 메서드를 발견했다. vibrate() 메서드인데, 단말기를 진동시키는 메서드이다. 웹 브라우저에서 직접 디바이스를 컨트롤할줄은 몰랐는데, 진동을 시킬 수 있다는 게 신기했다. 그리고 검색해보니 이 메서드가 hoax 계열의 광고에서 자주 사용한다는 것을 알게 되었다. 가끔 웹서핑을 하다가 이상한 사이트에 접속하거나 하게 되면, 갑자기 배터리가 부족? 하다거나 바이러스에 감염되었다거나 디바이스에 치명적인 손상이 있다는 둥 갑자기 번쩍거리는 이펙트와 함께 진동이 울리면서 창들이 막 뜨게 되는 경우가 있다. 그런데 이 허위 광고에 속는 사람들도 꽤 많아서 아직까지 많이 쓰이고 있다고 한다. 그리고 여기서 바로 진동 이펙트를 주기 위해서 vibrate() 메서드를 사용..