4.1 브라우저 개체
이미 알고 있듯이 JavaScript 언어는 브라우저 내에서 작동하므로 어떻게든 동일한 브라우저와 상호 작용해야 합니다. 이를 위해 브라우저에는 JavaScript에서 사용할 수 있는 여러 개체와 기능이 있습니다.
첫 번째는 an object window브라우저 창을 설명하는 입니다. 또는 오히려 브라우저에 탭이 없을 때를 설명하곤 했습니다. 이제 window 객체는 스크립트가 있는 페이지가 로드되는 현재 브라우저 탭을 설명합니다.
an object document둘째, 탭에 표시되는 문서를 담당하는 사람 입니다 . 이것은 약간 혼란스러울 수 있습니다. 간단하게 설명하자면 문서는 사용자에게 표시되는 것이고 창은 이 문서가 표시되는 것입니다.
셋째, 이것은 an object console브라우저 콘솔로의 출력을 담당하는 것입니다. 예, 브라우저에도 콘솔이 있으며 주로 스크립트를 디버깅하고 오류 메시지를 표시하는 데 사용됩니다. 일반적으로 브라우저에서 F12 버튼을 눌러 열 수 있습니다.
Object window는 모든 페이지 개체의 최상위 개체입니다. document스크립트 에 개체 이름을 직접 작성할 수 있지만 console실제로는 해당 이름 window.document과 window.console.
4.2 JavaScript의 대화 상자
경고() 메서드
또한 an object window페이지 스크립트에 표시되는 여러 기능이 있습니다. 가장 일반적으로 사용되는 것은 alert(). 사용자에게 메시지가 있는 대화 상자를 표시할 수 있습니다. 그런 다음 사용자가 확인을 클릭할 때까지 스크립트가 일시 중단됩니다.
예:
alert("JavaScript is the best!");프롬프트() 메서드
사용자에게 값을 입력하도록 요청할 수 있는 기능도 있습니다. 이것은 입니다 prompt().
예:
var age = prompt("Enter Year of Birth");확인() 메서드
두 개의 버튼이 있는 대화 상자를 표시할 수 있습니다 Ok. Cancel사용자에게 몇 가지 작업에 대해 묻습니다.
예:
var isOK = confirm("Are you ready");4.3 onload() 이벤트
그리고 유용하고 흥미로운 순간이 하나 더 있습니다. 브라우저 창에는 문서가 완전히 로드될 때 발생하는 이벤트가 있습니다. 문서가 로드되고 표시된 후에 실행될 코드를 지정할 수 있습니다.
이는 세 가지 방법으로 수행할 수 있습니다.
먼저 JavaScript 코드를 속성 값으로 HTML 페이지에 직접 포함할 수 있습니다.
<body onload="alert('document loaded');">
<img src="big-image.png">
</body>둘째, JavaScript 코드를 HTML 페이지에 간단하게 삽입할 수 있습니다.
<head>
<script>
function load()
{
alert('document loaded');
}
window.onload = load;
</script>
</head>
<body>
<img src="big-image.png">
</body>셋째, 익명 함수를 선언하여 조금 더 짧게 작성할 수 있습니다.
<head>
<script>
window.onload = function () {
alert('document loaded');
}
</script>
</head>
<body>
<img src="big-image.png">
</body>4.4 onclick() 이벤트
그리고 마지막으로 또 다른 중요한 이벤트(이벤트)는 event OnClick. 사용자가 클릭한 모든 요소에서 발생합니다. 다른 방법으로 설정할 수 있는 것처럼 event OnLoad가장 간단한 방법만 제공합니다.
<body>
<img src="big-image.png" onclick="alert('user clicked on the image');">
</body>