<%@ page language = "java" contentType = "text/html; charset = UTF-8" pageEncoding = "UTF-8"%>
<% System.out.println("Welcome 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()
| [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>
| [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();
}
| [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");
| [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;
});
});
| [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>
| [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);
}
| [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/>');
}
}
| [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 |
function findParent(element)
{
var parent = element.parentNode;
parent.style.border="2px solid red";
}
//눌린 버튼의 부모 노드는 바로 위의 div
function countChildren(element)
{
var children = document.getElementById('container').childNodes;
alert("자식 노드의 수 : " + children.length + "\n공백문자(줄바꿈)이 하나의 텍스트 노드로 인식 될 수 있음.");
}
| [JavaScript] 7-8_modifyContent.js (0) | 2016.12.08 |
|---|---|
| [JavaScript] 7-7_attrObj.js (0) | 2016.12.08 |
| [JavaScript] 7-5_getElement.js (0) | 2016.12.08 |
| [JavaScript] 7-4_DOMAPI.js (0) | 2016.12.08 |
| [JavaScript] 7-3_Tag.js (0) | 2016.12.08 |
12-1_XMLHttpRequestExam.jsp
12-0_XMLHttpRequest.html