반응형

Javascript/자바스크립트 기초 11

모던 자바스크립트 입문 8장 함수 예제 - 랜덤 그리기

// 이 코드는 모던 자바스크립트 입문(徹底マスターJavaScriptの教科書) 에서 인용한 것입니다. // [ISBN #978-4797388640]. Copyright 2017 by 磯博 모던 자바스크립트 입문 중에서 8장 (함수) 의 8-22 예제를 첨부한다. 원래예제와는 조금 다르게 선이 뻗어나갈때마다 색이 바뀌도록설정했다. 재밌는 예제다. 위처럼 랜덤으로 선이 뻗어나간다. 시간이 별로 없어서 책을 빠르게 읽었는데 중간에 있던 예제들은 그냥 지나칠 수가 없어서 하나 하나 전부 만들어봤는데 정말 재밌는 예제가 많다. 서평이 굉장히 좋은 책이었는데 맞는것같다. (물론 무슨 코드지? 하고 한동안 들여다본 코드들도 있다. 특히 좌표관련 코드이다. 그것들도 막 이해가 안되는 그런게 아니라 좀 들여다보면 이해가..

call, apply, bind

call은 그냥 인수를 콤마로 하나씩 전달하면 된다. apply는 배열로 던져주면 된다. bind는 영구히 this값을 고정하고 싶을 때 해당 객체를 인수로 주면 된다. call과 apply는 결국 어떤 this값을 사용하고 싶을 지를 결정한다고 보면 된다. this 값이 핵심이다. 어떤 특정 함수에서 this값이 필요없는 경우가 있는데, 이 경우에는 call과 apply의 인수로 null을 준다. null대신 어떤 값이든 줘도 상관없다. 어차피 this 지정이 필요없기 때문이다.

자바스크립트 with 문

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

자바스크립트의 함수는 1급 객체이다.

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

innerHTML, innerText, textContent 각각의 차이점에 대해

예제를 진행하면서 자주 등장하는 이 세가지의 기능이 무엇이 다른 지 궁금해서 알아보았다. // 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 위의 하나의 코드만으로도 세가지의 차이점을 명확하게 ..

js파일 테스트하기 -> python을 활용한 간이 서버 (초간단 서버 운용)

로컬에 있는 텍스트파일의 내용을 읽어서 웹페이지에 표시하는 스크립트를 짰는데, 안타깝게도 firefox의 정책이 바뀐 듯하다. 분명 설명에는 firefox에서는 로컬의 파일을 읽어서 사용할 수 있다고 했는데, 해당 책이 좀 시간이 지나서인지는 모르겠는데, 동일출처정책에 위반된다는 에러때문에 아예 읽어올 수 조차 없었다. 처음 설명을 보면서 브라우저에서 로컬파일을 읽는다고? 해서 갸우뚱하지만 편하게 진행될거라 여겼는데, 역시나 다른 루트의 파일을 읽어오는 건 불가능했다. 뭐 firefox가 업데이트되면서 최신정책으로 바뀌면서 그렇게 된 걸 수도 있다. 이렇게 되면 예제를 실행시킬 수가 없게 되는데, 그래서 찾게 된 방법이 완전 초간단한 임시서버를 운용해서 거기서 나의 html예제를 실행시켜보려고 했다. 우..

자바스크립트 코드 난독화 및 해제사이트

모던 자바스크립트 입문 이라는 책에서 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..

event.cancelable 프로퍼티

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

createDocumentFragment()는 무슨 기능을 할까?

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

Navigator 객체의 vibrate() 메서드와 hoax 계열의 광고

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

CurrentTarget 프로퍼티란 무엇인가? <타블로그 복붙>

자바스크립트의 이벤트 중 클릭한 요소를 가져오는 방법으로 event 객체의 target 또는 currentTarget 프로퍼티를 사용합니다. 이때 이 둘의 차이점은 무엇이고 어떤 경우에 무엇을 사용해야하는지 알아봅니다. event.target event.currentTarget event.target은 이벤트버블링의 가장 마지막에 위치한 최하위의 요소를 반환합니다. 즉 클릭된 요소를 기준으로 사용하는 경우 event.target을 사용합니다. 하지만 event.currentTarget의 경우 이벤트가 바인딩된 요소, 해당하는 요소를 반환합니다. 아래 에제를 봐주세요. test 아래는 스크립트 코드입니다. function checkTarget(event) { var ele = event.currentTar..

반응형