띵동

const numbers = [6, 3, 7, 9, 8]; const max = Math.max.apply(null, numbers); const min = Math.min.apply(null, numbers); console.log(max, min) => 9 3

1) 함수 두 개로 동일한 객체 만들기 => 동일한 객체를 반환하게 하면 가능하다. 2) 계산기 만들기 function Calculator() { this.read = function() { this.a = parseInt(prompt("첫 번째 수를 입력하세요", 0)); this.b = parseInt(prompt("두 번째 수를 입력하세요", 0)); }, this.sum = function() { return this.a+this.b; }, this.mul = function() { return this.a*this.b; } } 3) 누산기 만들기 function Accumulator(value) { this.value = value, this.read = function() { this.num ..

1) 객체 리터럴에서 'this' 사용하기 -> this의 값이 undefined가 되어 에러 발생 2) 계산기 만들기 let calculator = { read() { this.a = parseInt(prompt("첫 번째 값을 입려하세요", 0)); this.b = parseInt(prompt("두 번째 값을 입려하세요", 0)); }, sum() { return this.a + this.b; }, mul() { return this.a * this.b; }, }; 3) 체이닝 let ladder = { step: 0, up() { this.step++; return this; }, down() { this.step--; return this; }, showStep: function() { alert..

1) 객체야 안녕? 1. const user = new Object(); 2. user.name = "John"; 3. user.surname = "Smith"; 4. user.name = "Pete"; 5. delete user.name; 2) 객체가 비어있는지 확인하기 function isEmpty(obj) { if (Object.keys(obj).length === 0) return true; else return false; } 3) 변하지 않는 객체? => const는 객체를 변하게 하지 않는 것이지 프로퍼티는 변경 가능하기 때문에 에러 없이 실행된다. 4) 프로퍼티 합계 구하기 let salaries = { John: 100, Ann: 160, Pete: 130 } let sum = 0; fo..

Object.keys()를 사용하여 객체 안에 key 값들을 배열로 만들고, find를 사용하여 obj[key] 값과 찾으려는 val 값을 비교한다. function getKeyByValue(obj, val) { return Object.keys(obj).find(key => obj[key] === val); }

localStorage란 로컬 환경에 데이터 정보를 저장해서 브라우저를 다시 실행해도 데이터를 유지해주는 저장소이다. 로컬 스토리지는 개발자 도구를 열어 확인할 수 있다. 로컬 스토리지는 객체처럼 key-value 형태로 저장한다. 1) localStorage에 정보 저장하기 - setItem : localStorage 안에 정보를 저장할 때 사용하는 메소드 - localStorage.setItem(key, value); 페이지를 새로고침해도 localStorage의 데이터가 유지되는 것을 확인할 수 있으며, 여기에 저장되는 값들은 모두 문자열 형태라는 특징이 있다. 2) localStorage에서 값 가져오기 - getItem : localStorage에서 정보를 가져올 때 사용하는 메소드 - loca..

이벤트를 추가하기 위해 querySelector를 사용해 엘리먼트를 선택해 주었다. 이벤트 추가 방법 - event handler, addEventListener 1) event handler - 원하는 타겟.이벤트 이름 = 콜백 함수 - 콜백 함수 부분에 들어가는 것을 이벤트 헨들러라고 함 - 가독성이나 유지보수를 위해 분리하여 작성하는 것이 좋음 - 이벤트 이름 앞에 on 붙임 (모두 소문자) ex) 클릭 시 콘솔 창에 clicked 찍히게 하기 - $div.onclick = handleClick에서 함수에 호출 기호 ()가 없는 이유 -> handleClick이 콜백 함수여서 조건 만족 시 함수를 자동으로 호출해주기 때문 이벤트 헨들러 사용 시 단점 - 동일한 이벤트에 서로 다른 콜백 함수를 지정하..

** 자바스크립트에서 CSS 변경하기 ** - 원하는 타깃. style.value 값 - value 이름은 camel case로 변환해주어야 한다. (background-color -> backgroundColor) ex 1 ) body 태그의 배경 색 바꾸기 ex 2) city라는 클래스 이름을 가진 요소의 글자 색 변경 ** 자바스크립트로 HTML element 생성하고 원하는 클래스나 속성 주기 ** ** 자바스크립트로 HTML element 생성 ** - createElement(만들고 싶은 태그 이름) ex) 추천 여행지 아래에 비추천 여행지 넣기 li를 만드는 로직은 똑같기 때문에 배열을 생성했다. (map 메소드를 사용하기 위해) map을 사용하여 위 배열에 하나씩 접근해서 원소마다 li를 ..

자바스크립트를 사용하여 html element에 접근하기 위해 사용할 수 있는 메소드 - getElementsByTagName - getElementsByClassName - getElementById - querySelector - querySelectorAll ****** 클래스와 태그는 여러 번 사용할 수 있으므로 그 결괏값이 하나 이상인 경우가 많기 때문에 Element에 s를 붙여 사용한다. getElementsByTagName과 getElementsByClassName는 결괏값을 하나하나 저장해서 유사 배열 형태로 리턴해준다.(유사 배열은 key 값이 숫자여서 인덱스를 사용해 접근할 수 있다.)+) id는 하나이므로 Element에 s를 붙이지 않는다 (getElementById) ******..

반복문: 반복해서 실행하는 것 반복문 선언 방법: for, while, do while for 문 - 종료 조건을 적지 않으면 무한히 실행됨 => 무한 루프 ex) 1부터 10까지 출력하기 ex )for 문을 사용하여 배열 안 원소 출력하기 ex) for 문을 사용해서 배열 안 원소에 10씩 더하기 while 문 ex) while 문을 사용하여 1부터 10까지 출력 break, continue - break: 현재 있는 반복문에서 탈출 - continue: 뒤에 있는 코드는 실행하지 않고 다시 반복문의 시작점으로 이동 (다음 반복문으로 넘어감) ex) while 문을 사용하여 1부터 10까지 수 중 짝수만 출력하기 ex) while 문을 사용하여 배열 안 원소 출력하기 do while 문 - while ..