JS
-
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}에서 받고 ..
-
JS기초정리(DOM, for/while/let/const,Arrowfunction)JS 2021. 9. 5. 01:30
1.기본 참고 사이트 https://www.w3schools.com/js/default.asp https://developer.mozilla.org/ko/docs/Web/JavaScript 2.DOM Critical Rendering Path 웹 브라우저가 HTML 문서를 읽고 → 스타일 입히고 → 대화형 페이지로 만들어 → 뷰포트에 표시 하는 과정 ->:문서 객체 모델 - XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스! 3.async vs defer async: 먼저 js.다운로드 받으면서 → 실행 ⇒ 정해진 순서 상관없이 먼저 다운로드 된 js실행!! ⇒순서중요한경우 ㄴㄴㄴㄴ defer: html parsing하는 동안 js 다운로드 → 먼저 html보여주기 4.variables Muta..