console.log("Begin 12-2");


var HTTPCtrl = 

{

getHTTP: function()

{

var xmlhttp= null;

if(window.XMLHttpRequest)

{

xmlhttp= new XMLHttpRequest();

}

else

{

xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");

}

return xmlhttp;

}

};


var request = HTTPCtrl.getHTTP();

request.open('get', '12-2_getResult.jsp', true);

request.send();


request.onreadystatechange = function()

{

var divElem= document.getElementById('loadingMessageContainer');

if(request.readyState === 4)

{

var msg= request.responseText;

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

divElem.innerHTML= "서버로부터 받은 메세지<br/>" + msg;

}

else

{

divElem.style.display= '';

}

};


console.log("End 12-2");


12-2_getResult.js


반응형

'Programming > JavaScript' 카테고리의 다른 글

[Javascript] 12-3_XMLHttpRequestStatus.js  (0) 2016.12.09
[JavaScript] 12-2_getResult.jsp  (0) 2016.12.09
[JavaScript] 12-1_XMLHttpRequestExam.jsp  (0) 2016.12.09
[JavaScript] 12-1_XMLHttpRequestExam.js  (0) 2016.12.09
[JavaScript] 12-0_XMLHttpRequest.html  (0) 2016.12.09

<%@ page language = "java" contentType = "text/html; charset = UTF-8" pageEncoding = "UTF-8"%>

<% System.out.println("Welcome JavaScript");%>


12-1_XMLHttpRequestExam.jsp


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 12-2_getResult.jsp  (0) 2016.12.09
[javaScript] 12-2_getResult.js  (0) 2016.12.09
[JavaScript] 12-1_XMLHttpRequestExam.js  (0) 2016.12.09
[JavaScript] 12-0_XMLHttpRequest.html  (0) 2016.12.09
[JavaScript] 11-3_KeyboardEvent.js  (0) 2016.12.08



var HTTPCtrl = 

{

getHTTP: function()

{

var xmlhttp = null;

if(window.XMLHttpRequest)

{

xmlhttp = new XMLHttpRequest();

}

else 

{

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

return xmlhttp;

}

};


var client = HTTPCtrl.getHTTP();

client.open('get', '12-1_XMLHttpRequestExam.jsp', true);

client.send()


12-1_XMLHttpRequestExam.jsp


반응형

'Programming > JavaScript' 카테고리의 다른 글

[javaScript] 12-2_getResult.js  (0) 2016.12.09
[JavaScript] 12-1_XMLHttpRequestExam.jsp  (0) 2016.12.09
[JavaScript] 12-0_XMLHttpRequest.html  (0) 2016.12.09
[JavaScript] 11-3_KeyboardEvent.js  (0) 2016.12.08
[JavaScript] 11-2_MouseEvent.js  (0) 2016.12.08

<!DOCTYPE html>

<html>

<head>

<meta charset = "UTF-8">

<style sypt="text/css">

#loadingMessageContainer

{

width: 300px;

height: 100px;

text-align: center;

background-color: #DDD;

}

</style>

</head>

<body>

<div id = "12-1_XMLHttpRequestExam">

<h3>12-1_XMLHttpRequestExam</h3>

<p>Toncat 콘솔창을 확인하세요.</p>

<script type = "text/javascript" src = "12-1_XMLHttpRequestExam.js"></script>

</div>


<div id ="12-2_getResult">

<h3>12-2_getResult</h3>

<p>잠시만 기다리세요.</p>

<script type="text/javascript" src = "12-2_getResult.js"></script>

<div id = "loadingMessageContainer">Now loading...</div>

</div>

<div id = "12-3_XMLHttpRequestStatus">

<h3>12-3_XMLHttpRequestStatus</h3>

<script type = "text/javascript" src = "12-3_XMLHttpRequestStatus.js"></script>

<script type = "text/javascript">

HTTP.getText('12-2_getResult.jsp', 

function(result)

{

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

content.innerHTML = "서버로부터 받은 메세지<br/>" + result;

});

</script>

<p>잠시만 기다리세요.</p>

<div id = "resultContainer" style ="border: 1px solid black; width: 300px; height: 100px">Now loading...</div>

</div>


</body>

</html>


12-0_XMLHttpRequest.html


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 12-1_XMLHttpRequestExam.jsp  (0) 2016.12.09
[JavaScript] 12-1_XMLHttpRequestExam.js  (0) 2016.12.09
[JavaScript] 11-3_KeyboardEvent.js  (0) 2016.12.08
[JavaScript] 11-2_MouseEvent.js  (0) 2016.12.08
[JavaScript] 11-1_EventAttr.js  (0) 2016.12.08


var eventCtrl = 

{

add: function (elem, eventType, handler)

{

eventType = eventType.replace('on', '');

if(elem.addEventListener)

{

elem.addEventListener(eventType, handler, false);

}

else if(elem.attachEvent)

{

eventType = 'on' + eventType;

elem.attachEvent(eventType, handler);

}

},

remove: function(elem, eventType, handler)

{

eventType = eventType.replace('on', '');

if(elem.removeEventListener)

{

elem.removeEventListener(eventType, handler);

}

else if (elem.detachEvent)

{

eventType = 'on' + eventType;

elem.detachEvent(eventType, handler);

}

},

//이벤트를 취소시키는 메서드.

cancel: function(event)

{

event.returnValue = false;

if(event.preventDefault)

{

event. preventDefault();

}

},

//엘리먼트의 키보드 이벤트를 탐지.

keyEvents: 

{

onlyNumber: function(event)

{

var keyCode = event.keyCode || event.which;

document.getElementById('insertedKeyCode').innerHTML = keyCode;

//숫자버튼에서 이벤트가 발생했을때만 통과시키도록 함.

//아스키 코드로 숫자0은 48, 숫자9는 57

if(keyCode < 48 || keyCode > 57)

{

eventCtrl.cancel(event);

}

}

}

};


eventCtrl.add(window, 'load', 

function()

{

//numberInput엘리먼트에서 

var numberInput = document.getElementById('numberInput');

//키다운 이벤트가 발생하면

eventCtrl.add(numberInput, 'keydown', 

function()

{

var keyCode = event.keyCode || event.which;

//insertedKeyCode엘리먼트에 키코드를 보여주도록 한다.

document.getElementById('insertedKeyCode').innerHTML = keyCode;

});

});


//숫자만 입력받도록 하는 메서드.

function setOnlyNum()

{

var numberInput = document.getElementById('numberInput');

numberInput.value='';

eventCtrl.add(numberInput, 'keydown', eventCtrl.keyEvents.onlyNumber);

numberInput.focus();

}


function resetOnlyNum()

{

var numberInput = document.getElementById('numberInput');

numberInput.value = '';

eventCtrl.remove(numberInput,'keydown', eventCtrl.keyEvents.onlyNumber);

numberInput.focus();

}



11-3_KeyboardEvent.js


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 12-1_XMLHttpRequestExam.js  (0) 2016.12.09
[JavaScript] 12-0_XMLHttpRequest.html  (0) 2016.12.09
[JavaScript] 11-2_MouseEvent.js  (0) 2016.12.08
[JavaScript] 11-1_EventAttr.js  (0) 2016.12.08
[JavaScript] 11-0_EventHandling.html  (0) 2016.12.08

console.log("Begin 11-2");


var eventCtrl = 

{

/**********************************************************************

* 이벤트를 등록하는 메서드

* @param elem : 이벤트를 등록할 엘리먼트

* @param eventType : 등록할 이벤트의 종류

* @param handler : 이벤트 발생시 실행할 함수

**********************************************************************/

add:function (elem, eventType, handler)

{

eventType = eventType.replace('on', '');

if(elem.addEventListener)

{

elem.addEventListener(eventType, handler, false);

}

else if(elem.attachEvent)

{

eventType = 'on' + eventType;

elem.attachEvent(eventType, handler);

}

},

/**********************************************************************

* 이벤트를 삭제하는 메서드

* @param elem : 이벤트를 삭제할 엘리먼트

* @param eventType : 삭제할 이벤트의 종류

* @param handler : 이벤트 삭제시 실행할 함수

**********************************************************************/

remove: function(elem, eventType, handler)

{

eventType= eventType.replace('on', '');

if(elem.removeEventListener)

{

elem.removeEventListener(eventType, handler);

}

elseif(elem.detachEvent)

{

eventType = 'on' + eventType;

elem.detachEvent(eventType, handler);

}

}

};

eventCtrl.add(window, 'load',

function(event)

{

var STATUS_PEN = 'pen'

var board = document.getElementById('boardContainer');

var tools = document.getElementsByName('drowTool');

var status = null;

var tool = null;

eventCtrl.add(board, 'mousedown', 

function(event)

{

if(event.button ===0)

{

status = STATUS_PEN;

}

});

eventCtrl.add(board, 'mouseup', 

function(event)

{

if(event.button === 0)

{

status = null;

}

});

eventCtrl.add(board, 'mousemove', 

function(event)

{

if(status ===STATUS_PEN)

{

var div = document.createElement('div');

div.style.width = '1px';

div.style.height = '1px';

div.style.background = 'blue';

div.style.position = 'absolute';

div.style.left = event.pageX + 'px';

div.style.top=  event.pageY + 'px';

board.appendChild(div);

}

});

});


console.log("End 11-2");


11-2_MouseEvent.js


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 12-0_XMLHttpRequest.html  (0) 2016.12.09
[JavaScript] 11-3_KeyboardEvent.js  (0) 2016.12.08
[JavaScript] 11-1_EventAttr.js  (0) 2016.12.08
[JavaScript] 11-0_EventHandling.html  (0) 2016.12.08
[JavaScript] 7-8_modifyContent.js  (0) 2016.12.08


var eventControl = 

{

add:function(elem, eventType, handler)

{

eventType = eventType.replace('on', '');

if(elem.addEventListener)

{

elem.addEventListener(eventType, handler, false);

}

else if(elem.attachEvent)

{

eventType = 'on' + eventType;

elem.attachEvent(eventType, handler);

}

},

remove: function(elem, eventType, handler)

{

eventType= eventType.replace('on', '');

if(elem.removeEventListener)

{

elem.removeEventListener(eventType, handler);

}

elseif(elem.detachEvent)

{

eventType = 'on' + eventType;

elem.detachEvent(eventType, handler);

}

}

};


eventControl.add(window, 'load', 

function(event)

{

var time = 0;

var button = document.getElementsByTagName('button')[0];

eventControl.add(button, 'click', 

function(event)

{

if(time > 0)

{

document.getElementById('msContent').innerHTML = event.timeStamp - time;

}

time = event.timeStamp;

});

});


11-1_EventAttr.js


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 11-3_KeyboardEvent.js  (0) 2016.12.08
[JavaScript] 11-2_MouseEvent.js  (0) 2016.12.08
[JavaScript] 11-0_EventHandling.html  (0) 2016.12.08
[JavaScript] 7-8_modifyContent.js  (0) 2016.12.08
[JavaScript] 7-7_attrObj.js  (0) 2016.12.08

<!DOCTYPE html>

<html>

<head>

<meta charset ="UTF-8">

<title>Event Handling</title>

<style type = "text/css">

#boardContainer

{

height: 300px;

border: 5px solid black;

}

#keyboardEventDiv

{

border: 5px solid black;

}

</style>

</head>

<body>

<div id = "11-0_EventHandling" style ="border: 1px solid black">

<p >

이벤트 <br/>

이벤트 객체는 웹애플리케이션에 변화가 생길 때 생성된다.<br/>

문서의 모든 변화와 활통에 대해 이벤트가 발생되며 이 이벤트에 대해 자바스크립트는 이벤트 객체를 생성한다.<br/>

특정한 이벤트에 대한 응답을 설정하거나 해제하는 행위를 "이벤트를 핸들링한다."라고 한다.<br/>

이러한 이벤트 처리에 대해 응답으로 반응하는 함수를 리스너라고 한다.<br/>

</p>

<p >

이벤트 전파<br/>

1. 버블링방식 <br/>

버블링 방식은 이벤트를 일으킨 요소를 가장 먼저 확인한다.<br/>

그 후에 부모요소를 확인하고 다시 부모요소를 확인해 나가며 마지막으로 html 엘리먼트를 확인한다.<br/>

2. 캡처링방식 <br/>

캡처링 방식은 가장 먼저 html 엘리먼트를 확인한다. <br/>

그 후의 자식요소를 확인하고 다시 자식요소를 확인해 나가며 마지막 자식요소를 확인한다.<br/>

마지막 자식요소를 확인하면 형제요소를 확인하며 이 과정을 이벤트가 일어난 요소를 찾을때 까지 반복한다. <br/>

</p>

</div><br/>

<div id ="11-1_EventAttr" style ="border: 1px solid black">

<h3>이벤트 속성 예제</h3>

<script type="text/javascript" src = "11-1_EventAttr.js"></script>

<button type = 'button'>Click</button><div>Click interval : <span id = "msContent">0</span> ms</div><br/>

</div><br/>

<div id ="11-2_MouseEvent" style ="border: 1px solid black">

<h3>MouseEvent</h3>

<script type="text/javascript" src = "11-2_MouseEvent.js"></script>

<div id = "boardContainer"></div>

</div><br/>

<div id = "11-3_KeyboardEvent">

<h3>KeyboardEvent</h3>

<script type = "text/javascript" src = "11-3_KeyboardEvent.js"></script>

<div id = "keyboardEventDiv">

<button type = "button" onclick = "setOnlyNum();">숫자만 입력받기</button>

<button type = "button" onclick = "resetOnlyNum();">숫자만 입력받기 해제</button><br/>

<input type = "text" name = "number" id = "numberInput"/><br/>

입력받은 키코드 : <span id = "insertedKeyCode"></span>

</div>

</div>

</body>

</html>


11-0_EventHandling.html


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 11-2_MouseEvent.js  (0) 2016.12.08
[JavaScript] 11-1_EventAttr.js  (0) 2016.12.08
[JavaScript] 7-8_modifyContent.js  (0) 2016.12.08
[JavaScript] 7-7_attrObj.js  (0) 2016.12.08
[JavaScript] 7-6_referencedObj.js  (0) 2016.12.08


function actionClick()

{

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

var oldContent = element.innerHTML;

var newContent = "It is new content !";

element.innerHTML = newContent;

}


//innerHTML을통해 내용을 삽입하면 document 객체가 이미 완성된 상태이므로

//삽입된 즉시 브라우저는 해석을 시작한다.

//따라서 원하는 컨텐츠를 삽입할때 분할해서 넣는경우 원하지 않는 결과가 발생할 수 있다.

/**********************************************

* element.innerHTML += sentence1;

* element.innerHTML += sentence2;

* 위의 방법대신 아래와 같은 방법을 사용하자.

* var content = element.innerHTML + sentence1;

* content += sentence2;

***********************************************/


function actionRemove(element)

{

//자신에 대한 삭제 권한은 자신의 부모가 갖고 있음.

var parent = element.parentNode;

parent.removeChild(element);

}


function actionReplace(element)

{

var newElement = document.createElement("p");

newElement.appendChild(document.createTextNode("Changed!"));

element.parentNode.replaceChild(newElement, element);

}


7-8_modifyContent.js


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 11-1_EventAttr.js  (0) 2016.12.08
[JavaScript] 11-0_EventHandling.html  (0) 2016.12.08
[JavaScript] 7-7_attrObj.js  (0) 2016.12.08
[JavaScript] 7-6_referencedObj.js  (0) 2016.12.08
[JavaScript] 7-5_getElement.js  (0) 2016.12.08

function viewAttr()

{

var element = document.getElementById('testDiv');

var attrs = element.attributes;

for(var i = 0, attr; attr = attrs[i]; i++)

{

document.write(attr.nodeName + ": " + attr.nodeValue + '<br/>');

}

}


7-7_attrObj.js


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 11-0_EventHandling.html  (0) 2016.12.08
[JavaScript] 7-8_modifyContent.js  (0) 2016.12.08
[JavaScript] 7-6_referencedObj.js  (0) 2016.12.08
[JavaScript] 7-5_getElement.js  (0) 2016.12.08
[JavaScript] 7-4_DOMAPI.js  (0) 2016.12.08

+ Recent posts

티스토리툴바