이재호

해당 링크는 포켓몬사이트에서 제공하는 포켓몬 API 입니다. https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png index.html app.js // id 요소 선택 const container = document.querySelector('#container'); 포켓몬 1세대는 1번부터 151번까지가 끝이므로 151번까지 반복을 돌립니다 // API URL도 변수에 추가해줍니다 const URL = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png" for(let i =1; i < 151; i++){ // div로 감싸주..

DOM을 이용해서 버튼 100개를 만들어보자 index.html Look At All My Buttons! app.js const container = document.querySelector('span') //100개를 만들 반복문 for(let i = 0; i < 100; i++){ //버튼 태그 생성 const btn = document.creatElement('button') // 버튼 안에 텍스트 추가 btn.textCotent = "100개!" // span 태그에 버튼 추가 container.appendChild(btn) }

위 사진과 같이 글자를 돌면서 글자색을 무지개색으로 만드는 작업을 하고 싶다 Index.html R A I N B O W DOM을 이용해서 브라우저 화면에 글자색을 화려하게 바꿔보자 app.js 1. 숫자색을 나타내는 배열이 있다 const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; 2. span태그 안에 있는 모든 요소를 선택해야하므로 document.querySelectorAll()메서드를 사용해서 변수에 담아보자 const RainbowFonts = document.querySelectorAll('span') 3. querySelectorAll 메서드는 배열은 아니지만 반복을 하며 돌수 있는 for of문을 ..

자바스크립트 공부 할떄 같이 공부하던분들이 디스트럭쳐 디스트럭쳐 한걸 들을수 있었다. 그게 뭔데.. 하면서 정말 어렵다 느끼곤 재대로 공부는 하지 않았던걸로 기억하는데 자바스크립트를 다시 공부하면서 꼭 필요한 최신문법인걸 알고나서 구조분해할당을 다시 공부하게 되었다. 구조분해할당이란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다 배열 구조 분해 할당 보통 우리가 원하는 배열의 값을 변수에 담을라면 아래의 코드처럼 일일이 인덱스에 접근하여서 새로 변수에 담아야 하는데 숫자가 몇개 없으면 문제가 없지만 만약에 100개 200개 있으면 코드를 작성하는게 굉장히 번거로운 작업일것이다 const scores = [41214, 1232, 4124, 51252..

스프레드 문법은 자바스크립트에서 자주 사용하는 최신문법이다, 라이브러리나, 리액트를 사용할때 많이 사용한다고 한다. 전개구문이라고도 하는데 배열과 같이 반복 가능한 객체를 펼쳐서 확장하는것 입니다. 배열 전개구문 const nums = [1,2,3,4,100,40] Math.max(nums) 🚨 이렇게 하면 NaN이 나오는데 숫자가 아니라는것이다 그 이유는 배열로 감싸져 있기때문에 그렇다면 이럴떄 전개 구문을 사용하면 된다 const nums = [1,2,3,4,100,40] Math.max(...nums) 이렇게 하면 전개구문에 배열의 괄호를 지워내서 배열이 펼쳐지고 인수가 따로따로 들어갑니다 따라서 결과값은 100이 나옵니다 콘솔로 찍어보면 console.log(num) // [1, 2, 3, 4, ..

내가 보고 기억할라고 기록하는 this.. 내가 알던 기존의 함수에서 사용하는 this는 const person = { firstName : "jaeho", lastName: "Lee", fullName : function(){ return `${this.firstName} ${this.lastName}` } } person.fullName() // 결과값 'jaehoLEE' 함수 메서드에서의 this는 객체를 가르킨다 근데.. fullName 을 화살표 함수로 바꾸면 const person = { firstName : "jaeho", lastName: "Lee", fullName : () => { return `${this.firstName} ${this.lastName}` } } person.full..