자바스크립트 쿠기 (Cookies)

쿠키로 사용자 정보를 웹 페이지에 저장할 수 있습니다. 쿠키(Cookies)란? 쿠키는, 컴퓨터에 작은 텍스트 파일로 저장된, 데이터입니다. 웹 서버가 브라우저에 웹 페이지를 보내면, 연결은 종료되고, 서버는 사용자에 관한 모든 것을 잊어 버립니다. 쿠키는 “사용자 정보를 기억하기” 위해 고안되었습니다: 사용자가 웹 페이지를 방문하면, 사용자의 이름을 쿠키에 저장할 수 있습니다. 다음에 사용자가 페이지를 방문하면, 쿠키는 사용자의 이름을 “기억”합니다. 쿠키는 name-value 쌍으로 다음과 같이 저장됩니다: username = John Doe 브라우저가 서버에 웹 페이지를 요청하면, 해당 페이지에 속한 쿠키가 그 요청에 추가됩니다. 서버는, 사용자에 대한 정보를 “기억”하기 위해, 필요한 데이터를 이렇게 얻습니다. 브라우저의 로컬 쿠키 지원이 꺼져있으면, 아래 예제들은 모두 작동하지 않습니다. 자바스크립트로 쿠키 만들기 자바스크립트는 document.cookie 속성으로 쿠기를 만들고, 읽고, 삭제할 수 있습니다. 자바스크립트로 […]

자바스크립트 Timing Events

div.dig, div.hour, div.min, div.sec { position:absolute; } div.hour, div.min, div.sec { width:2px; height:2px; font-size:2px; } div.dig { width:30px; height:30px; font-family:arial,verdana,sans-serif; font-size:10px; color:#000000; text-align:center; padding-top:10px } div.min { background:#0000FF; } div.hour { background:#000000; } div.sec { background:#FF0000; } 1 2 3 4 5 6 7 8 9 10 11 12 자바스크립트는 time-intervals로 실행할 수 있습니다. 이것은 timing 이벤트(events)를 호출한 것입니다. Timing 이벤트(Events) window 객체는 지정된 시간 간격으로 코드를 실행할 수 있습니다. 이 시간 간격(time intervals)을 timing 이벤트(events)라고 합니다. 자바스크립트로 사용하는 2가지 방법은: setTimeout(function, milliseconds)지정한 밀리 초를 기다린 후 함수를 실행합니다. setInterval(function, milliseconds)setTimeout()과 같지만, 함수를 계속 반복 실행합니다. setTimeout()과 setInterval()는 모두 HTML DOM Window 객체(object)의 메소드(methods)입니다. setTimeout() 메소드 window.setTimeout(function, milliseconds); window.setTimeout() 메소드는 […]

자바스크립트 Popup Boxes

자바스크립트에는 세 종류의 팝업 상자가 있습니다: 경고 상자, 확인 상자 및 프롬프트 상자(Alert box, Confirm box, and Prompt box): . 경고 상자 (Alert Box) 사용자에게 정보를 확실하게 전달하기 위해, 경고 상자를 자주 사용합니다. 경고 상자가 나타나면(pops up), 사용자는 계속 진행하기 위해 “확인(OK)”을 클릭해야 합니다. 구문 window.alert(“sometext”); window.alert() 메소드는 window 접두사 없이 작성할 수 있습니다. Example Try it function myFunction() { alert(“I am an alert box!”); } Try it function myFunction() { alert(“I am an alert box!”); } 확인 상자 (Confirm Box) confirm box는 사용자가 무언가를 확인하거나 수락하기를 원할 때 자주 사용됩니다. 확인 상자가 나타나면(pops up), 사용자는 “확인(OK)”또는 “취소(Cancel)”를 클릭해야 계속할 수 있습니다. 사용자가 “확인”을 클릭하면 상자는 true를 반환합니다 . 사용자가 […]

JavaScript Window Navigator

window.navigator 객체는 방문자의 브라우저에 대한 정보를 포함합니다. Window Navigator window.navigator 객체는 window 접두사 없이 작성할 수 있습니다. 예제: navigator.appName navigator.appCodeName navigator.platform Browser Cookies cookieEnabled 속성은 쿠키가 활성화되면(enabled) true를 반환하고, 활성화되지 않으면 false를 반환합니다: Example cookieEnabled 속성은 쿠키가 활성화되면 true를 반환합니다: document.getElementById(“demo”).innerHTML = “navigator.cookieEnabled is ” + navigator.cookieEnabled; cookieEnabled 속성은 쿠키가 활성화되면 true를 반환합니다: document.getElementById(“demo”).innerHTML = “navigator.cookieEnabled is ” + navigator.cookieEnabled; Browser Application Name appName 속성은 브라우저의 응용 프로그램 이름을 반환합니다: Example 이상하지만, “Netscape”는 IE11, Chrome, Firefox, and Safari의 응용프로그램 이름입니다. document.getElementById(“demo2”).innerHTML = “navigator.appName is ” + navigator.appName; 이상하지만, “Netscape”는 IE11, Chrome, Firefox, and Safari의 응용프로그램 이름입니다. document.getElementById(“demo”).innerHTML = “navigator.appName is ” + navigator.appName; 이상하지만, “Netscape”는 IE11, Chrome, Firefox, and Safari의 […]

자바스크립트 Window History

window.history 객체는 브라우저 히스토리(browsers history)를 포함합니다. Window History window.history 객체는 window 접두사 없이 작성할 수 있습니다. 사용자의 개인 정보(privacy)를 보호하기 위해, 자바스크립트가 이 객체에 액세스하는 방법에는 제한이 있습니다. 메소드(methods): history.back() – 브라우저에서 back을 클릭하는 것과 같습니다. history.forward() – 브라우저에서 forward를 클릭하는 것과 같습니다. Window History Back history.back() 메소드는 history 목록에서 이전 URL을 로드합니다. 이것은 브라우저에서 Back button을 클릭하는 것과 같습니다. Example function goBack() { window.history.back() } function goBack() { window.history.back() } Window History Forward history forward() 메소드는 history 목록에서 next URL을 로드합니다. 이것은 브라우저에서 Forward button을 클릭하는 것과 같습니다. Example function goForward() { window.history.forward() } function goForward() { window.history.forward() } 출처: JavaScript Window History

자바스크립트 Window Location

window.location 객체는 현재 페이지 주소(URL)를 가져오고, 브라우저를 새 페이지로 리디렉션하는 데 사용할 수 있습니다. Window Location window.location 객체는 window 접두사 없이 작성할 수 있습니다. 예제: window.location.href는 현재 페이지의 href (URL)를 반환합니다. window.location.hostname은 웹 호스트의 도메인 이름을 반환합니다. window.location.pathname은 현재 페이지의 경로와 파일 이름(path and filename)을 반환합니다. window.location.protocol은 사용된 웹 프로토콜(http : 또는 https :)을 반환합니다. window.location.assign은 새 문서(document)를 로드합니다. Window Location Href window.location.href 속성은 현재 페이지의 URL을 반환합니다. Example The window.location object document.getElementById(“demo”).innerHTML = “The full URL of this page is:” + window.location.href; The window.location object document.getElementById(“demo”).innerHTML = “The full URL of this page is:” + window.location.href; Window Location Hostname window.location.hostname 속성은 (현재 페이지의)인터넷 호스트의 이름을 반환합니다. Example The window.location […]

자바스크립트 Window Screen

window.screen 객체는 사용자 화면에 대한 정보를 포함합니다. Window Screen window.screen 객체는 window 접두사 없이 작성할 수 있습니다. 속성(Properties): screen.width screen.height screen.availWidth screen.availHeight screen.colorDepth screen.pixelDepth Window Screen Width screen.width 속성은 방문자의 화면 너비를 픽셀 단위로 반환합니다. Example document.getElementById(“demo”).innerHTML = “Screen width is ” + screen.width; document.getElementById(“demo”).innerHTML = “Screen width is ” + screen.width; Window Screen Height screen.height 속성은 방문자의 화면 높이를 픽셀 단위로 반환합니다. Example document.getElementById(“demo2”).innerHTML = “Screen height is ” + screen.height; document.getElementById(“demo”).innerHTML = “Screen height is ” + screen.height; Window Screen Available Width screen.availWidth 속성은 방문자의 화면 너비 (픽셀 단위)에서 Windows 작업 표시 줄과 같은 인터페이스 기능을 뺀 값을 반환합니다. Example document.getElementById(“demo3”).innerHTML = “Available screen width is ” + […]

자바스크립트 Window – The Browser Object Model

자바스크립트는 Browser Object Model(BOM)로 브라우저와 “대화(talk to)”할 수 있습니다. Browser Object Model (BOM) Browser Object Model (BOM)에 대한 공식적인 표준(official standards)은 없습니다. 최신 브라우저는 자바스크립트 상호작용(interactivity)에 대해 (거의) 동일한 메소드와 속성(methods and properties)을 구현했기 때문에, 이것은 자주 BOM의 메소드 및 속성으로 언급됩니다. Window 객체(Object) window 객체는 모든 브라우저에서 지원됩니다. 이것은 브라우저 창(window)입니다. 모든 전역(global) 자바스크립트 객체, 함수 및 변수는 자동으로 윈도우 객체가 됩니다. 전역 변수(Global variables)는 윈도우 객체의 속성(properties)입니다. 전역 함수(Global functions)는 윈도우 객체의 메소드(methods)입니다. 심지어 (HTML DOM의) 문서(document) 객체도 윈도우 객체의 속성(property)입니다: window.document.getElementById(“header”); 위 코드는 다음 코드와 동일합니다: document.getElementById(“header”); 창 크기(Window Size) 두 속성을 사용하여 브라우저 창의 크기를 결정할 수 있습니다. 두 속성 모두 크기를 픽셀(pixels) 단위로 반환합니다: window.innerHeight […]