고정 헤더 영역
상세 컨텐츠
본문
자바스크립트 객체(Object)
숫자 문자열 함수 배열 등 모두 객체.
객체에 속한 변수의 속성 (Property)와 객체에 속한 함수인 메써드 (Method)로 구성.
하나의 객체는, 데이터를 의미하는 속성과 데이터를 처리하는 기능을 가진 메써드의 집합.
<script>
var person = { // person 객체 생성
name : "홍길동", // person 객체에 속한 속성
age : 25, // person 객체에 속한 속성
sayHello : function() { // person 객체에 속한 메써드, 익명_함수의 형태
document.write(this.name + "님 안녕"); // person 객체 안에서 이 객체에
} // 속한 속성을 호출하기 위해 this 사용
};
document.write("이름 : " + person.name + "<br>");
document.write("나이 : " + person.age + "<br>");
person.sayHello(); // 함수 호출
</script>
익명_함수를 생성하는 것을 ' 함수 리터럴 ' 이라고 하듯, 객체를 생성하는 것은 ' 객체 리터럴 ' 이라 한다.
변수와 객체의 차이
변수는 데이터를 저장하고 있는 메모리 공간을 의미, 객체의 각 요소들은 키와 값으로 구성된다.
객체는 요소들은 키와 값과 자체의 함수인 메써드도 가질 수 있는 점에서 변수와 다르다.
객체 종류
사용자 정의 객체 (User Defined Object) : 프로그래머가 객체 속성을 정의하여 사용하는 방식
내장 객체 (Build In Object) : 자바스크립트에 기본적으로 내장되어 있는 객체, 별도의 정의 없이 이용 가능
// 배열(Array) 숫자(Number) 문자열(String) 수학(Math) 날짜(Date) 객체가 있다.
문서 객체 모델 (Document Object Model : DOM) : HTML의 문서구조를 말한다.
// Document 객체 아래 HTML 요소들이 트리구조로 구성, 트리구조에 있는 HTML 요소,
// 즉 객체에 변경하면 객체에 접근해서 요소의 내용을 바꾸거나 설정된 CSS로 변경해서 사용하면 된다.
// 자바스크립트보다 더 쉽게 편리하게 DOM을 처리할 수 있는 라이브러리 (JQuery)가 있다.
// JQuery를 이용해서 다루는 것이 더 좋다.
브라우저 객체 모델 (Browser Object Model : BOM) : 자바스크립트에서 브라우저를 다루는데 필요한 객체
// Window, Screen, Location, History, Navigator 등의 객체가 있다.
사용자 정의 객체 user defined object
New 연산자와 생성자 함수를 사용하는 방법
1. 생성자 함수를 사용해서 객체의 타입을 정의하는데, 생성자 함수의 첫 자는 반드시 영문 대문자 사용.
2. New를 이용해서 객체를 생성.
<script> // Literal 반식으로 member 객체 생성
var member = {
name : "홍길동",
email : "hong@naver.com",
phone : "010-1234-7568"
}
document.write(member.name + "<br>");
document.write(member.email + "<br>");
document.write(member.phone + "<br>");
</script>
<script>
function Car (company, model, year) { // 생성자 함수 Car() 정의
this.company = company; //this를 사용않고, company를 작성하면 var company가 됨
this.medel = model;
this.year = year;
}
var car1 = new Car("현대","아반떼",2021); // Car() 생성자 함수와 new 연산자를 사용해서 car1 객체 생성
var car2 = new Car("르노","sm5",2020); // Car() 생성자 함수와 new 연산자를 사용해서 car2 객체 생성
document.write(car1.company + " / " + car1.model + " / " + car1.year + "<br>");
document.write(car2.company + " / " + car2.model + " / " + car2.year);
</script> <script>
var object = {
name : "전우치",
age : 22
};
document.write(object.name + "<br>");
document.write(object.age + "<br><br>");
document.write(object["name"] + "<br>");
document.write(object["age"] + "<br>");
</script>
<script>
var object = {
name : "전우치",
age : 22,
address : "서울"
}
var str ="";
for (var i in object) { // 문자열, 사진, 그림 등 초기화
str += object[i] + "<br>" // 최신 for() 구문
}
document.write(str+"<br>");
</script>
문서객체 모델 (DOM)
객체에 변경하면 객체에 접근해서 요소의 내용을 바꾸거나 설정된 CSS로 변경해서 사용하면 된다.
<body>
<h2>글 제목</h2>
<p id="result"></p>
<script>
document.getElementById("result").innerHTML = "안녕";
document.getElementById("result").style.color = "red";
</script>
</body>
Event
** 이벤트가 발생하면, 이 이벤트를 처리해주는 기능을 이벤트 핸들러(event handler)라 한다. **
<태그 on이벤트_명="함수_명">
마우스 이벤트
click(HTML 요소 클릭했을 때), dbclick(HTML 요소를 double click), mousedown(요소를 마우스로 눌렀을 때),
mousemove(마우스 포인터를 움직일 때), mouseover(요소 위로 마우스를 옮길 때),
mouseout(마우스 포인터가 요소를 벗어났을 때), mouseup(요소 위에 놓인 마우스 버튼에서 손을 땔 때)
( MouseDown-MouseUp-Click 이벤트 순으로 이벤트가 발생 )
키보드 이벤트
keydown(키를 누르는 동안), keypress(키를 눌렀을 때), keyup(키에서 손을 뗄 때)
문서 로딩 이벤트
abort(문서가 완전히 로딩 되기 전에 불러오기를 멈췄을 때), error(문서가 정확히 로딩되지 않았을 때),
load(문서의 로딩이 끝났을 때), resize(문서 화면 크기가 바뀔 때), scroll(문서가 스크롤될 때),
unload(문서에서 벗어날 때)
폼 이벤트
blur(폼 요소에서 포커스를 잃었을 때),
change(목록이나 테크 상태 등이 변경될 때 : <input>, <select>, <textarea> 태그에서 사용),
focus(폼 요소에 포커스가 놓일 때 : <label>, <select>, <textarea>, <button> 태그에서 사용),
reset(폼이 리셋되었을 때), submit (submit 버튼을 클릭 했을 때)
<style>
div {color : white; background-color : skyblue; padding : 10px; width : 200px;
text-align : center;}
</style>
<script>
function changeText (obj) {
obj.innerHTML = "클릭하셨습니다.";
}
function mouseOver (obj) {
obj.style.backgroundColor = "orange";
}
function mouseOut (obj) {
obj.style.backgroundColor = "skyblue";
}
</script>
</head>
<body>
<h2 onclick="changeText(this)">클릭해보세요</h2>
<div onmouseover = "mouseOver(this)"
onmouseout = "mouseOut(this)">마우스를 올려 보세요</div>
<!-- onmouseover 마우스를 올렸을 때, onmouseout 마우스를 올리지 않을 때.
onclick과 같은 event 활용 -->
</body>
<body>
<ul>
<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">green</a></li>
<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">orange</a></li>
<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">purple</a></li>
</ul>
</body>
내장 객체
var now = new Date();
document.write("현재 시간은 " + now);
브라우저 객체 모델 (BOM)
Window 객체 아래에 Document, Screen, Location, History, Navigator 객체 등을 하위 객체로 가지고 있다.
Window 열러있는 브라우저 창을 나타내는 객체, 탭 기능이 있는 웹 브라우저에서는 각각의 탭을 나타낸다.
Document 웹 페이지를 표현하는 객체, HTML 문서 내에 있는 모든 요소는 이 객체에서 시작된다. DOM이다
Screen 사용자 화면 정보를 담고 있는 객체
Location 현재 페이지의 URL 주소와 IRL 관련 정보를 가지는 객체
History 브라우저의 방문 기록을 조작(Operation, Manipulation)할 때 사용되는 객체
Navigator 방문자의 웹 브라우저 정보를 다루는데 사용되는 객체
Window 객체는 BOM의 최상위에 위치하는 객체이며, 브라우저 창을 다루기 위한 다양한 속성과 메써드 제공.
메써드
alert() 경고창 표시
open() 새로운 윈도우 창을 연다
close() 현재 창을 닫는다
moveTo() 현재 창을 지정된 위치로 이동
print() 현재 창의 내용을 프린터 출력
prompt() 메시지 출력하고, 키보드 입력 받음
resizeTo() 창 크기를 특정 너비와 높이로 변경
focus() 현재 창의 포커스를 얻음
속성
innerWidth 브라우저 창의 내용영역(스크롤바 포함), 뷰포트의 너비
innerHeight 브라우저 창의 내용영역(스크롤바 포함), 뷰포트의 높이
outerWidth 브라우저 창(스크롤바 포함)의 너비
outerHeight 브라우저 창(스크롤바 포함)의 높이
<script>
function openWin() {
window.open("popup.html","mycat","width=310, heigth=480,top=200, scrollbars=no");
}
</script> // popup.html 이 없기에 새창은 나오지만 아무것도 안나온다.
</head>
<body>
<button onclick = "openWin()">새 창 열기</button>
</body>
<body>
<h2>우리집 귀욤이</h2>
<img src="cat1.jpg" width="300" title="우리집 막내">
<p>사교성이 있고, 장난감을 가지고 노는 것을 좋아해요</p>
<p></p>
<button onclick="window.close()">창 닫기</button>
</body>'FrontEnd > JavaScript' 카테고리의 다른 글
| 배열 Array(PUSH, Number, pop(), length, splice(), slice(), substr(), replace(), 정규 표현식 Regular Expression, String 객체 문자열) (0) | 2022.07.06 |
|---|---|
| 객체 (Window, screen, location, history, navigator) (0) | 2022.07.06 |
| 함수 사용 예제 (0) | 2022.07.05 |
| 변수 스코프(scope) - 지역변수 전역변수 상수const 익명함수Anonymous Function (0) | 2022.07.03 |
| 함수 Function (내장함수, 사용자정의함수, 즉시실행함수, 람다식함수 객체) (0) | 2022.07.03 |
