개발일지

js에서 변수를 선언하고 그 선언한 변수에 css 스타일을 적용할 수 있다. const chicken = document.querySelector('h4'); chicken.style.color = 'red'; // 변수 chicken이 객체로 저장되어 스타일 프로퍼티를 적용할 수 있다. 변수.style.스타일 속성 = '속성값'; 스타일 속성값은 '-' 를 사용할 수 없으므로 카멜케이스를 사용하고 속성값은 문자열로 입력한다. js에서 스타일을 적용해서 개발자 도구로 볼 경우 인라인 스타일로 적용된 것을 볼 수 있다. 예제1 span에 각각의 색상을 할당하는 문제 R A I N B O W colors 배열 안의 값을 span 각각의 반복적으로 스타일 속성을 부여하기 때문에 반복문을 사용한다. const ..

자바스크립트 파일에서 html과 css의 내용과 속성을 수정할 수 있다. html에 있는 요소와 내용을 가져오는 메소드 리턴된 객체(태그)가 배열로 반환된다. getElementByid() : html에서 일치하는 id가 있는 요소를 가져온다. getElementsByClassName() : html에서 일치하는 class가 있는 요소를 전부 가져온다. getElementsByTagName() : html에서 일치하는 태그 요소를 전부 가져온다. querySelector() : html에서 첫 번째 일치하는 항목을 가져온다. 쿼리셀렉터는 id, class, 요소 전부 입력할 수 있으며 css에서 선택자를 입력하는 것과 방식이 같고 nth-of-type() 같은 가상 선택자도 사용 가능하다. querySe..

배열 분해 배열 분해는 변수로 선언된 배열에 구조 분해 문법을 적용해 그 배열 아이템마다 새로운 변수로 지정할 수 있다. const arr1 = ['apple', 'melon', 'lemon', 'grape', 'orange'] const [red, green, ...any] = arr1 const length = red.length // apple의 lenght인 5가 출력됨 console.log(any)// apple과 melon의 나머지 ['lemon', 'grape', 'orange']가 any에 저장됨. const scores = [213000,110000,51000,40000,2000] const [gold, silver, bronze, ...lowScore] = scores const low..

전개구문(spread) 전개구문이 필요한 이유는 객체나 배열에 원본 데이터를 변형하지 않고 복사본을 만들어 사용할 수 있기 때문에 필요하다. 배열이나 문자열 같은 반복 가능한 객체의 요소들을 나누거나 배열을 객체로 전환할 수 있다. 배열 리터럴로 작성했다면 배열 안에 요소들을 담을 수 있고 객체 리터럴로 작성했다면 객체로 전환된다. 반환된 값은 원본의 변경이 아닌 복사본이 저장된다. 사용법 : const name = {...예약어} /const name = [...예약어] console.log(...'hello') //h e l l o 로 각각의 인수로 분리된다. const num2 = [1000, 2000, 30000, 40000, 200, 50, 55000] const str2 = ['abc', 'h..

기본값 매개변수 기본값 매개변수는 함수를 사용할 때 매개변수 값에 기본값을 주어 함수를 입력할 때의 내용을 축약할 수 있다. 매개변수에 각각의 값을 할당하는 것이 아니라면 첫 번째 매개변수에만 기본값을 할당하는 것은 그 다음 매개변수는 undifiend를 출력하므로 전부 기본값을 할당하거나 두 번째 이상의 매개변수부터 기본값을 할당한다. function num(a, b = 1) { return a * b } //num(2,4) 입력시 8출력 function name(firstName, lastName = 'gildong') { console.log(`Hello ${firstName} ${lastName}`) } // name('gildong') 입력시Hello gildong undefined를 출력하게 ..

reduce reduce 메소드는 배열에 있는 아이템들을 reduce 메소드에 입력한 조건에 따라 아이템들을 검사하여 값이 하나가 남을 때까지 검사한 후 그 값을 반환한다. ex. reduce((previousValue,currentValue) => previousValue + currentvalue) a,b const character = [ { name: 'lee', score: 1000, }, { name: 'choi', score: 1400, }, { name: 'kim', score: 1800, }, { name: 'park', score: 2100, }, { name: 'cho', score: 900, } ]; const bestScore = character.reduce((best, curr..

every every 메소드는 기존에 있는 배열에 every 메소드를 적용할 때 every 안에 있는 매개변수의 조건을 통해 불리언 값을 반환한다. 이 반환하는 불리언 값은 배열 안에 있는 아이템들이 모두 조건이 true여야 true 값을 반환하고 하나라도 조건에 맞지 않는 아이템일 경우 false를 반환한다. (배열의 아이템 조건을 검사할 수 있는 메소드) const num2 = [2, 4, 6, 8, 10, 12]; const check = num2.every(num2 => num2 % 2 == 0); //콘솔로그에서 check 입력시 true가 반환된다. 하나라도 조건에 맞지 않을 경우 false출력. function check(number) { return number.every(number =>..

filter filter 메소드는 주어진 배열에서 true 값인 값을 걸러내 새로운 배열을 반환하는 콜백 함수다. 원본 배열은 수정되지 않고 새로운 배열이 생성된다. const character = [ { name: 'lee', score: 100, }, { name: 'choi', score: 140, }, { name: 'kim', score: 180, }, { name: 'park', score: 210, }, { name: 'cho', score: 90, } ]; const highScore = character.filter(num => num.score > 150); // kim과 park만 있는 배열이 생성된다. const highScore = character.filter(num => num..