코딩하는라민

[JavaScript] 클래스와 접근자 프로퍼티(getter함수, setter함수) 📌 접근자 프로퍼티란? 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티이다. 접근자 함수에는 getter 함수와 setter 함수가 있다. 📌 getter 함수 getter 함수는 프로퍼티를 읽으려고 할 때 실행된다. 예를 들어서 콘솔창에 값을 출력해본다거나, 참조할 때 사용한다. class Cafe { constructor(menu){ this.menu = menu } get menu(){ return `${this._menu}를 주문하시겠습니까?`; } set menu(value){ this._menu = value; } } const cafe = new Cafe('milk'); con..

[JavaScript] 클래스 📌 클래스란? 클래스는 객체를 생성하는 일을 한다. 그냥 객체를 생성하는 것이 아닌 `재사용 가능한 객체`를 생성한다. 즉, 클래스는 마치 붕어빵틀과 같은 역할을 하는 것! MDN 에서는 클래스를 객체를 생성하기 위한 템플릿이라고 정의하고 있다. 📌 클래스는 언제 등장했나? ES6 이후 등장 ES5 의 클래스 의미와는 다른 문법과 의미를 가진다. 📌 클래스 정의 클래스를 정의할 때는 `파스칼 케이스`를 사용해야 한다. 즉, 클래스명은 대문자로 시작해야 한다. class City { ... } 📌 클래스를 정의하는 방식 클래스를 정의하는 방식에는 `class 선언 방식`과 `class 표현식 방식` 두 가지 방법이 있다. // 선언 방식 class City { } // 표현식..

렛츠기릿 자바스크립트 #6 계산기 만들기 - 함수 사용하기 책 + 저자 유튜브 강의(인프런) + 추가로 모르는 내용들 필기 추가하면서 공부 1. 순서도 그리기 ① 숫자1, 2 / 연산자 를 저장할 변수를 각각 생성 ② 숫자를 누르면 연산자가 입력된 유무에 따라서 숫자1에 저장할지, 숫자2에 저장할지 결정하고 변수에 숫자 저장 ③ 연산자 버튼을 누르면 숫자1의 유무에 따라 연산자를 저장하거나 경고창을 띄운다 ④ = 버튼을 누르면 숫자2의 유무에 따라 연산자를 결과에 출력하거나 경고창을 띄운다 기본원리 - 숫자1이 존재해야 연산자가 존재 가능하고, 연산자가 존재해야 숫자2가 존재 가능하다. 2. 변수 생성하고 버튼에 이벤트리스너 달기 ① 변수 생성 let numOne=''; let numTwo=''; let..

Javascript #15 객체 활용 33. 객체 활용 1) 객체화 시키기 BodySetBackgroundColor('black'); BodySetColor('white'); LinkSetColor('powderblue'); ↓ 아래와 같은 형태를 취하기 위해 앞에서 정의했던 함수들을 객체화 시켜줄 것임 Body . setBackgroundColor('black'); Body . setColor('white'); Link . setColor('powderblue'); function BodySetColor(color){ document.querySelector('body').style.color = color; } function BodySetBackgroundColor(color){ document.q..

Javascript #14 객체의 메소드와 프로퍼티 32. 객체프로퍼티와 메소드 메소드 객체에 소속된 함수 프로퍼티 객체에 소속된 변수 1) 함수 정의의 표현방식 1 2 3 coworkers.showAll = function(){ ... } var showAll = function(){ } function showAll(){ ... } 모두 같은 것 2) 객체에 소속된 변수의 값으로 함수를 지정할 수 있다. (객체에 소속된 함수를 만들 수 있다.) var coworkers = { "programmer" : "ramin", "designer" : "choi" }; → key 값( = 배열에서는 index) → 객체 : 문자, 숫자, 배열, 함수 등을 담을 수 있다. - 객체에 이름이 바뀐 경우에는 cowo..

생활코딩 Javascript #13 객체와 반복문 30. 객체와 반복문 - 생성된 객체(Object)의 데이터를 모두 가져와야 하는 경우, 반복문 사용했다. 1) 객체 형태 var coworkers = { "programmer" : "ramin", "designer" : "choi" }; → key 값( = 배열에서는 index) - 왼쪽의 programmer, designer 를 key 값이라고 한다. - 이 key 값은 배열에서는 index 라고 부른다. - 객체에서는 이 index 를 key 값으로 가져온다. 2) 반복문을 사용해 모든 데이터 가져오기 for (var key in 객체이름) { ... } → 객체에 있는 key 값들을 가져오는 반복문 → 즉, 객체에 있는 key 값을 하나하나 꺼내서..

생활코딩 Javascript #12 객체 쓰기와 읽기 29. 객체 예고 1) 객체란? 객체 함수와 연관된 변수를 같은 이름으로 그룹핑해서 정리정돈하기 위한 도구 - 코드들을 정리정돈하기 위해 함수를 사용하는데, - 이러한 함수가 많아지면 함수와 연관되어 있는 변수들이 많아지면 복잡도의 한계에 도달한다. - 이런 한계 상황에서 서로 연관된 함수와 연관된 변수를 같은 이름으로 그룹핑해서 정리정돈하기 위한 도구 2) 함수의 이름 - 함수의 이름이 겹치게 되면 기존에 있던 함수는 지워진다. function setColor(color){ var alist = document.querySelectorAll('a'); var i = 0; while ( i< alist.length){ alist[i].style.col..

Javascript #11 함수 활용 > 선행 28. 함수 활용 - 위와 같이 input 안에 있던 함수를 script 태그에 따로 가져와 독립된 함수로 만들게 되면, this 라는 것이 '전역객체'를 가리키게 된다. 즉, 웹브라우저에서는 window 를 가리키게 된다. - 따라서, 위와 같이 input 태그 안에 단순히 함수를 불러오게 된다면 함수가 제대로 실행되지 않는다. - input 안에 함수에 this 라는 매개변수를 넣고, - script 의 함수에 self 라는 매개변수를 넣고 모든 this 를 self 로 바꿔주면 함수가 정상적으로 실행되는 것을 확인할 수 있다.

Javascript #10 함수 24. 함수 예고 1) 함수를 사용하는 이유 - 함수는 코드를 담고 있는 수납상자 같은 느낌 - 무수히 많은 코드를 수정하는 경우 함수를 사용하지 않았을 때 하나하나 다 바꿔줘야 하므로 현실적으로 불가능. - 함수를 사용하면 무수히 많은 코드 전체를 수정할 수 있다. - 중복된 코드를 함수로 지정하여 한줄로 단순화할 수 있다. 2) 함수 사용 시 좋은 점(장점) - 유지보수가 쉬워진다. - 코드가 단순해져서 웹 페이지의 크기가 줄어들 수 있다. 25. 함수 ( function ) 1) 반복문을 쓸 수 없는 경우 연속적으로 반복되는 것이 아니라 연속적이지 않게 반복되는 것 → 반복문을 사용하기 어렵거나 사용 불가 2) 함수 생성 및 호출 function 함수이름() { → ..

Javascript #9 배열과 반복문 활용 > 선행 생활코딩 Javascript #8 배열과 반복문 Javascript #8 배열과 반복문 20. 배열 array 배열 - 배열은 대괄호 [ 부터 시작해서 대괄호 ] 로 끝난다. - 대괄호 안에 값을 적는데, 여러 개의값을 적을 수 있다. - 값과 값 사이는 콤마 , 로 구분 var c ramincoding.tistory.com 22. 배열과 반복문 하이브리드 1) 배열 안의 원소들을 불러와서 반복문으로 리스트 태그에 넣기 ① 배열 생성하기 var coworkers = ['ramin', 'choi', 'dana', 'udin'] ② 반복문 기본 형태 var i = 0; while(i < 4 ){ document.write(''); i = i + 1; } ..