Frontend136 [Javascript] getElement, querySelector로 요소 검색하기 document.getElementById 혹은 id를 사용해서 요소 검색하기 Element let elem = document.getElementById("elem"); console.log(elem); elem.style.background = 'red'; querySelectorAll ✔️ 주어진 css 선택자에 대응하는 요소 모두를 반환. ✔️ css 선택자를 활용할 수 있음 : hover, :active, :last-child let elements = document.querySelectorAll('ul > li:last-child'); for(let elem of elements){ console.log(elem.innerHTML); } querySelector ✔️ 주어진 CSS 선택자에 .. 2022. 1. 11. [Javascript] 배열 메소드 연습문제 border-left-width 를 borderLeftWidth 로 변경하기 camelize("background-color") == 'backgroundColor'; camelize("list-style-image") == 'listStyleImage'; camelize("-websit-transition") == 'WebkitTransition'; Hint : split을 사용해 문자열을 배열로 바꾼 다음 join을 사용해 다시 합친다. function camelize(str){ let result = str //1. '-' 기준으로 나누어 배열로 반환한다. .split('-') //[background, color] //2. 배열의 첫번째는 그대로 반환하고 두번째부터는 첫글자만 대문자가 되어야 한다.. 2022. 1. 10. [Javascript] DOM 탐색 트리 상단의 documentElement와 body ✔️ = document.documentElement ✔️ = document.body ✔️ = document.head childNodes, firstChild, lastChild로 자식 노드 탐색하기 ✔️ childNodes : 모든 자식 노드를 담고 있다. 요소의 자식 노드들을 탐색할 수 있다. for(let i=0; i 2022. 1. 10. [Javascript] 브라우저 환경과 다양한 명세서 문서 객체 모델(DOM) ✔️ Document Object Model ✔️ 웹 페이지 내의 모든 콘텐츠를 객체로 나타내준다. ✔️ document 객체로 페이지 내의 요소들에 진입할 수 있으며 변경하고 원하는 것도 만들 수 있다. 브라우저 객체 모델(BOM) ✔️ Browser Object Model ✔️ 문서 이외의 모든 것을 제어하기 위해 브라우저가 제공하는 추가 객체 navigator 객체 - 브라우저와 운영체제에 대한 정보를 제공 - navigator.userAgent : 현재 사용 중인 브라우저 정보를 알려줌. - navigator.platform : 브라우저가 실행 중인 운영체제를 알려줌. location 객체 - 현재 URL 을 읽을 수 있게 해주고 새로운 URL로 변경할수 있게 해준다. /.. 2022. 1. 10. [Javascript] setTimeout / setInterval setTimeout ✔️ 일정 시간이 지난 후 함수를 실행 // setTimeout 기본 사용법1 function fn(){ console.log(3); } setTimeout(fn, 3000); //3초후 fn 실행 // setTimeout 기본 사용법2 setTimeout(function(){ console.log(3); },3000); //매개변수가 들어갔을 때 function showName(name){ console.log(name); } setTimeout(showName, 3000, 'Kay'); //3초후 Kay를 인수로 넣은 showName 함수 실행 clearInterval() 으로 실행을 종료할 수 있음. setInterval ✔️ 일정 시간 간격으로 함수를 반복 function sh.. 2022. 1. 7. [Javascript] Object.keys, values, entries Object.keys, values, entreis ✔️ Object.keys(obj) : 객체의 키만 담은 배열을 반환 ✔️ Object.values(obj) : 객체의 값만 담은 배열을 반환 ✔️ Object.entries(obj) : [키, 값] 쌍을 담은 배열을 반환. 객체 값들의 합 반환하기 function sumSalaries(salaries) { let result = 0; for (let value of Object.values(salaries)) { result += value; } return result; } let salaries = { "John": 100, "Pete": 300, "Mary": 250 }; console.log(sumSalaries(salaries)); 프로퍼티 .. 2022. 1. 7. 이전 1 2 3 4 5 6 7 ··· 23 다음 반응형
