※ 자바스크립트에서 html 객체 접근
- 웹 브라우저는 html 문서를 계층구조의 객체들로 관리하며,
자바스크립트는 이 객체들의 정보에 접근하여 객체를 제어할 수 있다.
▶ html 객체 구조
▷ window 객체
- 자바스크립트의 브라우저 내장객체의 최상위 객체
- Window 객체 ( location, navigator, history, screen, document 객체들이 들어있음 )
▷ Document 객체
- 현재의 문서에 대한 내용을 가지고 있다
- 제목, 배경색, 폼에 대한 속성을 가지고 있다
- html 페이지마다 하나씩 존재하는 객체 (웹 페이지를 나타낼 때)
BOM
- 브라우저객체모델 (Browser Object Model)
- 웹 브라우저와 관련된 객체의 집합
- DOM 이외의 객체집합 = BOM
- 대표적인 브라우저 객체 모델 - window, location, navigator, history, screen, document
DOM
- 문서 객체 모델 (Document Object Model)
- 하나의 웹 문서를 객체화해서 문서의 구조에 접근 할 수 있는 방법
- document 객체와 관련된 객체의 집합
▷ DOM Method
[1] document.getElementById()
- id값을 통해 해당 element에 접근
- 항상 하나만 존재하기 때문에 단수형
document.getElementById('tel')
>> getElementById() 이용해서 CSS 조작하기
//HTML
<div id="ex" style="color:blue;backgroundcolor:lightblue">스타일 변경하기</div>
//javascript
var divEx = document.getElementById("ex");
divEx.style.color = "red";
divEx.style.backgroundColor = "yellow"= > 특정 노드의 style속성을 사용하면 CSS요소에 접근할 수 있음
[2] document.getElementsByTagName()
- 콘텐츠 내에 삽입된 태그명을 통해 접근
- 여러 개가 존재하기 때문에 복수형 => 항상 배열로 값을 받게 됨
document.getElementsByTagName('img')var img = document.getElementsByTagName("img");
for(i=0;i<img.length;i++){
img[i].style.border="3px solid green";
}
[위 두개 혼합해서 사용]
document.getElementById('wrap').getElementsByTagName('img')- wrap 이라는 id를 가진 요소의 html 태그 중 img 태그만을 가져오도록 함
※ 객체
- 자바스크립트에서 객체는 일반적으로 웹 브라우저와 관계되어 사용 됨
- 객체들은 속성과 메서드를 가짐
▷ 브라우저 객체
- 브라우저 윈도우, 웹 문서, 문서에 포함된 이미지, 폼 등과 같은 요소들이 하나의 객체가 됨
ex ) window, document, frame, history, location, form, image, link, radio, text, navigator 등
- 계층적인 트리(tree)구조로 구성되어 있음. 따라서 브라우저 객체는 계층구조로 접근함
브라우저 객체에 접근
[1] 객체 이름으로 객체에 접근
- 객체 고유의 이름을 사용 (태그의 name 속성에 지정된 값)
window.document.form이름.입력상자이름= > window객체는 최상위 객체 이므로 생략가능
<FORM NAME="frm1">
아이디 :<INPUT TYPE="text" name="tel"> // 여기! 이거! tel !!var phone = window.document.frm1.tel.value;
[2] DOM Method 이용
- id값을 통해 해당 element에 접근 ( .getElementById() )
<FORM NAME="frm1">
아이디 :<INPUT TYPE="text" name="tel" id="tel">var phone = document.gelElementById("tel").value;= > 문서(document)내에서 'tel'이라는 id를 가진 요소를 가져와서 phone 변수에 넣어라
▽
<!DOCTYPE html>
<html><head><meta charset="EUC-KR">
<title>DOMTest1.html</title>
<script type="text/javascript">
function send(){
var id = window.document.frm.userid.value;
var tel = document.getElementById("tel").value;
alert("id : "+ id + ", tel :" + tel);
}
</script>
</head><body>
<H3>회원가입</H3>
<FORM NAME="frm">
아이디 <INPUT TYPE="text" name="userid"><br>
전화번호 <INPUT TYPE="text" name="tel" id="tel"><br>
<INPUT TYPE="button" value="확인" onClick="send()">
</FORM></body></html>확인 버튼을 누르면
id = userid 인 '아이디' text 창에서 value를 가져오고
id = tel 인 '전화번호' text 창에서 value를 가져와서
"id : "+ id + ", tel :" + tel 형태로 출력함
▷ 내장객체
- 시간(날짜), 배열 등과 같이 자바스크립트 자체에 내장된 객체도 있음
ex ) Date, Math, String, Array 등
▶ 속성
- 객체의 특징, 성질
- 하위 객체는 상위 객체의 속성이 됨 ex ) image는 하나의 객체이지만, document 객체의 속성이 됨
객체.속성 = “속성값”;document.bgColor = “green”;
▶ 메서드
- 객체의 동작, 하는 일, 기능
객체.메서드(값)window.open()
document.write()
※ 함수
- 함수란 특정 기능을 수행하는 코드의 단위
▶ 내장함수
- 자체적으로 정의되어 있는 함수 (객체와 연결되어 사용되는 메서드와는 달리 객체에 독립적으로 사용됨)
▷ parseInt(문자열)
- 문자열 = > 정수
- 소수점이나 문자열을 2, 8, 10, 16진수의 정수로 변환해 준다
- 부동소수점형이나 정수로 바꾸지 못하면 NaN(Not a Number)를 반환
parseInt('숫자') : parseInt('15') + parseInt('25') = 40
parseInt('숫자', 8) : 8진수 '숫자'를 10진수로 변환
parseInt('숫자', 16) : 16진수 '숫자'를 10진수로 변환
▷ Number(문자형태의 숫자)
Number('숫자') : Number('15') + Number('25.894') = 40.894
▷ eval(수식 문자열)
- 문자열로 입력된 수식을 계산해 준다
- 문자열을 수식으로 변환한 후에 계산을 수행함
- 입력양식(form)을 통해 입력 받은 수식이 문자열로 취급되어 계산이 불가능한 경우
eval()함수를 이용하면 계산이 가능해짐
[1] 문자열을 생성합니다
var willEval = '';
willEval += 'var number = 10;';
willEval += 'alert(number);';
[2] eval() 함수를 호출합니다.
eval(willEval); // eval() 함수는 문자열을 자바스크립트 코드로 실행하는 함수
[3] eval() 함수로 호출한 코드의 변수를 사용합니다.
alert("number:"+number);
▶ 사용자 정의 함수
▷ 함수만들기
- 자바스크립트는 함수를 선언하는 방법이 2가지가 있다
[1] 함수표현식
var sumNumbers = function(a, b) {
return a + b;
};= > 자바스크립트에서 는 함수도 변수나 인자로 취급할 수 있기 때문에 이런것도 가능 . .
[2] 함수선언문
function 함수명 ( 입력 값을 받는 매개변수 ){
자바스크립트 코드;
return 반환값;
}매개변수=인수= argument= parameter=인자 : 입력값
<HEAD>
<SCRIPT type="text/javascript">
//함수만들기 : 매개변수 a,b를 더해서 sum 으로 반환해주는 함수
function add(a, b){
var sum;
sum = a + b;
return sum;
}
</SCRIPT>
</HEAD>
<BODY>
<h2>두 수의 합 구하기</h2>
<SCRIPT type="text/javascript">
var num1, num2, result;
num1 = 10, num2 = 20;
result = add(num1, num2); //함수호출해서 이용
document.write("두 수의 합 : " + result);
</SCRIPT>[3] 생성자 함수
- 아래와 같이 함수를 이용해 새 인스턴스를 선언하는 함수
- 클래스 기반 언어가 아니기 때문에 위와 같이 함수를 이용하여 인스턴스를 생성할 수 있다.
function Developer() {
// ...
}
var dev = new Developer();
▷ 함수호출
함수명(매개변수);
결과값을 받는 변수 = 함수명(매개변수);[1] 프로그램 내에서 호출하기
result = add(num1, num2);[2] 웹 페이지가 실행되는 시점에서 호출하기 (onLoad 이벤트 핸들러 사용)
<HEAD>
<SCRIPT type="text/javascript">
function call(){
처리내용
}
</SCRIPT>
</HEAD>
<BODY onLoad = “call()”> // 웹페이지가 실행되면 call 함수를 실행해라[3] 특정 행동이 있을 경우에 호출하기(이벤트 처리)
<HEAD>
<SCRIPT type="text/javascript">
function call(){
처리내용
}
</SCRIPT></HEAD><BODY>
<form>
<input type=“button” value=“회원가입” onClick = “call()”>
</form>= > 회원가입 버튼이 onClick 되면 call() 함수를 실행해라
onload
- window 객체의 onload 이벤트 속성
- window 객체가 로드가 완료되고 자동으로 할당한 함수를 실행함
- 웹 브라우저의 모든 객체가 로드됐을 때 함수를 실행
<script>
window.onload = function () {
};
</script>
<script>
window.onload = function () {
document.getElementById("result").innerHTML = 'Procsss - 0';
};
</script>
</head>
<body>
<h1>Process - 1</h1>
<h1>Process - 2</h1>
<div id="result">div</div>
</body>=> script 태그가 h1 태그보다 위에 있지만 onload 이벤트 속성을 사용했기 때문에 나중에 출력됨
※ 메서드
▶ Window 객체의 메서드
▷ 경고창
· alert(“문자열”) : [확인]버튼을 가진 대화상자를 화면에 표시
· confirm(“문자열”) : [확인],[취소]를 선택할 수 있는 대화상자를 표시
[확인]버튼을 누르면 true 값이 반환되고, [취소]버튼을 누르면 false 값이 반환됨
· prompt(“대화상자에 표시할 메시지”, “입력상자에 표시할 초기 문자열”)
: 문자열을 입력 받을 수 있는 대화상자를 표시
- 대화상자를 닫을 때 [확인]버튼을 누르면 입력상자의 내용을 반환하고, [취소]버튼을 누르면 ‘null’값이 반환됨
▷ 주기적실행 / 중지
★ setInterval() : 일정한 시간 간격으로 원하는 작업을 실행하고자 할 때 사용
- 변수 : TimerID 로 선언
TimerID = setInterval("실행할 함수", 시간)<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
var timerId; //담을 변수 선언
function displayTime(){ // 시간 출력함수 만들기
var today=new Date();
document.getElementById('curTime').innerHTML
="<h1>"+today.getHours()+"시 "
+ today.getMinutes() +"분 " + today.getSeconds()+"초</h1>";
}
function startTime(){ // 주기적으로 함수실행하는 함수만들기
timerId=setInterval("displayTime()", 1000); //1초마다 displayTime()함수 실행
}
★ clearInterval(TimerID)
function stopTime(){ // 시간 중지하는 함수 만들기
clearInterval(timerId);
}
</script>
</head>
<body>
<FORM>
<INPUT TYPE="button" VALUE="시간 표시" onClick="startTime()">
<INPUT TYPE="button" VALUE="시간 중지" onClick="stopTime()"><br><br>
</FORM> // 버튼만들어서 함수 연결하기
▷ 브라우저 창 띄우기 / 닫기
· open()
- 새로운 window 객체를 생성하는 메서드
window.open(“연결할 URL”, “창이름”, “창의 속성”);연결할 URL – 새로 만들어지는 창에 로드할 웹 문서를 입력
창이름 – 새로 생성되는 창의 이름을 지정하는 것 ( html문서의 target )
창의 속성 - 윈도를 어떠한 모양으로 출력할지 지정하는 옵션
▽ open() 메서드 - 창의 속성
· close()
창 객체.close();window.close();
self.close();
myWin.close();· ★ opener ★
- opener 속성 : 현재 윈도우를 연 윈도우
- window 객체의 속성으로 open()메서드를 이용하여 자 신을 생성한 부모 윈도우 객체를 가리킬 때 사용
- open()에 의해 생성된 윈도우가 자신을 생성한 윈도우 를 제어하는 경우에 주로 사용
function go(url){
opener.location.href=url;
self.close();
} = > 여기서 URL : 현재 윈도우를 연 윈도우(부모)(opener)에 들어갈 문서의 URL을 의미함
▶ document 객체의 메서드
· document.write()
· document.getElementById()
▶ form 객체의 메서드
· form이름.reset() : form reset
· form이름.submit() : 어디로 보내는것 같음 어딘진 모르겠음 아마서버 . . ?
▶ text 객체의 메서드
· form이름.입력상자이름.focus() : 입력상자이름 에 focus 주기
· form이름.입력상자이름.select() : 입력상자이름 text 선택하기
ex ) form , text 객체의 메서드 사용예시
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function hamsuA() {
document.frm.reset(); //모두 form 의 메서드임
}
function hamsuB() {
document.frm.submit();
}
function hamsuC() {
document.frm.id.select(); //text 상자의 메서드
}
function hamsuD() {
document.frm.pwd.focus();
}
</script>
</head>
<body>
<FORM name="frm" method="post" action="test.jsp">
아이디<INPUT type="text" name="id" size=32> <br>
비밀번호<INPUT type="password" name="pwd" size=32> <P>
<input type = "button" value="폼 리셋" onclick="hamsuA();">
<input type = "button" value="폼 전송" onclick="hamsuB();">
<input type = "button" value="선택하기" onclick="hamsuC();">
<input type = "button" value="포커스주기" onclick="hamsuD();">
</FORM>
</body>
</html>
※ Scope
- 유효범위
▶ 함수 단위로 구분되는 변수 범위
▷ 자바스크립트의 변수는 유효 범위가 전역으로 시작함
- 함수를 만들어 아래와 같이 접근하더라도 동일한 값을 출력하게 됨
var a = 10;
function getA() {
console.log(a); //10
}
getA(); // 10
▷ 함수 단위로 구분되는 변수 범위
- 함수 안에서 새로 선 언하는 경우 함수 단위의 새로운 유효 범위를 갖는다
- 변수의 유효 범위는 함수 단위(function)로 한정된다
var a = 10; // 함수 밖에서 변수 a 선언
function getA() {
var a = 20; // 함수 안에서 변수 a 새로 선언 후 20 할당
console.log(a); //20
}
getA(); // 20
console.log(a); // 10
'Javascript' 카테고리의 다른 글
| [Javascript] Symbol / 배열메소드 / 문자열메소드 (1) | 2022.12.03 |
|---|---|
| [Javascript] 객체 메소드 / computed property (1) | 2022.12.03 |
| [Javascript] ES6 / 익명함수 / 가변인자 함수 / 콜백함수 / 클로저 함수 (0) | 2022.06.22 |
| [Javascript] (0) | 2022.04.25 |
| [Javascript] 자바스크립트란 / 변수 / 배열 / 조건문 / 반복문 / this (0) | 2022.04.25 |