반응형

자바스크립트 JS/JS 입문 공부일지 19

자바 스크립트(js) 입문 공부 20. 클래스 class

클래스 class 자바스크립트에서 객체를 만들면 프로토타입이 자동으로 상속이 됩니다. (객체가 가져야할 기본적인 사항에 대한 프로토타입) 클래스란 오브젝트를 생성하기 위한 설계도 입니다. 기존 자바스크립트의 프로토 타입을 대체할 수 있으며, 클래스를 통해 정의한 오브젝트는 Array, Date 등 내장 객체와 동일하게 취급할 수 있습니다. 클래스 내부에 정의된 함수는, 객체의 멤버함수와 마찬가지로 메소드라 부릅니다. new 연산자에 의해 실제 사용 가능한 객체를 생성하며, 생성된 객체를 통해 메소드를 호출할 수 있습니다. 생성된 객체를 통해 메소드를 호출할 수 있는 메소드 = 인스턴스 메소드 class Member{ getName(){ return "이름"; } } let memberObj = new M..

자바 스크립트(js) 입문 공부 19. 프로미스promise

프로미스란? new promise 를 하면 프로미스 객체를 만들 수 있습니다. 프로미스 객체는 비동기 작업에 대한 약속입니다. (작업 이후 발생할 완료 또는 실패, 그 결과값) 비동기 작업이란 언제 끝날지 알 수 없는 독립적인 작업입니다. 작업의 상태가 시작, 진행중, 완료인 것과 무관하게 프로그램은 계속해서 실행이 됩니다. 프로미스 생성 방법 프로미스 객체를 생성하면서 콜백함수처럼 전달합니다. 다음과 같이 비동기 작업을 수행하는 함수가 있을 때, 이를 promise 객체(약속)를 생성하면서 인자로 전달합니다. Promise 객체에 전달된 함수는 두 가지 콜백 함수를 인자로 받습니다. 하나는 작업 성공 시 실행되는 함수(resolve), 하나는 실패 시 함수(reject) 입니다. 어디까지나 매개변수이기..

자바 스크립트(js) 입문 공부 18. ECMAScript, ES6 이후 개선된 문법들 (화살표 함수, 디폴트 파라미터, 객체 구조 분해)

ECMAScript ECMAScript(ES)는 범용 목적의 스크립트 언어 표준을 뜻합니다. ‘스크립트 언어를 사용할 때는 이렇게 사용하세요’라고 재정의를 해서 자바 스크립트를 사용하는 문법을 정의하는 단체라고 보시면 됩니다. ECMAScript는 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공합니다. 그리고 자바스크립트(JavaScript)는 ECMAScript 명세를 준수하는 스크립트 언어입니다. ECMAScript 버전 ECMAScript는 자바스크립트의 표준을 제정하기 위해 1997년 처음 등장했으며, 그 후로 꾸준히 새로운 버전의 ECMAScript 명세가 발표되었습니다. 초기에는 ES1, ES2, ES3와 같이 숫자를 올려가며 버전을 표기했지만, 2015년 등장한 여섯 번째 버..

자바 스크립트(js) 입문 공부 17. 배열 메소드 (2) (콜백함수를 사용하는 대표 메소드)

배열에는 여러 메소드들이 있고, 그 중 자기 자신을 매개변수로 삼는 콜백함수를 사용하는 메소드들이 있습니다. 이번에는 콜백함수를 사용하는 배열 메소드들을 하나씩 살펴볼게요. 메소드 기능 forEach 배열의 각 요소에 대해 콜백을 호출 map 배열의 각 요소에 대해 콜백을 호출한 결과를 모아 새로운 배열을 반환 filter 배열의 각 요소에 대해 콜백을 호출한 결과 true 를 반환하는 모든 요소를 모아 새로운 배열 반환 forEach() 매개변수는 한 번 호출될 때마다 요소 하나씩을 전달하고, 하나씩 출력하는 기능이 있습니다. forEach 의 경우 매개변수를 하나 더 가질 때마다 인덱스 번호를 같이 가집니다. 매개 변수가 하나 있으면 요소를 하나 전달하는 것, 매개 변수가 하나 더 있으면 인덱스 번호..

자바 스크립트(js) 입문 공부 16. JSON 제이슨, localStorage로컬스토리지

JSON은 자바스크립트 객체 표기법(JavaScript Object Notation)을 뜻하며, 이는 자바스크립트 객체를 문자열로 표현하는 데이터 포맷입니다. 즉, 자바스크립트에서 사용하는 표기법을 다른 환경이나 다른 프로그래밍 언어에서도 사용할 수 있는 형태(문자열)로 변환하기 위해 사용합니다. 문자열은 거의 모든 현대 프로그래밍 언어에서 사용할 수 있기 때문에 다른 프로그래밍 언어에서도 호환할 수 있기 때문입니다. JSON 표현법 JSON 형식은 자바스클비트 객체 리터럴 표기법에 기반을 두고 있습니다. 객체 키와 문자열은 따옴키로 묶습니다. 객체 리터럴의 모양 객체 리터럴의 모양 JSON 표기법 const todo = { todoContent : "공부하기", todoDone : false, todo..

자바 스크립트(js) 입문 공부 15. 객체 리터럴 , 스프레드 연산자

객체 리터럴 객체를 구성하는 속성(값이나 기능, 객체의 상태를 나타내는 값. 프로퍼티 property)의 이름과 실제 값을 한 쌍으로 묶어 표현하는 ‘객체 리터럴’을 이용하면 객체를 생성할 수 있습니다. 이때 속성 프로퍼티의 이름을 키(key), 속성의 실제 값을 밸류(value)라고 합니다. 마치 파이썬의 바이너리를 연상시키는 형태입니다. 객체 리터럴의 형식은 아래와 같습니다. const cat = { name : "쿠키", age : 5 }; 여기에서 name과 age는 key, “쿠키" 와 5는 value에 속합니다. 객체 리터럴의 중괄호는 코드 블록을 의미하는 것이 아니라 값으로 불리기 때문에 닫는 괄호 뒤에는 세미콜론을 붙여줍니다. 객체 리터럴의 value가 되면 사용할 수 있는 모든 값이 되므..

자바 스크립트(js) 입문 공부 14. Math, 로또 추첨 번호 만들기

공부 출처 : http://www.tcpschool.com/javascript/js_standard_math, 유노코딩 youtube 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com Math는 수와 관련된 속성과 메소드를 가진 내장 객체입니다. 대부분의 Math 메소드는 각 브라우저마다 다른 결과값을 얻을 수 있으므로, 정확한 값이 필요한 경우에는 Math를 사용하지 않는 것이 좋습니다. 생성자가 아니라 메소드, 속성으로 사용하므로 다음 문법으로 작성합니다. Math.메소드() Math.속성 Math 의 메소드 속성들은 다음과 같습니다. 이 이외에도 Math.min(), Math.max() 등 Math의 메소드는 무척..

자바 스크립트(js) 입문 공부 13. 배열 메소드 (1)

배열 배열은 여러 개의 데이터를 보관하는 ‘주머니’ 역할을 하는 객체입니다. 이전까지 변수(또는 상수)에는 데이터를 하나씩만 대입할 수 있었지만, 배열을 사용하면 여러 개의 데이터를 대입할 수 있습니다. 배열을 만드는 방법 1. 배열 리터럴 대괄호로 묶어서 표현하고 각 요소들을 쉼표로 구분합니다. 2. Array 생성자로 생성 배열을 만드는데 사용하는 기본 내장 생성자 new 로 생성합니다. 생성 시에 배열 안에서 문자열, 정수 등이 섞여 있어도 상관 없습니다. (자료를 사용할 때에는 어렵지만요.) 배열의 특징 배열에 포함된 값 하나하나를 ‘배열 요소’라고 합니다. 각 배열 요소는 왼쪽부터 순서(번호)가 매겨지며, 이를 ‘인덱스 번호’라 합니다. 인덱스 번호는 0부터 시작합니다. 배열 요소 수는 원하는 ..

자바 스크립트(js) 입문 공부 12. Element.classList

classList에 대한 공부 출처 : https://sisiblog.tistory.com/234 [javascript] 자바스크립트 classList 사용 방법 참고: https://www.javascripttutorial.net/javascript-dom/javascript-classlist/ 이 튜토리얼에서는 javascript classList 속성을 사용하여 element의 class를 사용하는 방법을 보입니다. classList는 element의 읽기전용 속성으로 sisiblog.tistory.com Element.classList Element.classList는 element의 읽기전용 속성으로 css class의 현재 값을 반환합니다. classList는 DOMTokenList 객체로 e..

자바 스크립트(js) 입문 공부 11. 타이머 기능, 자바스크립트로 디지털 시계 만들기

이번에는 자바스크립트의 타이머 관련 기능들에 대해서 알아보겠습니다. 타이머 기능 setTimeout window 의 기본 함수 중 setTimeout 함수가 있습니다. 이것은 정해진 시간이 지나고 나면 주어진 함수를 진행해주는 타이머 메소드입니다. setTimeout(실행할함수, ms단위의시간) (ms 단위의 시간은 1000ms 일 때 1s초 가 지나는 것입니다. ) 이렇게 함수에다가 인자를 전달하는 것 콜백함수라고 합니다. setTimeout은 콜백함수로 실행할 함수를 하나 받습니다. setTimeout(function(){ console.log("자, 이제 시작이야.") }, 1000) 타이머 기능으로 기능을 수행하는 함수를 알아보았으니, 이번에는 시간 간격에 따라 실행하는 함수를 알아볼게요. set..

반응형