qwef

const $user = document.querySelector('#user'); httpGet('http://api.github.com/users/jeado', data=>{ const jsonData = JSON.parse(data); console.log(jsonData); $user.innerHTML = ` 사용자 이름 : ${jsonData.login}, 깃허브 주소 : ${jsonData.html_url} `; }, e=>{ console.log(e); } ); function httpGet(url, successCallback, errorCallback){ const req = new XMLHttpRequest(); req.onload = () => { if(req.status >= 200..

어떤 특정한 공간. 그 안에 무언갈 가져와 가둔다. 주로 미디어 컨텐츠 인 듯? 비디오, 지도 등.. 거기에 다른 페이지도 가능. 근데 resizable이 안됨. 그렇다고 frame 쓰기엔 반응형이 안됨, 그래서 frame은 아예 html5부터 지원을 안함. 뭐 iframe이나 아니면 div로 영역나눈거 자바스크립트 이벤트로 크기조정 할 수 있기는 함.

이미지에서, 특정 부분을 따로 지정해 놓을 수 있는 곳 그러니까, 이처럼 이미지 중(꼭 이미지 아니어도 될듯) 특정 영역의 위치, 모형 등을 지정해서 거기에 따로 처리가 가능할 듯. class나 id 주면 자바스크립트에서도 처리가 가능할 듯. 영역은 대각선으로 지정해 주면 된다. 0, 0, 10, 10은 x,y 0에 x,y 10인 대각선이므로 정사각형 영역지정은 마치 꼭지점 다각형 그리듯. 마지막 꼭지점은 알아서 첫번째랑 연결이 되는 듯. 이거 근데.. 영역을 보이게 하는 방법이 없는 듯. position:absolute인 것의 왼쪽 위를 left, top으로, 오른쪽 아래를 width, height로 해야 할 듯. https://www.image-map.net/ 이런 사이트 들도 있음. 그리고, 이거는..

const dropZone = document.getElementById('file-box'); dropZone.addEventListener('dragover', e=>{ e.stopPropagation(); e.preventDefault(); }); dropZone.addEventListener('drop', e=>{ e.stopPropagation(); e.preventDefault(); const files = e.dataTransfer.files; Array.from(files) .filter(file => file.type.match('image.*')) .forEach(file=>{ const reader = new FileReader(); reader.onload = e=>{ const $..

$box2.getBoundingClientRect() 태그.getBoundingClientRect() DOMRect 객체를 가져오는 데, 여기에는 left, right, bottom, top이 있고 x, y가 있다. width, height도 있다. left, right, top, bottom, x, y 이건 다 뷰포트 기준으로 상대위치이다. 뷰포트 기준의 상대위치를 가져오는 것이다. 그러므로, 만약 절대 위치를 가져오고 싶다면, console.log($box2.getBoundingClientRect().top + window.scrollY); 이렇게 스크롤 값을 더해주면 된다. top의 뷰포트 위쪽의 가장자리를 나타내므로. y는 좀 다르다고 한다. y는 현재 창 기준 y좌표 비슷해 보이지만 같지는 않다..

그냥 $li.tagName 태그.tagName 하면 됨. 근데 대문자여서 조건문으로 쓸 데는 if($li.tagName === 'LI') 이렇게 써야 함.

jay data-커스텀속성 이거 접근하려면, const name = $li.dataset.name; 태그.dataset.속성이름 이렇게 접근 가능

document.getElementById('location').innerHTML = `현재문서 URL : : ${location.href} 현재 문서 도메인명 : ${location.hostPathname} 현재 문서 경로명 : ${location.hostname} 현재 문서 프로토콜 : ${location.protocol} `; document.getElementById('naver-btn') .addEventListener('click', e=>{ location.assign('https://naver.com'); }); 현재문서 URL : : http://127.0.0.1:51331/ 현재 문서 도메인명 : undefined 현재 문서 경로명 : 127.0.0.1 현재 문서 프로토콜 : http:

const $orderForm = document.forms.order; const $userInfo = $orderForm.elements.userInfo; const $productInfo = $orderForm.elements.productInfo; console.log($orderForm); console.log($userInfo); console.log($productInfo); document.getElementById('btn1') .addEventListener('click', e=>{ const { name, tel } = $userInfo.elements; console.log($userInfo.elements); console.log(`${name.value}사용자 ${tel.valu..

function buildAlert(title, message){ const $alert = document.createElement('div'); const id = Math.ceil(Math.random() * 1000); console.log(id); $alert.className = 'alert'; const $span = document.createElement('span'); $span.classList.add('close'); $span.innerHTML = '×'; const $h3 = document.createElement('h3'); $h3.textContent = title; const $p = document.createElement('p'); $p.textContent = mes..