coding with cong

https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json 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: 50..

https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json (데이터 주소)

비표준 속성 : html 태그의 속성이 제한적이므로, 데이터 관리 차원에서 개발자들에게 직접 속성을 만들 수 있는 방법을 제공 자신이 원하는 속성을 직접 개발해서 넣는 방법 = 사용자 문법 가능 MarkUp 언어들은 사용자(개발자)들에게 표준이 아닌 사용자만의 문법을 사용할 수 있도록 설계되어 있음 너무 과도하게 사용하는 경우, 개발효율과 가독성이 낮아짐 태그 속성의 이름 : data-로 시작 + 하이픈(-)뒤에 특정의미를 갖는 이름을 사용 = 이 규칙은 자바스크립트에서 인식O = 이름은 소문자로 작성 dataset property : 읽어오기 단, 대문자 허용X 대문자를 사용하더라도 소문자로 변환해서 읽음 let li_last_tag = document.querySelectorAll('.list'); ..

비동기통신 asynchronous communication : AJAX를 가장 많이 사용 데이터를 받는 방식(통신) : 동기통신 / 비동기통신 동기 통신(synchronous) : 동시에 일어나는 요청을 하면 (바로)응답을 받는다는 의미 단점) 하나의 업무가 끝나야 다음 업무가 시작됨 = 결과가 주어지기 전까지 아무것도 못하고 대기 장점) 설계가 간단하고 직관적 비동기 통신(asynchronous) : 동시에 일어나지 않음 요청을 하고 응답을 받는 시간이 걸림 즉, 요청한 그 자리에서 결과가 주어지지 않을 수 있음 작업에 대한 모션이 별개로 이루어짐! 장점) 요청한 업무의 결과가 나오지 않아도, 다른 업무를 보는 것이 가능 예) 아이디 중복체크 : 아이디를 중복체크하는 동안, 타 입력을 할 수 있도록 함..

파일명 : 전송 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스    DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta http-equiv="X-UA-Compatible" content="IE=edge">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>    style>        .green{            color: green;        }        .red{            color: red;        }    style>hea..

" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스   DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta http-equiv="X-UA-Compatible" content="IE=edge">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>가위바위보게임title>head>body>             컴퓨터가 가위1, 바위2, 보3 중 하나를 정하면 나도 가위, 바위, 보 중 하나를 선택 게임 -->            승패에 대한 결과를 출력 총 5번 횟수         컴퓨터는 랜덤으로 가위, 바위, 보 중 ..

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

DOCTYPE html> JSON const stringData = '{"id":"1234", "type":"donut","name":"cake",'+ '"image":{"url":"img/0001.jpg","width":"200","height":"200"},'+ '"thumbnail":{"url":"img/thumbnail/0001.jpg","width":"20","height":"20"}}'; let parseData = JSON.parse(stringData); console.log(parseData); //console에 key : value 형식으로 출력해보기 //for in으로 접근하기 for(const s in parseData){ if(s == 'image'){ //image의 경우 co..