Frontend (278) 썸네일형 리스트형 [JavaScript] Parameter 기본값 [파라미터와 아규먼트] 파라미터를 활용하면, 전달하는 값에 따라서 다양한 결과로 동작함. function greeting (name) { console.log(`안녕하세요. 제 이름은 ${name} 입니다.`); } greeting('김철수'); //안녕하세요. 제 이름은 김철수 입니다. greeting('이훈이'); //안녕하세요. 제 이름은 이훈이 입니다. greeting('신짱구'); //안녕하세요. 제 이름은 신짱구 입니다. '김철수', '이훈이', '신짱구' 와 같이 파라미터에 전달되는 값을 아규먼트(Argument) 라고 함. [파라미터의 기본값] function greeting (name) { console.log(`안녕하세요. 제 이름은 ${name} 입니다.`); } greeting();.. [JavaScript] 함수의 형태 자바스크립트에서 함수는 값으로 취급되는데, 이런 특징은 코드를 작성할 때 다양한 형태로 활용할 수 있음. 1. 변수에 할당해서 활용 const printJS = function () { console.log('JavaScript'); }; 2. 객체의 메소드로 활용 const codeit = { printTitle: function () { console.log('Codeit'); } } 3. 콜백 함수(Callback Function) 로 활용 myBtn.addEventListener('click', function () { console.log('button is clicked!'); }); 다른 함수의 파라미터에 전달 된 함수를 콜백 함수라고 함. 4. 고차 함수(Higher Order Functi.. [JavaScript] 즉시 실행 함수 (IIFE) [즉시 실행 함수] 함수 선언식에 다음과 같이 소괄호를 붙여주면 즉시 실행 함수(Immediately Invoked Function Expression)를 만들 수 있음. (function () { console.log('Hi!'); })(); (function (x, y) { console.log(x + y); })(3, 5); 즉시 실행 함수도 일반 함수처럼 파라미터 작성이 가능하고, 함수를 호출할 때 아규먼트를 전달 할 수도 있음. (function sayHi() { console.log('Hi!'); })(); sayHi(); // ReferenceError 그러나 즉시 실행 함수는 함수에 이름을 붙여주더라도 외부에서 재사용 할 수가 없음. [즉시 실행 함수의 활용] (function init().. [JavaScript] 함수를 만드는 법 1. 함수 선언식(function declaration) 자바스크립트에서는 다양한 방식으로 함수를 만들 수 있다. function 키워드를 이용해 함수를 선언하는 방식을 함수 선언식 이라고 함. // 함수 선언 function sayHi() { console.log('Hi!'); } 2. 함수 표현식 자바스크립트에서 함수는 값으로도 취급될 수도 있기 때문에 변수에 할당해서 함수를 선언하는 방식을 함수 표현식 이라고 함. // 함수 표현식 const sayHi = function () { console.log('Hi!'); }; [JavaScript] AND와 OR 연산 방식 자바스크립트에서 AND와 OR연산자는 무조건 불린 값을 리턴하는게 아닌 왼쪽 피연산자 값의 유형에 따라서 두 피연산자 중 하나를 리턴하는 방식으로 동작한다. [AND 연산자] 왼쪽 피연산자가 falsy값일 때 왼쪽 피연산자를, 왼쪽 피연산자가 truthy값일 때 오른쪽 피연산자를 리턴 [OR 연산자] 왼쪽 피연산자가 falsy 일 때 오른쪽 피연산자를, 왼쪽 피연산자가 truthy 일 때 왼쪽 피연산자를 리턴 console.log(null && undefined); // null console.log(0 || true); // true console.log('0' && NaN); // NaN console.log({} || 123); // {} [JavaScript] Truthy 값과 Falsy 값 [Falsy] Falsy 값에는 null, undefined, 0, NaN, ''(빈 문자열) 이 있으며 이 값을 제외한 나머지 값은 truthy 값이다. // falsy Boolean(false); Boolean(null); Boolean(undefined); Boolean(0); Boolean(NaN); Boolean(''); [Truthy] // truthy Boolean(true); Boolean('codeit'); Boolean(123); Boolean(-123); Boolean({}); Boolean([]); [JavaScript] input 태그 [input 태그] 이벤트 타입 설명 focusin 요소에 포커스가 되는 순간 focusout 요소에 포커스가 빠져나가는 순간 focus 요소에 포커스가 되는 순간 (버블링이 일어나지 않음) blur 요소에 포커스가 빠져나가는 순간 (버블링이 일어나지 않음) change 입력된 값이 바뀌는 순간 input 값이 입력되는 순간 select 입력 양식의 하나가 선택되는 순간 submit 폼을 전송하는 순간 [JavaScript] 마우스 이벤트 1. MouseEvent.button 마우스 이벤트 객체의 버튼 프로퍼티를 활용하면, 어떤 버튼을 눌러서 일어난 이벤트 인지 확인 가능 마우스 버튼을 눌렀을 때 일어난 이벤트에 대해서 어떤 버튼을 눌러서 일어난 이벤 값 내용 0 마우스 왼쪽 버튼 1 마우스 휠 2 마우스 오른쪽 버튼 3 X1 (일반적으로 브라우저 뒤로 가기 버튼) 4 X2 (일반적으로 브라우저 앞으로 가기 버튼) mouseenter, mouseleave, mouseover, mouseout, mousemove 처럼 마우스 이동과 관련된 이벤트는 값이 null 이나 undefined가 아니라 0임. 2.MouseEvent.type 이벤트 타입 설명 mousedown 마우스 버튼을 누르는 순간 mouseup 마우스 버튼을 눌렀다 떼는 순간 .. 이전 1 ··· 30 31 32 33 34 35 다음