Math 객체 속성
속성 설명
E 오일러의 상수(약 2.718)
LN2 자연 로그(밑수:2)(약 0.693)
LN10 자연 로그(밑수:10)(약 2.302)
PI 파이 상수(약 3.14)
SQRT1_2 ½의 제곱근(약 0.707)
SQRT2 2의 제곱근(약 1.414)
Math 객체 메소드
메소드 설명
abs(x) 절대값
acos(x), asin(x), atan(x) 아크 삼각함수
ceil(x), floor(x) 실수를 정수로 올림, 내림 함수
cos(x), sin(x), tan(x) 삼각함수
exp(x) 지수함수
log(x) 로그함수
max(x,y,z,…,n) 최대값
min(x,y,z,…,n) 최소값
pow(x,y) 지수함수 Xy
random() 0과 1사이의 난수값 반환
round(x) 반올림
sqrt(x) 제곱근
원하는 범위의 랜덤값 만들기
Math.floor(Math.random() (최대값 – 최소값+1) +최소값);
Math.round(Math.random() (최대값 – 최소값) + 최소값);
예) 1부터 10까지의 랜덤수 만들기
var ranNum = Math.floor(Math.random() * (10 – 1 + 1) + 1);
document.write(ranNum);
0.0~1.0
Math.random() 10 -> 0~ 9
Math.random() 10+1 - > 1~ 10
Math.random() *20 + 11 -> 11 ~30
DOM/BOM
Document Object Model
Browser Object Model
HTML 문서를 객체로 표현한 것을 DOM
웹브라우저를 객체로 표현한 것을 BOM(Browser Object Model)
브라우저 객체 모델(BOM)
브라우저 객체 모델(BOM: Browser Object Model): 웹 브라우저가 가지고 있는 모든 객체를 의미
최상위 객체는 window이고 그 아래로 navigator, location, history, screen, document, frames 객체가 있다.
Window객체
메소드 설명
open() 새로운 창을 연다
close() 열려진 창을 닫는다
alert() 내용을 나타내는 경고 창이 뜬다
confirm() 사용자의 대답을 확인하는 창이 뜬다
prompt() 메시지와 초기값을 나타내고 새로운 값을 입력할 수 있는 창이 뜬다.
setTimeout(fn, millisecond) 주어진 시간이 경과하면 지정된 함수가 호출되어 실행된다
setInterval(fn, millisecond) 주어진 시간이 경과할 때마다 지정된 함수가 호출되어 실행된다
clearInterval(id변수) setInterval() 메소드를 종료시킨다
moveTo(x, y) 절대적인 위치 x와 y로 이동
moveBy(dx, dy) 상대적인 위치로 x와 y값 만큼 이동
resizeTo(x, y) x와 y값으로 창의 크기를 재조정
resizeBy(dx, dy) 현재 크기에서 x와 y값 만큼 크기를 재조정.
scrollTo(x, y) 스크롤을 x와 y로 이동
scrollBy(dx, dy) 스크롤을 x와 y값 만큼 이동
opener open()을 통해 새로운 창을 열었을 때 그 창을 자식창이라
한다면 자식창에서 부모창을 가리킬 때 opener라 한다(자바의 super와 비슷)
상대위치는 by,
절대위치는 To
setTimeout(code, millisec) - code: 호출되는 함수의 이름 / millisec : 함수를호출하기 전에 흐르는 시간
setInterval() - 주기적으로 호출
location 객체
속성 설명
hash URL 중에서 앵커 부분을 반환한다.
host URL 중에서 hostname과 port를 반환
hostname URL 중에서 hostname을 반환
** href 전체 URL을 반환
pathname URL 중에서 경로(path)를 반환
port URL 중에서 port를 반환
protocol URL 중에서 protocol 부분을 반환
search URL 중에서 쿼리(query) 부분을 반환
메서드 설명
assign() 새로운 문서를 로드한다.
reload() 현재 문서를 다시 로드한다.
replace() 현재 문서를 새로운 문서로 대체한다.
a태그 이용 - script의 함수 호출 후 location.href이용
<a href="javascript:proc2()">공지사항 목록</a>
=> a태그에서는 href에 javascript함수 호출하려면 javascript:proc2()로 호출
문서 객체 모델(DOM)
DOM은 W3C (World Wide Web Consortium)의 표준입니다.
DOM은 문서를 액세스하기위한 표준을 정의한다 :
"W3C 문서 객체 모델 (DOM)은 프로그램 및 스크립트를 동적으로 액세스하여 문서의 콘텐트, 구조 및 스타일을 갱신 할 수 있도록 플랫폼 및 언어 중립 인터페이스이다.“
The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
DOM은 HTML 문서의 계층적인 구조를 트리(tree)로 표현
DOM 트리 순회
속성 내용
childNodes 한 요소의 모든 자식 요소에 접근할 수 있다. 배열이 반환
firstChild "childNodes" 배열의 첫번째 자식 노드가 반환된다. "childNodes[0]"와 같다.
lastChild "childNodes" 배열의 마지막 자식 노드가 반환된다. "childNodes[childNodes.length – 1]"와 같다.
parentNode 현재 노드의 부모 노드를 반환한다.
nextSibling 현재 노드의 다음 형제 노드를 반환한다.
previousSibling 현재 노드의 이전 형제 노드를 반환한다.
Math
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/mystyle.css">
<script>
rand = parseInt(Math.random()*100+1);
function proc1(){
str="";
//입력한 값을 가져온다.-value(input타입이므로)
invalue = document.querySelector('input').value;
if(rand == invalue) str+= "정답입니다."
if(rand > invalue) str+= "더 큰 수를 입력하세요."
if(rand < invalue) str+= "더 작은 수를 입력하세요."
//버튼 누를 때마다 함수가 실행되기 때문에 반복문이 필요 없다.
document.querySelector('#result1').innerHTML = str;
}
function proc2(){
arr = ["가위", "바위", "보"];
crand = parseInt(Math.random() * arr.length);
com = arr[crand];
user = prompt("가위, 바위, 보 중 하나를 입력").trim();
str = "컴퓨터 : " + com + "<br>";
str += "user : " + user + "<br>";
if(com == user){
str += "비겼습니다.";
}else if(user == "가위" && com == "보"||
user == "바위" && com == "가위"||
user == "보" && com == "바위"){
str += "user가 이겼습니다.";
}else{
str += "computer가 이겼습니다.";
}
document.getElementById('result2').innerHTML = str;
}
function proc3(){
//배열 선언
lotto = new Array();
while(true){
//랜덤 발생
num = parseInt(Math.random() * 45 + 1);
//발생된 수가 배열에 있는지 비교 - 없으면 저장
if(lotto.indexOf(num) == -1){
lotto.push(num);
}
//size가 6개이면 break
if(lotto.length >= 6){
break;
}
}
str = "행운의 로또번호는 " + lotto
document.getElementById('result3').innerHTML = str;
}
</script>
</head>
<body>
<div class="box">
1~100사이의 랜덤수를 발생한다. <br>
발생된 랜덤 수 맞히기 게임을 만든다. <br>
result1에는 힌트(크다,작다)와 결과를 출력한다. <br>
<br>
<input type="text">
<button type ="button" onclick="proc1()">확인</button>
<div id="result1"></div>
</div>
<div class="box">
가위 바위 보 게임을 할 수 있는 프로그램을 작성하시오.<br>
(단, 컴퓨터는 랜덤을 이용하고, 사용자는 prompt로 입력 받아서 처리) <br>
배열로 작성 arr=["가위", "바위", "보"]; arr[0], arr[1], arr[2]
<br>
<button type ="button" onclick="proc2()">확인</button>
<div id="result2"></div>
</div>
<div class="box">
로또 번호를 생성하는 프로그램을 작성하시오.<br>
(1번 ~ 45번 중 6개의 번호를 추첨) <br>
<br>
<button type ="button" onclick="proc3()">확인</button>
<div id="result3"></div>
</div>
</body>
</html>window
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window sub</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script type="text/javascript">
function proc1(){
//입력한 값 가져오기
//namevalue = document.getElementsById('name').value.trim();
//namevalue = document.querySelector('#name').value.trim(); //id를 이용해서 값 구하기
namevalue = document.ff.name.value.trim();
addrvalue = document.ff.addr.value.trim();//name을 이용해서 값 구하기
//값을 부모창으로 보내기
str = "이름 " + namevalue + "<br>";
str += "주소 " + addrvalue + "<br>";
opener.document.querySelector('#result1').innerHTML = str;
window.close();//창 닫기
}
</script>
</head>
<body>
<div class="box">
이름과 주소를 입력하여 부모창으로 보내기 <br>
부모창을 나타내는 속성: opener<br>
부모창의 id=result1으로 출력<br>
opener.document.querySelector('#result1')<br>
<br>
<form name="ff">
이름<input type="text" id="name" name="name"><br>
주소<input type="text" id="addr" name="addr"><br>
</form>
<button type="button" onclick="proc1()">확인</button>
<div id="result1"></div>
</div>
</body>
</html>Location객체
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script type="text/javascript">
function proc1(){
str = "protocol : " + location.protocol + "<br>";
str += "hostname : " + location.hostname + "<br>";
str += "port : " + location.port + "<br>";
str += "host(hostname + port) : " + location.host + "<br>";
str += "pathname : " + location.pathname + "<br>";
str += "href : " + location.href + "<br>"; //전체
document.querySelector('#result1').innerHTML = str;
}
function proc2(){
//window.open("test.jsp")
//location.href="windowsub.html";
location.href="test.jsp";
}
function proc3(){
document.myform.action = "testPost.jsp";
document.myform.method = "post";
document.myform.submit();
}
function proc4(page){
location.replace(page);
}
function proc5(){
arr = ["Hello","Christmas","happy","java","Good","JavaScript"];
rand = parseInt(Math.random()* arr.length);
str = "<h1>" + arr[rand] + "<h1>";
result = document.querySelector('#result5');
result.innerHTML = str;
result.style.color = "red";
setTimeout(function(){
location.reload();
}, 1000);
}
</script>
</head>
<body>
<div class="box">
location 객체 : URL 정보 얻기
<br>
<button type="button" onclick="proc1()">확인</button>
<div id="result1"></div>
</div>
<div class="box">
location 객체 : URL 정보 얻기
<br>
자동으로 특정 페이지 이동할 때 사용
<button type="button" onclick="proc2()">확인</button>
<br>
a태그 이용 - script의 함수 호출 후 location.href이용
<a href="javascript:proc2()">공지사항 목록</a>
<br><br>
get---------------<br>
<input type="button" onclick="location.href='test.jsp'">get이동<br>
post--------------<br>
<form name="myform">
<input type="hidden" name="korea" value="코리아">
<input type="button" onclick="proc3()">
</form>
</div>
<div class="box">
location.replace(url)<br>
현재 화면을 새로운 화면으로 대체<br>
이전 화면으로 돌아갈 수 없다.<br>
<br>
새로운 문서로 대체
<button type="button" onclick="proc4('test.jsp')">공지사항목록</button>
</div>
<div class="box">
location.reload()<br>
현재 문서를 재호출 한다<br>
result5에 랜덤으로 발생하는 문자를 출력하고 <br>
1분 후에 원래 페이지를 재호출한다<br>
<br>
<button type="button" onclick="proc5()">페이지 재호출</button>
<div id="result5"></div>
</div>
</body>
</html>test.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>Insert title here</title>
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>JSP : Java Server Page</h1>
Hello~~
</body>
</html>testPost.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");
String name = request.getParameter("korea");
%>
<%=name %>
</body>
</html>DOM 객체
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script type="text/javascript">
function proc1(){
ultag = document.getElementsByTagName('ul')[0];
listall = ultag.getElementsByTagName('li');
str = "";
for(i=0;i<listall.length;i++){
str += listall[i].firstChild.data + "\n";
}
alert(str);
}
</script>
</head>
<body>
<div class="box">
<ul>
<li>List Item1</li>
<li>List Item2</li>
<li>List Item3</li>
<li>List Item4</li>
<li>List Item5</li>
</ul>
<ul>
<li>List Item1</li>
<li>List Item2</li>
<li>List Item3</li>
<li>List Item4</li>
<li>List Item5</li>
</ul>
<br>
<button type="button" onclick="proc1()">확인</button>
<div id="result1"></div>
</div>
</body>
</html>