WEB(02) - 자바스크립트 기초 - 수업 33일차
목차
tomcat 직접 실행
이클립스와 무관하게 아파치 톰캣을 설정하고 설치할 수 있으며 브라우저로 접근이 가능합니다.
이를 위해 환경변수에서 설정할 사항이 있습니다.
내컴퓨터 속성 -> 고급 시스템 설정 -> 환경변수 -> JAVA_HOME(주소값: jdk폴더)과 CATALINA_HOME(주소값: web-tomcat폴더)을 각각의 주소값에 맞게 설정해줍니다.
그리고 설치폴더인 was/web-tomcat/bin/에 위치한 startup.bat로 실행하고 shutdown.bat로 종료할 수 있습니다.
DOM(Document Object Model)
: 객체지향 모델로 구조화된 문서를 표현하는 형식으로 HTML(Web), XML 문서를 제어(문서 구조, 스타일, 내용 등을 변경)하기 위한 프로그래밍 인터페이스입니다.(출처:https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction)
-
웹 문서 로딩 시 Web Brower에 의해 내용이 해석되어 화면에 나타나거나 HTML 소스 자체를 보여줍니다.
-
자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있습니다.
-
웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event 들은 objects 로 구성됩니다. ex) document object: document 자체를 의미 table object: HTML table 에 접근하기 위한
HTMLTableElementDOM 인터페이스를 구현 -
API (web or XML page) = DOM + JS (scripting language)
DOM 객체
window 객체
: 브라우저 내장객체 중 최상위 트리에 위치한 객체입니다. 브라우저에 대한 정보를 가지고 있습니다.
-
- 접근방법
window.속성,window.메소드(window 는 생략 가능)
-
주요 메서드
메소드 설명 open() 새로운 브라우저(윈도우) 열기 close() 열려있는 브라우저(윈도우) 닫기 alert() 간단한 메시지를 보여주기 위한 dialog box confirm() 사용자로부터 어떠한 작업을 확인받기 위한 dialog box prompt() 사용자로부터 문자열을 입력받기 위한 dialog box back() 이전 페이지로 이동 parseInt(String)
parseFloat(String)인수의 String을 정수, 실수 형태로 변환 isNaN(String) 인수의 String이 숫자 형태가 아니면 true, 숫자형이면 false 리턴 eval(String) 문자열을 코드로 인식하게 하는 함수.(보안에 취약하기에 남용 X) <script>내부에 선언된 멤버들은 모두 window객체의 property로 등록됩니다. ex)
document 객체
: window의 하위 객체로 브라우저에 보여지는 웹 페이지 그 자체를 가리킵니다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 합니다.
-
- 접근방법
window.document.속성,document.메소드
-
주요 메서드
메소드 설명 write(“string”) 문서에 데이터를 출력 writeIn(“string”) 문서에 데이터를 출력하고 줄바꿈 실행
form 객체
: document의 하위 객체로 HTML<form>요소를 나타냅니다.
-
- 접근방법
window.document.form_name.속성,window.document.form_name.메소드
-
주요 속성
속성 설명 action <form>내의 ACTION 속성에 기술된 문자열을 설정하거나 반환method 전송 HTTP 메소드 설정. (get, post 등) encoding <form>에서의 ENCTYPE속성을 반영name <form>에서의 NAME 속성의 값target <form>전송의 목적(Target)윈도우 또는 프레임 이름을 나타내는 속성 -
주요 메서드
메소드 설명 reset() 입력양식을 초기화 시킨다. RESET 버튼과 동일한 기능. submit() 입력된 값을 서버로 전송한다. SUBMIT 버튼과 동일한 기능.
text 객체
: form의 하위 객체로 HTML<input type="text"> 객체를 말합니다.
-
- 접근방법
window.document.form_name.text_name.속성,window.document.form_name.text_name.메소드
-
주요 속성
속성 설명 name text의 이름 value text의 값 -
주요 메서드
메소드 설명 focus() 객체에 포커스를 준다
노드 접근
장거리 접근
1. document.getElementById()
: 태그의 ID 속성으로 접근합니다.
2. document.getElementsByTagName()
: 태그명으로 접근하며, 노드 리스트를 반환합니다.(배열 개념)
3. document.getElementsByName()
: 태그의 name 속성의 값으로 접근하며 노드 리스트를 반환합니다.(배열 개념)
JavaScript
:웹페이지를 동적으로 만들어주기 위해 고안된 프로그래밍 언어입니다. 넷스케이프라는 이름으로 첫 시작을 하며 라이브스크립트라는 이름을 거쳐 현재의 자바스크립트가 되었습니다.
자바스크립트는 ECMAScript 표준을 준수하는 스크립트 언어입니다.(Ecma international: 정보 통신 표준을 제정하는 표준화 기구, ECMAScript: 다양한 브라우저에서 일관성 있는 동작을 위한 스크립트 표준 )
코드는 <script> 안에 작성하여 HTML의 헤더 부분에 위치시키거나(어느 부분이든 상관 없으나 관례적으로 헤더 내에 위치시킴) 별개의 js파일을 생성하여 HTML 헤더 부분의 <script>에 파일 위치를 지정해서 참조합니다.
변수 선언
현재 ES6 표준을 사용하고 있으며 ES5와의 가장 큰 차이점 중 하나인 변수 선언 부분을 가볍게 살펴보겠습니다.
ES5(ECMA5, 2009): 변수 선언 var -> 중복 선언 가능(Function-level scope) ES6(ECMA6, 2015): 변수 선언 추가 let -> 중복 선언 불가(Block-level scope), 상수 선언 const 등이 추가
함수 선언
간단한 함수 선언 예제입니다.
함수테스트라는 내용이 기입된 버튼을 3개 생성하여 클릭할 경우 각각 정해진 메세지가 출력되도록 하겠습니다.
같은 기능을 외부에서 js파일을 참조한는 방식으로 작성해보겠습니다.
confirm()
: 확인 / 취소 창을 띄워줍니다.
location()
: 지정한 링크로 이동합니다. confirm()과 함께 사용할 경우 확인을 누르면 해당 링크로, 취소를 누르면 특정 문구를 띄우도록 할 수 있습니다.
마무리 활용 예제
1.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>javascript DOM document 객체활용</title>
<script type="text/javascript">
function testDom() {
// 입력양식 text 요소에 접근해서 사용자가 입력한 아이디 정보를 확인해본다
let textComp = document.getElementById("userId");
alert(textComp.value); //value를 get, form 입력양식 요소의 입력값에 접근할 때는 value 라는 속성을 이용
textComp.value = ""; //value에 공란을 set
}
function testDom2() {
//let nameComp=document.productForm.productName;// document.폼이름.요소이름
let nameComp = document.getElementById("pname");
//console.log(nameComp.value);
alert(nameComp.value);
nameComp.value = "";
}
</script>
</head>
<body>
<form>
회원아이디
<input
type="text"
name="userId"
id="userId"
/><!-- name 요소는 서버에 전송시 필요 -->
<input type="button" value="테스트" onclick="testDom()" />
</form>
<hr />
<form name="productForm">
상품명 <input type="text" name="productName" id="pname" />
<input type="button" value="테스트2" onclick="testDom2()" />
</form>
</body>
</html>
2.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>javascript dom 제어연습</title>
<script type="text/javascript">
function moveTxt() {
let orgComp = document.getElementById("orgTxt");
let destComp = document.getElementById("destTxt");
destComp.value = orgComp.value;
orgComp.value = "";
orgComp.focus();
}
function enterKey() {
//alert("눌렀지?");
if (event.keyCode == 13) {
//enter key 의 keyCode 가 13
//alert("엔터키 눌렀지?");
moveTxt();
}
}
</script>
</head>
<body>
<input type="text" id="orgTxt" autofocus="autofocus" onkeyup="enterKey()" />
<input type="button" value="이동" onclick="moveTxt()" />
<input type="text" id="destTxt" />
<!--
orgTxt id text 요소에 값을 입력한 후 이동 버튼을 누르면
destTxt id text 요소에 값이 이동된다
-->
</body>
</html>
3.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>form 입력양식 체크</title>
<script type="text/javascript">
function checkForm() {
//이름이 공란인지 확인
if (document.getElementById("userName").value.trim() == "") {
//trim()으로 여백제거
alert("이름을 입력하세요");
} else if (isNaN(document.getElementById("depositMoney").value)) {
//isNaN() 으로 숫자 여부를 체크
alert("입금액은 숫자로 입력하세요");
} else {
alert("입금완료");
}
}
</script>
</head>
<body>
<form>
이름 <input type="text" id="userName" /> 입금액
<input type="text" id="depositMoney" />
<button type="button" onclick="checkForm()">입금</button>
</form>
</body>
</html>
댓글남기기