coding with cong

1. button 안에 onclick을 사용하는 방법 창 열기 function openWindow(){ myWindow = window.open("","mywindow", "width=400, height=500"); // myWindow = open("","mywindow", "width=400, height=500"); //window. 이 없어도 사용은 가능 } 2. document.getElementById('id').addEventListener('click',()=>{ }) document.getElementById('back').addEventListener('click',()=>{ history.back(); }) 3. document.getElementById('id').addEventL..

querySelector() , querySelectorAll() : HTML 노드 (관리객체)로 리턴하는 메서드 getElement**() : HTML Collection으로 리턴 name, id 속성으로 접근 가능 속성 접근시 더 유용, 더 빠르고 많은 지원 받기 가능 element = document.getElementById(id); id를 통해 엘리먼트를 반환한다. 만약 document에 구체적인 ID의 엘리먼트가 없다면 null을 반환한다. querySelector() , querySelectorAll() : NodeList 형태로 리턴 배열, classList 등 여러개의 값 가져오기 사용시 많이 사용 index번호처럼 [0] 번지로 접근 가능 더 구체적인 엘리먼트를 선택하고 싶은 경우 1...

history 객체 브라우저의 저장소를 기반으로 하기 떄문에! 보안이쓔로 접근방어 해놓는 경우, 작동하지 않을 수도 있음 history.back() : 이전 방문 페이지로 이동 back document.getElementById('back').addEventListener('click',()=>{ history.back(); }) history.forword() : 다음 방문한 페이지로 이동 forword document.getElementById('forword').addEventListener('click',()=>{ history.forward(); }) history.go(number) : number번째 페이지로 이동 history.go(-2) : 이전페이지로 이동 back forword go(..

DOM ( Document Object Model ) : 문서(html) 객체 모델 '' 하위 태그 : 각각의 기능(Method), 속성(properties)를 갖고 있는 문서 객체 특징 getElements로 가져오는 객체는 우선적으로 HTMLCollection의 index를 선택해야 함 = 배열처럼 사용 == 엘리먼트 가져오기 == tag의 값을 element로 가져오는 메서드 = byId, byClassName, byTagName document.getElementById( 'idName' ) :단일 엘리먼트 리턴 (id는 한개뿐임으로) h1 const h1 = document.getElementById('h1'); console.log(h1); document.getElementByClassNam..

location 객체 : 브라우저의 주소표시줄 입력에 관련된 객체 location.href = 'url' ; : 해당 url로 이동 히스토리 객체에 이동 정보를 저장함 = 뒤로가기 가능 href 사용 이동 (네이버) document.getElementById('href').addEventListener('click',()=>{ location.href='https://www.naver.com/'; }) location.replace('url'); : 해당 url로 이동 히스토리 객체에 이동 정보를 저장하지 않음 = 뒤로가기 불가능 replace 사용 이동 (다음) document.getElementById('replace').addEventListener('click',function(){ locatio..

setInterval ( callback function, interval duration ) : duration(mullisecond)를 주기로 지속적으로 callback function 호출 clearInterval(할당받은 객체)로 중지 DOCTYPE html> setInterval method h1{ background-color: brown; color: white; } 시작 끝 냠냠 let intervalObj; //함수반복 실행 setInterval function flashColor(){ intervalObj = setInterval(changeColor, 1000); } //함수 반복 해제 clearInterval function stopColor(){ clearInterval(inter..

setTimeout ( callback function , duration ); : duration 시간 후에 callback function 실행 setTimeout을 할당한 객체를 clearTimeout(할당한 객체)로 취소가 가능 사용 - 버튼을 누리면 3초 후에 나타나는 setTimeout 설정 1초 = 1000 millisecond / 3초 = 3000 시작 끝 3초후 글자 등장 let timeObj; //timeout을 설정할 객체 //글자를 변경하는 함수 function myFun(){ document.getElementById('result').innerText = "등장했다. 3초뒤. 글자"; } //시작 (setTimeout) document.getElementById('start')...

팝업창 : 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;

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