전체 글
-
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..
-
JS연습하기3(toggle메서드,classList)JS 2022. 1. 8. 04:17
JS toggle메서드 사용하기 식빵사기 운동가기 .done { background-color: greenyellow; text-decoration: line-through; } .not { background-color: tomato; text-decoration: overline; } 이렇게 css를 추가하고 function toggleA() { document.querySelector(".bread").classList.toggle("done") } function toggleB() { document.querySelector(".workout").classList.toggle("not") } toggle 메서드를 onclick이벤트로 넣어주면 onclick이벤트 발생시(toggleA()실행=>wo..
-
JS연습하기2(input,object,console.log)JS 2022. 1. 8. 03:56
2.JS기본(input 2개 받은 데이터를 객체로 저장하고, 콘솔에 특정문구로 해당 객체 데이터 가져와서 보여주기) -HTML 이름영역 나이영역 정보를 공개합니다!!!!! function handleForm() { //이름 const name = document.querySelector('#nameIpt').value //나이 const age = document.querySelector('#ageIpt').value //객체만들기 const personObj = { name: name, age: age, } //객체 콘솔로 확인 console.log(personObj) //객체 Key마다 빼와서 사용하기 console.log( `이 사람 이름은 ${personObj.name}이고, 나이는 ${perso..
-
JS연습하기1(for문, map, forEach, filter메서드 연습)JS 2022. 1. 8. 03:40
JS기본학습1장 -data const infoList = [ { name: '국연수', age: 29, desc: '당근마켓 개발자', }, { name: '엔제이', age: 31, desc: '인프런 프론트엔드 개발자', }, { name: '최웅', age: 32, desc: '인프런 백엔드 개발자', }, ] : infoList는 배열로 객체를 받는 data 1.for문 for (let i = 0; i for문 첫번째 ${infoList.name}에서 받고 ..