내가 이해한 한도내에서의 스프링에서의 ajax 구현시 데이터 흐름도는

1. ajax 함수 호출 



2.  - ajax함수내에서 데이터 조회에 참조할 데이터변수
     - 요청주소(컨트롤러에 맵핑해서 실행할 url 주소) 설정



3. 2번항목에서 지정한 컨트롤러에 실행되는 메소드내에서는 getParameter로 해당 변수를 받아온 후
    해당 변수를 사용하여 쿼리를 날려 결과값을 setAttribute 를 사용하여 jsp 단으로 전달한다. (return "abc.jsp";)



4. jsp에서는
        - 
responseText 인 경우 예를 들어
        <%  String result = (String) request.getAttribute("result");  out.write(result);         %>

과 같은 처리.

  - responseXML 인 경우

ArrayList<자료형> abc = (캐스팅 변환)request.getAttribute("속성명");

형대로 받아 StringBuilder를 사용해서 XML 형대로 문자열을 누적 처리.

다만, jsp에서 XML 형태로 가공할때 가공 후 응답은 

response.setContentType("text/xml; charset=euc-kr");

response.getWriter().write(result.toString()); 

을 사용하여 리턴.

EX) 간단한 XML 형태

<?xml version="1.0" encoding="utf-8"?>
<users>
<user>
<name>HyunWook Kim</name>
</user>
<user>
<name>redccoma</name>
</user>
</users>



5.    out.write(result) 구문이 실행되면 ajax 관련 함수중 콜백 함수를 실행하면서 응답확인을 하고 에러검출이 안될 경우

지정한 액션 혹은 지정한 함수를 실행. 예를 들어 xmlReq.status == 200 과 같은 조건일 경우 정상응답이므로 해당 조건하에서

사용자 정의 액션처리를 바로 하거나 printData(); 와 같은 사용자 지정함수를 호출.



6. printData() 와 같은 함수를 호출한다고 가정할 경우 var result = xmlReq.responseText; 

   혹은 var result = xmlReq.responseXML;  형태로 결과 데이터를 저장.

   당연히 TEXT와 같은 경우 단일 데이터이므로 재처리할 필요 없이 원하는 액션처리를 하면 되고,

   XML의 경우 아래의 코드처럼 xml값을 분석하여 가져온 후 동적으로 html 소스생성하고 innerHTML을 통해 문서로

   최종반환하여 처리를 종료.


  ex) 간단한 XML 분석 및 HTML 동적 소스 생성

var users = result.getElementsByTagName("user");

for(var i=0;i<users.length;i++){

result += users[i].getElementsByTagName("name")[0].firstChild.nodeValue + "<br>";

}

document.getElementById("str").innerHTML = str;


아래 영문내용과는 다르게 구현된 AJAX 소스 (어차피 같은 의미임-.-)

//AjaxSend02.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">


//전역변수

var xmlReq; 

//전송 역할 함수

function myFunc() {

var data = document.getElementById("data");

//ajax 객체

xmlReq = new XMLHttpRequest(); //IE 7.0 이상

//서버 요청주소

var url = "AjaxReceive02.jsp";

//서버요청시 데이터 전송하는 부분

//데이터가 두개 이상인 경우는

//식별자=값&식별자=값&.... 형태로 작성

var postString = "data=" + data.value;

//응답이 돌아온다면 callback 함수 호출

//이벤트 등록 부분

xmlReq.onreadystatechange = callBack;

//ajax 요청 형식 // true는 비동기

xmlReq.open("POST", url, true);

//전송하는 데이터 안에 한글이 있는 경우 인코딩방식을 알려주어야 함.

xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=euc-kr");

//ajax 요청

xmlReq.send(postString);

}

//응답 확인 함수

function callBack() {

//state는 1, 2, 3, 4의 총 4가지 상태가 있음.

//1은 요청전

//2는 요청후

//3은 서버로 응답을 보낸 상태

//4는 최종 응답을 받은 상태를 의미

if(xmlReq.readyState == 4) {

//status는 서버 응답의 종류를 의미

//200은 정상적인 처리가 되었음을 의미

//500은 JSP 실행은 했지만 오류가 발생함.

//404는 요청 주소에 해당하는 파일이 없음.

if(xmlReq.status == 200) {

//정상적인 응답을 화면에 출력하는 함수 호출

printData();

} else {

alert("처리 불가!");

}

}

}

//결과 출력 함수

function printData() {

//응답은 두가지 종류가 존재

//responseText, responseXML

var result = xmlReq.responseText;

//alert(result);

var msg = document.getElementById("msg");

msg.innerHTML = result;

}


</script>

</head>

<body>

<div>

<h2>데이터 송수신 테스트2(ajax 방식)</h2>

<form>

이름 <input type="text" name="name" id="name"><br>

전화번호 <input type="text" name="tel" id="tel"><br>

아이디 <input type="text" name="data" id="data"><br>

<input type="button" value="중복체크" onclick="myFunc()">

</form>

<div>결과 데이터 : <span id="msg"></span></div>

</div>

</body>

</html>




//AjaxReceive02.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

<%


String data = request.getParameter("data");

String result = "OK";

if(data.equals("test") || data.equals("admin") || data.equals("hong")) {

result = "Cancel";

}


//ajax 방식에서 데이터를 처리후 재전송할때 out.write(값); 을 사용해야 함.

out.write(result);

%>



JSPAndAJAXExamples


Example 1 - Server side JSP encoding

service.jsp:

  <%@page contentType="text/html; charset=UTF-8"%>
 
<%@page import="org.json.simple.JSONObject"%>
 
<%
   
JSONObject obj=new JSONObject();
    obj
.put("name","foo");
    obj
.put("num",new Integer(100));
    obj
.put("balance",new Double(1000.21));
    obj
.put("is_vip",new Boolean(true));
    obj
.put("nickname",null);
   
out.print(obj);
   
out.flush();
  %>

Please note that you need to place json_simple-1.1.jar in WEB-INF/lib before running the JSP. Then the client side will get the resulting JSON text.

Example 2 - Client side XMLHttpRequest

client.html:

<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<script type="text/javascript">
function createXMLHttpRequest(){
 
// See http://en.wikipedia.org/wiki/XMLHttpRequest
 
// Provide the XMLHttpRequest class for IE 5.x-6.x:
 
if( typeof XMLHttpRequest == "undefined" ) XMLHttpRequest = function() {
   
try { return new ActiveXObject("Msxml2.XMLHTTP.6.0") } catch(e) {}
   
try { return new ActiveXObject("Msxml2.XMLHTTP.3.0") } catch(e) {}
   
try { return new ActiveXObject("Msxml2.XMLHTTP") } catch(e) {}
   
try { return new ActiveXObject("Microsoft.XMLHTTP") } catch(e) {}
   
throw new Error( "This browser does not support XMLHttpRequest." )
 
};
 
return new XMLHttpRequest();
}

var AJAX = createXMLHttpRequest();

function handler() {
 
if(AJAX.readyState == 4 && AJAX.status == 200) {
     
var json = eval('(' + AJAX.responseText +')');
      alert
('Success. Result: name => ' + json.name + ',' + 'balance => ' + json.balance);
 
}else if (AJAX.readyState == 4 && AJAX.status != 200) {
    alert
('Something went wrong...');
 
}
}

function show(){
  AJAX
.onreadystatechange = handler;
  AJAX
.open("GET", "service.jsp");
  AJAX
.send("");
};
</script>

<body>
 
<a href="#" onclick="javascript:show();"> Click here to get JSON data from the server side</a>
</html>

Please place client.html and service.jsp (see Example 1) in the same directory and then open client.html in IE or Firefox, click the link and you'll get result.



출처 : https://code.google.com/p/json-simple/wiki/JSPAndAJAXExamples


WRITTEN BY
빨강꼬마

,

폼 객체

 

1. text 객체

 

주요 메서드와 속성

설명

name

텍스트 박스의 이름

value

텍스트 박스의 값

 

WebContent/form/text.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>text.html</title>

<script>

function copyFunc(ff){

ori = ff.ori.value;

ff.copy.value = ori;

}

</script>

</head>

<body>

<h1>text 입력상자의 값 제어</h1>

<form name='frm'>

원본 : <input type='text' name='ori' value='park'><br>

사본 : <input type='text' name='copy' value=''>

<p>

<input type='button' value='copy' onclick='copyFunc(this.form)'>

</form>

</body>

</html>

 

[실행결과]

 

2. radio 객체

 

주요 메서드와 속성

설명

form

체크 박스 입력 양식을 포함하는 폼 객체의 정보를 가져옴.

checked

체크 박스를 선택하도록함.

defaultChecked

체크 속성이 설정되었는지 확인

name

체크 박스의 이름

value

체크 박스의 값

type

type속성값을 제어

blur() focus()

포커스를 제어

click()

체크 박스를 체크함.

 

WebConent/form/radio.html

 

<html>

<head>

<title>라됴객체 </title>

<script language="JavaScript">

function mclick(f){

l=f.chk.length

for(i=; i < l ; ++i){

if(f.chk[i].checked){

f.re.style.backgroundColor=f.chk[i].value

f.re.value=f.chk[i].value}

}

}

</script>

</head>

<body>

<form name=ff>

<table border=0>

<th><center>Box의 색상을 고르시요</center></th>

<tr>

<td>

<textarea name=re rows=cols=30 ></textarea>

</td></tr><tr>

<td>

<input type="radio" name=chk value="#330000">검정

<input type="radio" name=chk value="#3300FF">파랑

<input type="radio" name=chk value="#00FF00">녹색

<input type="radio" name=chk value="#FF0000">빨강<br>

<input type="radio" name=chk value="#FFFF00">노랑

<input type="radio" name=chk value="#FFFFFF">흰색

<input type="radio" name=chk value="#FF9900">오랜지

<input type=button name=bu value="click" onclick="mclick(this.form)">

</td>

</tr>

</table>

</form>

</body>

</html>

 

 

 

3. checkbox 객체

 

주요 메서드와 속성

설명

form

체크 박스 입력 양식을 포함하는 폼 객체의 정보를 가져옴.

checked

체크 박스를 선택하도록함.

defaultChecked

체크 속성이 설정되었는지 확인

name

체크 박스의 이름

value

체크 박스의 값

type

type속성값을 제어

blur() focus()

포커스를 제어

click()

체크 박스를 체크함.

 

WebContent/form/checkbox2.html

 

<html>

<head>

<title> Check Box2 </title>

<script language="JavaScript">

function mclick(f){

l=f.chk.length

f.re.value=""

for(i=; i<l ; i++){

if(f.chk[i].checked) {f.re.value=f.re.value + f.chk[i].value + "\n"}

}

}

</script>

</head>

<body>

<form name="ff" method="post">

<table border=0>

<th>마음에 드는 연예인을 고르시요</th>

<tr>

<td>

<textarea name=re rows=cols=30 ></textarea>

</td></tr><tr>

<td>

<input type="checkbox" name=chk value="황수정">황수정

<input type="checkbox" name=chk value="채림">채림

<input type="checkbox" name=chk value="황신혜">황신혜

<input type="checkbox" name=chk value="김미화">김미화<br>

<input type="checkbox" name=chk value="이영자">이영자

<input type="checkbox" name=chk value="고두심">고두심

<input type="checkbox" name=chk value="신지">신지<br>

<input type=button name=bu value="선택" onclick="mclick(this.form)">

<input type=reset value="취소">

</td>

</tr>

</table>

</form>

</body>

</html>

 

 

 

4. select 객체

 

1) 객체명.selectedIndex : 선택한 항목의 번호(0번부터)

2) 객체명.[객체명.options.selectedIndex].value : 선택한 항목의 값.

3)객체명.[객체명.options.selectedIndex].text : 선택한 항목의 text.

 

WebContent/form/select.html

 

<HTML>

<HEAD>

<title> </title>

<script language="JavaScript">

function mclick(f,n){

f.tt.style.backgroundColor=n

}

function chang(f){

f.tt.style.backgroundColor=f.sel.options[f.sel.options.selectedIndex].value

}

</script>

</HEAD>

<BODY>

<b><h3>Select 를 이용하여 바탕 색상 바꾸기</h3></b><p>

<form name="ff">

<input type=text name=tt >

<select name="sel" onChange="chang(this.form)">

<option value="#000000">검은색

<option value="#006600">녹색

<option value="#00FF00">연두색

<option value="#FF0000">뻘건색

<option value="#FFFFFF">흰색

</select>

<input type="button" value="white" onClick="mclick(this.form, 'white')">

</form>

</BODY>

</HTML>

 

 

 

 

5. reset 버튼 객체

 

각 항목의 값을 초기값으로 셋팅한다.

특정항목에 값이 있을때 reset 되지 않도록 제어하는 예제임.

 

WebContent/form/onReset.html

<HTML>

<HEAD>

<TITLE>onReset()-1</TITLE>

<style>

input{font-size:40;}

</style>

<script>

function fun(ff)

{

if(ff.irum.value ==""return true;

else return false;

}

</script>

</HEAD>

<BODY>

<h3> 이름 항목에 값이 있으면 리셋버튼의 기능 중지</h3>

<form name="frm" onReset="return fun(this)">

Name <input type="text" name="irum" value=""><br>

Address <input type="text" name="addre" value=""><br>

<input type=reset value="다시">

</form>

</BODY>

</HTML>

 

[실행결과]

 

 

 

 

6. onSubmit 버튼

 

폼에 있는 정보를 서버로 전달하는 기능


WRITTEN BY
빨강꼬마

,

document.oncontextmenu = new Function('return false');   // 우클릭방지

document.ondragstart = new Function('reutrn false');        // 드래그 방지

document.onselectstart = new Function('return false');      // 복사 방지


WRITTEN BY
빨강꼬마

,

EX)

페이지 내에서 키보드 키를 누를 경우 실행하는 함수 지정

document.onkeydown = keyControl;


예제 함수

function keyControl() {

if (event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 17 || event.keyCode == 18 ||

event.keyCode == 112 || event.keyCode == 113 || event.keyCode == 114 || event.keyCode == 115 ||

event.keyCode == 116 || event.keyCode == 117 || event.keyCode == 118 || event.keyCode == 119 ||

event.keyCode == 120 || event.keyCode == 121 || event.keyCode == 122 || event.keyCode == 123 ||

event.keyCode == 91 || event.keyCode == 92) {

alert ("특수키 사용은 불가능합니다.");

return false;

}

}


←(백스패이스) = 8
TAB = 9
ENTER = 13
SHIFT = 16
CTRL = 17
ALT = 18
PAUSEBREAK = 19
CAPSLOOK = 20
한/영 = 21
한자 = 25
ESC = 27

스패이스 = 32
PAGEUP = 33
PAGEDN = 34
END = 35
HOME =36

←(중간) = 37
↑(중간) = 38
→(중간) = 39
↓(중간) = 40

0 = 48
1 = 49
2 = 50
3 = 51
4 = 52
5 = 53
6 = 54
7 = 55
8 = 56
9 = 57
INSERT = 45
DELETE = 46

A = 65
B = 66
C = 67
D = 68
E = 69
F = 70
G = 71
H = 72
I = 73
J = 74
K = 75
L = 76
M = 77
N = 78
O = 79
P = 80
Q = 81
R = 82
S = 83
T = 84
U = 85
V = 86
W = 87
X = 88
Y = 89
Z = 90

윈도우(왼쪽) = 91
윈도우(오른쪽) = 92
기능키 = 93
0(오른쪽) = 96
1(오른쪽) = 97
2(오른쪽) = 98
3(오른쪽) = 99
4(오른쪽) = 100
5(오른쪽) = 101
6(오른쪽) = 102
7(오른쪽) = 103
8(오른쪽) = 104
9(오른쪽) = 105
.(오른쪽) = 110
/(오른쪽) = 111
*(오른쪽) = 106
+(오른쪽) = 107
-(오른쪽) = 109
F1 = 112
F2 = 113
F3 = 114
F4 = 115
F5 = 116
F6 = 117
F7 = 118
F8 = 119
F9 = 120
F10 = 121
F11 = 122
F12 = 123
NUMLOCK = 144
SCROLLLOCK = 145
=(중간) = 187
-(중간) = 189
`(왼쪽콤마) = 192
(중간) = 220

[출처] event.keyCode 표|작성자 세봉



WRITTEN BY
빨강꼬마

,

텍스트박스(<input type="text"> 태그) 객체 다루기



1. value 속성.


//Script40.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">

function myFunc() {

var id = document.getElementById("id");

var pw = document.getElementById("pw");

var msg = document.getElementById("msg");

msg.style.display = "none";

var result = document.getElementById("result");

//공백 제거 기능 추가 필요.-> 사용자 함수 구현 -> trim()함수 (자바스크립트에는 이 함수가 없음.)

if (id.value == "" || pw.value == "") {

msg.style.display = "inline";

id.focus();

} else {

if(id.value=="admin" && pw.value =="1234") {

result.innerHTML = "회원으로 로그인 되었습니다.";

} else {

result.innerHTML = "아이디 또는 패스워드가 틀렸습니다.";

}

}

}

</script>

</head>

<body>

<div>

<h2>텍스트 박스 객체 다루기</h2>

<form>

아이디<input type="text" id="id">

패스워드<input type="password" id="pw">

<input type="button" value="로그인" onclick="myFunc()">

<span id="msg" style="color:red; display:none;">아이디 또는 패스워드를 채워야 합니다.</span>

</form>

<h3>출력----------------------</h3>

<div id="result"></div>

</div>

</body>

</html>




2. readonly, disabled 속성


//Script41.html


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">

function myCheck(obj) {

var id = document.getElementById("id");

var pw = document.getElementById("pw");

var btn = document.getElementById("btn");

if(obj.checked) {

//약관동의 선택한 경우

//아아디, 패스워드 입력가능상태로 변경

//회원가입버튼을 사용가능상태로 변경

id.readOnly = false;

pw.readOnly = false;

btn.disabled = false;

} else {

//약관동의 취소한 경우

//아이디, 패스워드에 입력된 데이터 삭제

//아아디, 패스워드 입력 불가 상태로 변경

//회원가입버튼을 사용 불가 상태로 변경

id.value = "";

pw.value = "";

id.readOnly = true;

pw.readOnly = true;

btn.disabled = true;

}

}

function myFunc() {

var id = document.getElementById("id");

var pw = document.getElementById("pw");

//공백 제거 기능 추가 필요.-> 사용자 함수 구현 -> trim()함수 (자바스크립트에는 이 함수가 없음.)

if (id.value == "" || pw.value == "") {

msg.style.display = "inline";

id.focus();

} else {

result.innerHTML = "회원으로 가입되었습니다.";

}

}

</script>

</head>

<body>

<div>

<h2>텍스트 박스 객체 다루기</h2>

<form>

<input type="checkbox" id="check" onclick="myCheck(this)"> 약관동의<br>

아이디<input type="text" id="id" readOnly="readOnly"><br>

패스워드<input type="password" id="pw" readOnly="readOnly"><br>

<input type="button" id="btn" value="회원가입" onclick="myFunc()" disabled="disabled">

<span id="msg" style="color:red; display:none;">아이디 또는 패스워드를 채워야 합니다.</span>

</form>

<h3>출력----------------------</h3>

<div id="result"></div>

</div>

</body>

</html>






선택목록(<select> 태그) 객체 다루기



1. selected 속성, onchange 이벤트 지원


//Script42.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">


function myFunc(obj) {

var emailAddr = obj.options[obj.selectedIndex].value;

var email02 = document.getElementById("email02");

if (emailAddr == "2") {

//직접입력.

email02.value = "";

email02.readOnly = false; //Only 에서 O는 대문자 표기

email02.focus();

} else {

email02.readOnly = true;

email02.value = emailAddr;

}

}


</script>

</head>

<body>

<div>

<h2>선택목록 객체 다루기</h2>

<form>

이메일

<input type="text" id="email01">

@

<input type="text" id="email02" readOnly="readOnly">

<select id="emailAddr" onchange="myFunc(this)">

<option value="">선택</option>

<option value="naver.com" selected="selected">naver.com</option>

<option value="nate.com">nate.com</option>

<option value="hanmail.net">hanmail.net</option>

<option value="2">직접입력</option>

</select>

</form>

</div>


</body>

</html>



//Script43.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>


<script type="text/javascript">

function myFunc(obj) {

var jikwi = obj.options[obj.selectedIndex].value;

var msg = document.getElementById("msg");

var basicpay = document.getElementById("basicpay");

msg.style.display = "none";

switch(jikwi) {

case "1":

msg.style.display = "inline";

msg.innerHTML = "100만원 이상";

break;

case "2":

msg.style.display = "inline";

msg.innerHTML = "120만원 이상";

break;

case "3":

msg.style.display = "inline";

msg.innerHTML = "200만원 이상";

break;

}

basicpay.focus();

}

</script>


</head>

<body>

<div>

<h2>선택목록 객체 다루기2</h2>

<form>

직위

<select id="jikwi" onchange="myFunc(this)">

<option value="1">사원</option>

<option value="2">대리</option>

<option value="3">과장</option>

</select><br>

기본급

<input type="text" id="basicpay" style="width:80px;">

<span id="msg" style="color:red;display:none;"></span>

<br>

<input type="button" value="직원등록">

</form>

</div>

</body>

</html>






윈도우(브라우저 자신) 객체 다루기



1. window 객체는 자바스크립트에서는 브라우저 자신을 의미.


2. 최상위 객체. 생략 가능.


3. 팝업창을 생성할 때 window.open(), window.close() 사용.


//Script44.html -> 부모창


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">

function myPopup() {

window.open("Script44_1.html", "popup", "width=200, height=400");

//window.open("http://www.gmarket.co.kr/popup/indexPopunder.html", "popup", "width=400, height=450");

}

</script>

</head>

<body onload="myPopup()">

<div>

<h2>윈도우 객체 다루기</h2>

<p>

<a href="javascript:myPopup()" >로그인 전용 화면</a>

</p>

</div>

</body>

</html>





//Script44_1.html -> 자식창


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

</head>

<body>

<div>

<h3>광고 페이지</h3>

<a href ="javascript:window.close();">close</a>

</div>

</body>

</html>






DOM (Document Object Model)


1. HTML 태그를 객체로 받아들여서 객체를 다루는 명령.


2. 태그 수정, 삭제, 추가 등이 가능하다.


//DOM01.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">


function myFunc() {

//Node - 엘리먼트, 속성 등의 객체

//Element - 태그 객체

//Attribute - 속성 객체

var parent = document.getElementById("target");


var str = "";

/*

var nodeList = parent.childNodes;

str += "nodeList.length : " + nodeList.length + "<br>";

for (var a=0; a<nodeList.length; a++) { 

str += "nodeList[" + a + "].nodeType : " + nodeList[a].nodeType + "<br>";

str += "nodeList[" + a + "].nodeValue : " + nodeList[a].nodeValue + "<br>";

}

//nodeType이 1이면 엘리먼트

//nodeType이 2이면 속성

//nodeType이 3이면 텍스트

var pnode = nodeList[0]; //첫 번째 <p> 엘리먼트

var textnode = pnode.childNodes[0]; // <p> 엘리먼트의 텍스트

str += "textnode.nodeValue : " + textnode.nodeValue;  // <p> 엘리먼트의 텍스트 값

*/

//순차적으로 텍스트 노드를 접근해서 출력

var pNodes = parent.childNodes;

for (var a=0; a<pNodes.length; a++) {

str += pNodes[a].firstChild.nodeValue + "<br>";

}

var result = document.getElementById("result");

result.innerHTML = str;


}


</script>

</head>

<body>

<div>

<h2>DOM</h2>

<form>

<input type="button" value="DOM테스트" onclick="myFunc()">

</form>


<div id="target"><p>첫번째 문장</p><p>두번째 문장</p><p>세번째 문장</p></div>

<h2>출력 --------------------------</h2>

<div id="result"></div>

</div>

</body>

</html>



//DOM02.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">


function myFunc(status) {


var ulNode = document.getElementById("subjectLists");

var liNodes = ulNode.childNodes;

for (var a=0; a<liNodes.length; a++) {

var inputNode = liNodes[a].firstChild;

if(inputNode.nodeType == 1) {

inputNode.checked = status;

}

}

}


</script>

</head>

<body>

<div>

<h2>DOM 테스트 2</h2>

<div>

<a href="javascript:myFunc(true)">전체선택</a> / <a href="javascript:myFunc(false)">전체해제</a>

</div>

<form>

<h3>강의 가능 과목</h3>


<!-- <ul> 태그에서 <li> 태그 입력시 줄바꿈 처리하지 말것-->

<ul id="subjectLists" style="list-style:none"><li><input type="checkbox">Java SE</li><li><input type="checkbox">Oracle</li><li><input type="checkbox">JSP &amp; Servlet</li></ul>

</form>

</div>

</body>

</html>





//DOM03.html







문제) 자바스크립트의 DOM 기능을 이용해서 방명록을 작성할 것.

-> wedding.html 파일 및 img 폴더를 이클립스에 복사해서 사용할 것.

-> 번호 및 날짜는 자바스크립트에서 자동 입력되도록 할 것.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>홍길동, 박길순 결혼식 청접장</title>

<style type="text/css">

.style1 {color:red;}

a {

text-decoration: none;

color:gray;

}

a:hover {

text-decoration: underline;

color:red;

}

</style>

<script type="text/javascript">

function textCountCheck(obj, target) {

var len = obj.value.length;

var targetObj = document.getElementById(target);

targetObj.innerText = len;

}

//테이블 동적 생성

function guestFormSubmit() {

var count = 2;

var name = document.getElementById("uname");

var content = document.getElementById("content");


var trNode = document.createElement("tr");

var tdNode = createTdNode(count++);

tdNode.setAttribute("align", "center");

trNode.appendChild(tdNode);


tdNode = createTdNode(name.value);

tdNode.setAttribute("align", "center");

trNode.appendChild(tdNode);


trNode.appendChild(createTdNode(content.value));


tdNode = createTdNode(getSysTime());

tdNode.setAttribute("align", "center");

trNode.appendChild(tdNode);


tdNode = document.createElement("td");

tdNode.appendChild(createDelBtnNode());

tdNode.setAttribute("align", "center");

var tableNode = document.getElementById("result");

var tbodyNode = tableNode.firstChild;

tbodyNode.appendChild(trNode);


name.value = "";

content.value = "";

name.focus();

}

function createTdNode(val) {

//<td>val</td>

var txtNode = document.createTextNode(val);

var tdNode = document.createElement("td");

tdNode.appendChild(txtNode);

return tdNode;

}

//시스템 시간찍기

function getSysTime() {

        var d = new Date();

        var s =

          leadingZeros(d.getHours(), 2) + ':' +

          leadingZeros(d.getMinutes(), 2) + ':' +

          leadingZeros(d.getSeconds(), 2);

        return s;

    }

    //숫자의 자리수 를 0으로 채우기

    function leadingZeros(n, digits) {

    var zero = '';

        n = n.toString();

        if (n.length < digits) {

        for (i = 0; i < digits - n.length; i++)

        zero += '0';

        }

        return zero + n;

    }

    

    //테이블 삭제 전용 버튼 처리 함수

function createDelBtnNode() {

var btn = document.createElement("input");

btn.setAttribute("type", "button");

btn.setAttribute("value", "삭제");

btn.onclick = function() {

deleteNode(this);

};

return btn;

}

function deleteNode(obj) {

if (confirm("삭제할까요?")) {

var tdNode = obj.parentNode;

var trNode = tdNode.parentNode;

var tbodyNode = trNode.parentNode;

tbodyNode.removeChild(trNode);

}

}

</script>

</head>

<body>

<div>

<div><a href="">[Admin Login]</a></div>

<img src="img/WeddingPhoto.jpg" width="400" height="300">

<div>

<h3>홍길동, 박길순의 결혼식 청첩장 사이트</h3>

일시 : 2013.01.23 <span class="style1">(D-48</span>)</span><br> 

장소 : KH정보교육원<br> 

찾아오시는 방법 : 지하철 2호선 당산역 3번 출구 동화빌딩 3층<br>

<br>

</div>

<div>방명록에 글을 남겨주세요~</div>

<form>

<table>

<tbody>

<tr>

<td>글쓴이</td>

<td>

<input type="text" id="uname" name="uname"

onkeyup="textCountCheck(this, 'nameLen')">

(<span id="nameLen" class="style1">0</span>/50)

</td>

</tr>

<tr>

<td>글내용</td>

<td>

<input type="text" size="80" id="content" name="content"

onkeyup="textCountCheck(this, 'contentLen')">

(<span id="contentLen" class="style1">0</span>/200)

<a href="javascript:guestFormSubmit()">[글쓰기]</a>

</td>

</tr>

</tbody>

</table>

</form>

<table cellpadding="3" border="1" id="result"><tbody><tr><th width="60">번호</th><th width="100">글쓴이</th><th width="400">글내용</th><th width="180">작성일</th></tr><tr><td align="center">1</td><td align="center">주인장</td><td>많은 참석 바랍니다.</td><td align="center"></td></tr></tbody></table>

</div>

</body>

</html>






사용자 정의 객체




1. 객체는 사용자 정의 객체와 내장 객체로 구분.


2. 객체의 멤버인 속성과 메소드는 .(dot) 연산자를 이용해서 접근.


3. 사용자 정의 객체 형식


//객체명은 첫 글자를 대문자로 표기

function 객체명(인자리스트) {

//속성 정의

this.멤버명 = 값;


//메소드 정의

this.메소드명 = function(인자리스트) {

//실행문;

};

}



//객체 생성

new 변수 = new 객체명();


//접근 방법

변수.멤버명

변수.메소드명();


변수.멤버명 = 값;   -- setter의 역할과 비슷.

var 변수 = 변수.멤버명;  -- getter의 역할과 비슷.


변수.메소드명(); -- 리턴값없을때 실행하고 끝

var 변수 = 변수.메소드명(); -- 리턴값있을때 실행과 동시에 리턴값 변수에 저장




//OOP01.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">


function myFunc() {

//사용자 객체 정의

function Blog(body, date) {

//속성 정의

this.body = body; //매개변수 body를 속성에 셋팅

this.date = date; //매개변수 date를 속성에 셋팅

}

//객체 생성 -> 배열에 저장

var blog = [new Blog("사용자 정의 객체 테스트", "2012-11-13") // 배열 선언과 동시에 값지정.

          ,new Blog("생성자 작성시 첫글자는 대문자", "2012-11-14")

  ,new Blog("new연산자를 이용해서 객체생성", "2012-11-15")];

var str = "";

//객체의 하위 멤버(속성) 접근

for (var a=0; a<blog.length; a++) {

str += blog[a].body + " / ";

str += blog[a].date + "<br>";

}

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>사용자 정의 객체</h2>

<form>

<input type="button" value="사용자 정의 객체" onclick="myFunc()">

</form>

<h3>출력--------------------</h3>

<div id="result"></div>

</div>

</body>

</html>



//OOP02.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">


function myFunc() {

//객체 생성 - 현재 시스템 날짜 리턴

var date = new Date();

//Date 객체의 하위 멤버(메소드) 접근

var str = "";

str += date.getFullYear() + "<br>";

str += (date.getMonth()+1) + "<br>";

str += date.getDate() + "<br>";

str += date.getDay() + "<br>";

str += date.getTime() + "<br>";

str += date.toDateString() + "<br>";

str += date.toLocaleDateString() + "<br>";

str += date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();

//YYYY-MM-DD 형식 문자열 -> 사용자 정의 형식 필요

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>내장 객체</h2>

<form>

<input type="button" value="내장 객체" onclick="myFunc()">

</form>

<h3>출력--------------------</h3>

<div id="result"></div>

</div>

</body>

</html>



//OOP03.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">


function myFunc() {

//사용자 객체 정의

function Blog(body, date) {

//속성 정의

this.body = body; //매개변수 body를 속성에 셋팅

this.date = date; //매개변수 date를 속성에 셋팅

/* //메소드 정의 -> 인스턴스 형식

//YYYY-MM-DD 형식의 날짜 문자열

this.toUserDateString = function(date) {

var result = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();

return result;

}; */

//메소드 정의 -> 스태틱 형식 (prototype)

//YYYY-MM-DD 형식의 날짜 문자열

Blog.prototype.toUserDateString = function(date) {

var result = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();

return result;

};

}

//객체 생성 -> 배열에 저장

var blog = [new Blog("사용자 정의 객체 테스트", new Date("2012-11-13")) // 배열 선언과 동시에 값지정.

          ,new Blog("생성자 작성시 첫글자는 대문자", new Date("2012-11-14"))

  ,new Blog("new연산자를 이용해서 객체생성", new Date("2012-11-15"))];

var str = "";

//객체의 하위 멤버인 날짜를 기준으로 정렬 추가

blog.sort(

function(obj1, obj2) {

//return obj1.date - obj2.date; //ACS

return obj2.date - obj1.date; //DESC

}

);

//객체의 하위 멤버(속성, 메소드) 접근

for (var a=0; a<blog.length; a++) {

str += blog[a].body + " / ";

str += blog[a].toUserDateString(blog[a].date) + "<br>";

}

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>사용자 정의 객체</h2>

<form>

<input type="button" value="사용자 정의 객체" onclick="myFunc()">

</form>

<h3>출력--------------------</h3>

<div id="result"></div>

</div>

</body>

</html>



WRITTEN BY
빨강꼬마

,

만년달력(요일구하기)


1. 1년 1월 1일부터 전년도 12월 31일까지의 총 날짜수 구함.

var total = (year-1)*365 + ((year-1)/4 - (year-1)/100 + (year-1)/400);



2. 해당년도 1월 1일부터 해당년도 해당월 1일까지의 총 날짜수 구함.

var m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

for (var a=0; a<month-1; a++) {

total += m[a];

}


//해당월 1일 때문에 +1

total++;

//올해가 윤년이면서 2월 이상인 경우 +1

if (month>=3 && (year%4==0 && year%100!=0 || year%400==0)) {

total++;

}


3. 해당년도 해당월의 첫 날(1일)의 요일(일, 월, 화, 수, 목, 금, 토) 구함.

var d = ["일", "월", "화", "수", "목", "금", "토"];

var days = total % 7;


var result = document.getElementById("result");

result.innerHTML = d[days] + "요일";



문제) 특정 년, 월, 일 입력시 요일 구하기. 자바스크립트 이용.

실행 예)

년도 [2012 ]  월 [10 ]  일 [8  ]  [결과]


결과 : 월요일


//Script29.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<style type="text/css">

.style01 {

width:80px;

}

</style>

<script type="text/javascript">

function myFunc() {

//입력한 년, 월, 일 값 읽어오기->문자열

var yObj = document.getElementById("year");

var mObj = document.getElementById("month");

var dObj = document.getElementById("day");

//문자열->숫자

var year = parseInt(yObj.value);

var month = parseInt(mObj.value);

var day = parseInt(dObj.value);

//전년도까지의 총 날짜수 계산

//윤년 계산시 나누기 연산이 실수형이라서 최종 결과가 정수형이 되도록 parseInt() 함수 사용.

var total = (year-1)*365 + parseInt((year-1)/4) - parseInt((year-1)/100) + parseInt((year-1)/400);

//해당년도 전월까지의 총 날짜수 계산

var m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

for (var a=0; a<month-1; a++) {

total += m[a];

}

//해당년도가 윤년이면서 2월 이상인 경우 +1

if (month>=3 && (year%4==0 && year%100!=0 || year%400==0)) {

total++;

}


//해당월의 특정일까지의 총 날짜수 계산

total += day;


//총 날짜수(정수형)를 7로 나눈 나머지 계산->요일에 대한 순번

var days = total % 7;

//alert(days);

var d = ["일", "월", "화", "수", "목", "금", "토"];

var result = document.getElementById("result");

result.innerHTML = d[days] + "요일";

}

</script>

</head>

<body>

<div>

<h2>만년달력 요일 구하기</h2>

<h3>입력 ---------------</h3>

<form>

년 <input type="text" id="year" class="style01">

월 <input type="text" id="month" class="style01">

일 <input type="text" id="day" class="style01">

<input type="button" value="결과"

onclick="myFunc()">

</form>

<h3>출력 ---------------</h3>

<div id="result"></div>

</div>

</body>

</html>




//Script29.html & daysCalc.js 에서 daysCalc.js

function daysCalc(year, month, day) {

//year, month, day는 정수형 데이터만 가능

//전년도까지의 총 날짜수 계산

//윤년 계산시 나누기 연산이 실수형이라서 최종 결과가 정수형이 되도록 parseInt() 함수 사용.

var total = (year-1)*365 + parseInt((year-1)/4) - parseInt((year-1)/100) + parseInt((year-1)/400);

//해당년도 전월까지의 총 날짜수 계산

var m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

for (var a=0; a<month-1; a++) {

total += m[a];

}

//해당년도가 윤년이면서 2월 이상인 경우 +1

if (month>=3 && (year%4==0 && year%100!=0 || year%400==0)) {

total++;

}


//해당월의 특정일까지의 총 날짜수 계산

total += day;


//총 날짜수(정수형)를 7로 나눈 나머지 계산->요일에 대한 순번

var days = total % 7;

return days;

}





//Script29.html & daysCalc.js 에서 Script29.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<style type="text/css">

.style01 {

width:80px;

}

</style>

<script type="text/javascript" src="daysCalc.js"></script>

<script type="text/javascript">

function myFunc() {

//입력한 년, 월, 일 값 읽어오기->문자열

var yObj = document.getElementById("year");

var mObj = document.getElementById("month");

var dObj = document.getElementById("day");

//문자열->숫자

var year = parseInt(yObj.value);

var month = parseInt(mObj.value);

var day = parseInt(dObj.value);

//년, 월, 일 데이터로 요일 계산 함수 호출

var days = daysCalc(year, month, day);

//alert(days);

var d = ["일", "월", "화", "수", "목", "금", "토"];

var result = document.getElementById("result");

result.innerHTML = d[days] + "요일";

}

</script>

</head>

<body>

<div>

<h2>만년달력 요일 구하기</h2>

<h3>입력 ---------------</h3>

<form>

년 <input type="text" id="year" class="style01">

월 <input type="text" id="month" class="style01">

일 <input type="text" id="day" class="style01">

<input type="button" value="결과"

onclick="myFunc()">

</form>

<h3>출력 ---------------</h3>

<div id="result"></div>

</div>

</body>

</html>






문제) 만년달력 출력. 자바스크립트 이용.


//Script30.html & daysCalc.js 에서 daysCalc.js (lastDay() 함수 추가됨)

function daysCalc(year, month, day) {

//year, month, day는 정수형 데이터만 가능

//전년도까지의 총 날짜수 계산

//윤년 계산시 나누기 연산이 실수형이라서 최종 결과가 정수형이 되도록 parseInt() 함수 사용.

var total = (year-1)*365 + parseInt((year-1)/4) - parseInt((year-1)/100) + parseInt((year-1)/400);

//해당년도 전월까지의 총 날짜수 계산

var m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

for (var a=0; a<month-1; a++) {

total += m[a];

}

//해당년도가 윤년이면서 2월 이상인 경우 +1

if (month>=3 && (year%4==0 && year%100!=0 || year%400==0)) {

total++;

}


//해당월의 특정일까지의 총 날짜수 계산

total += day;


//총 날짜수(정수형)를 7로 나눈 나머지 계산->요일에 대한 순번

var days = total % 7;

return days;

}


function lastDay(year, month) {

//year, month는 정수형만 가능

var m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

var day = m[month-1];

if (month==2 && (year%4==0 && year%100!=0 || year%400==0)) {

day = 29;

}


return day;

}



//Script30.html & daysCalc.js 에서 Script30.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<style type="text/css">

.style01 {

width:80px;

}

td {

padding:2px;

}

</style>

<script type="text/javascript" src="daysCalc.js"></script>

<script type="text/javascript">

function myFunc() {

//입력한 년, 월, 일 값 읽어오기->문자열

var yObj = document.getElementById("year");

var mObj = document.getElementById("month");

var year = parseInt(yObj.value);

var month = parseInt(mObj.value);

//요일 계산 전용 함수 호출

var week = daysCalc(year, month, 1);

//alert(week);

//마지막 날짜 구하는 함수 호출

var lastday = lastDay(year, month);

var str = "";

str += "<table><tbody>";

str += "<tr><th>일</th><th>월</th><th>화</th><th>수</th><th>목</th><th>금</th><th>토</th></tr>";

str += "<tr>";

//해당월 1일의 특정 요일에 해당하는 빈 칸 출력

for (var a=1; a<=week; a++) {

str += "<td></td>";

}

//해당월 1일부터 마지막 날까지 출력

for(var a=1; a<=lastday; a++) {

str += "<td style=\"text-align:center\">"+a+"</td>";

//일주일 단위로 행 변경

if (((a+week)%7)==0) {

str += "</tr><tr>";

}

}

str += "</tr></tbody></table>";

var result = document.getElementById("result");

result.innerHTML = str;

}

</script>

</head>

<body>

<div>

<h2>만년달력 출력</h2>

<h3>입력 ---------------</h3>

<form>

년 <input type="text" id="year" class="style01">

월 <input type="text" id="month" class="style01">

<input type="button" value="결과"

onclick="myFunc()">

</form>

<h3>출력 ---------------</h3>

<div id="result"></div>

</div>

</body>

</html>






문제) 만년달력 출력2. 자바스크립트 이용.


//Script31.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<style type="text/css">

.style01 {

width:80px;

}

td {

padding:2px;

}

</style>

<script type="text/javascript" src="daysCalc.js"></script>

<script type="text/javascript">

function myFunc() {

//입력한 년, 월, 일 값 읽어오기->문자열

var yObj = document.getElementById("year");

var mObj = document.getElementById("month");

var year = parseInt(yObj.options[yObj.selectedIndex].value);

var month = parseInt(mObj.options[mObj.selectedIndex].value);

//요일 계산 전용 함수 호출

var week = daysCalc(year, month, 1);

//alert(week);

//마지막 날짜 구하는 함수 호출

var lastday = lastDay(year, month);

var str = "";

str += "<table><tbody>";

str += "<tr><th>일</th><th>월</th><th>화</th><th>수</th><th>목</th><th>금</th><th>토</th></tr>";

str += "<tr>";

//해당월 1일의 특정 요일에 해당하는 빈 칸 출력

for (var a=1; a<=week; a++) {

str += "<td></td>";

}

//해당월 1일부터 마지막 날까지 출력

for(var a=1; a<=lastday; a++) {

str += "<td style=\"text-align:center\">"+a+"</td>";

//일주일 단위로 행 변경

if (((a+week)%7)==0) {

str += "</tr><tr>";

}

}

str += "</tr></tbody></table>";

var result = document.getElementById("result");

result.innerHTML = str;

}

</script>

</head>

<body>

<div>

<h2>만년달력 출력</h2>

<h3>입력 ---------------</h3>

<form>

년 <select id="year" onchange="myFunc()"><option value="2011">2011년</option><option value="2012">2012년</option><option value="2013">2013년</option></select>

월 <select id="month" onchange="myFunc()"><option value="1">1월</option><option value="2">2월</option><option value="3">3월</option><option value="4">4월</option><option value="5">5월</option><option value="6">6월</option><option value="7">7월</option><option value="8">8월</option><option value="9">9월</option><option value="10">10월</option><option value="11">11월</option><option value="12">12월</option></select>

</form>

<h3>출력 ---------------</h3>

<div id="result"></div>

</div>

</body>

</html>







난수 발생


1. 0 부터 1 사이의 무작위 숫자를 난수라고 함.


2. Math.random() 메소드 이용.



//Script32.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">

function myFunc() {

var str ="";

for (var a=1; a<=10; a++) {

//1~100 사이의 난수

str += (parseInt(Math.random()*100)+1) + " ";  

}

var result = document.getElementById("result");

result.innerHTML = str;

}

</script>

</head>

<body>

<div>

<h2>난수 발생 테스트</h2>

<form>

<input type="button" value="결과"

onclick="myFunc()">

</form>

<h3>출력 ------------</h3>

<div id="result"></div>

</div>

</body>

</html>






문제) 여러개의 난수를 발생시키고, 난수들 중에서 가장 큰 값과 가장 작은 값을 별도 출력. 

중복되지 않은 난수만 허용. 난수 허용 범위는 1~100. 배열 이용. 자바스크립트 이용.


실행 예)

난수 갯수(2~20) [5   ] [결과]


난수 결과 : 55 9 12 6 90 

가장 큰 값 : 90

가장 작은 값 : 6


//Script33.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<style type="text/css">


.style01

{

width: 40px;

}


</style>

<script type="text/javascript">

function myFunc() {

var msg = "난수 결과 : ";

var str = "";

var temp = document.getElementById("data");

var number = parseInt(temp.value);

for (var a=0; a<number ; a++) {

str += (parseInt(Math.random()*100)+1) + " ";

}

var arr = new Array();

arr = str.split(" ");

var max = arr[0];

var min = arr[0];

for (var a=1; a<arr.length; a++) {

if (max < parseInt(arr[a])) {

max = arr[a];

}

if (min > parseInt(arr[a])) {

min = arr[a];

}

}

msg += str + "<br>가장 큰 값 : " + max + "<br>가장 작은 값 : " + min;

var result = document.getElementById("result");

result.innerHTML = msg;

}

</script>

</head>

<body>

<div>

<h2>난수 발생 테스트2</h2>

<form>

난수 갯수(2~20) <input type="text" id="data" class="style01"> <input type="button" value="입력" onclick="myFunc()" >

</form>

<h3>출력-----------------</h3>

<div id="result"></div>

</div>

</body>

</html>






문제) 가위,바위,보 게임. 

1~3 사이의 난수가 발생하면 가위, 바위, 보라고 생각하고 사용자가 내는 가위, 바위, 보와 비교해서 승패 결정.


사용자 선택 [가위] [바위] [ 보 ]


사용자:가위, 컴퓨터:바위

결과 : 컴퓨터 승!


//Script34.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">

//전역변수

var userCount = 0;

var compCount = 0;

function myFunc(user) {

var comp = parseInt(Math.random()*3) + 1;

var msg = "";


if (user == comp) {

msg = "비겼습니다.";

} else if (user%3 == (comp+1)%3) {

msg = "사용자 승!";

userCount++;

} else {

msg = "컴퓨터 승!";

compCount++;

}

var arr = ["가위", "바위", "보"];

var str = "";

str += "사용자:" + arr[user-1] + ", 컴퓨터:" + arr[comp-1] + "<br>";

str += "결과 : "+ msg +"<br>";

str += "사용자승: " + userCount + "회, 컴퓨터승: " + compCount + "회";

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>가위, 바위, 보 게임</h2>

<form>

사용자 선택

<input type="button" value="가위" onclick="myFunc(1)">

<input type="button" value="바위" onclick="myFunc(2)">

<input type="button" value=" 보 " onclick="myFunc(3)">

</form>

<h3>출력 -------------------</h3>

<div id="result"></div>

</div>

</body>

</html>






문제) 로또 번호를 원하는 장수 만큼 출력. 자바스크립트 이용.

로또 번호는 1~45 범위의 숫자를 중복되지 않은 상태에서 6개가 되면 1장에 해당.


실행 예)

로또 장수(1~20) [3  ]  [결과]


번호1 :  1 12 13 34 35 36

번호2 : 12 20 25 30 39 45

번호3 :  1  4  9 20 30 42



//Script35.html










라디오(<input type="radio" name="식별자"> 태그) 객체 다루기



실행 예)

 - 사이즈 선택 -

 o 싱글레귤러(1)

 o 파인트(3)

 o 쿼터(5)


   [확인]



//Script36.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">

function myFunc() {

//NodeList(DOM) 자료형 반환됨 -> 컬렉션.

var radios = document.getElementsByName("size");

var result = 0;

for (var a=0; a<radios.length; a++) {

if (radios[a].checked) {

result = parseInt(radios[a].value);

}

}

var str = "";

switch (result) {

case 0 : str = "선택한 항목이 없습니다."; break;

case 1 : str = "선택한 사이즈는 싱글레귤러이며, 1개의 품목을 선택할 수 있습니다."; break;

case 3 : str = "선택한 사이즈는 파인트이며, 3개의 품목을 선택할 수 있습니다."; break;

case 5 : str = "선택한 사이즈는 쿼터이며, 5개의 품목을 선택할 수 있습니다."; break;

}

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>라디오 객체 다루기</h2>

<form>

-사이즈 선택- <br>

<input type="radio" name="size" value="1"> 싱글레귤러(1)<br>

<input type="radio" name="size" value="3"> 파인트(3)<br>

<input type="radio" name="size" value="5"> 쿼터(5)<br>

<input type="button" value="확인" onclick="myFunc()">

</form>

<h3>출력 -----------------</h3>

<div id ="result"></div>

</div>

</body>

</html>





라디오(<input type="radio" name="식별자"> 태그) 객체 다루기2



실행 예)

 - 사이즈 선택 -

 o 싱글레귤러(1)

 o 파인트(3)

 o 쿼터(5)



//Script37.html (확인 버튼 없이 라디오 객체에서 직접 클릭 이벤트 처리)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>


<script type="text/javascript">

function myFunc(obj) {

var result = 0;

result = parseInt(obj.value);

var str = "";

switch(result) {

case 1: str="선택한 사이즈는 싱글레귤러(1)입니다."; break;

case 3: str="선택한 사이즈는 파인트(3)입니다."; break;

case 5: str="선택한 사이즈는 쿼터(5)입니다."; break;

}

var result = document.getElementById("result");

result.innerHTML = str;

}

</script>


</head>

<body>

<div>

<h2>라디오 객체 다루기2</h2>

<form>

- 사이즈 선택-<br><br>

<input type="radio" name="size" value="1"

onclick="myFunc(this)"> 싱글레귤러(1)<br>

<input type="radio" name="size" value="3"

onclick="myFunc(this)"> 파인트(3)<br>

<input type="radio" name="size" value="5"

onclick="myFunc(this)"> 쿼터(5)<br><br>

<!-- <input type="button" value="확인"

onclick="myFunc()"> -->

</form>

<h3>출력-----------</h3>

<div id="result"></div>

</div>

</body>

</html>






체크박스(<input type="checkbox"> 태그) 객체 다루기



실행 예)

           - 종류 선택 -

 [v]고스트월드      [v]엄마는 외계인

 [ ]바나나몬스터    [ ]초코라떼크런치

 [ ]뉴욕치즈케익    [ ]슈팅스타

              [확인]




//Script38.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">


function myFunc() {

var names = ["고스트월드", "엄마는 외계인", "바나나몬스터", "초코라떼크런치", "뉴욕치즈케익", "슈팅스타"];

var checkboxes = document.getElementsByName("icecream");

var icecream = new Array();

for (var a=0, b=0; a<checkboxes.length; a++) {

if (checkboxes[a].checked) {

icecream[b] = parseInt(checkboxes[a].value);

b++;

}

}

var str = "";

if (icecream.length == 0) {

str = "선택된 항목이 없습니다.";

} else {

str += "선택한 종류는 <br>";

for (var a=0; a<icecream.length; a++) {

str += (a+1) + ". " + names[icecream[a]-1] + "<br>";

}

str += "입니다.<br>";

}

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>체크박스 객체 다루기</h2>

<form>

- 종류 선택 -<br>

<input type="checkbox" name="icecream" value="1">고스트월드<br>

<input type="checkbox" name="icecream" value="2">엄마는 외계인<br>

<input type="checkbox" name="icecream" value="3">바나나몬스터<br>

<input type="checkbox" name="icecream" value="4">초코라떼크런치<br>

<input type="checkbox" name="icecream" value="5">뉴욕치즈케익<br>

<input type="checkbox" name="icecream" value="6">슈팅스타<br>

<input type="button" value="확인" onclick="myFunc()">

</form>

<h3> 출력 ----------------</h3>

<div id="result"></div>

</div>

</body>

</html>










문제) 선택 갯수 제한하기. 자바스크립트 이용.

제약조건

1. 사이즈 선택한 갯수를 초과해서 선택할 수 있다.

2. 제한된 갯수를 넘는 경우 '갯수 초과' 메세지 출력

3. 최종적으로 주문 버튼 클릭시는 주문 내역(사이즈, 종류)출력



실행 예)

          - 사이즈 선택 -

            o 싱글레귤러(1)

            o 파인트(3)

            o 쿼터(5)



           - 종류 선택 -

 [v]고스트월드      [v]엄마는 외계인

 [ ]바나나몬스터    [ ]초코라떼크런치

 [ ]뉴욕치즈케익    [ ]슈팅스타

              [확인]





//Script39.html


WRITTEN BY
빨강꼬마

,

반복문


1. for문. 정해진 횟수만큼 반복해야 하는 경우 사용하는 구문.


-기본형식

for (대입문 ; 조건식 ; 증감식) {

//실행문

}



2. do~while문


-기본형식

do {

//실행문

} while(조건식)



//Sample09.html

//1부터 10까지 출력하는 반복문 테스트.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>


<script type="text/javascript">

function myFunc() {

var str = "";

for(var a=0; a<=10; a++) {

str += a + " ";

}

var result = document.getElementById("result")

result.innerHTML = str;

}

</script>


</head>

<body>

<div>

<h2>반복문 테스트</h2>

<form>

<input type="button" value="결과" onclick="myFunc()">  /* 이벤트 핸들러 */

</form>

<h3>출력 ----------------</h3>

<div id="result"></div>

</div>

</body>

</html>





1~100사이의 짝수만 출력


//Script10.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">

function myFunc() {

var str = "";

for(var a=2; a<=100; a+=2) {

str += a + "<br>";

}

var result = document.getElementById("result")

result.innerHTML = str;

}

</script>

</head>

<body>

<div>

<h2>1~100사이의 수에서 짝수만 출력</h2>

<form>

<input type="button" value="결과" onclick="myFunc()">  /* 이벤트 핸들러 */

</form>

<h3>출력 ----------------</h3>

<div id="result"></div>

</div>

</body>

</html>






반복문이용해서 1~100짝수 출력하고 마지막에 짝수들의 합 출력. 자바스크립트 이용.


2

4

6

...

100

----------------

합계: xxxx



//Script11.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">

function myFunc() {

var str = "";

var sum = 0;

for(var a=2; a<=100; a+=2) {

str += a + "<br>";

sum += a;

}

str += "------------<br>합계: " + sum 

var result = document.getElementById("result")

result.innerHTML = str;

}

</script>

</head>

<body>

<div>

<h2>1~100사이의 수에서 짝수만 출력</h2>

<form>

<input type="button" value="결과" onclick="myFunc()">  /* 이벤트 핸들러 */

</form>

<h3>출력 ----------------</h3>

<div id="result"></div>

</div>

</body>

</html>





문제) 1부터 100까지의 수중에서 4의 배수만 출력. 한줄에 4개씩 출력. while, 자바스크립트 이용.

실행 예)


 4  8 12 16

20 24 28 32

...



//Script12.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type = "text/javascript">

function myFunc() {

var str = "";

var a = 0;

do {

a++;

if ((a%4) == 0) {

str += a + " "; 

}

if ((a%16) == 0) {

str += "<br>";

}

}while(a<=100);

var result = document.getElementById("result")

result.innerHTML = str;

}

</script>

</head>

<body>

<div>

<h2>1~100사이의 수에서 4의 배수만 출력. 한줄에 4개씩 출력.</h2>

<form>

<input type="button" value="결과" onclick="myFunc()">  /* 이벤트 핸들러 */

</form>

<h3>출력 ----------------</h3>

<div id="result"></div>

</div>

</body>

</html>






문제) 1부터 100까지의 수중에서 4의 배수만 출력

한줄에 4개씩 출력. 줄 끝에 해당 줄 숫자들의 합을 출력

while문 이용. 자바Script 이용.

실행 예)


 4  8 12 16 -> 40

20 24 28 31 -> 104

...


//Script13.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type = "text/javascript">

function myFunc() {

var str = "";

var a = 0;

var sum = 0;

do {

a++;

if ((a%4) == 0) {

str += a + " ";

sum += a;

}

if ((a%16) == 0) {

str += " -> "+ sum +"<br>";

sum = 0;

}

}while(a<=100);

var result = document.getElementById("result")

result.innerHTML = str;

}

</script>

</head>

<body>

<div>

<h2>1~100사이의 수에서 4의 배수만 출력. 한줄에 4개씩 출력.</h2>

<form>

<input type="button" value="결과" onclick="myFunc()">  /* 이벤트 핸들러 */

</form>

<h3>출력 ----------------</h3>

<div id="result"></div>

</div>

</body>

</html>





자바스크립트 대화상자


1. alert(), confirm(), prompt() 함수를 이용.


2. alert()은 확인 버튼만 지원. 메시지 출력 전용.


3. confirm()은 확인, 취소 버튼 지원. 선택적 진행 가능.


4. prompt()는 외부 입력이 가능한 대화상자. 확인, 취소 버튼 지원.




//Script14.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>


<script type="text/javascript">

function myFunc() {

//alert("아이디 또는 패스워드가 틀렸습니다.");

/* var result = confirm("현재 선택된 자료를 삭제할래?");

if(result) {

//삭제 정상 진행

} */

var str = prompt("숫자 입력(양의 정수)?");

if (str != null) {

//result 변수 안에는 유효한 문자열이 들어있다.

var result = document.getElementById("result");

result.innerHTML = str;

}

}

</script>

</head>

<body>

<div>

<h2>자바스크립트 대화상자</h2>

<form>

<input type="button" value="alert() 호출" onclick="myFunc()">

<input type="button" value="confirm() 호출" onclick="myFunc()">

<input type="button" value="prompt() 호출" onclick="myFunc()">

</form>

<div id = "result"></div>

</div>

</body>

</html>






입력받은 숫자(양의 정수)를 화면에 출력하되, -1이 입력될때까지 계속 반복.

실행 예)

숫자 입력(양의 정수)?1   -> prompt 이용.

숫자 입력(양의 정수)?2

숫자 입력(양의 정수)?3

숫자 입력(양의 정수)?-1

1

1 2

1 2 3

...


//Script15.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">


function myFunc() {

var msg = "";

var temp = "";

do {

var str = prompt("숫자 입력(양의 정수)?");

if(str == null || str == -1) {

break;

}

temp += str + " ";

msg += temp + "<br>"; 

}while (true);

var result = document.getElementById("result");

result.innerHTML = msg;

}


</script>

</head>

<body>

<div>

<h2>반복 입력. prompt 사용.</h2>

<form>

<input type="button" value="입력" onclick="myFunc()">

</form>

<h3>출력 -----------</h3>>

<div id="result"></div>

</div>

</body>

</html>





입력받은 숫자(양의 정수)를 화면에 출력하되, -1이 입력될때까지 계속 반복.

실행 예)

숫자 입력(양의 정수)?1   -> prompt 이용.

숫자 입력(양의 정수)?2

숫자 입력(양의 정수)?3

숫자 입력(양의 정수)?-1

1 -> 1

1 2 -> 3

1 2 3 -> 6

...


//Script16.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">


function myFunc() {

var msg = "";

var temp = "";

var sum = 0;

do {

var str = prompt("숫자 입력(양의 정수)?");

if(str == null || str == -1) {

break;

}

temp += str + " ";

sum += parseInt(str);

msg += temp + " -> " + sum + "<br>"; 

}while (true);

var result = document.getElementById("result");

result.innerHTML = msg;

}


</script>

</head>

<body>

<div>

<h2>반복 입력. prompt 사용.</h2>

<form>

<input type="button" value="입력" onclick="myFunc()">

</form>

<h3>출력 -----------</h3>>

<div id="result"></div>

</div>

</body>

</html>






입력받은 숫자(양의 정수)를 화면에 출력하되, -1이 입력될때까지 계속 반복.

실행 예)

숫자 입력(양의 정수)?1   -> prompt 이용.

숫자 입력(양의 정수)?2

숫자 입력(양의 정수)?3

숫자 입력(양의 정수)?-1

1

1 2

1 2 3

...

------------------------------------------

현재까지 입력된 숫자들중에서 최대값: xxxx


//Script17.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">


function myFunc() {

var msg = "";

var temp = "";

var max = 0;

do {

var str = prompt("숫자 입력(양의 정수)?");

if(str == null || str == -1) {

break;

}

if (max < parseInt(str)){

max = parseInt(str);

}

temp += str + " ";

msg += temp + "<br>";

}while (true);

msg += "----------------------------------<br>현재까지 입력된 숫자들중에서 최대값: " + max;

var result = document.getElementById("result");

result.innerHTML = msg;

}


</script>

</head>

<body>

<div>

<h2>반복 입력. prompt 사용.</h2>

<form>

<input type="button" value="입력" onclick="myFunc()">

</form>

<h3>출력 -----------</h3>

<div id="result"></div>

</div>

</body>

</html>





이중 반복문


1. for문이나 while문 등을 겹쳐서 코딩.



for (대입문 1; 조건식 2, 12, 19; 증감식 11, 18) {


//(이 부분은 바깥쪽 for문의 영향 범위)

for (대입문 3, 13; 조건식 4, 7, 10, 14, 17; 증감식 6, 9, 16) {

//이 부분은 안쪽 for문의 영향 범위 5, 8, 15

}

//(이 부분은 바깥쪽 for문의 영향 범위)


}



//1~5 까지 5회 반복.

//Script18.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">


function myFunc() {

var str = "";

for (var a=1 ; a<=5 ; a++) {

for (var b=1; b<=5 ; b++) {

str += b + " ";

}

str += "<br>";

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>이중 반복문 테스트</h2>

<form><input type="button" value="결과" onclick="myFunc()"></form>

<h3>출력--------------</h3>

<div id="result"></div>

</div>

</body>

</html>






아래 출력 결과를 얻을 수 있는 이중 반복문 작성.

실행 예)

1 2 3 4 5 6 7 8 9 10 

2 3 4 5 6 7 8 9 10

3 4 5 6 7 8 9 10

4 5 6 7 8 9 10

5 6 7 8 9 10

6 7 8 9 10

7 8 9 10

8 9 10

9 10

10


//Script19.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">


function myFunc() {

var str = "";

for (var a=1 ; a<=10 ; a++) {

for (var b=a; b<=10 ; b++) {

str += b + " ";

}

str += "<br>";

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>이중 반복문 테스트2</h2>

<form><input type="button" value="결과" onclick="myFunc()"></form>

<h3>출력--------------</h3>

<div id="result"></div>

</div>

</body>

</html>






문제) 아래와 같은 결과가 나오도록 이중 for문 구성.


실행 예)

1 2 3 4 5 6 7 8 9 10 

1 2 3 4 5 6 7 8 9

1 2 3 4 5 6 7 8

1 2 3 4 5 6 7

1 2 3 4 5 6

1 2 3 4 5

1 2 3 4

1 2 3

1 2

1



//Script20.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">


function myFunc() {

var str = "";

for (var a=10 ; a>=1 ; a--) {

for (var b=1; b<=a ; b++) {

str += b + " ";

}

str += "<br>";

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>이중 반복문 테스트3</h2>

<form><input type="button" value="결과" onclick="myFunc()"></form>

<h3>출력--------------</h3>

<div id="result"></div>

</div>

</body>

</html>






문제) 구구단 출력. 반복문 이용. 입력된 데이터 검사 과정 추가. 자바 스크립트 이용.

실행 예)

원하는 단수(1~9)? [5  ] [결과]

5 * 1 = 5

5 * 2 = 5

...


5 * 9 = 45



//Script21.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<style type="text/css">

.style01 {

width:40px;

}

</style>


<script type="text/javascript">


function myFunc() {

var temp = document.getElementById("num");

var number = parseInt(temp.value);

var msg = document.getElementById("msg");

msg.style.display = "none";

if (temp.value.match(/[^1-9]/) || number > 9 ) {

msg.style.display = "inline";

temp.value = "";

temp.focus();

} else {

var str = "";

for (var a=1; a<=9 ; a++) {

str += number + " * " + a + " = " + (number*a) + "<br>";

}

var result = document.getElementById("result");

result.innerHTML = str;

}

}


</script>

</head>

<body>

<div>

<h2>구구단 출력</h2>

<h3>입력--------------</h3>

<form>

원하는 단수(1~9)? <input type="text" id="num" class="style01">

<input type="button" value="결과" onclick="myFunc()">

<span id="msg" style="color:red; display:none;"> 1~9 사이의 숫자만 입력 가능합니다.</span>

</form>

<div id="result"></div>

</div>

</body>

</html>






배열(Array)


1. 배열은 크기와 성격이 같은 일련의 원소들이 모여 공동의 집합 구조를 갖는 자료의 집합체.



2. 특징

- 하나의 이름(식별자)을 가지고 여러개의 저장 공간을 가진다.

- 자료형이 같은 자료만 저장할 수 있다.

- 사전에 공간의 크기를 지정해야 한다. -> 예외

- 참조형이다.

- 특정 저장 공간을 지칭하기 위해서 인덱스(0부터 시작되는 번호)를 이용한다.

- 배열의 배열을 이용해서 다차원 배열을 만들 수 있다.

- 자동 초기화 지원



3. 배열 사용 방법


var 변수 = new Array(); //배열 선언. 크기 지정 생략 가능.

변수[인덱스] = 값; //인덱스 사용

var 변수 = [값1, 값2, ...]; //배열선언과 동시에 초기값 지정



//배열에 초기값 지정. 값 중에 가장 큰 값 출력.

//Script22.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">

function myFunc() {

var array = [5, 3, 7, 6, 8, 1, 9, 0, 2, 4];

var max = array[0];

var str = "배열 초기값 : ";

for (var a=0; a<array.length; a++) {

str += array[a] + " ";

if (max < array[a]) {

max = array[a];

}

}

str += "<br>";

str += "최대값 : " + max;

var result = document.getElementById("result")

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>배열 테스트</h2>

<form>

<input type="button" value="결과" onclick="myFunc()">

</form>

<h3>출력 --------------</h3>

<div id="result"></div>

</div>

</body>

</html>






문제) 외부에서 여러개의 숫자를 입력 받고, 그 값중에서 가장 큰 값 출력. 배열이용. 자바스크립트 이용.

split() 메소드 이용.


실행 예)

배열의 초기값 [5 3 7 6 8 1 9 0 2 4    ] [결과]


배열 초기값 : 5 3 7 6 8 1 9 0 2 4 

최대값 : 9




//Script23.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">

function myFunc() {

var array = new Array();

var numbers = document.getElementById("numbers");

array = numbers.value.split(" ");

var max = parseInt(array[0]);

var str = "배열 초기값 : " + numbers.value;

for (var a=0; a<array.length; a++) {

if (max < parseInt(array[a])){

max = parseInt(array[a]);

}

}

str += "<br>최대값 : " + max;

var result = document.getElementById("result")

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>배열 테스트2</h2>

<form>

배열의 초기값 (공백으로 구분해서 숫자 여러개 입력)<br>

<input type="text" id="numbers">

<input type="button" value="결과" onclick="myFunc()">

</form>

<h3>출력 --------------</h3>

<div id="result"></div>

</div>

</body>

</html>






문제) 이름, 국어, 영어, 수학을 입력받아서 총점, 평균 출력. 배열이용. 자바스크립트 이용. split() 메소드 이용.


실행 예)

성적 입력(이름 국어 영어 수학) [홍길동 100 100 100     ] [결과]


입력받은 데이터 : 홍길동 100 100 100

총점: 300

평균: 100.0



//Script24.html







문제) 여러개의 숫자를 입력 받아서 정렬 출력. 자바스크립트 이용.


실행예)

배열의 초기값(공백으로 구분해서 숫자 여러개 입력)

[5 3 7 6 8 1 9 0 2 4    ] [결과]


배열 초기값 : 5 3 7 6 8 1 9 0 2 4 

정열 결과 : 0 1 2 3 4 5 6 7 8 9







문제) 여러명의 성적(이름, 국어, 영어, 수학)을 입력받아서 총점, 평균, 등수 출력. 배열 이용. split() 메소드 이용. 자바스크립트 이용.


실행 예)

성적 입력(이름 국어 영어 수학)?홍길동 100 100 100 -> promt 이용

성적 입력(이름 국어 영어 수학)?김길동 90 80 90

성적 입력(이름 국어 영어 수학)?-1


이름   국어 영어 수학 총점 평균   등수

홍길동 100  100  100  XXX  XXX.X  1

김길동  90   80   90  XXX  XXX.X  2



//Script25.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">

function myFunc() {

var msg = "<table><tr><td>이름</td><td>국어</td><td>영어</td><td>수학</td><td>총점</td><td>평균</td><td>등수</td></tr><br>";

var name = new Array();

var kor = new Array();

var eng =  new Array();

var mat =  new Array();

var tot =  new Array();

var avg =  new Array();

var ranks = new Array();


var a = 0;

do {

var array = new Array();

var str = prompt("성적 입력(이름 국어 영어 수학)?");

if (str == null || str == -1) {

break;

}

array = str.split(" ");

name[a] = array[0];

kor[a] = parseInt(array[1]);

eng[a] = parseInt(array[2]);

mat[a] = parseInt(array[3]);

tot[a] = parseInt(array[1]) + parseInt(array[2]) + parseInt(array[3]);

avg[a] = Math.round((tot[a] / 3)*10)/10;

a++;

} while(true);

for (var a=0; a<name.length ; a++) {

ranks[a] = 1;

}

for (var n=0; n<ranks.length; n++) {

for (var m=0; m<ranks.length; m++) {

if (n == m) {

continue;

}

if (tot[n] < tot[m]) {

ranks[n]++;

}

}

}

for (var a=0 ; a<name.length ; a++) {

msg += "<tr><td>" + name[a] + "</td><td>" + kor[a] + "</td><td>"  + eng[a] + "</td><td>"  + mat[a] + "</td><td>" + tot[a] + "</td><td>" + avg[a] + "</td><td>" + ranks[a] + "</td></tr>";

}

msg += "</table>";

var result = document.getElementById("result")

result.innerHTML = msg;

}


</script>

</head>

<body>

<div>

<h2>배열 테스트3</h2>

<form>

<input type="button" value="입력" onclick="myFunc()">

</form>

<h3>출력 --------------</h3>

<div id="result"></div>

</div>

</body>

</html>







배열의 배열(다차원 배열)


1. 1차원 배열 여러개를 조합시켜서 사용하는 배열.


2. 선언


var 변수 = new Array();

변수[0] = new Array();

변수[1] = new Array();

....



변수[인덱스1[인덱스2] = 값;


var 변수 = [[값1, 값2, ...], [값1, 값2,....], ....];


//Script27.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">

function myFunc() {

var arr = new Array();

arr[0] = new Array();

arr[1] = new Array();

var str = "";

arr[0][0] = 1;

arr[0][1] = 2;

arr[0][2] = 3;

arr[1][0] = 4;

arr[1][1] = 5;

arr[1][2] = 6;

for (var a=0; a<2; a++) {

for (var b=0; b<3; b++) {

str += arr[a][b] + " ";

}

str += "<br>";

}

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>배열의 배열 테스트</h2>

<form>

<input type="button" value="결과" onclick="myFunc()">

</form>

<h3>출력 --------------</h3>

<div id="result"></div>

</div>

</body>

</html>







//1~25까지의 수를 저장하는 배열의 배열 선언

실행 예)

 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




//Script28.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">


function myFunc() {

var arr = new Array();

arr[0] = new Array();

arr[1] = new Array();

arr[2] = new Array();

arr[3] = new Array();

arr[4] = new Array();

var str = "";

for (var a=0, c=1; a<5; a++) {

for (var b=0; b<5; b++) {

arr[a][b] = c++;

}

}

for (var a=0; a<arr.length; a++) {

for (var b=0; b<arr[a].length; b++) {

str += arr[a][b] + " ";

}

str += "<br>";

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>배열의 배열 테스트</h2>

<form>

<input type="button" value="결과" onclick="myFunc()">

</form>

<h3>출력 --------------</h3>

<div id="result"></div>

</div>

</body>

</html>





문제) 아래와 같은 형태의 숫자 출력이 되도록 배열의 배열 지정. 자바스크립트 이용.


실행 예)


 1  2  3  4  5 

 2  3  4  5  6 

 3  4  5  6  7 

 4  5  6  7  8 

 5  6  7  8  9 


//Script29.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">

function myFunc() {

var arr = new Array();

arr[0] = new Array();

arr[1] = new Array();

arr[2] = new Array();

arr[3] = new Array();

arr[4] = new Array();

var str = "";

for (var a=0; a<5; a++) {

for (var b=0, c=(a+1); b<5; b++, c++) {

arr[a][b] = c;

}

}

for (var a=0; a<5; a++) {

for (var b=0; b<5; b++) {

str += arr[a][b] + " ";

}

str += "<br>";

}

var result = document.getElementById("result");

result.innerHTML = str;

</script>

</head>

<body>

<div>

<h2>배열의 배열 테스트2</h2>

<form>

<input type="button" value="결과" onclick="myFunc()">

</form>

<h3>출력------------------</h3>

<div id ="result"></div>

</div>

</body>

</html>


WRITTEN BY
빨강꼬마

,

테이블 태그


1. <table>,<tbody>,<tr>,<td> 태그의 조합에 의해 표 형식을 만들 수 있다.


2. 형식

<table>

<tbody>

<tr>  --> 행 역할

<td>콘텐츠</td><td>콘텐츠</td>...  --> 열 역활

</tr>

<tr>

<td>콘텐츠</td><td>콘텐츠</td>...

</tr>

...

</tbody>

</table>


3. 제목 표시하는 경우는 <td> 대신에 <th>을 사용.


예를 들어서, 회원 명단을 테이블 태그로 표현하면


번호 이름    전화번호      이메일         

1    홍길동  010-111-1111  hong@naver.com 

2    김길동  010-222-2222  kim@naver.com  


//Sample08.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<style type="text/css">

table td, table th  /* 식별자, 식별자는 두 개의 식별자에 동시에 CSS 적용 */ 

{

padding: 5px;

border-right-style: solid; /* 경계선의 모양 지정 속성 */

border-bottom-style: solid; /* 경계선의 모양 지정 속성 */

border-width: 1px; /* 경계선의 굵기 지정 속성 */

border-color: #6980b8; /* 경계선의 색 지정 속성 */

}

</style>

</head>

<body>

<div>

<table cellspacing="4">

<tbody>

<tr>

<th>번호</th>

<th>이름</th>

<th>전화번호</th>

<th>이메일</th>

</tr>

<tr>

<td>1</td>

<td>홍길동</td>

<td>010-111-1111</td>

<td>hong@naver.com</td>

</tr>

<tr>

<td>2</td>

<td>김길동</td>

<td>010-222-2222</td>

<td>kim@naver.com</td>

</tr>

</tbody>

<!--

<tfoot><tr><td style="border:none;">표1. 회원 명단</td></tr> </tfoot>

-->

</table>

</div>

</body>

</html>





입력 폼(Form) 태그


1. <form>, <input>, <select>, <textarea> 태그의 조합으로 입력 인터페이스 구성.


2. <input> 에서 type 속성(text, password, radio, checkbox, file, hidden, submit, reset, button)으로 

여러가지 입력 폼 구성 가능.


3. <select> 태그는 하위 태그로서 <option> 태그를 갖는다.


4. <form> 태그는 <input>,<select>,<textarea>의 부모 태그 역할.


예를 들어, 이름, 전화번호 입력 양식 화면 구성시


<form>

이름 <input type="text">  --> 실행시 텍스트 입력 양식이 된다.

전화번호 <input type="text">

</form>



//Sample09.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>


<style type="text/css">


input.style01  /* 특정 태그의 스타일(style) 속성이 style01인 경우에만 속성 적용 */ 

{

}

input:FOCUS { /* 특정 태그에 포커스가 맞춰진 경우만 속성 적용 */

background-color: yellow;

}

}

</style>


</head>

<body>

<div>

<h1>회원가입</h1>

<p>회원가입 안내 문구</p>

<form>

<table>

<tbody>

<tr>

<td>이름</td>

<td><input type="text" class="style01"></td>

</tr>

<tr>

<td>전화번호</td>

<td><input type="text" class="style01"></td>

</tr>

<tr>

<td>성별</td>

<td><input type="radio" name="gender">남자<input type="radio" name="gender">여자</td>

</tr>

<tr>

<td>취미</td>

<td>

<input type="checkbox"> 공부 

<input type="checkbox"> 영화

<input type="checkbox"> 운동

<input type="checkbox"> 독서

</td>

</tr>

<tr>

<td>출신지역</td>

<td>

<select>

<option>서울</option>

<option>부산</option>

<option>인천</option>

<option>대구</option>

</select>

</td>

</tr>

<tr>

<td>자기소개</td>

<td>

<textarea style="width:300px; height:100px;"></textarea>

</td>

</tr>

<tr>

<td></td>

<td><input type="button" value="가입"></td>

</tr>

</tbody>

</table>

</form>

</div>

</body>

</html>








Javascript


1. 자바스크립트는 프로그램 언어의 한 종류. HTML의 태그를 객체로 삼아서 데이터 처리를 하는 프로그램 언어.


2. 변수, 연산자, 제어문, 함수, 배열, 객체 등의 표현이 모두 지원됨.


3. HTML, CSS, Javascript 가 혼용된 형태로 코딩을 해야 함.


4. 형식


<script type="text/javascript">

//자바스크립트 코드 작성

/* 범위 주석 */

</script>


5. 기본 규칙

- 대소문자 구분

- 함수 단위로 코딩

- 함수 영역 내에 있는 코드는 함수 호출시에만 실행됨

- 함수 영역 밖에 있는 코드는 HTML 문서가 브라우저에 로드될 때 실행됨

- 함수 호출은 HTML 에서 이벤트 핸들러(onclick, ...)를 이용함

- HTML 태그를 객체로 접근하기 위해서 document.getElementById("아이디명") 메소드 사용

- document는 내장객체로서 HTML 문서의 body 태그 영역을 지정함

- HTML 태그에서는 id 속성을 지정해서 객체 접근이 가능하도록 함

- 객체로 접근한 후에는 해당 객체가 가지고 있는 여러가지 속성을 자바스크립트에서 사용 가능

- 사용 가능한 속성은 해당 객체의 종류에 따라 다름

- 자바스크립트 내에서만 사용 가능한 여러가지 내장 객체가 지원됨






이벤트 핸들러 테스트


//Script01.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>


<script type="text/javascript">

//변수 선언->전역 변수(멤버 변수)

var a = 10;

//함수(메소드) 정의

function myFunc() {

//변수 선언->지역 변수

var b = 20;

var c = 0;

//연산

c = a + b;


//출력->자체 출력문을 사용하지 않고 HTML 객체를 통해서 결과 출력함.

var obj = document.getElementById("result");

obj.innerHTML = "<span style=\"font-size:24pt;\">결과: " + c +"</span>";

}


</script>


</head>

<body>

<div>

<h3>자바스크립트를 이용한 메시지 출력</h3>

<form>

<input type="button" value="함수호출"

onclick="myFunc()">

</form>

<div id="result">결과: </div>

</div>

</body>

</html>






이름, 국어, 영어, 수학을 입력 받아서 총점, 평균 출력


//Script02.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>


<style type="text/css">

.score { width:80px; }

</style>


<script type="text/javascript">


function myFunc() {

var nameObj = document.getElementById("name"); 

var korObj = document.getElementById("kor");

var engObj = document.getElementById("eng");

var matObj = document.getElementById("mat");

var tot = parseInt(korObj.value) + parseInt(engObj.value) + parseInt(matObj.value);

var ave = Math.round((tot / 3)*10)/10;

var result = document.getElementById("result");

result.innerHTML = "<span style=\"font-size:14pt;\">이름:"+nameObj.value+", 국어:"+korObj.value+", 영어:"+engObj.value+", 수학:"+matObj.value+", 총점:"+tot+", 평균:"+ave+"</span>";

}

</script>


</head>

<body>

<div>

<h2>총점, 평균 계산</h2>

<h3>입력------</h3>

<form>

이름 <input type="text" id="name" value="">

국어 <input type="text" id="kor" class="score">

영어 <input type="text" id="eng" class="score">

수학 <input type="text" id="mat" class="score">

<input type="button" value="결과"

onclick="myFunc()">

</form>


<h3>출력------</h3>

<div id="result">

<!-- 

<span style="font-size:14pt;">이름:홍길동, 국어:100, 영어:100, 수학:100, 총점:300, 평균:100.0</span>

-->

</div>

</div>

</body>

</html>






문제) 거스름돈을 환폐단위로 구분해서 출력. 자바스크립트 이용.

실행 예)

금액(10~1000) [ 990  ]  [결과]

총액 : 990원

오백원 1개, 백원 4개, 오십원 1개, 십원 4개


//Script03.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>


<script type="text/javascript">

function myFunc() {

var moneyObj = document.getElementById("money");


var money = parseInt(moneyObj.value);

var m500, m100, m50, m10;

m500 = parseInt(money / 500); //몫 연산

money = money % 500; //나머지 연산

m100 = parseInt(money / 100);

money = money % 100;

m50 = parseInt(money / 50);

money = money % 50;

m10 = parseInt(money / 10);

var result = document.getElementById("result");

result.innerHTML = "총액 : "+moneyObj.value+"원<br>오백원 "+m500+"개, 백원 "+m100+"개, 오십원 "+m50+"개, 십원 "+m10+"개";

}

</script>


</head>

<body>

<div>

<h2>거스름돈 계산</h2>

<h3>입력 ---------- </h3>

<form>

금액(10~1000)

<input type="text" id="money"> 

<input type="button" value="결과" 

onclick="myFunc()">

</form>

<h3>출력 ---------- </h3>

<div id="result">

<!-- 총액 : 990원<br>

오백원 1개, 백원 4개, 오십원 1개, 십원 4개 -->

</div>

</div>

</body>

</html>






if문


1. 제어문 일종. 조건식 검사를 통해서 조건에 결과에 따라서 실행문 실행을 선택.


2. 형식

if (조건) {

}


if (조건) {

} else {

}


if (조건) {

} else if (조건) {

} else {

}


3. 조건식에 사용되는 관계연산자, 논리연산자는 자바와 동일.


4. 자바스크립트에서는 문자열 비교시 == 연산자 사용함(자바에서는 equals() 메소드 사용).






문제) 세 개의 숫자 중에서 가장 큰 숫자 구하기. 자바스크립트 이용.

실행 예)

숫자1 [XX] 숫자2 [YY] 숫자3 [ZZ]  [결과]


입력 받은 숫자 : XX, YY, ZZ

가장 큰 숫자 :  ZZ


//Script04.html






문제) 비밀번호 입력시 확인 결과 출력. 자바스크립트 이용.

<input type="password"> 태그 이용.

실행 예)


비밀번호(숫자만 입력 가능) [**** ]  [결과]


결과: 암호가 틀렸습니다.


//Script05.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>


<script type="text/javascript">


function myFunc() {

var pw = document.getElementById("pw");

var msg = document.getElementById("msg");

msg.style.display = "none";

//정규식(Regular Expression)

//숫자로만 구성되었는지 검사하는 과정

if (pw.value.match(/[^0-9]/)) {

msg.style.display = "inline";

pw.value = "";

pw.focus();

}

var str = "";

if (pw.value == "1234") {

str = "암호가 맞습니다.";

} else {

str = "암호가 틀렸습니다.";

}

var result = document.getElementById("result");

result.innerHTML = str;

}

</script>


</head>

<body>

<div>

<h2>비밀번호 확인</h2>

<h3>입력 ------------------</h3>

<form>

비밀번호(숫자만 입력 가능)

<input type="password" id="pw">

<input type="button" value="결과"

onclick="myFunc()">

<span id="msg" 

style="color:red; display:none;">

숫자만 입력 가능합니다.</span>

</form>

<h3>출력 ------------------</h3>

<div id="result"></div>

</div>

</body>

</html>






문제) 임의의 수를 입력 받아서 3의 배수, 4의 배수로 구분해서 출력. 자바스크립트 이용.

실행 예)

임의의 정수(3 또는 4의 배수)  [3  ] [결과]


입력받은 숫자 : 3

구분 : 3의 배수


//Sample06.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>


<script type="text/javascript">


function myFunc() {

var num = document.getElementById("num");

var data = parseInt(num.value);

var msg = document.getElementById("msg");

msg.style.display = "none";

//정규식(Regular Expression)

//숫자로만 구성되었는지 검사하는 과정

if (num.value.match(/[^0-9]/)) {

msg.style.display = "inline";

num.value = "";

num.focus();

}

var str = "";

str += "입력받은 숫자 : " + num.value + "<br>";

if ((data % (3*4)) == 0) {

str += "구분 : 3 또는 4의 배수";

} else if ((data % 3) == 0) {

str += "구분 : 3의 배수";

} else if ((data % 4) == 0) {

str += "구분 : 4의 배수";

}


var result = document.getElementById("result");

result.innerHTML = str;

}

</script>


</head>

<body>

<div>

<h2>배수 확인</h2>

<h3>입력 ------------------</h3>

<form>

임의의 정수(3 또는 4의 배수)

<input type="text" id="num">

<input type="button" value="결과"

onclick="myFunc()">

<span id="msg" 

style="color:red; display:none;">

숫자만 입력 가능합니다.</span>

</form>

<h3>출력 ------------------</h3>

<div id="result"></div>

</div>

</body>

</html>





문제) 임의의 점수를 입력받아서 판정을 출력. 자바스크립트 이용.

입력된 데이터가 숫자인지 검사하는 과정, 0~100 사이의 숫자인지 검사하는 과정 추가.

판정 기준은 

90~100 -> A

80~89 -> B

70~79 -> C

60~69 -> D

0~59 -> F


실행 예)

점수 입력(0~100)  [90  ]  [결과]

입력된 점수 : 90

판정 결과 : A


//Sample07.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>


<script type="text/javascript">


function myFunc() {

var num = document.getElementById("num");

var data = parseInt(num.value);

var msg = document.getElementById("msg");

msg.style.display = "none";

//정규식(Regular Expression)

//숫자로만 구성되었는지 검사하는 과정

if (num.value.match(/[^0-9]/) || data>100) {

msg.style.display = "inline";

num.value = "";

num.focus();

} else {

var str = "";

str += "입력된 점수 : " + num.value + "<br>";

str += "판정 결과 : ";

if (data < 60) {

str += "F";

} else if (data < 70) {

str += "D";

} else if (data < 80) {

str += "C";

} else if (data < 90) {

str += "B";

} else {

str += "A";

}

var result = document.getElementById("result");

result.innerHTML = str;

}

}

</script>


</head>

<body>

<div>

<h2>판정 확인</h2>

<h3>입력 ------------------</h3>

<form>

점수 입력(0~100)

<input type="text" id="num">

<input type="button" value="결과"

onclick="myFunc()">

<span id="msg" 

style="color:red; display:none;">

0~100 사이의 숫자만 입력 가능합니다.</span>

</form>

<h3>출력 ------------------</h3>

<div id="result"></div>

</div>

</body>

</html>







문제) 국어, 영어, 수학 점수를 입력 받아서 판정 결과 출력. 자바스크립트 이용.

입력된 데이터가 숫자인지 검사하는 과정, 0~100 사이의 숫자인지 검사하는 과정 추가.


판정 기준은

합격 -> 과목별로 40점 이상이면서, 평균이 60점 이상

과락 -> 과목중에 40점 미만이 있고, 평균은 60점 이상

불합격 -> 평균이 60점 미만


평균이 60점 이상 -> 합격

평균이 60점 미만 -> 불합격


합격 또는 과락 구분은 -> 국어, 영어, 수학 점수가 모두 40점 이상인 확인.


실행 예)

국어(0~100) [XX ]  영어(0~100) [YY ]  수학(0~100) [ZZ  ]  [결과]


입력받은 점수 : 국어 XX, 영어 YY, 수학 ZZ

판정 결과 : 합격



//Sample08.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>


<style type="text/css">

.style01 {

width:80px;

}

</style>


<script type="text/javascript">


function myFunc() {

var kor = document.getElementById("kor");

var korVal = parseInt(kor.value);

var eng = document.getElementById("eng");

var engVal = parseInt(eng.value);

var mat = document.getElementById("mat");

var matVal = parseInt(mat.value);

var msg = document.getElementById("msg");

msg.style.display = "none";

//정규식(Regular Expression)

//숫자로만 구성되었는지 검사하는 과정

if ((kor.value.match(/[^0-9]/) || korVal>100)

|| ((eng.value.match(/[^0-9]/) || engVal>100))

|| ((mat.value.match(/[^0-9]/) || matVal>100))) {

msg.style.display = "inline";

kor.value = "";

eng.value = "";

mat.value = "";

kor.focus();

} else {

var str = "";

str += "입력된 점수 : 국어 "+kor.value+", 영어 "+eng.value+", 수학 "+mat.value+"<br>";

str += "판정 결과 : ";

var ave = (korVal + engVal + matVal) / 3;

if (ave>=60 && (korVal>=40 && engVal>=40 && matVal>=40)) {

str += "합격";

} else if (ave>=60) {

str += "과락";

} else {

str += "불합격";

}

var result = document.getElementById("result");

result.innerHTML = str;

}

}

</script>




</head>

<body>

<div>

<h2>성적 확인</h2>

<h3>입력 ------------------</h3>

<form>

국어(0~100)<input type="text" id="kor" class="style01">

영어(0~100)<input type="text" id="eng" class="style01">

수학(0~100)<input type="text" id="mat" class="style01">

<input type="button" value="결과"

onclick="myFunc()"><br>

<span id="msg" 

style="color:red; display:none;">

0~100 사이의 숫자만 입력 가능합니다.</span>

</form>

<h3>출력 ------------------</h3>

<div id="result"></div>

</div>

</body>

</html>


WRITTEN BY
빨강꼬마

,

웹 어플리케이션


1. 웹 어플리케이션은 웹 브라우저(웹 클라이언트)의 요청에 대하여 서버에서 처리해서 결과를 보여주는 프로그램


웹 클라이언트              -       웹 서버




브라우저                           톰캣

웹주소 요청                        웹서버 응답

http://www.naver.com        네이버 컴퓨터 응답

사용자                               개발자



HTML, CSS, Javascript

브라우저에서 실행가능              원본은 웹서버에 저장된 상태


                                             JSP&Servlet

결과 페이지만 확인                   웹서버에서 실행 가능




웹 어플리케이션 실행 순서


1단계. 웹 클라이언트(웹 브라우저)에서 주소 요청 - 사용자

2단계. 웹서버(톰캣) 응답 준비 - 서버

3단계. 응답은 요청에 따라서 다르다. -서버

HTML, CSS, Javascript 요청한 경우 원본을 그대로 클라이언트에게 전달.

JSP&Servlet 요청한 경우 JVM을 이용해서 실행 및 결과(HTML Document)를 내고, HTML Document를 클라이언트에게 전달.

4단계. 전달받은 HTML Document 를 브라우저에서 실행 및 결과(웹 페이지) 출력. - 사용자





웹 어플리케이션 개발 언어


1. 웹 클라이언트 언어 - HTML, CSS, Javascript, XML, Ajax, jQuery

2. 웹 서버 언어 - JSP&Servlet(Java), ASP, PHP, ASP.NET(C#)





웹 서버 구축


1. http://www.apache.org에서 아파치톰캣 프로그램 다운로드.

- apache-tomcat-6.0.36.zip

2. 압축 해제

3. 이클립스에서 프로젝트 생성시 Dynamic Web Project 선택.

4. 최초 웹 프로젝트 생성시에서는 런타임 지정 필요. -> 아파치 톰캣 지정

5. Servers 탭에서 아파치 톰캣 등록

6. 웹프로젝트를 톰캣 서버에 등록.

7. 테스트 페이지 작성 및 실행.

-> 이클립스에서 실행시 외부 브라우저 선택 필요.

-> 방화벽 차단 해제 필요

-> 이클립에서 톰캣 실행시 서버 포트(8080 -> 8090) 변경 필요. (오라클서비스와 충돌 방지)

-> 브라우저가 익스플로어인 경우 인트라넷 설정 필요.


실행시 브라우저에 주소를 아래와 같이 입력할 것.

http://localhost:8090/HTML20121106/Sample01.html

-> localhost:8090 -> ip주소:포트번호/이하주소 입력시 다른 컴퓨터에 접속가능.





HTML(HyperText Markup Language)


<태그>

<태그 />

<시작태그>콘텐츠</끝태그>


<html>...</html>

<head>...</head>

<body>...</body>


기본 HTML 페이지 형식

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title></title>

</head>

<body>


</body>

</html>


3. XHTML 1.0, HTML 4.01 버전이 존재. HTML5(웹표준)는 가장 최근 버전.


4. 태그의 종류

- 인라인 요소: 콘텐츠가 라인단위로 표현됨. <span>, <a>, <img>, ....

- 블럭 요소: 콘텐츠가 블럭단위로 표현됨. <div>, <p>, <table>, ....


5. 규칙

- <body> 태그에서 제일 먼저 만나는 태그는 블럭 요소여야 함.


- 태그는 중첩해서 사용할 수 있으나, 중첩 표시가 정확해야 한다.

올바른 중첩형태

<부모태그>

<자식태그> 컨텐츠 </자식태그>

</부모태그>


틀린 중첩형태

<부모태그>

<자식태그> 컨텐츠 </부모태그>

</자식태그>


- 블럭요소 안에는 블럭요소가 올수 있지만, 인라인 요소 안에는 블럭요소가 올수 없다.

올바른 형태

<div>  <div>컨텐츠</div>  </div>


틀린 형태

<span>  <div>컨텐츠</div>  </span>


-일부 태그는 자식 태그를 한정적으로 허용함. 예를 들어 <ol>태그는 자식태그로 <li>만 허용.

<ol>

<li>컨텐츠1</li>

<li>컨텐츠2</li>

</ol>





웹표준 검사 (ACID)


1. 브라우저가 웹 콘텐츠를 얼마나 정확하게 표현할 수 있는지 검사해주는 페이지. 

-> 검사 항목은 HTML, CSS, Javascript에 대한 종합 검사

-> 페이지가 정상적으로 보이고, 점수가 높을수록 좋은 상태.

-> 검사 대상 브라우저에서 아래 사이트 연결

http://acid2.acidtests.org

http://acid3.acidtests.org


2. 크롬 브라우저 권장.





텍스트 표현 태그


1. 내용 지정

<h> : 제목 지정. h1 ~ h6. 블럭요소

<p> : 문단 지정. 블럭요소


2. 모양 지정 - CSS (Cascade Style Sheet)을 이용

 - 태그별로 style 속성을 추가한 후 CSS 속성 지정하는 방법과 <style> 태그를 이용해서 통합 지정하는 방법이 있다.

 - body가 아닌 head 영역에 작성


<style>

식별자 {속성이름:값;.....}

</style>


3. 엔티티 - 특수문자 표기


< : &lt;

> : &gt;

공백 : &nbsp;





이미지 표현 태그


1. <img> 태그 이용. 인라인 요소.

<img src = "그림주소" alt="대체문자">


그림주소가 로컬인 경우 그림이름만 쓰면 되지만, 원격인 경우는 웹주소형태로 표기






텍스트 이미지 표현 샘플.


//Sample05.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>


<style type="text/css">

h1 /* HTML Document에서 모든 h1 태그에 대해서 CSS 속성 적용 */

{

font-size:18pt; /* 글자 크기 지정 속성 */

}

h2 

{

font-size:10pt;

color: grey;  /* 글자색 지정 속성 */

font-weight: normal; /* 글자 굵기 지정 속성 */

}

h3 

{

font-size:12pt;

font-weight: normal; /* 글자 굵기 지정 속성 */

}

p  /* HTML Document에서 모든 p 태그에 대해서 CSS 속성 적용 */ 

{

line-height: 180%; /* 줄간격 지정 속성 */

}

</style>


</head>

<body>

<div>


<h1>애플, 특허전쟁서 구글에 한 방 먹었다</h1>

<h2><img src="http://imgnews.naver.net/image/news/2009/press/top_031.gif" alt="">| 기사입력 2012-11-06 10:03 | 최종수정 2012-11-06 10:24</h2>


<h3>&lt;아이뉴스24&gt;</h3>


<p>[김익현기자] 3G 표준특허권을 둘러싼 구글과의 대리전에서 애플이 패배했다.</p> 


<p>미국 위스콘신주 매디슨 지역법원은 5일(현지 시간) 표준 특허권을 둘러싼 애플과 모토로라 모빌리티간의 소송에서 애플의 요구를 기각했다고 주요 외신들이 보도했다.</p> 


<p>이번 소송은 5일 오후 1시(미국 중부 시간 기준) 열릴 예정이었다. 하지만 담당 판사가 소송 시작 직전에 기각하면서 사실상 애플이 패소한 셈이 됐다.</p> 


<p>애플로선 "아이폰 한 대당 1달러 이상 줄 수 없다"는 과한 요구를 한 것이 결정적인 패인으로 꼽히고 있다.</p> 


<p><img src="http://imgnews.naver.net/image/031/2012/11/06/1346370139376_1_181848_59_20121106102402.jpg" alt=""></p>


<h4>◆애플 "아이폰 한 대당 1달러 이하" 요구가 결정타</h4> 


<p>이번 소송은 모토로라가 구글에 인수되기 전인 지난 해 5월 제기한 것. 모토로라는 소송 제기 3개월 뒤인 지난 해 8월 구글에 인수됐다.</p> 


<p>지리한 법정 공방을 해 오던 모토로라와 애플은 지난 주부터 막판 힘겨루기를 벌였다. 모토로라가 아이폰 가격의 2.25% 가량의 로열티를 요구한 반면 애플은 1달러 이상은 줄 수 없다고 맞선 것.</p>


<p>처음엔 애플 쪽에 다소 유리한 방향으로 진행됐다. 매디슨 지역법원이 프랜드 로열티 기준을 정한 뒤 양측이 협상하도록 하는 방안을 고려한 것.</p>


<p>이에 대해 모토로라가 지난 달 30일 법정에서 프랜드 로열티 기준을 정하는 것은 합당하지 않다고 맞섰다.</p>


<p>이런 상황에서 애플이 "아이폰 한 대당 1달러 이상은 줄 수 없다"고 나오면서 분위기가 확 달라지기 시작했다. 이번 사건을 담당하고 있는 브바라 크랩 판사가 애플의 주장에 대해 상당히 부정적으로 받아들인 때문이다.</p>


<p>특허 전문가인 플로리언 뮐러에 따르면 크랩 판사는 그 때부터 프랜드 관련 재판을 하는 게 무의미하다는 쪽으로 입장 선회하기 시작했다.</p> 


<p>구글 측은 "모토로라는 그 동안 표준 특허에 대해 합당한 조건으로 라이선싱해 왔다"면서 "(애플의) 이번 소송을 편견으로 가득차 있다면서 기각한 데 대해 매우 기쁘게 생각한다"고 밝혔다.</p> 


<h4>◆FTC 반독점 조사 등 변수 많아</h4> 


<p>물론 이번 결정으로 모토로라와 애플 간의 표준 특허 공방이 완전히 마무리된 것은 아니다. 애플은 매디슨 지역법원 결정에 대해 항소할 수도 있다. 그럴 경우 항소법원에서 또 다시 공방을 벌일 가능성이 많다.</p>


<p>미국 연방무역위원회(FTC)도 이번 공방의 또 다른 변수다. FTC 측이 구글의 표준 특허 관행에 대해 조사를 진행하고 있기 때문이다. 지난 주 FTC 한 위원은 표준 특허 남용을 이유로 구글을 제재하는 방안을 검토하고 있다고 밝히기도 했다.</p>


<p>그럼에도 불구하고 애플 입장에선 매디슨 법원에서 기각당한 것이 적잖은 타격이 될 전망이다. 표준 특허권의 가치를 지나치게 무시함으로써 담당 판사로부터 "편견으로 가득 차 있다"는 평가를 받았기 때문이다.</p>


<p>특허 전문가인 플로리언 뮐러 역시 "애플이 이번 재판을 통해 필수표준 특허 라이선싱을 했어야 한다"면서 "애플이 기회를 놓쳤다"고 평가했다.</p> 


<h4>/김익현기자 sini@inews24.com</h4>


</div>  

</body>

</html>





목록 표현 샘플


http://www.google.co.kr/intl/ko/policies/privacy/principles/

->구글의 개인 정보 보호 원칙 페이지 작성



1.

<ol> - 순서 있는 목록 표현시 사용.

<ul> - 순서 없는 목록 표현시 사용.

<li> - <ol>, <ul>의 자식 태그로써 항목 표현시 사용.



//Sample06.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<style type = "text/css">

body

{

color: #444444;   /* RGB 컬러 #000000 ~ #FFFFFF */

font-size:10pt;

line-height: 150%

}

.title01 /* title01 클래스명이 적용된 모든 태그에 css속성 적용 */

{

font-weight: bold;

}

li

{

margin-top: 40px;     /* 블럭 요소에서 바깥쪽 여백 지정 속성 */

padding: 2px;  /* 블럭 요소에서 안쪽 여백 지정 속성 */

}

</style>

</head>

<body>

<div>


<h1>개인정보 보호원칙</h1>


<p>Google은 종종 기존 기술의 한계를 뛰어넘는 아이디어와 제품을 추구합니다. Google은 책임감 있게 행동하는

기업으로서 혁신과 Google 사용자에 대한 적절한 수준의 개인정보 보호 및 보안이 균형을 이룰 수 있도록 노력합니다.

Google의 개인정보 보호원칙은 회사의 각 단계에서 결정을 내릴 때 올바른 기준을 제시하므로, 전 세계의 정보를 체계화하는

임무를 이행하는 동시에 Google 사용자를 보호하고 경쟁력 강화에 도움을 줄 수 있습니다.</p>


<ol>

<li>

<p class = "title01">정보를 활용하여 사용자에게 유용한 제품과 서비스를 제공합니다.</p>

<p>‘최상의 사용자 경험 제공’은 <a href="http://www.google.co.kr/intl/ko/about/company/tenthings.html">Google 경영철학</a>의 첫 번째 신조입니다. 사용자가 Google과 정보를

공유하면 Google은 이 정보를 활용하여 사용자에게 유용한 서비스와 제품을 구축할 수 있습니다. Google은

사용자에게 초점을 맞추면 혁신을 이끌고 온라인 사용자의 충성도를 확보하는 제품 및 개인정보 보호 강화 기능이 모두 발전할

것으로 믿고 있습니다.</p>

<p>Google은 사용자가 검색을 수행할 때 범하는 오타나 맞춤법 오류를 통해 정보를 습득하여 사용자에게 보다

빠르고 정확한 검색결과를 제공하는데 활용합니다. 따라서 사용자가 [우채국]이라고 입력하는 경우 [우체국]을 입력하려고 한

것으로 추측할 수 있습니다.</p>

</li>

<li>

<p class = "title01">강력한 개인정보 보호 기준과 관행을 반영하는 제품을 개발합니다.</p>

<p>기술의 최첨단을 추구하는 Google은 사용자 경험의 질을 떨어뜨리지 않으면서 사용자가 간편하게 개인정보를

관리하도록 해주는 도구를 개발하기 위해 노력하고 있습니다. Google은 개인정보 보호법을 준수하며 또한 내부적으로

그리고 규제당국 및 업계 파트너와 협력하여 강력한 개인정보 보호 기준을 개발하고 구현합니다.</p>

<p>Google에서는 서로 다른 사용자와 서로 다른 정보를 쉽게 공유할 수 있도록 서클을 염두에 두고

Google+를 설계했습니다. 따라서 사용자는 현실 세계에서와 마찬가지로 친구들을 위한 서클, 가족을 위한 서클, 그리고

직장 상사만 따로 분리시켜 놓은 서클을 만들 수 있습니다.</p>

</li>

<li>

<p class = "title01">개인정보 수집을 투명하게 관리합니다.</p>

<p>Google은 Google 서비스를 맞춤설정하는 데 사용되는 정보를 사용자에게 보여드리기 위해 노력합니다.

필요한 경우 Google이 보유하고 있는 개별 사용자 정보, 서비스 제공을 위해 정보를 활용하는 방식을 투명하게 공개하는

것을 목표로 삼고 있습니다.</p>

<p>Google 대시보드를 사용하면 ‘Google이 나에 대해 무엇을 알고 있나요?’라는 질문에 대한 대답을 찾을

수 있습니다. Google 대시보드에서는 최근 Blogger 게시물 또는 업로드한 사진 등 Google 계정에 저장된 내

정보를 볼 수 있으며 여러 제품에 대한 개인정보 보호 설정을 한 곳에서 변경할 수 있습니다.</p>

</li>

<li>

<p class = "title01">개인정보 보호와 관련하여 사용자의 의사를 표시할 수 있도록 선택권을 드립니다.</p>

<p>사용자는 각각 개인정보 보호와 관련된 관심사와 요구가 다릅니다. 모든 Google 사용자에게 최상의 서비스를

제공하기 위해 Google은 개인정보 사용에 대해 사용자의 의사를 표시할 수 있도록 의미 있고 세분화된 선택권을

제공하고자 합니다. Google은 개인정보를 독점해서는 안 된다고 생각합니다. 사용자가 다른 서비스로 개인정보를 이전할

수 있는 제품을 만듭니다. Google은 사용자의 개인정보를 판매하지 않습니다.</p>

<p>사용자는 Google의 개인정보 보호 도구를 사용하여 자신의 컴퓨터와 Google 사이의 검색 트래픽을

암호화하고, 비공개로 인터넷을 탐색하고, 검색 기록을 삭제하고, Google의 데이터 백업 도구를 사용해 자신의 데이터를

Google 제품 밖으로 쉽게 옮길 수 있으며 이 외에도 다양한 작업을 수행할 수 있습니다.</p>

</li>

<li>

<p class = "title01">보유한 정보를 책임감 있게 관리합니다.</p>

<p>Google은 사용자가 Google에 위임한 데이터 보호에 대한 책임을 잘 알고 있습니다. Google은 보안

문제를 철저하게 관리하며 더욱 안전한 인터넷을 만들 수 있도록 광범위한 사용자와 개발자 및 외부 보안 전문가 커뮤니티와

협력합니다.</p>

<p>Google은 처음부터 보안 및 복원력을 염두에 두고 Google 제품을 설계합니다. Google의 자동화된

스캐너가 매일 수백만 명의 사용자를 악성코드, 피싱, 사기 및 스팸으로부터 보호하기 위해 데이터를 사용합니다.</p>

</li>

</ol>

</div>

</body>

</html>







하이퍼링크 태그


1. 텍스트나 이미를 마우스 클릭시 다른 웹페이지로 이동시켜주는 기능. 인라인 요소

2. <a href = "다른 웹페이지 주소">컨텐츠</a>



//Sample07.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<style type="text/css">

a

{

text-decoration: none; /* 글자 장식 속성 */

}

a:hover /* 특정 객체 위에 마우스커서가 올려진 상태인 경우 */

{

text-decoration: underline; /* 글자 장식 속성 */

}

#title01    /* 아이디 속성이 지정된 객체*/

{

font-size:24pt;

color:grey;

margin: 10px;

margin-left: 20px;

}

#title02

{

padding: 14px;

margin-top: 10px;

margin-bottom: 10px;

background-color: #416bb5;

color:white;

font-weight: bold;

}

#title02 a /* 부모 식별자 안에 있는 하위 식별자만 영향받는 경우 */

{

color:white;

font-weight:normal;

}

</style>

</head>

<body>

<div>

<div>

<img src="http://www.google.com/images/logos/google_logo_41.png" alt="">

<span id="title01">정책 및 원칙</span>

</div>

<div id="title02">

<a href="http://www.google.co.kr/intl/ko/policies/">개요</a>

개인정보보호

<a href="http://www.google.co.kr/intl/ko/policies/terms/">서비스 약관</a>

</div>

<div>

<a href="http://www.google.co.kr/intl/ko/policies/privacy/">개인정보취급방침</a>

<a href="http://www.google.co.kr/intl/ko/policies/privacy/ads/">광고</a>

원칙

<a href="http://www.google.co.kr/intl/ko/policies/privacy/tools/">도구</a>

<a href="http://www.google.co.kr/intl/ko/policies/privacy/faq/">FAQ</a>

</div>


</div>

</body>

</html>


WRITTEN BY
빨강꼬마

,