coding with cong

HTML 삽입 미리보기할 수 없는 소스 DOCTYPE html> 구구단 맞추기 문제는 10문제 출제 맞추면 blue / 틀리면 pink 정답률도 프린트 문제 출제 정답! // 랜덤 단 function makeDan(){ return Math.floor(Math.random()*8)+2; } // 랜덤 곱할 숫자 function makeNum(){ return Math.floor(Math.random()*9)+1; } let comAns = []; //정답을 담는 배열 생성 let printQuiz = document.getElementById('q'); //문제 출제 document.getElementById('start').addEventListener('click',()=>{ let str=" "; ..

DOCTYPE html> 팝업창 열기 닫기 alert prompt confirm let print = document.getElementById('msg2'); document.getElementById('alert').addEventListener('click',()=>{ alert('alert창'); print.innerHTML += `alter창 `; }) document.getElementById('prompt').addEventListener('click',()=>{ let p = prompt('prompt 입력을 받는 창'); print.innerHTML += `prompt창 내용: ${p} `; }) document.getElementById('confirm').addEventListener..

DOCTYPE html> BOM window.innerHeight : 툴바를 제외한 높이 > window.innerWidth : 스크롤바를 포함한 너비 > let ih = window.innerHeight; let iw = window.innerWidth; document.getElementById('ih').innerText += ih; document.getElementById('iw').innerText += iw;

DOCTYPE html> Document @font-face { font-family: 'KCCChassam'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/KCCChassam.woff2') format('woff2'); font-weight: normal; font-style: normal; } body{ font-family: 'KCCChassam'; background-color: rgb(255, 249, 252); } header{ text-align: center; margin: 50px 0; } header>img{ width: 280px; height: 200px; } header>h1{ color: rgb(2..

DOCTYPE html> 비표준 속성 let li_last_tag = document.querySelectorAll('.list'); console.log(li_last_tag); //NodeList console.log(li_last_tag[0].dataset.ino); //0번지의 ino값 : li_last let liLast = li_last_tag[0].dataset.ino; //0번지의 ino값 : li_last console.log(liLast); console.log(li_last_tag[0].dataset.itemcategory); // 대문자로 작성해도 소문자로 읽음 = 소문자 작성하세요(대문자x) // 0번지의 itemcategory값: litop

Promise Chain 방식 데이터 가져오기 document.getElementById('btn').addEventListener('click',()=>{ // fetch('https://jsonplaceholder.typicode.com/todos/1') //데이터 가져와서 // .then(resp => resp.json()) //1. 매개변수 resp에 json형식으로 데이터를 넣고 리턴 // .then(json => console.log(json)); //콘솔에 찍어라 // .catch(err=> console.log(err)); //실패시 // .then(resp => resp.text()) //2. 매개변수 resp에 text형식으로 데이터를 넣고 리턴 // .then(text => conso..

DOCTYPE html> async await 데이터 불러오기 document.getElementById('btn').addEventListener('click',()=>{ async function awaitEx(){ try{ const resp = await fetch('https://jsonplaceholder.typicode.com/todos/1'); // resp = response 응답 // 받아서 저장하는 경우 ) 원하는 사용에 따라 text(),json()으로 저장! const result = await resp.text(); // 1. resp를 text로 받아 저장 -> type = string const result1 = await resp.json(); // 2. resp를 json..

HTML 삽입 미리보기할 수 없는 소스 DOCTYPE html> 구구단 맞추기 문제는 10문제 출제 맞추면 blue / 틀리면 pink 정답률도 프린트 문제 출제 정답! // 랜덤 단 function makeDan(){ return Math.floor(Math.random()*8)+2; } // 랜덤 곱할 숫자 function makeNum(){ return Math.floor(Math.random()*9)+1; } let comAns = []; //정답을 담는 배열 생성 let printQuiz = document.getElementById('q'); //문제 출제 document.getElementById('start').addEventListener('click',()=>{ let str=" "; ..

팝업창 : window.open('url', 'window name', 'option(size, scroll..)' ); 열기버튼을 누르면 ) 팝업창이 열리고 닫기버튼을 누르면 ) 팝업창이 닫힘 열기 닫기 let myWindow; function openWindow(){ myWindow = window.open("","mywindow", "width=400, height=500"); // myWindow = open("","mywindow", "width=400, height=500"); //window. 이 없어도 사용은 가능 } function closeWindow(){ if(myWindow){ //myWindow가 true이면 (열려있으면) myWindow.close(); } } == 메서드 == ..

BOM : Browser Object Model = 브라우저 자체를 지칭하는 객체, window객체라고 함 DOM : Document Onject Model window.innerHeigth : 툴바를 제외한 높이 window.innerWidth : 스크롤바를 포함한 너비 위도우와 브라우저 화면 배율에 따라 달라짐 크기를 바꾸고 f5시 높이와 너비가 바껴서 알려줌 window.innerHeight : window.innerWidth : let ih = window.innerHeight; let iw = window.innerWidth; document.getElementById('ih').innerText += ih; document.getElementById('iw').innerText += iw;