본문 바로가기

전체 글48

JavaScript 와 Node.js Javascript는 웹 브라우저(크롬, 파이어폭스, 사파리, 익스플로러)가 있어야만 동작하는 언어이다. 구글이 JS를 발전시키면서 JS와 HTML만을 이용해서 Gmail을 만들었고 이후에 크롬, JS V8엔진등을 만들었다. Node.js는 JS기반으로 만들어진 사이드언어이다. JS의 웹이 있어야만 동작이 가능한 단점을 보완해서 터미널 프로그램(원도우 cmd, mac terminal 등)에서도 node를 입력하여 JS를 사용가능하도록 만들었다. 여기서 중요한 것은 Node.js를 통해 서버를 만들 수 있다는 점에서 차별점이 있다. 이전까지는 server-clint 웹사이트를 만들 때 웹에 표시된 부분은 JavaScript를, 서버는 루비나 자바 등을 이용해야만 했는데, 마침내 한가지 언어(JS)로 전체 .. 2021. 12. 31.
window.onload() JS는 코드를 순차적으로 읽어 들이는 프로그래밍 본연의 작동 방식과, 실행 이전에 여러 체크를 하지 않고 실행을 하는 인터프리터 언어적 특성으로 인해 작성 위치에 따라 에러를 발생시키기도 한다. hi 하지만 가독성이 떨어지므로 사용하는게 window.onload이다. window.onload 사용방법 hi 위의 코드와 같이 window.onload 함수를 오버라이딩(재정의)해주면 onload함수 내의 코드 스크립트는 웹브라우저 내의 모든 요소가 준비가 되어야만 실행이 되도록 할 수 있다. (웹브라우저 자체를 담당하는 window라는 객체가 웹 문서를 불러올 때, 문서가 사용되는 시점에 실행되는 onload라는 함수를 다시 재정의 한다는 개념이다.) window.onload와 페이지의 모든요소들이 로드되어.. 2021. 12. 30.
Calendar ** 자세한 코드는 GitHub kkomabono/vanilla_practice: Practice for vanilla_prep. (github.com) 에 업로드 아이디어 오늘의 요일, 날짜, 월, 연도 표기 - Date()메서드를 이용해서 현재시간을 받아온 후 textContent로 할당, 요일과 월은 해당 요일과 월이 숫자로 나오므로 함수를 작성해서 숫자로 나올 수 있도록 변환해서 출력하였다. 일~토 요일 라벨링 표기 - 태그를 새로 만들고 부모요소에 추가시켜준다. 이를 for문으로 반복 현재 월의 1일 판단 - 달력은 7일을 한 행으로 만드는 점에 착안해서 오늘 날짜를 받아서 7로 나눈 값과 오늘의 요일을 비교해서 1일을 판단했다. -> 그러나 이후에 좀 더 쉬운 방법을 찾아내어 작성한 코드는 더.. 2021. 12. 28.
Number Baseball **작성한 코드내용은 길이 관계상 GitHub에 업로드하였다. kkomabono/vanilla_practice: Practice for vanilla_prep. (github.com) 1) 게임 시작 버튼 만들기 - HTML로 작성 2) 게임 시작 버튼 클릭시 랜덤한 세 자리 숫자 만들기 - click 이벤트로 연결. Math.random()을 써서 랜덤숫자 생성, 세 자리 숫자이므로 0~9까지 출력하면 되는데 Math.floor()와 조합해서 Math.floor(Math.random())으로 0~9까지의 숫자 생성 3) 게임 시작 버튼을 누르면 2)를 수행하고 바로 숫자 입력칸이 팝업되도록 만들기 - prompt를 이용. 4) 만약 3)에서 잘못된 숫자를 입력하면 제대로 된 숫자를 입력할 때 까지 반복.. 2021. 12. 28.
underscore.js 라이브러리 Koans 퀴즈를 풀다가 var odd = _(numbers).filter(function (x) { return x % 2 !== 0 }); //.filter() _(numbers).filter ... 와 같은 _를 만나게 되었다. _는 언더바 라고 읽는데 MDN에서도 나오지 않았다. 구글링을 해보니 underscors.js라는 자바스크립트 라이브러리였다. underscore.js는 컬렉션, 배열을 처리하는데 유용한 라이브러리를 제공한다. underscore.js의 메서드들이 아래의 블로그에 잘 정리되어 있다. javascript underscore 언더스코어 정리 (tistory.com) javascript underscore 언더스코어 정리 언더스코어란? 용어설명 Context iteratee Co.. 2021. 12. 28.
Prototype 객체 프로토타입이란? JS는 프로토타입 기반 언어이다. 모든 객체는 메서드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체를 가진다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메서드와 속성을 상속받을 수 있다. 그 상위 프로토타입 객체도 마찬가지이다. 이것을 프로토타입 체인(Prototype Chain)이라고 한다. 상속되는 속성과 메서드들은 정확히는 각 객체라 아니라 객체의 생성자의 prototype 속성에 정의되어 있다. JS에서는 객체 인스턴스와 프로토타입 간에 연결(생성자의 prototype속성에서 파생된 __proto__속성으로 객체 인스턴스에 구현하고 있다)이 구성되며 이 연결을 따라 프로토타입 체인을 타고 올라가며 속성과 메서드를 탐색한다. ** 객체의 prototype(Obj.. 2021. 12. 28.