인터넷으로 해외 직구할 때 반드시 필요한 정보가 한 가지가 있다. 개인통관고유부호(Personal Customs Clearance Code)이며 개인정보유출을 방지하기 위해 관세청에서 개인물품 수입신고시 주민등록번호 대신 활용할 수 있게 만든 부호다. 개인통관고유부호 개인통관고유부호는 쉽게 설명하면 물건의 주인이 누군지, 주인이 있는 물건이 맞는지 확인하는 코드라고 생각하면 된다. 이 코드는 주인의 집주소, 이름, 전화번호가 포함되어있어 국내배송을 할때 이 부호를 조회하여 운송장을 만든다. 개인통관고유부호 없이 해외에서 들어오는 물건은 주인이 없는 물건으로 간주되기 때문에 이 경우 밀수의 위험이 있어 통관되지 않고 반송되거나 폐기된다. 따라서 반드시 해외에서 들어올땐 개인통관고유부호가…

팝업 상자를 이용하여 새로운 팝업창을 만들 수 있다. Javascript 이용하여 출력할 수 있는 팝업에는 경고 상자, 확인 상자 및 프롬프트 상자가 있다. Popup Boxes 팝업창 내의 문구를 기재할 때 <br>과 같이 한 칸 띄고 싶다면 \n를 이용하면 된다. Alert Box 경고 상자는 사용자에게 정보를 전달하고 “확인”을 눌러야 계속할 수 있도록 하고싶을 때 사용한다. HTML <button onclick=”myFunction()”>Try it</button> Javascript function alertbox() { alert(“경고 상자 입니다!\n확인을 누르면 창이 닫힙니다.”); } Confirm Box 확인 상자는 사용자가 무언가를 ‘확인’하거나 ‘취소’를 클릭 해야하는 경우에 사용한다….

Javascript를 이용하여 뒤로가기, 앞으로가기 등 브라우저 히스토리를 이용한 기능을 만들 수 있다. window.history window 접두어는 생략해도된다. history.back() 브라우저에서 뒤로 버튼을 클릭하는 것과 같은 동작을 한다. HTML <input type=”button” value=”Back” onclick=”window.history.back()”> history.forward() 브라우저에서 앞으로 버튼을 클릭하는 것과 같은 동작을 한다. HTML <input type=”button” value=”Forward” onclick=”window.history.forward()”>

window.location window 접두어는 생략해도 된다. window.location을 이용하여 현재 페이지 주소(URL)를 가져오고 브라우저를 새 페이지로 리디렉션할 수 있다. window.location.href 현재 페이지의 href(URL)를 반환한다. HTML <p id=”href”></p> Javascript document.getElementById(“href”).innerHTML = “이 페이지의 전체 주소는 ” + window.location.href + “입니다.”; window.location.hostname 웹 호스트의 도메인 이름을 반환한다. HTML <p id=”hostname”></p> Javascript document.getElementById(“hostname”).innerHTML = “이 페이지의 도메인 이름은 ” + window.location.hostname + “입니다.”; window.location.pathname 현재 페이지의 경로와 파일 이름을 반환한다. HTML <p id=”pathname”></p> Javascript document.getElementById(“pathname”).innerHTML = “이 페이지의 URL 경로 이름은 ” + window.location.pathname +…

사용자의 화면에 대한 정보가 들어있는 window.screen 객체를 사용할 수 있다. window.screen window 접두사는 생략할 수 있다. screen.width 화면의 너비를 픽셀 단위로 반환한다. HTML <p id=”width”></p> Javascript document.getElementById(“width”).innerHTML = “화면 너비는 ” + screen.width + “px 입니다.”; screen.height 화면의 높이를 픽셀 단위로 반환한다. HTML <p id=”height”></p> Javascript document.getElementById(“height”).innerHTML = “화면의 높이는 ” + screen.height + “px 입니다.”; screen.availWidth Windows 작업 표시줄과 같은 인터페이스 기능을 뺀 값을 픽셀 단위로 반환한다. HTML <p id=”availwidth”></p> Javascript document.getElementById(“availwidth”).innerHTML = “사용 가능한 화면의 넓이는 ” +…

BOM = Browser Object Model = 브라우져의 기능/요소를 객체화 하여 제어할 수 있도록 하는것. ✔️ 표준이 정의되지 않아서 대부분의 브라우져에서 지원되지만 차이가 있을 수 있다.   대부분은 window 창을 띄우거나 닫을 때 많이 사용한다.   대표적인 객체로는 window 객체가 있고 window 객체의 하위 객체로 screen, location, history, navigator, popup boxes, document가 있다. 이 포스트에는 window 객체에 대해 먼저 알아보자. window windows 창 객체. 모든 전역 JavaScript 객체, 함수 및 변수는 자동으로 window 객체의 하위 객체가 된다. HTML DOM도 window 객체의…

Jascript를 이용하여 HTML 요소를 찾고 변경하고 추가/삭제 할 수 있다. HTML 요소 HTML 요소를 찾거나 변경하거나 추가 / 삭제할 때 어떤 메소드 / 속성을 이용하는지 알아보자. HTML 요소 찾기 document.getElementById(‘아이디’) HTML 문서에서 id가 ‘아이디’인 요소를 찾는다. document.getElementsByTagName(‘태그 이름’) HTML 문서에서 태그 이름이 ‘태그 이름’인 요소를 찾는다. document.getElementsByClassName(‘클래스 이름’) HTML 문서에서 class 이름이 ‘클래스 이름’인 요소를 찾는다. querySelector(‘선택자’) 문서에서 ‘선택자’가 들어간 요소를 찾는다. 여기서 선택자는 CSS 선택자와 동일한 방법으로 입력한다. 예를 들어, <p>의 경우 p, class=”class”의 경우 .class, id=”id”의 경우 #id…

Javascript 이용하여 CSS를 변경할 수 있다. CSS 변경 Javascript 이벤트가 발생될 때 CSS를 변경하면 더 재미있는 웹사이트를 만들 수 있다. 이벤트 생성하는 방법은 를 참고하자. getElementById() ID가 있는 요소에 대해서는 getElementById() 메서드 이용한다. Javascript document.getElementById(‘ID’).style.속성 = “속성값”; 이런식으로 입력을 한다. 코딩 HTML <p id=”pid”>강다니엘</p> <button>Change color</button> Javascript const btn = document.querySelector(‘button’); function random(number) { return Math.floor(Math.random() * (number+1)); } btn.onclick = function() { const rndCol = ‘rgb(‘ + random(255) + ‘,’ + random(255) + ‘,’ + random(255) + ‘)’; document.getElementById(‘pid’).style.color…

이벤트 Javascript의 이벤트란, 사건(action) 혹은 발생(occurrence)이다. 시스템은 이벤트가 발생될 때 몇몇 종류의 신호를 만들고 이벤트가 발생되었을 때 코드를 실행한다. 기초적인 이벤트 유형에는 요소위에 마우스를 가져가거나(hover), 버튼을 클릭(click)하거나, 키를 누르거나(keydown) 키에서 손을 떼는것(keyup)등이 사용된다. 이벤트 유형은 를 참고하자. 인라인 이벤트 핸들러 사용을 권장하지 않는다. 한 줄만 필요하다면 괜찮을 수 있으나 여러줄에서 필요하다면 여러번 입력을 해야하므로 번거롭다. 그 뿐 아니라 html과 javascript를 계속 혼합하여 코딩하면 분석하기 어려워진다. 이벤트 핸들러 프로퍼티 HTML <button>Change color</button> Javascript const btn = document.querySelector(‘button’); function random(number) { return…

함수 함수는 코딩할 때 필수적인 항목 중 하나다. 하나의 코드를 여러곳에서 불러오고자할 때 함수를 호출하여 이용한다. 함수는 내장 함수와 사용자 정의 함수가 있다. 내장 함수 함수 사용 요소 이름.함수 이름(); 이런식으로 입력을 한다. Javascript var myText = ‘I am a string’; var newString = myText.replace(‘string’, ‘sausage’); console.log(newString); 사용된 코드 설명 var newString = myText.replace(‘string’, ‘sausage’); : 변수 newString을 선언하고 myText에 있는 ‘string’을 ‘sausage’로 변환한다. console.log(newString); : 웹 콘솔에 변수 newString의 값이 출력된다. 자세한 사항은 를 참고하자. 사용자 정의 함수 함수…