Gentleman'study 젠틀맨

setTimeout()과 setInterval()은 둘 다 자바스크립트에서 시간간격을 주는 함수입니다. 같은 목적의 함수이기는 하지만 둘 사이에는 약간의 차이가 있습니다. 헷갈려서 정리해 두려 합니다. setTimeout(function, delay)setInterval(function, delay) delay 시간 후에 딱 한 번 실행. delay 시간 마다 반복해서 호출 반복을 위해서는 재귀적으로 호출 한번만 호출하면 반복실행이 되기 때문에 코드가 간결 반복을 종료 : clearTimeout(timeoutName) 반복을 종료 : clearInterval(intervalName) setTimeout은 반복을 위해 함수를 재귀적으로 호출합니다. 따라서 함수 간의 딜레이가 정확하게 실행 될 수 있습니다...

this란? this는 함수에서 나타나는데, this키워드를 사용하면 그 함수를 호출한 주체(객체)를 가리키게 된다. 쉽게 말해서 '누가 이 함수를 불렀느냐'가 된다. const myObject = { printThis: function() { console.log(this); } } function printThis() { console.log(this); } myObject.printThis(); // {printThis: ƒ} printThis(); // Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …} 위 코드를 살펴보면, this를 콘솔에 출력하는 printThis라는 함수가 두 개 선언되어 있다. 첫..

콜백함수란? 콜백함수는 간단하게 다른 함수에 매개변수로 넘겨준 함수를 말한다. 매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출(called back)한다는 것이 콜백함수의 개념이다. function checkGang(count, link, good) { count < 3 ? link() : good(); } function linkGang() { console.log('1일 3깡은 기본입니다. 아래 링크를 통해 깡을 시청해주세요'); console.log('https://youtu.be/xqFvYsy4wE4'); } function goodGang() { console.log('오늘 할당량은 모두 채우셨습니다! :)') } checkGang(2, linkGang, goodGang); 예..

객체나 배열에 대해서 데이터를 불러올때 "..." 기호를 사용하는 방법 배열 const num = [100, 200, 300, 400, 500]; document.write(num); // 100, 200, 300, 400, 500 document.write(num[0], num[1], num[2], num[3], num[4]); // 100 200 300 400 500 (쉼표가 없다) document.write(...num); // ... 키워드를 사용, 100 200 300 400 500 (쉼표가 없다) 객체 const obj = {a: 100, b: 200, c:"javascript"}; document.write(...obj);// 100, 200, javascript 출력 변수에 저장한 뒤 불러..

Template literals 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 템플릿 리터럴은 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공합니다. ES2015 사양명세서에선 template strings라고 불렸습니다. 템플릿 리터럴은 런타임 시점에 일반 자바스크립트 문자열로 처리/변환됩니다. 프론트엔드에서는 HTML을 데이터와 결합해서 DOM을 다시 그려야 하는 일이 빈번하기 때문에, 템플릿을 좀 더 쉽게 편집하고 작성해야 할 필요가 있어서, 이러한 기능이 추가되었습니다.(자바스크립트 자체적으로 지원하기 전에도 라이브러리로 존재했습니다.) Syntax `string text` `string text line 1 string text line..

addEventListener()는 document의 특정요소(Id,class,tag 등등..) event(ex - click하면 함수를 실행하라, 마우스를 올리면 함수를 실행하라 등등.. )를 등록할 때 사용합니다. 예시로 살펴보겠습니다 #예시 버튼을 누르면 버튼에 적힌 값이 alert창으로 뜨는 스크립트입니다. #html A B C Copied! #js var cols = document.querySelectorAll("#cols .btn"); for (var i = 0; i < cols.length; i++) { cols[i].addEventListener("click", click); } cols[1].style.color = "red"; function click(e) { window.alert..

- setInterval 함수 : 일정한 시간 간격으로 작업을 수행하기 위해서 사용합니다.clearInterval 함수를 사용하여 중지할 수 있습니다. 주의할 점은 일정한 시간 간격으로 실행되는 작업이 그 시간 간격보다 오래걸릴 경우 문제가 발생할 수 있습니다. 1. setInterval 사용예 "시작" 버튼을 누르면 StartClock() 함수에서 timerId = setInterval(PrintTime, 1000); 을 호출하여 1000ms(1초) 간격으로 PrintTime() 함수를 호출하여 현재 시간을 출력합니다. 이때 반환값을 timerId 변수에 저장해 둡니다. 나중에 중지하는데 사용됩니다. setInterval함수를 호출하기전에 PrintTime()을 한번 호출 하는 이유는 setInterv..

자바스크립트를 통해 타자게임을 만들어 보았다. .split() 을 통해 각 단어단어를 쪼개고 input박스의 밸류값 또한 split()로 쪼갠 뒤 각각의 자리를 비교하여 correct / incorrect 클래스를 붙여주어 처리하였다. 중간 중간 오류가 많아 여러번 수정하였다. 자세한건 소스를 참고! 전체 사이트 보기

자바스크립트를 통해 뮤직플레이어를 만들었다. 태그를 이용하여 mp3파일을 연동시킬 수 있고 element.play(); element.stop();을 통해 오디오를 재생/정지 시킬 수 있다. 수업 중엔 배우지 않았지만 element.volume = 0~1 을 통해서 해당 오디오에 볼륨을 조절 할 수 있어서 기능을 추가하였다. 자세한건 사이트 참고하도록.. 전체 사이트 보기

자바스크립트 출력 자바스크립트는 여러 방법을 통해 결과물을 HTML 페이지에 출력할 수 있습니다. 자바스크립트에서 사용할 수 있는 출력 방법은 다음과 같습니다. 1. window.alert() 메소드 2. HTML DOM 요소를 이용한 innerHTML 프로퍼티 3. document.write() 메소드 4. console.log() 메소드 메소드(method)와 프로퍼티(property)에 대한 더 자세한 사항은 자바스크립트 객체의 개념 수업에서 확인할 수 있습니다. window.alert() 메소드 자바스크립트에서 가장 간단하게 데이터를 출력할 수 있는 방법은 window.alert() 메소드를 이용하는 것입니다. window.alert() 메소드는 브라우저와는 별도의 대화 상자를 띄워 사용자에게 데..

JavaScript / 반복문 / while, do - while 자바스크립트 반복문에는 while, do - while, for 세가지가 있습니다. while 문 기본 문법 var i = 0; while ( i < 10 ) { // do something i++; } i의 값이 0부터 9일 때까지 실행되고 i의 값이 10이면 실행되지 않고 다음으로 넘어갑니다. i의 값을 증가시키는 i++을 꼭 넣어야 한다는 것에 주의해야 합니다. 만약 i++이 없으면 i의 값이 계속 0이므로 무한 반복을 하게 됩니다. do - while과 for도 마찬가지입니다. while을 이용하여 1부터 10까지 출력하는 예제입니다. do while 문 기본 문법 var i = 0; do { // do something i++; ..

break문 반복문인 while 문 또는 for 문에서 break 문을 실행하면 조건식과 상관없이 강제로 반복문을 종료합니다. 즉, break 문은 반복문을 강제로 종료할 때 사용합니다. 다음은 for문과 while 문에서 break 문이 사용된 기본형입니다. break 문이 코드보다 앞에 있으므로 코드는 실행되지 않고 for 문과 while 문이 바로 종료됩니다. for(초깃갑; 조건식; 증감식){ break; // 반복문을 강제로 종료합니다. 자바스크립트 코드; } var 변수 = 초깃값; while(조건식){ break; // 반복문을 강제로 종료합니다. 자바스크립트 코드; 증감식; } 다음은 for 문을 이용하여 1부터 10까지 반복하도록 작성한 예제입니다. 그리고 break 문을 사용하여 변수 ..

조건문 조건문은 조건식의 값이 참(true)인지, 거짓(false)인지에 따라 자바스크립트 코드를 제어합니다. 조건문의 종류에는 if문, else문 그리고 else if문이 있습니다. if문 if문은 조건식을 만족(true)할 경우에만 코드를 실행합니다. 다음은 if문의 기본형입니다. 조건식은 앞에서 배웠던 Boolean()내장 메서드와 마찬가지로 그 어떤 데이터를 입력해도 true 또는 false를 반환합니다. 이 내용은 적용 예제를 보며 자세히 살펴보겠습니다. if(조건식) { 자바스크립트 코드; } 아래 예제에서 num

변수란? 변수(Variables)는 변하는 데이터(값)를 저장할 수 있는 메모리 공간입니다. 데이터를 담을 수 있는 그릇이라 할 수 있죠. 변수에는 데이터가 오직 한개만 저장됩니다. 그러다 보니 새로운데이터가 들어오면 기존에 있던 데이터는 메모리 공간에서 지워지게 됩니다. 변수에 저장할 수 있는 데이터의 종류로는 문자형(String), 숫자형(Number), 논리형(Boolean) 그리고 빈(Null) 데이터가 있습니다. 변수 선언 방법 변수를 선언할 때는 다음 기본형과 같이 var 키워드를 변수명 앞에 붙입니다. 변수명에는 한글을 사용할 수 없으며, 영문과 숫자 그리고 일부 특수 문자(_,$)만 포함할 수 있습니다. var 변수명 = 값; let 변수명 = 값; 변수명 자바스크립트에는 의미를 가진 단어..

연산자 연산의 방식을 결정하는 기호를 '연산자'라고 부르고 연산되는 대상을 '피연산자'라고 합니다. 우리에게 가장 익숙한 +, -, *, / 이 가장 대표적인 예라고 볼 수 있습니다. 산술연산자 기본적인 산술 연산자는 덧셈(+), 뺄셈 (-), 곱셈 (*), 나눗셈 (/)이 있습니다. 이밖에도 나머지(%), 거듭제곱(**) 연산 정도가 있는데, 일반적인 산술연산자는 피연산자 2개 사이에서 이항 연산자로도 활용되고, 특별히 ++(증가), --(감소) 연산자는 피연산자 앞이나 뒤에 붙으면서 단항 연산자로도 활용됩니다. 종류 기본형 설명 + A+B 더하기 - A-B 빼기 * A*B 곱하기 / A/B 나누기 % A%B 나머지 다음 예제를 통해 더하기, 빼기, 곱하기, 나누기, 나머지 연산자를 어떻게 사용하는지 ..

# 자바스크립트 객체(Object) 자바스크립트에서 원시 타입을 제외한 모든 데이터 타입(객체, 함수, 배열, 정규표현식 등)은 객체다. 객체는 여러가지 값을 가질 수 있으며, 함수도 가질 수 있다. 객체가 보유한 값을 '프로퍼티'라고 하며, 객체가 보유한 함수를 '메서드'라고 한다. (둘다 프로퍼티라고 하기도 한다) 객체의 프로퍼티와 메서드들은 '키값'으로 구분된다. var object ={ key1: value1, key2: value2, ... } # 객체 생성 방식 객체를 생성하는 방법은 3가지 정도가 있다. 1) 객체 리터럴, 2) 생성자 함수, 3) Object.create() 1. 객체 리터럴 방식(Object Literal) var obj = { key: value, ... } : 변수처럼..

기본 타입 타입(data type)이란 프로그램에서 다룰 수 있는 값의 종류를 의미합니다. 자바스크립트에서는 여러 가지 형태의 타입을 미리 정의하여 제공하고 있으며, 이것을 기본 타입이라고 합니다. 자바스크립트의 기본 타입은 크게 원시 타입과 객체 타입으로 구분할 수 있습니다. 원시 타입(primitive type)은 다음과 같습니다. 1. 숫자(number) 2. 문자열(string) 3. 불리언(boolean) 4. 심볼(symbol) : ECMAScript 6부터 제공됨 5. undefined var num = 10; // 숫자 var myName = "홍길동"; // 문자열 var str; // undefined 숫자(number)형 자바스크립트는 다른 언어와는 달리 정수와 실수를 따로 구분하지 ..

함수의 기초 함수(function)란? 함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미합니다. 이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있습니다. function addNum(x,y) { return x + y; } document.wrtie(addNum(2,3)); 자바스크립트 함수 자바스크립트에서는 함수도 하나의 타입(datatype)입니다. 따라서 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능합니다. 또한, 자바스크립트 함수는 다른 함수 내에 중첩되어 정의될 수도 있습니다. 함수의 정의 자바스크립트에서 함수의 정의는 function 키워드로 시작되며, 다음과 같은 구성요소를 가잡니다. 함수의 이름 괄호 안에 ..

반복문 프로그래밍에서는 반복되는 코드를 사용하는 경우가 많습니다. 이럴 때 반복문을 이용하여 코드를 간단하게 만들 수 있습니다. 반복문의 대표적인 구문은 for문과 while문이 있습니다. 다음은 for문과 while문을 통해 1부터 100까지 숫자를 출력 해보겠습니다. for문 { for (let i = 1; i