<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
div {
border : 1px solid blue;
width : 100px;
height : 100px;
text-align : center;
vertical-align : middle;
line-height : 100px;
left : 300px;
top : 300px;
position : absolute;
}
</style>
<script type="text/javascript">
// 박스의 초기 위치
let divLeft = 0;
let divTop = 300;
let handleGo = null;
function moveDiv(left,top) {
let aDiv = document.querySelector("div");
aDiv.style.left = left + 'px';
aDiv.style.top = top + 'px';
aDiv.innerHTML = `(${left}, ${top})`;
}
function directMoveLeft() {
let aDiv = document.querySelector("div");
let newLeft = parseInt(aDiv.style.left) - 10;
aDiv.style.Left = newLeft + 'px';
let top = parseInt(aDiv.style.top);
moveDiv(newLeft,top);
}
function directMoveRight() {
let aDiv = document.querySelector("div");
let newLeft = parseInt(aDiv.style.left) + 10;
aDiv.style.right = newLeft + 'px';
let top = parseInt(aDiv.style.top);
moveDiv(newLeft,top);
}
function goRight() {
divLeft += 10;
moveDiv(divLeft, divTop);
}
function moveStop() {
clearInterval(handleGo);
}
function moveOn() {
handleGo = setInterval(goRight, 100);
}
window.onload = function () {
// 박스 위치를 초기화 한다.
moveDiv(divLeft, divTop);
handleGo = setInterval(goRight, 100);
// STOP 버튼의 click 이벤트 핸들러 등록한다.
document.getElementById("moveStop").addEventListener("click", moveStop);
document.getElementById("moveOn").addEventListener("click", moveOn);
document.getElementById("moveRight").addEventListener("click", directMoveRight);
document.getElementById("moveLeft").addEventListener("click", directMoveLeft);
}
</script>
</head>
<body>
<h1>Div Moving Control</h1>
<hr>
<button type="button" id="moveLeft">Left</button>
<button type="button" id="moveRight">Right</button>
<button type="button" id="moveStop">Stop</button>
<button type="button" id="moveOn">Go</button>
<hr>
<div>Javascript</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!---------------------------------------!>
<style media="screen">
div {
border : 1px solid blue;
width : 100px;
height : 100px;
text-align : center;
vertical-align : middle;
line-height : 100px;
left : 300px;
top : 300px;
position : absolute;
}
</style>
<!---------------------------------------!>
<script type="text/javascript">
// 박스의 초기 위치
let divLeft = 0;
let divTop = 300;
let handleGo = null;
function moveDiv(left,top) {
let aDiv = document.querySelector("div");
aDiv.style.left = left + 'px';
aDiv.style.top = top + 'px';
aDiv.innerHTML = `(${divLeft}, ${divTop})`;
}
function goRight() {
divLeft += 10;
moveDiv(divLeft, divTop);
}
function moveStop() {
clearInterval(handleGo);
this.innerHTML= "Go";
this.onclick = moveOn; // 이벤트 핸들러 변경
}
function moveOn() {
handleGo = setInterval(goRight, 100);
this.innerHTML= "Stop";
this.onclick = moveStop; // 이벤트 핸들러 변경
}
window.onload = function () {
// 박스 위치를 초기화 한다.
moveDiv(divLeft, divTop);
handleGo = setInterval(goRight, 100);
// STOP 버튼의 click 이벤트 핸들러 등록한다.
document.getElementById("moveStop").onclick = moveStop;
}
</script>
<!---------------------------------------!>
</head>
<body>
<h1>Div Moving Control</h1>
<hr>
<button type="button" id="moveLeft">Left</button>
<button type="button" id="moveRight">Right</button>
<button type="button" id="moveStop">Stop</button>
<hr>
<div>Javascript</div>
</body>
</html>
// 마지막 예제
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<style media="screen">
table {
border-collapse: collapse;
}
th {
border: 1px solid gray;
background-color: #dddddd;
width : 250px;
}
</style>
<script type="text/javascript">
function gid(id) {
return document.getElementById(id);
}
function appendRow(newWord) {
let mytbody = gid("myTbody");
// mytbody 객체를 이용하여추가 할 행을 먼저 생성한다.
let newRow = mytbody.insertRow(mytbody.rows.length)
// 새로 생성한 행 newRow에 새 칼럼들(cell)을 생성한다. -11월 21일까지 내용
}
function onKeyDown(){
if (event.keyCode == 13) {
if (gid("textinput").value.length > 0){
gid("codeCheck").innerHTML += gid("textinput").value + ", ";
gid("textinput").value = ""; // input clear
}
}
}
window.onload = function () {
gid("textinput").addEventListener("keydown", onKeyDown);
}
</script>
<body>
<h1>Text & Input & Table Control</h1>
<hr>
Input : <input type="text" id="textinput" size=30>
<br><p id="codeCheck"></p>
<hr>
<table>
<thead>
<th>단어</th>
<th>단어 문자열 길이</th>
</thead>
<tbody id="myTbody">
</tbody>
</table>
</body>
</html>
