비교 연산자
== 같다.
=== 일치한다(값이 같고 데이터 형식도 같다).
같다 vs 일치하다
alert("5" == 5); //'true', 둘 다 '5'이다.
alert("5" === 5); //'false', 둘 다 '5'이지만, 같은 데이터 형식은 아니다.
alert("5" != 5); //'false', 둘 다 '5'니까
alert("5" !== 5); //'true', 같은 데이터 형식이 아니다.
내장 함수
* alert(), confirm(), prompt() : 브라우저 단계의 대화 상자를 표시한다.
* Date() : 현재의 날짜와 시간을 반환한다.
* parseInt("123") : 숫자를 포함한 문자열 데이터 형식을 인수로 받아서 숫자 데이터 형식으로 바꾼다. 문자열은 인수로 함수에 전달된다.
* setTimeout(functionName, 5000) : 지정된 지연 시간 후에 함수를 실행한다. 함수가 첫 번째 인수로 지정되고, 지연 시간은 두번째 인수에서 밀리 초로 지정된다. 예에서의 5000밀리 초는 5초에 해당한다.
변수의 범위와 var 키워드
변수 충돌을 겪지 않는 것이 최상이다. 따라서 가능하면 모든 변수를 지역 변수로 설정하도록 한다.
//모든 변수를 지역 변수로 만들려면 다음 래퍼(wrapper)에 모든 자바스크립트 코드를 넣으면 된다.
<script>
(function(){
//실행코드
})();
<script>
/*이처럼 모든 변수를 지역 변수로 만드는 격리 조치를
IIFE(Independently Invoked Functional Expression)라고 한다.*/브라우저 객체
자바스크립트에서는 window객체가 브라우저를 뜻한다. window 객체에는 다수의 속성과 메소드가 있다. 실제로 alert() 함수는 표준 브라우저 객체의 메소드 중 하나이다.
브라우저의 속성과 메소드
| 속성/메서드 | 설명 |
| event 속성 | 이벤트의 상태를 표시한다. |
| history 속성 | 브라우저 창에서 사용자가 방문한 URL을 포함한다. |
| location 속성 | 주소 입력 줄의 URL을 읽거나 설정할 수 있다. |
| status 속성 | 창의 상태 표시줄에 텍스트를 설정하거나 반환한다. |
| alert() 메서드 | 지정된 메시지와 <OK> 단추를 포함한 경고창을 표시한다. |
| close() 메서드 | 현재 창을 닫는다. |
| confirm() 메서드 | 지정된 메시지, <OK> 단추, <Cancel> 단추를 포함한 대화 상자를 표시한다. |
| focus() 메서드 | 현재 창에 포커스를 설정한다. |
이벤트
이벤트는 자바스크립트가 감지할 수 있는 동작으로, 문서가 로드되거나 사용자가 요소를 클릭하거나 마우스를 움직이는 것과 같은 동작을 말한다.
페이지에서 발생하는 이벤트는 사용자, 브라우저 자체, 다른 스크립트에 의해서 발생할 수 있다.
스크립트와 이벤트를 연결하는 것 = 이벤트 바인딩(Event Binding)이라고 한다.
자주 사용하는 이벤트
| 이벤트 처리기 | 이벤트 설명 |
| onblur | 요소가 포커스를 잃는다. |
| onchange | 폼 필드의 콘텐츠가 변경된다. |
| onclick | 마우스로 객체를 클릭한다. |
| onerror | 문서나 이미지가 로드될 때 오류가 발생한다. |
| onfocus | 요소가 포커스를 갖는다. |
| onkeydown | 키보드의 키가 눌린다. |
| onkeypress | 키보드의 키가 눌린 채로 유리된다. |
| onkeyup | 키보드의 키를 놓는다. |
| onload | 페이지나 이미지가 로딩을 끝낸다. |
| onmousedown | 마우스 단추가 눌려진다. |
| onmousemove | 마우스가 움직인다. |
| onmouseout | 마우스가 요소 밖으로 움직인다. |
| onmouseover | 마우스가 요소 위로 움직인다. |
| onmouseup | 마우스 단추를 놓는다. |
| onsubmit | 폼에서 전송 단추를 누른다. |
페이지의 항목에 이벤트 처리기를 적용하는 세 가지 방법이 있다
1. HTML 속성 이용하기
2. 요소에 첨부된 메서드 이용하기
3. addEventListener 이용하기
HTML 속성을 이용한 이벤트 처리
<body onclick="myFunction();">
/*<body>요소 안의 아무거나 클릭하면 myFunction()함수가 실행된다. */
-> 예전 방식이라 잘 사용하지 않음. 시맨틱 레이어와 행동 레이어의 경계를 모호하게 해서 유지 관리를 어렵게 만들 수 있다.
요소에 첨부된 메서드를 이용한 이벤트 처리
window.onclick=myFunction;
/*브라우저 창 안의 아무거나 클릭하면 myFunction() 함수가 실행된다.*/window.onclick=function(){
/*브라우저 창 안의 아무거나 클릭하면 이곳에 있는 코드가 실행된다. */
}
pros) 유지 관리가 쉽다
cons) 한번에 하나의 이벤트만 이 메서드와 연결할 수 있다.
window.onclick=myFunction;
window.onclick=myOtherFunction;
=> 두번째 바인딩은 첫 번째 바인딩을 무효로 한다. 따라서 사용자가 브라우저 창에서 클릭하면 myOtherFunction()함수만 실행된다.
addEventListener를 이용한 이벤트 처리
window.addEventListener("click", myFunction);하나의 객체에 복수의 이벤트를 연결할 수 있게 해준다.
window.addEventListener("click", function(e){
});
예제 1 : 더 큰 값 반환하기
function greatestOfTwo(first, second){
if(first > second){
return first;
} else {
return second;
}
}
예제 2: 배열에서 가장 긴 단어 반환하기
function longestWord(stirngs){
var longest = strings[0];
for (i = 1l i<strings.length; i++){
if (strings[i].length > longest.length){
longest = strings[i];
}
}
return longest;
}스크립트 위치
<script> 요소는 문서의 어느 곳에도 들어갈 수 있지만 가장 일반적인 위치는 문서의 <head>부분이나 <body>의 끝 부분이다. 유지 관리가 어려우므로 스크립트를 문서 여러 곳에 흩어지게 입력하면 안 된다.
'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 예외처리 및 이벤트 처리 (1) | 2024.11.26 |
|---|---|
| [JavaScript] 브라우저 객체 모델 (0) | 2024.11.26 |
| [JavaScript] 자바스크립트 내장 객체 (1) | 2024.11.25 |
| [JavaScript] 사용자 정의 자료형 활용 (2) | 2024.11.25 |
| 문서 객체 모델 DOM(Document Object Model) (0) | 2024.11.20 |