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..

DOCTYPE html> 사진변경 홈페이지 body{ text-align: center; } h1{ border: 5px solid black; margin: 30px auto; height: 50px; width: 12%; } ul>li{ list-style: none; display: inline; margin-right:20px; } ul{ list-style: none; width: 50%; margin: 10px auto; } div>img{ margin-top: 30px; width: 50%; height: 30%; /* background-size: cover; background-repeat: no-repeat; */ } Travle Home Seoul Tokyo Paris function..

DOCTYPE html> 함수와 파라미터 자바스크립트의 파라미터 특징과 기능 파라미터의 개수와 관계없이 함수나 메서드의 이름이 같다면 호출가능 파라미터의 개수와 불일치하여 값을 받지 못하는 파라미터는 undefined 처리 값을 받아오지 못하는 파라미터가 undefined 일 경우, 별도로 파라미터에 기본값을 설정할 수 있음 => optional parameter 모든 파라미터를 관리하는 arguments라는 프로퍼티를 이용하여 파라미터를 배열에 담아 사용할 수 있음 프로토 타입의 속성(프로퍼티)을 사용하는 방식 (단, 옵셔널 파라미터는 저장하지 않는다) 옵셔널 파라미터는 다른 파라미터보다 항상 뒤에 있어야함 function testFun(p1, p2, p3, p4, p5=1){ console.log(a..

HTML 삽입 미리보기할 수 없는 소스 DOCTYPE html> 계산기 7 8 9 + C 4 5 6 - 1 2 3 * . 0 = / const fomula = document.getElementById('printFomula'); let fomulaValue =""; //연산의 결과를 나타낼 함수 function operation(f, o, l){ let result = 0; switch(o){ case "+": result = f + l; break; case "-": result = f - l; break; case "*": result = f * l; break; case "/": result = f / l; break; default: break; } return result.toFixed(2);..