JS
-
JS(this배우기)JS 2022. 1. 13. 04:57
const dog = { name : "kong", age : 2, color : "black", bark() { console.log(`${this.name} says walwal!!!!!!`) } } const bark2 = dog.bark; 1. bark2 를 입력하면 dog.bark 함수에 대해 나오고 2.bark2()를 입력하면 dog.bark 함수가 실행된다. 3. dog.bark 입력하면 마찬가지로 dog함수의 bark에 대해 나오고 4. dog.bark() 실행하면 this로 앞에 쓰인 dog["name"]을 가져와서 "kong"이 입력된다! this를 사용한 예제를 하나 더 해보면 1. hen 객체 생성 2. name 은 King, eggcount 는 0 3. layAnEgg 메소드를 만..
-
JS연습하기(유저정보테이블 만들기3)JS 2022. 1. 9. 22:52
이전글과 같은 data를 이용해서 1. 한국인들 이름만 배열로 추출 2. 첫번째 한국인만 추출 3. 모든 동아시안 중에 마지막 사람 이름만 추출 4. 모든 홀수 tr은 하얀색으로 모든 짝수 tr은 #efefef 배경 색상으로 바꾸기 를 하려한다! 1. 한국인들 이름만 배열로 추출 const korean = [] mockData.forEach((item,idx) => { if (item.country === "South Korea") { korean.push(item.name) } console.log(korean) ... forEach문 안에 if문을 써서 korean배열에 넣어주기 2. 첫번째 한국인만 추출 시간이 제일 오래 걸렸다. item.country === "한국" 인 객체를 / 새로운 배열에 ..
-
JS연습(유저정보테이블 만들기2)JS 2022. 1. 9. 20:05
5.mockData에서 100번째 유저에게 경품당첨을 한다고 가정. 100번째 유저의 이름을 console.log로! 6.100번째, 200번째, 300번째, 그리고 마지막 유저에게 경품을 준다고 가정했을 때 그 사람들의 이름을 배열로 추출 를 계속 해보겠다 5.mockData에서 100번째 유저에게 경품당첨을 한다고 가정. 100번째 유저의 이름을 console.log로! ==>if문 이용하기 if (item.id === 100) { console.log(`${item.name}! 100번째 사용자입니다!`) } 처음에 인덱스라 생각해서 99를 넣었는데 id가 99인 99번째 유저가 나와서 100으로 수정했다. 인덱스라 생각하면 mockData.forEach((item,idx) => { ..... if..
-
JS연습(유저정보테이블 만들기)JS 2022. 1. 9. 19:29
오늘 해볼건 인터넷에서 mockdata.json을 가져와서 (데이터 js에 뿌리는건 stack overflow코드 가져옴) 1.email 다 inflearn.com 으로 바꾸고 2.모든 직원들 이름은 대문자로 Uppercase로 바꾸고 3.country가 아시아면 그냥 asia로 나오고 4.아프리칸인 사람들은 background color 그린으로 텍스트 칼라는 하얀색으로, 폰트 굵기 굵게 5.mockData에서 100번째 유저에게 경품당첨을 한다고 가정함. 100번째 유저의 이름을 console.log로! 6.100번째, 200번째, 300번째, 그리고 마지막 유저에게 경품을 준다고 가정했을 때 그 사람들의 이름을 배열로 추출 더 추가할게 생기면 추가하고! 먼저 이것부터 하기 먼제 유저 테이블은 htt..
-
JS연습하기(user정보 화면만들기)(forEach,스프레드연산자,if문)JS 2022. 1. 9. 03:58
function handleClick(e) { if (document.querySelector(".isClicked")) document.querySelector(".isClicked").classList.remove("isClicked") e.classList.toggle("isClicked") } json형식의 데이터 2개를 가져와서, 스프레드 연산자를 이용해서 1개의 배열로 만들고, if문을 돌려서 해당 조건에 맞는 style로 화면 만들기 우선 데이터는 const infoList = [ { name: '홍길동', age: 29, desc: '당근마켓 개발자', isRemoved: true, }, { name: '임꺽정', age: 31, desc: '인프런 프론트엔드 개발자', }, { name:..
-
JS연습하기6(스프레드연산자, filter)JS 2022. 1. 9. 02:53
스프레드 연산자 공부! {...}모양의 스프레드 연산자는 ES6에서 새롭게 추가된 내용! 배열 합치고, 배열 복사 하는걸 편하게 할 수 있다. const obj = { name: '국연수', age: 32, } let obj1 = { ...obj, job: '개발자', } 이렇게 기존 객체를 이용한 새로운 객체 생성이 쉽다! 이번에는 스프레드 연산자를 이용해서 배열을 합치고, 특정 조건을 filter로 뽑아내서 콘솔에 나타내기! const infoList = [ { name: '홍길동', age: 29, desc: '당근마켓 개발자', }, { name: '임꺽정', age: 31, desc: '인프런 프론트엔드 개발자', }, { name: '장길산', age: 32, desc: '인프런 백엔드 개발자..
-
JS연습하기5(split.map.filter.onload)JS 2022. 1. 9. 01:23
배열에서 데이터를 가져와 split으로 파일 확장자를 새로운 배열로 만들기, 특정 확장자 파일의 이름만 filter로 가져오기. + onload란 const fileNameList = [ 'a.jpg', 'b.pdf', 'c.svg', 'd.gif', 'e.png', 'f.docx', ] 다음과 같은 array에서! 1.filetype만 따로 분류해서 array만들기 const fileType = [] fileType = filenameList.map((i)=>{ return i.split(".")[1] }) split은 ""기준으로 나눠서 새로운 array를 형성한다. filetype이 필요한거니까 배열의 [1]을 가져와서 map으로 반복하고, fileType에 넣으면 콘솔에 "내가 사용한 파일 타입은..
-
JS연습하기4(?조건문,forEach)JS 2022. 1. 8. 21:37
JS연습(JSON형식의 데이터를 ?조건문사용해서 해당하는 경우와 else의경우 다른 단어로 뽑아내기) data 여기 const userList = [ { name: '국연수', gender: 'F', job: '팀장', infoAgree: true, }, { name: '엔제이', gender: 'F', job: '가수', infoAgree: false, }, { name: '최웅', gender: 'M', job: '작가', infoAgree: false, }, ] 앞의 JS연습1번 글에서 심화된 내용으로! 1.'gender'를 분류해서 여자/남자 표시 2.'infoAgree'를 분류해서 동의/비동의 표시 //forEach사용하기 userlist.forEach((i) => { const agreeTxt..