자바스크립트

[TIL] JS 업다운, 호칭, 가위바위보, 마지막일

✍ Today I Learned [Up Down Game] 만들면서 느낀 점 조건문을 실생활에도 도입해보자! 데이터를 가져올 땐 언제나 데이터 타입을 신경 써야 한다. 자바스크립트로 데이터를 받아올 때 value속성의 데이터는 모두 string으로 받아온다. 전역 변수는 초기화까지 세팅해주는 것이 좋다. 숫자로 연산할 거라면 0으로 세팅! 전역 변수는 최소한으로, 꼭 필요할 때만 사용한다. 조건절을 만들 때는 경우의 수를 잘 따져보자. input type number의 min, max 속성은 button이 submit 속성일 때만 작동한다. 함수는 기능적으로 분리해야 한다. [호칭 알려주기] 만들면서 느낀 점 조건절의 경우의 수 대분류부터 소분류로 잘 따져보자. 하나의 return에 여러 개의 값을 넘겨..

[TIL] JS 이미지 파일 판별, 숫자 객체&메서드

✍ Today I Learned 삼항 연산자 다시 짚고 넘어가기! // 조건항(true of false) ? true일 때 필요한 값이나 코드 : false 일 때 필요한 값이나 코드 let result = condition ? (when true) value or code : (when false) value or code; let rv = C ? T : F; 템플릿 리터럴은 백 틱(`)을 사용하여 문자열을 정의한다. ES6 기능으로 ${...} 안에 코드를 작성할 수 있다. 자바스크립트에서는 정수와 실수를 따로 구분하지 않고, 모든 수를 실수 하나로만 표현한다. + 연산자는 문자열에서는 연결자로, 숫자에서만 덧셈으로 작동한다. 숫자로 이루어진 문자열은 +연산을 제외한 다른 연산에서 숫자 타입으로 자동..

[JavaScript] 자바스크립트 문자열 메서드 총정리

문자열 길이 length - 문자열의 길이 반환 let txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; let length = txt.length; // 26 문자열 부분 추출 문자열의 일부를 추출하고 새 문자열로 반환 slice(startIndex, endIndex) - 매개변수로 시작 위치와 끝 위치(포함 X)를 사용한다. 매개변수가 음수이면 문자열의 끝에서 시작한다. substring(startIndex, endIndex) - slice와 비슷하나, 매개변수로 음수는 사용할 수 없다. substr(startIndex, length) - slice와 비슷하나, 두 번째 매개변수는 추출할 부분의 길이를 지정한다. let str = "Apple, Banana, Kiwi"; let star..

[JavaScript] 자바스크립트의 이벤트(event)

이벤트란? 이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다. 웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다. 이벤트 객체는 전역 객체로써 모든 태그에 객체를 참조시킬 수 있다. 이벤트 리스너(event listener) 이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 한다. 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킨다. 이벤트 리스너 등록 작성된 이벤트 리스너는 먼저 해당 객체나 요소에 등록되어야만 호출될 수 있다. 객체나 요소에 이벤트 리스너를 등록하는 방법은 다음과 같다. 이벤트..

[TIL] JS 이벤트, 문자열 메서드, 이미지 파일 판별

✍ Today I Learned html 태그에 속성으로 onclick을 사용할 수 있으나 이벤트 리스너의 등록 개수가 제한적이기 때문에 추천하는 방식은 아니다. let sbmBtn = document.getElementById('sbmBtn'); sbmBtn.addEventListener('click', saveList); // 이런 방식을 더 추천 객체는 순서가 중요하지 않다. 모든 함수에서 객체에 접근하려면 함수 밖에서 빈 객체를 선언 후 함수 안에서 객체에 값을 할당하면 된다! const me = {}; // 이렇게 빈 객체 선언 이벤트를 발생시킬 때 데이터를 받아오는 시점이 언제인지 주의해야 한다. 모든 코드에 정답은 없다! 효율성의 차이만 있을 뿐.. 문자열 데이터 타입은 시퀀스 특성이므로 순..

[JavaScript] 자바스크립트의 객체(Object)

객체란? 객체(Object)란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합이다. const 객체이름 = { 프로퍼티1이름 : 프로퍼티1의값, 프로퍼티2이름 : 프로퍼티2의값, ... }; 객체의 특징 객체의 지속성 확보를 위해 const 상수로 선언한다. 프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메서드(method)라고 한다. 프로퍼티 이름은 같은 객체 내에서 중복으로 사용할 수 없다. 프로퍼티 값의 데이터 타입은 제한이 없다. 객체의 프로퍼티, 메서드 참조 객체이름.프로퍼티이름 또는 객체이름["프로퍼티이름"] 객체이름.메소드이름() 메소드를 참조할 때 메서드 이름 뒤에 괄호(())를 붙이지 않으면, 메서드가 아닌 프로퍼티 그 자체를 참..

[JavaScript] 함수 선언문 vs 함수 표현식

자바스크립트의 함수 정의 자바스크립트의 함수를 정의하는 방식은 크게 3가지가 있다. 함수 선언문 함수 표현식 화살표 함수(arrow function) 이 중 함수 선언문과 함수 표현식에 대해 알아보자. 함수 선언문 일반적으로 function 키워드, 함수 이름, 괄호로 둘러싼 매개변수, 중괄호로 둘러싼 실행문을 통해 선언하는 함수를 의미한다. function 함수이름(매개변수1, 매개변수2,...) { 함수가 호출되었을 때 실행하고자 하는 실행문; } 위와 같은 방식으로 아래의 함수를 만들 수 있다. function sayHi() { alert( "Hello" ); } 함수 표현식 함수 선언문으로 정의했던 sayHi() 함수를 함수 표현식으로 생성해보자. const sayHi = function() { ..

[TIL] JS 함수, 객체, 이벤트

✍ Today I Learned 항상 능동적으로 공부할 것! 함수를 사용하면 효율성이 올라간다. arrow function을 이용하면 함수 코드의 양을 줄이면서 변수화 할 수 있다. 그러나 return이 없는 함수라면 굳이 쓰는 의미가 없다. 객체란? 개념적으로 인지 가능해야 함 고유적인 이름으로 구분해야 함 시작과 끝이 반드시 존재해야 함 값이 바뀌어도 객체 자체의 주소값은 바뀌지 않기 때문에 객체는 const로 선언한다. 객체 안에 arrow function을 사용할 수도 있지만 정보가 많아 가독성이 중요하기 때문에 잘 사용하지 않는다. this 키워드는 내가 소속된 객체를 가리킨다. JSON (JavaScript Object Notation)은 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기..