본문 바로가기

MENU

7day - 함수와 프로토타입 체이닝 (1) 저번주는 한주 쉬어가는 시간을 가지면서 원기보충을 한거같지만 사실 더 피곤하다.드디어 배열이 끝나서 이제 함수로 넘어가도록 해보자 산넘고 물을 건넜더니 또 산이있다. 함수와 프로토타입 체이닝 자바스크립트에서 가장 중요한 개념 1순위 그건 함수이다. 함수를 얼마나 이해하고 활용하느냐에 따라서 고급 자바스크립트 개발자가 되느냐 마느냐를 결정할 정도이니깐 그만큼 중요하니깐 정신차리고 시작하자.이번 장에서는 특정기능을 제공하는 코드를 정의하고, 모듈화처리, 클로저, 객체생성 등 자바스크립트의 근간이 되는 많은 기능을 알아본다.1)함수 정의자바스크립트에서 함수를 생성하는 3가지 방법을 제공한다.함수 선언문함수표현식Function() 생성자 함수 1-1)함수 리터럴 함수도 일반 객체처럼 값으로 취급된다. 객체리터럴.. 더보기
jQuery - BookBlock 플러그인을 잘 안쓰긴하지만 그래도 실무에서나 보통 제작할때는 시간 단축을 위해 플러그인을 사용한다. 그래서 나도 수정이나 원하는대로 커스터마이징을 할려면 써봐야 하기때문에 지금 제작준비중인 코카콜라 리뉴얼페이지에 들어갈 book모션 이벤트는 플러그인을 써볼까 해서 찾아보았다. 링크:http://tympanus.net/codrops/2013/05/28/bookblock-revised/ 구글링 해보니깐 상당히 여러종류가 있지만 아무래도 이벤트가 크다 보니깐 저사양PC에서도 잘 돌아갈만한 가벼운 플러그인을 골라보았다. 링크:http://creatijin.dothome.co.kr/project/plugin/book/book.html 지금은 테스트로 이미지정도랑 사이즈 조절 정도만 해봤는데 상당히 괜찬은 플러그인.. 더보기
여행 필수품 소형 진공장치 ‘바고’ - ZDnet 해외여행은 안가지만 여행이나 캠핑을 좋아하는 나로서는 눈길을 사로잡는 물건을 보았다. 사진만으로는 감이 안 오지만 소형 진공포장기다.가끔 마트 가면 보는 진공포장되어 있는 식자재들을 보는데 그런 느낌으로 옷의 부피를 줄여준다.1박2일 정도 여행에는 쓸 일이 별로 없을 거 같지만 장기간이나 해외여행에는 많은 도움이 될 거 같다. 'VAGO'는 소형으로써 휴대도 간편하고 사용법도 간단하다. 부피는 줄일 수 있지만 무게는 그대로이기 때문에 비행기 탑승 시 무게 제한을 잘 고려해야 된다.바고(VAGO)는 크라우드 펀딩 사이트 킥스타터를 통해 자금 조달을 하는데 얼마나 관심과 핫하면 기간이 1달이나 남았는데 목표자금 4 배이상을 모았다. (핫 아이템인거 같은 느낌이 팍팍!)색상도 다양하고 가격도 할인가 31달러 .. 더보기
javascript - wheel_scroll 요즘 이론 공부하느냐고 만들시간이 없었지만 한달전에 만들어둔거가 기억나서 올리려한다. 스터디분이 이런거 해보면 어떠냐고해서 만들기 시작한건데 스크롤값을 정해두고 해당스크롤로 이동하는게 아니고 동일한 id,class를 추가한 블럭만큼 움직이게하는건데 이게 생각보다 편하고 버그도 없다. 링크:http://creatijin.dothome.co.kr/scroll/class_scroll/scroll.html 내가 개발했다고는 말은 못하고 다른사람이 한걸 토대로 좀 더 기능을 추가해보았다. 마우스 휠에 따라 위 아래로 이동하고 위에 상단 버튼을 클릭하면 그 해당하는 section으로 이동하게끔 추가를 했고 위에 메뉴바도 따라다니게 만들어놨다. 처음 포폴만들떄는 해당 스크롤값을 수작업으로 입력했는데 이제는 그럴필요없.. 더보기
6day - 데이터 타입과 연산자(5) 1-1)Array( ) 생성자 함수 배열 리터럴도 결국 자바스크립트에서 기본 제공 Array () 생성자 함수로 배열을 생성하는 과정을 단순화시킨 것이다.간단하게 Array() 생성자 함수를 알아보자.(개발자들은 배열 리터럴대신 Array() 함수를 사용한다.)1234567var foo = new Array(3);console.log(foo); // undefined x 3console.log(foo.length) // 3 var bar = new Array( 1, 2, 3 );console.log(bar); // [ 1, 2, 3 ]console.log(bar.length) // 3csArray () 생성자 함수를 호출할때 인자 개수에 따라 동작이 다르므로 주의 해야한다.호출할 때 인자가 1개이고, 숫.. 더보기
5day - 데이터 타입과 연산자(4) 이번장은 중요한지 내용이 길다. 1)배열배열은 자바스크립트 객체의 특별한 형태이다.크기를 지정하지 않아도 되고 어떠한 위치에 어느 타입의 데이터를 저장하더라도 에러가 발생하지 않는다. 1-1)배열 리터럴앞에서 객체 리터럴을 경험해봐서 비슷하다. 다른점은 대괄호( [ ] )를 사용한다.123456//배열 리터럴을 통한 5개 원소를 가진 배열 생성 var colorArr = ['orange', 'yellow, 'blue', 'green', 'red'];console.log(colorArr[0]); //orangeconsole.log(colorArr[1]); //yellowconsole.log(colorArr[4]); //redcs객체 리터럴에서는 프로퍼티 이름과 프러퍼티 값을 모두 표기해야 했지만, 배열 리.. 더보기
구글 크롬 새 버전, 윈도XP 지원 종료 - ZDnet 기사를 읽으면서 이제 점점 윈도우 XP의 자리가 사라지는 걸 느낀달까? 구글은 크롬 50버전을 공개하면서 윈도우 XP 나 그 이하 OS는 지원하지 않는 방침을 공개했다.이번 나오는 크롬 50버전은 여러가지 기능이 개선되었는데 사용자의 행동패턴?을 분석해야 한 달까?알림 창이나 팝업창을 언제 닫는지 같은 행동을 분석해서 자동으로 설정을 해준다.뭐 여타 이러한 여러 기능들이 개선되면서 웹 개발 환경이나 사용 환경이 좋아지면 좋겠다. 더보기
4day - 데이터 타입과 연산자(3) 이번에는 참조 타입의 특성을 알아보도록 하자1)참조 타입의 특성객체를 참조 타입이라고 부르는데 그 이유는객체의 모든 연산이 실제 값이 아닌 참조 값으로 처리되기 때문이다.1234567891011var objA = { val : 40}; var objB = objA;console.log(objA.val); // 40console.log(objB.val); // 40 objB.val = 50;console.log(objA.val); // 50console.log(objB.val); // 50cs처음 objA 객체를 객체 리터럴 방식으로 생성한다.(객체 자체를 저장하고 있는 것이 아니라 생성된 객체를 가르키는 참조값을 저장하고 있다.) objB에 objA값을 할당한다. (objB에는 objA와 같은 참조값이 .. 더보기

티스토리툴바