whatisthis?

턴제 게임 - 텍스트 기반 RGP - 진행사항 javaScript. 턴제 게임 - 텍스트 기반 RPG (中) 턴제 게임 - 텍스트 기반 RGP - 지난번 진행사항 javaScript. 턴제 게임 - 텍스트 기반 RPG (上) 턴제 게임 - 텍스트 기반 RGP skill html / css javascript 텍스트 RPG style.css * { margin: 0; box-s.. mywebproject.tistory.com index.html 시작 1.모험 2.휴식 3.종료 입력 1.공격 2.회복 3.도망 입력 - 스타일 적용 (flex)을 위한 container div를 추가했다. - input 태그에 required속성 / placeholder / maxlength를 추가하였다. style.css *..

턴제 게임 - 텍스트 기반 RGP - 지난번 진행사항 javaScript. 턴제 게임 - 텍스트 기반 RPG (上) 턴제 게임 - 텍스트 기반 RGP skill html / css javascript 텍스트 RPG style.css * { margin: 0; box-sizing : border-box; } html { font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-ser.. mywebproject.tistory.com index.html 시작 1.모험 2.휴식 3.종료 입력 1.공격 2.회복 3.도망 입력 turn.js let TurnGame = (function() { let instance; let initiate = function..

턴제 게임 - 텍스트 기반 RGP skill html / css javascript javaScript. 자동 텍스트 RPG 게임 자동 텍스트 RPG 게임 index.html 텍스트 RPG style.css * { margin: 0; box-sizing : border-box; } html { font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-s.. mywebproject.tistory.com 지난 실습으로 해봤던 자동 텍스트 RPG 게임을 토대로 제작했음. - 자동텍스트 RPG게임은 게임과 사용자의 interaction이 '이름 입력' 하나밖에 없었다면, 이번에 제작할 게임은 '턴(turn)'의 개념..

함수형 프로그래밍 - 객체지향 프로그래밍(OOP)과는 다르다. - 함수형 프로그래밍은 '함수를 기반'으로 돌아간다. - 자바스크립트는 기본적으로 객체지향이므로, 완벽하게 함수형 프로그래밍을 할 수는 없다. 입출력이 순수한 함수여야 한다. 부작용(부산물)이 없어야 한다. 함수와 데이터를 중점으로 생각한다. (객체랑은 다름) 💡 입출력이 순수하다? (= 순수함수) >> 하나 이상의 인자를 받고, 받은 인자를 처리하여 결과 리턴해야함. - 인자 제외한 다른 변수는 사용해선 X. - 받은 인자만으로 결과 도출해야함. ❕ 자바스크립트에서는 this라는 개념 때문에 순수함수를 사용하기 힘들다. 💡 부작용이 없다? - 프로그래머가 바꾸려는 변수 외에는 바뀌어서는 X. - 원본 Data는 불변. >> 함수형 프로그래밍..

자바스크립트 디자인 패턴 - 자바스크립트 앱을 만들 때 자주 사용되는 패턴 1) 모듈 패턴 (=IIFE) - 비공개 변수를 만드는 것. (원래 js에는 없는 기능임) javaScript. IIFE(즉시 호출 함수 표현식) IIFE 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 선언하자마자 즉시 실행되는 Javascript Function 를 말한다. 다른 말로 모듈 패턴(Module Pattern)이라고도 함. SYNTAX (function (.. mywebproject.tistory.com 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 선언하자마자 즉시 실행(=호출)되는 Javasc..

자바스크립트에서는 일반 String / Number / Boolean 값을 다음과 같이 복사(copy)할 수 있다. const string = 'hello'; const copy = string; copy; // 'hello' function sayHello() { console.log('hello'); } const copyFunc = sayHello; 자바스크립트에서는 null과 undefined 를 제외한 모든 타입이 객체이므로 '객체' = 함수, 배열, 일반 객체도 복사할 수 있다. ❕ 단, 복사된 값을 조작할 때 차이가 있다. let string = 'hello'; let copy = string; copy = 'bye'; // 복사본의 값을 바꿔줌 string; // 'hello' ㅡ 원본은 ..

지난 강의에서는 숫자 / 배열 / 문자열에 대한 메서드를 배웠었다. (예> Number.toFixed() / Array.join() / String.split() 등) javaScript. (9) 배열(Array) 배열에 관한 Method 1) 배열.length let array= [1, 2, 3, 4]; array.length; // 4 배열의 길이를 알려준다. 배열의 요소가 추가/제거 될 때 마다 자동으로 바뀐다. let array = [1, 2, 3, 4, 5]; array.length; /.. mywebproject.tistory.com javaScript. (8) 숫자와 Math 객체 숫자(Number) - 숫자 또한 원시 래퍼 객체 (new Number()) 가 존재하고, 메소드를 가질 수 있..

javaScript. (20) Event Listener / Callback 📌 Event Listener - 해당 이벤트에 대해 대기중인 것. (상시 Listening 중) - 이벤트가 발생했을때 등록했던 이벤트 리스너가 실행됨. window.onload = function () { alert('I\'m loaded'); }; - 대표적인 이벤.. mywebproject.tistory.com 지난 포스팅에서 Callback에 대한 이해가 잘 안되는 것 같아 추가로 Callback에 대해 포스팅해보겠다. 콜백에 대해 설명하기에 앞서, 비동기 처리가 무엇인지에 대해 먼저 알아보자. 비동기는 동기식에 반대되는 개념으로, 둘을 비교해보면 다음과 같다. Syncronous (동기식) 요청을 보낸 후 해당 요청의..

📌 Event Listener - 해당 이벤트에 대해 대기중인 것. (상시 Listening 중) - 이벤트가 발생했을때 등록했던 이벤트 리스너가 실행됨. window.onload = function () { alert('I\'m loaded'); }; - 대표적인 이벤트리스너 코드임. - window가 load 될때 function 부분이 실행되는 것. 이벤트리스너는 항상 on + '이벤트명'으로 명명된다. 예> onclick ** 자주 쓰이는 이벤트 목록 onchange 객체 내용이 바뀌고 / 포커스를 잃을 때 onclick 객체를 클릭할 때 ondblclick 객체를 더블클릭할 때 onerror 에러가 발생했을 때 onfocus 객체에 포커스되었을 때 onblur 객체가 포커스를 잃을 때 onkey..

javaScript. 자동 텍스트 RPG 게임 자동 텍스트 RPG 게임 index.html 텍스트 RPG style.css * { margin: 0; box-sizing : border-box; } html { font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-s.. mywebproject.tistory.com 지난시간 제작해보았던 자동 텍스트 RPG 게임의 기능을 추가하고, 더 개선된 버전을 제작해보았다. 이전 코드는 아래 [더보기] 를 참고 🔻 더보기 index.html style.css * { margin: 0; box-sizing : border-box; } html { font-family:Impact, Hae..