반응형
Notice
Recent Posts
Recent Comments
Link
지구정복
[JavaScript] 기초 6 본문
728x90
반응형
SMALL
목차
- 웹 브라우저의 객체
- 실행순서
- window 객체
- screen 객체
- open 메소드
- close 메소드
- moveBy/moveTo 메소드
- Location 객체
- href 프로퍼티
- reload 프로퍼티
- Navigator 객체
- History 객체
- Document 객체
- screen 객체
- 문서 제어
- DOM트리
- 노드 객체 가져오기
- id 속성으로 노드 가져오기
- 요소의 이름으로 노드 가져오기
- class 속성 값으로 노드 가져오기
- css 선택자로 노드 가져오기
- HTML 요소의 내용을 읽고 쓰기
- innerHTML / textContent 프로퍼티
- 노드 삭제하기
- CSS 제어하기
- CSS 추가하기
- CSS 제거하기
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
ㅁ웹 브라우저의 객체
ㅇ웹 브라우저에서 자바스크립트 실행 순서
- 웹 페이지를 열면 가장 먼저 Window객체가 생성됩니다. Window 객체는 웹 페이지의 전역 객체로 웹 페이지와 탭마다 생성됩니다.
- Document 객체(readyState프로퍼티 : HTML문서의 해석 상태를 뜻하는 문자열이 저장, 초기값: "loading" 문자열)가 Window객체의 프로퍼티로 생성되며 웹페이지를 해석해서 DOM 트리의 구축을 시도합니다.
- HTML문서는 HTML구문을 작성 순서에 따라 분석하며 Document객체 요소와 텍스트 노드를 추가해 나갑니다.
- HTML문서 안에 script요소 안의 코드 또는 외부파일에 저장된 코드의 구문을 분석합니다. (script 요소의 구문을 분석해서 실행 할 때는 HTML문서의 구문 분석이 일시적으로 막히고, 자바스크립트 코드의 실행을 완료한 후에는 일시적으로 막혀 있던 HTML 문서의 구문분석을 재개 합니다.)
- HTML 문서의 모든 내용을 읽은 후, DOM 트리 구축을 완료하면 document.readyState 프로퍼티 값이 "interactive" 로 바뀝니다.
- 웹 브라우저는 Document 객체에 DOM트리 구축완료를 알리기 위해 DOMCONTENTLOADED이벤트를 발생시킵니다.
- img 요소가 있을시, 이미지 파일 등의 외부 리소스를 이 시점에 읽어 들입니다.
- 모든 리소스를 읽어 들인 후 document.readyState 프로퍼티 값이 "complete"로 바뀝니다. 마지막으로 웹 브라우저는 Window객체를 상대로 load 이벤트를 발생시킵니다.
- 이 시점부터 다양한 이벤트(사용자 정의, 네트워크) 를 수신하며, 이벤트가 발생하면 이벤트 처리기가 비동기로 호출합니다.
이름 그림으로 확인하면 아래와 같다.
ㅇwindow 객체
window 객체는 전역 객체이며, 전역 변수는 Window 객체의 프로퍼티이다. 또한 웹 브라우저에서 사용할 수 있는
다양한 객체가 모두 Window 객체의 프로퍼티이다.
window 객체를 사용할 때 보통 window는 생략해서 사용한다.
예를 들어 경고창을 뜨게하는 alert() 메소드는 원래 window.alert() 이지만 window가 생략된다.
window 객체의 다양한 프로퍼티를 확인해보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
let output = '';
for (let key in window) {
if (key !='external') {
output += key + ' : ' + window[key] + '\n';
}
}
console.log(output);
</script>
</body>
</html>
-screen 프로퍼티
screen 객체를 가리키고 화면의 정보를 가져오는 객체이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
let output = '';
for (let key in window) {
if (key !='external') {
output += key + ' : ' + window[key] + '\n';
}
}
console.log(typeof window);
////screen 프로퍼티 이용하기
//키의 값을 불러오기
console.log(window['screenTop']);
console.log(window['screenLeft']);
//객체 접근자( . ) 을 이용하기
console.log(window.screenTop);
console.log(window.screenLeft);
</script>
</body>
</html>
screen의 가로 길이와 세로 길이 / 사용 가능한 길이 / 사용가능한 색상수
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
console.log(screen.width, screen.height);
console.log(screen.availWidth, screen.availHeight);
console.log(screen.colorDepth);
</script>
</body>
</html>
이때 height값이 다른 것은 아래 시작표시줄이 있기 때문이다.
-open 메소드
새로운 창을 여는 프로퍼티이다.
open()에는 세 가지 인자가 들어간다. url, 창이름, 옵션
open()은 많이 사용된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
////window.open()
//이 메소드의 인자로는 open('url', '창이름', '옵션') 세 가지가 들어간다.
//옵션 인자는 굉장히 많지만 주로 사용하는 4가지가 있다.
//옵션인자: top / left / width / height
open( 'https://m.daum.net', 'openwin', 'top=100, left=300, width=600, height=800');
</script>
</body>
</html>
미리 옵션 값을 문자열로 선언해줄 수도 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
////window.open()
//이 메소드의 인자로는 open('url', '창이름', '옵션') 세 가지가 들어간다.
//옵션 인자는 굉장히 많지만 주로 사용하는 4가지가 있다.
//옵션인자: top / left / width / height
let top1 = 100;
let left = 300;
let width = 600;
let height = 800;
let str = 'top='+top1+','+'left='+left+','+'width='+width+','+'height='+height;
//let option = 'top=100, left=300, width=600, height=800';
open( 'https://m.daum.net', 'openwin', str);
</script>
</body>
</html>
이번에는 템플릿 문자열을 사용해보자.
템플릿 문자열이란 문자열에 변수를 포함시킬 때 좀 더 직관적이고 편하게 사용하기 위한 기능이다.
백탭( ` )을 사용하고 변수에다가 ${ } 를 씌워준다.
이렇게 하면 기존 + 로 문자열을 연결할 때보다 훨씬 코드가 깔끔해진다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
////window.open()
//이 메소드의 인자로는 open('url', '창이름', '옵션') 세 가지가 들어간다.
//옵션 인자는 굉장히 많지만 주로 사용하는 4가지가 있다.
//옵션인자: top / left / width / height
let top1 = 100;
let left = 300;
let width = 600;
let height = 800;
let option = `top=${top1}, left=${left}, width=${width}, height=${height}`;
open( 'https://m.daum.net', 'openwin', option);
</script>
</body>
</html>
이번에는 컴퓨터에 저장된 html 문서를 열어보자.
먼저 subwin.html 문서를 작성한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
난 열려진 창임 ㅋ<br><br>
</body>
</html>
이제 open() 을 이용해서 subwin.html을 불러오자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
////window.open()
//이 메소드의 인자로는 open('url', '창이름', '옵션') 세 가지가 들어간다.
//옵션 인자는 굉장히 많지만 주로 사용하는 4가지가 있다.
//옵션인자: top / left / width / height
let top1 = 100;
let left = 300;
let width = 600;
let height = 800;
let option = `top=${top1}, left=${left}, width=${width}, height=${height}`;
open( './subwin.html', 'openwin', option);
</script>
</body>
</html>
-close 메소드
열려진 창을 닫아보자. subwin.html 문서를 아래와 같이 편집한다.
창닫기 버튼이 추가됨을 알 수 있다.
onclick 속성에 window.close() 프로퍼티를 실행시켰다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
난 열려진 창임 ㅋ<br><br>
<input type="button" value="창닫기" onclick="window.close()">
</body>
</html>
-moveBy / moveTo 메소드
열려진 창을 특정 위치로 옮길 수 있다.
moveBy는 지정된 x, y 만큼 움직이라는 것이고
moveTo는 지정된 x, y 좌표로 움직이라는 것이다.
-문제: 5초 후에 자동적으로 m.daum.net 페이지가 열리고 또 5초 뒤에 페이지가 닫히는 함수 autoWindow() 만들기
이때 위치는 화면에 정가운데에 띄워져야 한다.
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
let autoWindow = function() {
setTimeout( function() {
let width = 300;
let height = 300;
let top1 = (screen.availHeight/2)-width/2;
let left = (screen.availWidth/2)-height/2;
let option = `top=${top1}, left=${left}, width=${width}, height=${height}`;
open( 'https://m.daum.net', 'openwin', option);
}, 5000);
setTimeout(() => {
let width = 300;
let height = 300;
let top1 = (screen.availHeight/2)-width/2;
let left = (screen.availWidth/2)-height/2;
let option = `top=${top1}, left=${left}, width=${width}, height=${height}`;
let child = open( 'https://m.daum.net', 'openwin', option);
child.close();
}, 10000);
};
autoWindow();
</script>
</body>
</html>
* 참고 - HTML에서 자바스크립트 사용자 정의 함수 호출하기
<!--1. 사용자 정의 함수 호출법-->
<a href="javascript:autoOpenWindow()">함수 호출</a><br><br>
<input type="button" value="함수 호출" onclick="autoOpenWindow()"><br><br>
-Location 객체
Location 객체는 창에 표시되는 문서의 URL을 관리한다. 사용은 window.location 또는 location으로 참조할 수 있다.
Location의 메소드
| 메서드 | 설명 |
| assign(url) | url이 가리키는 문서을 읽는다. |
| reload() | 문서를 새로고침한다. |
| replace(url) | url로 이동한다. |
| toString() | location.href 값을 반환한다. |
-href 프로퍼티 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
const goUrl = function() {
location.href = 'https://www.daum.net';
}
</script>
<a href="javascript: goUrl()">이동하기 </a><br><br>
</body>
</html>
-reload 프로퍼티 사용
페이지를 새로고침한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
const goUrl = function() {
//location.href = 'https://www.daum.net';
location.reload();
}
</script>
<a href="javascript: goUrl()">이동하기 </a><br><br>
</body>
</html>
-Navigator 객체
Navigator 객체는 스크립트가 실행 중인 웹 브라우저 등의 애플리케이션 정보를 관리한다.
appCodeName은 웹 브라우저의 내부 코드 네임을 가져온다.
userAgent는 웹 브라우저가 user에 대한 정보를 알 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
console.log(navigator.appCodeName);
console.log(navigator.userAgent);
</script>
</body>
</html>
이를 이용해서 클라이언트가 웹에 모바일로 접근했는지 컴퓨터로 접근했는지, 클라이언트의 pc정보, 브라우저 종류
등의 데이터를 알 수 있다.
-History 객체
창의 웹 페이지 열람 이력을 관리한다.
history 객체의 프로퍼티
| 프로퍼티 | 설명 |
| length | 현재 세션의 이력 개수(읽기전용) |
| scrollRestoration | 웹 페이지를 이동한 후에 동작하는 웹 브라우저의 자동 스크롤 기능을 켜거나 끄는 값, auto 또는 manual 이 들어간다 |
| state | pushState와 replaceState 메서드로 설정한 state 값 |
history 객체의 메서드
| 프로퍼티 | 설명 |
| back() | 뒤로가기 |
| forward() | 앞으로 가기 |
| go( number ) | 창의 웹 페이지 열람 이력을 number 만큼 진행 number값이 음수이면 그만큼 되돌린다. |
| pushState(state, title url) | 창에 웹 페이지 열람 이력을 추가한다. 페이지는 이동하지 않는다. |
| replaceState(state, title url) | 현재 창의 열람 이력을 수정 |
back 메소드는 웹 페이지를 뒤로가게 해준다.
forward 메소드는 웹 페이지를 앞으로 가게 해준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
const goBack = function() {
history.back();
}
const goForward = function() {
history.forward();
}
</script>
<a href="javascript: goBack()">이전으로 </a><br><br>
<a href="javascript: goForward()">앞으로 </a>
</body>
</html>
-Document 객체
창에 표시되고 있는 웹 페이지를 관리한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
document.write('hello world');
document.bgColor = 'darkgrey';
</script>
</body>
</html>
자바스크립트 document를 이용해서 html form태그로 접근하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="test1.html" name="frm1">
</form>
<form action="test2.html" name="frm2">
</form>
<script type="text/javascript">
"use strict"
console.log( typeof document.forms); //폼은 배열 형식으로 구성되어 있다.
console.log( document.forms.length); //폼의 개수를 출력
//form에 이름이 정의되지 않은 경우
console.log( document.forms[0].action );
console.log( document.forms[1].action );
//form에 이름이 정의된 경우 이름으로 접근한다.
console.log( document.frm1.action );
console.log( document.frm2.action );
</script>
</body>
</html>
이때 만약에 form문이 script 태그 밑에 있으면 오류가 난다.
따라서 window.onload 이벤트를 활용해서 자바스크립트를 마지막에 읽게 해줘야 한다.
또는
함수화해서 <a>태그나 <input> 태그 안에서 함수를 호출해야 한다.
보통 버튼형태를 많이 사용한다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
////이벤트
//문서를 전체적으로 읽어서 메모리화(DOM으로만든다)시킨 다음에 자바스크립트를 실행함
window.onload = function() {
console.log( document.frm1.action)
};
//form문을 함수화한다.
const checkfrm = function() {
console.log( document.frm1.action );
}
</script>
<form action="test1.html" name="frm1">
</form>
<!--checkfrm 함수를 링크화해서 여러번 실행시키도록 한다.-->
<a href="javascript: checkfrm()">form문 읽기</a> <br><br>
<!--checkfrm 함수를 버튼화해서 실행시킨다.-->
<input type="button" value="form문 읽기" onclick="checkfrm()">
</body>
</html>
이제 사용자가 입력한 값을 자바스크립트 콘솔로 출력해보자.
이때 입력한 값은 문자열로 저장된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
const checkfrm = function() {
//html 입력상자에서 입력한 내용을 자바스크립트로 데려올 수 있다.
console.log( document.frm1.data1.value );
}
</script>
<form action="test1.html" name="frm1">
데이터 <input type="text" name="data1"><br><br>
<input type="button" value="form문 읽기" onclick="checkfrm()">
</form>
</body>
</html>
반대로 데이터를 넣고 싶은 경우
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
const checkfrm = function() {
//html 입력상자에서 입력한 내용을 자바스크립트로 데려올 수 있다. 이때 무조건 문자열이다.
//console.log( document.frm1.data1.value );
document.frm1.data1.value = '초기값';
}
</script>
<form action="test1.html" name="frm1">
데이터 <input type="text" name="data1"><br><br>
<input type="button" value="form문 읽기" onclick="checkfrm()">
</form>
</body>
</html>
문제: 숫자 2개 입력받고 덧셈 결과 나타내기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.c1 {
text-align: center;
width: 50px;
}
</style>
</head>
<body>
<script type="text/javascript">
"use strict"
const checkfrm1 = function() {
let sum = 0;
let num1 = Number( document.frm1.data1.value );
let num2 = Number( document.frm1.data2.value );
sum = num1 + num2;
document.frm1.result.value = sum;
}
</script>
<form action="test1.html" name="frm1">
<input class="c1" type="text" name="data1">
+
<input class="c1" type="text" name="data2">
=
<input class="c1" type="text" name="result"><br>
<input type="button" value="계산할거면 누르시오." onclick="checkfrm1()">
</form>
</body>
</html>
비밀번호 입력받기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
let checkfrm1 = function() {
console.log( document.frm1.data2.value );
}
</script>
<form action="test1.html" name="frm1">
데이터<input type="text" name="data1" ><br><br>
비밀번호<input type="password" name="data2"><br><br>
<input type="button" value="form문 읽기" onclick="checkfrm1()">
</form>
</body>
</html>
체크박스 값 출력하기
체크박스에서 체크여부를 진리값으로 출력하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
let checkfrm1 = function() {
//체크박스에서 체크여부를 진리값으로 출력한다.
console.log( document.frm1.n1.checked );
console.log( document.frm1.n2.checked );
console.log( document.frm1.n3.checked );
}
</script>
<form action="test1.html" name="frm1">
<input type="checkbox" name="n1">사과<br>
<input type="checkbox" name="n2" checked>딸기<br>
<input type="checkbox" name="n3">수박<br>
<input type="button" value="form문 읽기" onclick="checkfrm1()">
</form>
</body>
</html>
이번에는 체크박스에 체크된 값을 출력해보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
let checkfrm1 = function() {
//체크박스에서 value값을 설정하고 checkfrm1 함수에서 value값을 출력하기
//이때 체크박스의 name을 모두 동일하게 만들어서 배열화한다.
for (let i=0; i<document.frm1.n.length; i++) {
if ( document.frm1.n[i].checked ) {
console.log(document.frm1.n[i].value);
}
}
}
</script>
<form action="test1.html" name="frm1">
<input type="checkbox" name="n" value="사과">사과<br>
<input type="checkbox" name="n" value="딸기" checked>딸기<br>
<input type="checkbox" name="n" value="수박">수박<br>
<input type="button" value="form문 읽기" onclick="checkfrm1()">
</form>
</body>
</html>
만약 웹페이지의 모든 체크박스를 체크된 상태로 만들고 싶으면
window.onload 를 사용한다.
이는 주로 이메일에서 전체선택 누르면 이메일이 모두 선택되는 기능을 구현할 때 사용된다.
window.onload = function() {
for (let i=0; i<document.frm1.n.length; i++) {
document.frm1.n[i].checked = true;
}
}
이번에는 내가 선택한 체크박스를 옆에 똑같은 체크박스에 그대로 구현시킨다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
let checkfrm1 = function() {
let arr = new Array();
for (let i=0; i<document.frm1.n1.length; i++) {
//내가 선택한 체크박스가 arr 배열에 담김
arr[i] = document.frm1.n1[i].checked;
//arr배열의 요소를 n2 체크박스에 할당
document.frm1.n2[i].checked = arr[i];
}
}
</script>
<form action="test1.html" name="frm1">
<table border="1" width="500">
<tr align="center">
<td>
<input type="checkbox" name="n1" value="사과">사과<br>
<input type="checkbox" name="n1" value="딸기">딸기<br>
<input type="checkbox" name="n1" value="수박">수박<br>
</td>
<td width="100">
<input type="button" value="체크내용 복사" onclick="checkfrm1()">
</td>
<td>
<input type="checkbox" name="n2" value="사과">사과<br>
<input type="checkbox" name="n2" value="딸기">딸기<br>
<input type="checkbox" name="n2" value="수박">수박<br>
</td>
</tr>
</table>
</form>
</body>
</html>
-선택 상자 사용하기
선택 상자의 옵션값을 읽을 수 있다.
이때 옵션은 배열로 저장된다.
또한 인덱스값으로 options[인덱스값].value 을 출력하면 옵션상자의 value가 출력된다.
options[인덱스값].text 를 하면 옵션의 텍스트값이 출력된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
let checkfrm1 = function() {
console.log( document.frm1.s.options); //옵션이 배열화됨을 알 수 있다.
console.log( document.frm1.s.options.length ); //옵션 배열의 개수를 알 수 있다.
//선택된 선택상자의 인덱스 값을 알 수 있다.
console.log( document.frm1.s.options.selectedIndex );
//옵션의 value값이 출력된다.
console.log( document.frm1.s.options[document.frm1.s.options.selectedIndex].value );
//옵션의 텍스트값이 출력된다.
console.log( document.frm1.s.options[document.frm1.s.options.selectedIndex].text );
};
</script>
<form action="test1.html" name="frm1">
<select name="s">
<option value="1">사과</option>
<option value="2">딸기</option>
<option value="3">수박</option>
<option value="4">참외</option>
</select>
<input type="button" value="체크내용 복사" onclick="checkfrm1()">
</form>
</body>
</html>
문제: 사칙연산 계산기
1. 노가다 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.c1 {
text-align: center;
width: 50px;
}
</style>
</head>
<body>
<script type="text/javascript">
"use strict"
const checkfrm1 = function() {
let a = document.frm1.o.options.selectedIndex;
switch ( a ){
//0 : 덧셈
case 0: {
let sum = 0;
let num1 = Number( document.frm1.data1.value );
let num2 = Number( document.frm1.data2.value );
sum = num1 + num2;
document.frm1.result.value = sum;
break;
}
//1 : 뺄셈
case 1: {
let sum = 0;
let num1 = Number( document.frm1.data1.value );
let num2 = Number( document.frm1.data2.value );
sum = num1 - num2;
document.frm1.result.value = sum;
break;
}
//2 : 곱셈
case 2: {
let sum = 0;
let num1 = Number( document.frm1.data1.value );
let num2 = Number( document.frm1.data2.value );
sum = num1 * num2;
document.frm1.result.value = sum;
break;
}
//3 : 나눗셈
case 3: {
let sum = 0.0;
let num1 = parseFloat( document.frm1.data1.value );
let num2 = parseFloat( document.frm1.data2.value );
sum = num1 / num2;
document.frm1.result.value = sum.toFixed(3);
break;
}
}
}
</script>
<form action="test1.html" name="frm1">
<input class="c1" type="text" name="data1">
<select name="o">
<option value="+" selected>+</option>
<option value="-">-</option>
<option value="*">X</option>
<option value="/">/</option>
</select>
<input class="c1" type="text" name="data2">
=
<input class="c1" type="text" name="result"><br>
<input type="button" value="계산할거면 누르시오." onclick="checkfrm1()">
</form>
</body>
</html>
2. 쉬운 방법(eval() 사용)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.c1 {
text-align: center;
width: 50px;
}
</style>
</head>
<body>
<script type="text/javascript">
"use strict"
let checkfrm1 = function() {
let num1 = parseInt( document.frm1.data1.value);
let num2 = parseInt( document.frm1.data2.value);
let oper = document.frm1.o.value;
let sum = eval(num1+' '+oper+' '+num2);
document.frm1.result.value = sum;
}
</script>
<form action="test1.html" name="frm1">
<input class="c1" type="text" name="data1">
<select name="o">
<option value="+" selected>+</option>
<option value="-">-</option>
<option value="*">X</option>
<option value="/">/</option>
</select>
<input class="c1" type="text" name="data2">
=
<input class="c1" type="text" name="result"><br>
<input type="button" value="계산할거면 누르시오." onclick="checkfrm1()">
</form>
</body>
</html>
ㅁ문서 제어
ㅇDOM 트리
웹 페이지의 내용은 Document 객체가 관리한다. document 객체에서 문서 내용을 관리하는 DOM트리라고 하는
객체의 트리 구조를 만든다.
ㅇ노드 객체 가져오기
자바스크립트로 HTML 요소를 제어하려면 그 전에 제어하고자 하는 요소 객체를 먼저 가져와야 한다.
물론 Document 객체의 DOM 트리를 타고 올라가 요소 객체를 가져오는 방법도 있지만
이보다 편리한 방법이 방법들이 있다.
1. id 속성으로 노드 가져오기
getElementById메소드 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
const viewTag = function() {
//window.onload = function() {
console.log( document.getElementById('first'));
}
</script>
<input type="button" value="태그 읽기" onclick="viewTag()"><br>
<div id="first">첫 번째 div</div>
<div id="second">두 번째 div</div>
<div id="third">세 번째 div</div>
</body>
</html>
2. 요소의 이름으로 노드 가져오기
getElementByTagName 메소드를 이용한다.
이때 저장되는 tags는 배열이 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
const viewTag = function() {
//window.onload = function() {
let tags = document.getElementsByTagName('div');
console.log(tags[0]);
}
</script>
<input type="button" value="태그 읽기" onclick="viewTag()"><br>
<div id="first">첫 번째 div</div>
<div id="second">두 번째 div</div>
<div id="third">세 번째 div</div>
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
*참고 NodeList 객체
getElementsByTagName, getElemetsByName, getElementsByClassName 메서드는 nodelist 객체를
반환한다.
이는 length 프로퍼티를 가진 유사 배열 객체이며 for문 등을 사용해서 순회할 수 있다.
nodelist 객체는 '살아 있는' 상태를 가리킨다. html문서의 변화에 따라 동적으로 바뀐다.
예를 들어 div요소가 없는 html 문서에서 다음 코드로 div요소의 목록을 가져오면 비어있는 nodelist
배열이 만들어 진다.
var divs = document.getElementsByTagName("div");
nodelist 객체를 순회하면서 요소를 추가해야하는 상황이 온다면 아래 코드처럼
nodelist 객체를 정적 배열로 복사본을 만들어 사용해야 한다.
var staticList = Array.prototype.slice.call(divs, 0);ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
3. class 속성 값으로 노드 가져오기
getElementsByClassName 메소드는 특정 클래스 이름을 가지고 있는 요소를 가져온다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
const viewTag = function() {
//window.onload = function() {
let tags = document.getElementsByClassName('cat');
console.log(tags[0]);
}
</script>
<input type="button" value="태그 읽기" onclick="viewTag()"><br>
<div id="first" class="cat">첫 번째 div</div>
<div id="second" class="cat">두 번째 div</div>
<div id="third" class="cat">세 번째 div</div>
</body>
</html>
4. CSS 선택자로 노드 가져오기
ㅇHTML 요소의 내용을 읽고 쓰기
-innerHTML 프로퍼티 / textContent 프로퍼티
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
const viewTag = function() {
//window.onload = function() {
let tags = document.getElementsByClassName('cat');
console.log(tags[0].innerHTML ); //html 통째로 읽는다.
console.log(tags[0].textContent ); //html의 텍스트만 읽는다.
}
</script>
<input type="button" value="태그 읽기" onclick="viewTag()"><br>
<div id="first" class="cat"><b>첫 번째 div</b></div>
<div id="second" class="cat">두 번째 div</div>
<div id="third" class="cat">세 번째 div</div>
</body>
</html>
반대로 html 에 내용 저장하기
tags[0].innerHTML = '<i>Hello World</i>'; //자바스크립트에서 html문서 내용바꾸기
tags[1].textContent = '<i>Hello World2</i>'; //이거는 <i> 태그가 적용되지않고 내용으로 나온다.
-노드 삭제하기
개발자 도구 Elements 를 보면 처음에는 <h1> 태그가 있다가 실행하면 태그가 사라진다.
이는 메모리 상에서 <h1> 태그가 사라지는 것이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
let removeTag1 = function() {
//div 변수에 id 값이 "div"인 요소를 저장
let div = document.getElementById("div");
//div요소의 자식노드를 모두 삭제 : <h1> 태그들이 삭제된다.
document.body.removeChild(div);
}
</script>
<input type="button" value="tag 제거" onclick="removeTag1()">
<hr>
<div id="div">
<h1 id="h1">header1</h1>
<h1 id="h2">header2</h1>
</div>
</body>
</html>
이번에는 div 요소에서 첫 번째 h1 태그만 지우고 싶으면 다음과 같이 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
let removeTag2 = function() {
//div요소와 h1 요소를 변수에 저장한다.
let div = document.getElementById("div");
let header1 = document.getElementById("h1");
//div요소에서 첫 번째 h1 태그만 지운다.
div.removeChild(header1);
}
</script>
<input type="button" value="tag 제거" onclick="removeTag2()">
<hr>
<div id="div">
<h1 id="h1">header1</h1>
<h1 id="h2">header2</h1>
</div>
</body>
</html>
ㅇCSS 제어하기
자바스크립트로 CSS를 제어한다. p563
css 추가하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
let addCSS = function() {
let div = document.getElementById('div');
div.style.backgroundColor = 'pink';
}
</script>
<input type="button" value="css 추가" onclick="addCSS()">
<hr>
<div id="div">
<h1 id="h1">header1</h1>
<h1 id="h2">header2</h1>
</div>
</body>
</html>
css 제거하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
"use strict"
let addCSS = function() {
let div = document.getElementById('div');
div.style.backgroundColor = 'pink';
}
let removeCSS = function() {
let div = document.getElementById('div');
div.style.backgroundColor = '';
}
</script>
<input type="button" value="css 추가" onclick="addCSS()">
<input type="button" value="css 제거" onclick="removeCSS()">
<hr>
<div id="div">
<h1 id="h1">header1</h1>
<h1 id="h2">header2</h1>
</div>
</body>
</html>
-문제: 브라우저 사용자에게 구구단의 시작단과 끝단을 입력받으면 시작단부터 끝단까지의 구구단을
출력해주는 웹페이지 구현하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- gugugugugugug
시작단이 끝단보다 클 경우 경고창 발생, 입력값이 숫자가 아닐 경우 경고창 -->
<script type="text/javascript">
"use strict"
let gugu = function() {
let n1 = document.f1.d1.value
let n2 = document.f1.d2.value
if (n1.length>=2 || n2.length>=2) { //두 자리 입력했을 때 경고창
alert("한 자리만 입력하세요~");
location.reload();
} else {
n1 = document.f1.d1.value.charCodeAt(); //아스키코드 값 저장하기
n2 = document.f1.d2.value.charCodeAt();
if ( (n1<=48 || n1>=58) || (n2<=48 || n2>=58) ) { //숫자 아스키코드가 아니면 경고창
alert("숫자만 입력해주세요~");
location.reload();
} else if (n1>n2) { //첫 번째 값이 두 번째보다 크면 경고창
alert("첫 번째 값이 두 번째 값보다 커서 안돼요. 다시 입력하세요~");
location.reload();
}
}
n1 = Number(String.fromCharCode(n1));
n2 = Number(String.fromCharCode(n2));
let arr = new Array(); //시작단~끝단까지 숫자 배열에 저장
for(let i=0; i<=n2-n1; i++) {
arr[i] = n1+i;
}
console.log(arr);
let len = n2 - n1+2; //테이블 행 만들 개수
let str ='';
str += '<table border="1">';
for(let i=0; i<len; i++) {
str += '<tr align="center">';
for(let j=0; j<10; j++) {
if (i==0 && j==0) {
str += '<td>'+'구구단'+'</td>';
} else if ( i==0 ) {
str += '<td>'+'X'+j+'</td>';
} else if ( j==0 ) {
str += '<td>'+ arr[i-1]+' 단'+'</td>';
} else {
str += '<td>'+arr[i-1]+' X '+j+' = '+(arr[i-1]*j)+'</td>';
}
}
str += '</tr>';
}
str += '</table>';
document.getElementById('result').innerHTML = str;
}
</script>
<form name="f1">
시작단 <input type="text" name="d1"> ~ 끝단 <input type="text" name="d2">
<input type="button" value="구구단 출력" onclick="gugu()">
</form>
<br><br>
<hr>
출력:<br>
<form name="f2">
<div id="result"></div>
</form>
</body>
</html>
728x90
반응형
LIST
'데이터 엔지니어링 정복 > HTML-CSS-JavaScript-Spring-Node.js' 카테고리의 다른 글
| [HTML & CSS] 개인 웹페이지 만들기 (0) | 2020.11.13 |
|---|---|
| [JavaScript] 정리 (0) | 2020.11.12 |
| [JavaScript] 기초5 (0) | 2020.11.05 |
| [JavaScript] 기초4 (0) | 2020.11.04 |
| [JavaScript] 기초3 (0) | 2020.11.03 |
'데이터 엔지니어링 정복/HTML-CSS-JavaScript-Spring-Node.js' Related Articles
more
Comments