HTML.CSS.JS/JS 127

[JS] popup 팝업창

팝업창 : 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(); } } == 메서드 == ..

HTML.CSS.JS/JS 2023.04.20

[JS] BOM, DOM 높이 / 너비

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;

HTML.CSS.JS/JS 2023.04.20

[JS] 비표준 속성 non_standard

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

HTML.CSS.JS/JS 2023.04.20

[JS] 비동기통신 ( async await ,promise Chain )

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

HTML.CSS.JS/JS 2023.04.20

[JS] 파일명 찾기

파일명 : 전송 " 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..

HTML.CSS.JS/JS 2023.04.19