<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>Date 클래스 함수</h1>
<hr>
<p>날짜와 시간이 저장된 객체를 생성하기 위한 클래스 함수 - Date 클래스 함수의 프로퍼티와 메소드 제공</p>
<script type="text/javascript">
//클라이언트 플렛폼(OS)의 현재 날짜와 시간이 저장된 Date 객체를 생성하여 변수에 저장
var now=new Date();
//Date.toString() : Date 객체에 저장된 날짜와 시간을 문자값으로 변환하여 반환하는 메소드
//alert("now.toString() = "+now.toString());
//alert("now = "+now);//Date 객체가 저장된 변수를 출력하면 toString() 메소드 자동 호출
//Date.toLocaleString() : Date 객체에 저장된 날짜와 시간을 클라이언트 플렛폼에 맞는
//패턴의 문자값으로 변환하여 반환하는 메소드
//alert("now.toLocaleString() = "+now.toLocaleString());
/*
var day=["일","월","화","수","목","금","토"];
//Date.getXXX() : Date 객체에 저장된 날짜와 시간 중 원하는 값을 반환하는 메소드
var today=now.getFullYear()+"년 "+(now.getMonth()+1)+"월 "
+now.getDate()+"일 "+day[now.getDay()]+"요일";
alert("today = "+today);
*/
//매개변수에 날짜와 시간을 전달하여 Date 객체를 생성하여 변수에 저장
var birthday=new Date(2000, 0, 1);//2000년 1월 1일
//Date.getTime() : Date 객체에 저장된 날짜와 시간에 대한 초단위 숫자값(TimeStamp)를 반환하는 메소드
var interval=(now.getTime()-birthday.getTime())/(1000*60*60*24);
//alert("당신은 오늘까지 "+interval+"일 살았습니다.");
alert("당신은 오늘까지 "+Math.ceil(interval)+"일 살았습니다.");
</script>
</body>
</html>
28_Math (※ 28_ Math 고 제목하면 404에러뜸)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>Math 클래스 함수</h1>
<hr>
<p>수학 관련 프로퍼티와 메소드를 제공하는 클래스 함수</p>
<script type="text/javascript">
//Math.PI : 원주율을 저장한 프로퍼티
//alert("Math.PI = "+Math.PI); // Math.PI = 3.141592653589793
//Math.ceil(number) : 매개변수로 전달받은 숫자값에 소숫점 자리에 값이 있는 경우
//올림 처리된 정수값으로 반환하는 메소드
//alert("Math.ceil(12.1) = "+Math.ceil(12.1)); // Math.ceil(12.1) = 13
//Math.floor(number) : 매개변수로 전달받은 숫자값에 소숫점 자리에 값이 있는 경우
//버림(내림) 처리된 정수값으로 반환하는 메소드
//alert("Math.floor(12.9) = "+Math.floor(12.9)); // Math.floor(12.9) = 12
//Math.round(number) : 매개변수로 전달받은 숫자값에 소숫점 자리에 값이 있는 경우
//반올림 처리된 정수값으로 반환하는 메소드
//alert("Math.round(12.4) = "+Math.round(12.4)); // Math.round(12.4) = 12
//alert("Math.round(12.5) = "+Math.round(12.5)); // Math.round(12.5) = 13
//Math.pow(number, number) : 매개변수로 전달받은 숫자값에 대한 제곱근을 계산하여 반환하는 메소드
//alert("Math.pow(3,5) = "+Math.pow(3,5)); // Math.pow(3,5) = 243
//Math.random() : 0.0보다 크거나 같고 1.0보다 작은 실수 난수값을 반환하는 메소드
alert("난수값 = "+parseInt(Math.random()*100)); // 0~99 범위의 정수 난수값 출력
</script>
</body>
</html>
※ 난수값 = 랜덤
29_JSON
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>JSON 클래스 함수</h1>
<hr>
<p>JSON 관련 프로퍼티와 메소드를 제공하는 클래스 함수</p>
<script type="text/javascript">
//JSON 기능으로 Object 객체를 생성하여 변수에 저장
var student={"num":1000, "name":"홍길동"};
//alert("변수의 자료형 = "+typeof(student));//변수의 자료형 = object
//Object 객체가 저장된 변수를 출력하면 자동으로 toString() 메소드 호출
//Object.toString() : 객체를 생성한 클래스 함수명을 문자값으로 반환하는 메소드
//alert("student = "+student);//student = [object Object] >> Object 객체
//alert("학번 = "+student.num+", 이름 = "+student.name);//학번 = 1000, 이름 = 홍길동
//JSON.stringify(object) : 매개변수로 전달받은 자바스크립트 객체를 JSON 형식의 문자값으로
//변환하여 반환하는 메소드
// => REST 웹프로그램을 요청할 경우 자바스크립트 객체를 JSON 형식의 문자값으로 변환하여
//전달하기 위해 사용
var str=JSON.stringify(student);
//alert("변수의 자료형 = "+typeof(str));//변수의 자료형 = string
//alert("str = "+str);//str = {"num":1000,"name":"홍길동"}
//JSON.parse(string) : 매개변수로 전달받은 JSON 형식의 문자값으로 자바스크립트 객체로
//변환하여 반환하는 메소드 - eval 함수 사용 가능
// => REST 웹프로그램에 대한 응답결과를 JSON 형식의 문자값으로 제공받아 자바스크립트
//객체로 변환하여 사용
//var stu=JSON.parse(str);
var stu=eval("("+str+")");
//alert("변수의 자료형 = "+typeof(stu));//변수의 자료형 = object
//alert("stu = "+stu);//stu = [object Object] >> Object 객체
alert("학번 = "+stu.num+", 이름 = "+stu.name);//학번 = 1000, 이름 = 홍길동
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>BOM(Browser Object Model) - navigator 객체</h1>
<hr>
<p>navigator 객체 : 브라우저 엔진을 객체로 표현하여 프로퍼티와 메소드 제공</p>
<script type="text/javascript">
//alert(navigator);//[object Navigator]
//navigator.appName : 브라우저 엔진의 이름을 저장한 프로퍼티
//alert("브라우저 엔진의 이름 = "+navigator.appName);//브라우저 엔진의 이름 = Netscape
//navigator.appVersion : 브라우저 엔진의 버전을 저장한 프로퍼티
//alert("브라우저 엔진의 버전 = "+navigator.appVersion);//브라우저 엔진의 버전 = 5.0
//navigator.userAgent : 브라우저 엔진을 저장한 프로퍼티
alert("브라우저 엔진 = "+navigator.userAgent);
</script>
</body>
</html>
32_location
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>BOM(Browser Object Model) - location 객체</h1>
<hr>
<p>location 객체 : 브라우저에서 URL 주소를 입력하는 영역을 객체로 표현하여 프로퍼티와 메소드 제공</p>
<script type="text/javascript">
//location.toString() : URL 주소를 입력하는 영역의 URL 주소를 반환하는 메소드
//alert(location); //http://localhost:8000/web/js/32_location.html
/*
setTimeout(function() {
//location.href : location 객체의 URL 주소를 저장한 프로퍼티
// => location 객체의 href 속성값을 변경하면 브라우저의 URL 주소가 속성값으로 변경되며
//변경된 URL 주소의 웹프로그램을 요청하여 실행결과를 제공받아 출력 - 페이지 이동
location.href="https://www.daum.net";
}, 3000);
*/
setInterval(function() {
//location.reload() : 브라우저가 현재 요청한 URL 주소의 웹프로그램을 재요청하는 메소드
location.reload();
}, 1000);
</script>
</body>
</html>
33_history
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>BOM(Browser Object Model) - history 객체</h1>
<hr>
<p>history 객체 : 브라우저의 히스토리를 객체로 표현하여 프로퍼티와 메소드 제공</p>
<script type="text/javascript">
//alert(history); //[object History]
setTimeout(function() {
//history.back() : 이전 페이지로 이동하는 메소드
//history.go(number) : 원하는 페이지로 이동하는 메소드
//history.back();//history.go(-1);
//history.forward() : 다음 페이지로 이동하는 메소드
//history.forward(); // history.go(1);
history.go(0); // location.reload() 메소드와 동일
}, 3000);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script type="text/javascript">
function load() {//이벤트 처리 함수
alert("동적인 페이지를 구현하기 위해 HTML 태그 조작하는 명령 실행");
}
/*
//자바스트립트 객체에 이벤트 리스너 속성을 요소로 하여 이벤트 처리 함수 저장
// > 자바스트립트 객체에서 해당 이벤트가 발생될 경우 이벤트 처리 함수 호출
window.onload=function() {
alert("동적인 페이지를 구현하기 위해 HTML 태그 조작하는 명령 실행");
}
*/
</script>
</head>
<!-- onload 이벤트 리스너 속성 : 태그가 메모리에 저장된 경우 실행될 이벤트 처리 명령
(자바스트립트)을 속성값으로 설정 -->
<!-- body 태그가 메모리에 저장되며 자바스크립트의 load() 함수 호출 -->
<!-- <body onload="load();"> -->
<body>
<h1>DOM(Document Object Model) - onload Event Listener</h1>
<hr>
<p>DOM : document 객체를 기반으로 제공되는 HTML 태그의 Element 객체</p>
<p>요청 웹프로그램의 실행결과를 웹문서로 전달받아 브라우저의 응답영역에 출력</p>
<p>브라우저는 DOM Parser를 사용하여 웹문서의 HTML 태그를 DOM Tree로 생성
- 자바스트립트는 DOM Tree의 HTML 태그를 객체로 제공받아 사용 가능</p>
<p>자바스트립트를 사용하여 태그에서 이벤트가 발생될 경우 이벤트 처리 함수를 사용하여
태그를 Element 객체로 제공받아 조작 가능 - 동적인 페이지 구현(DHTML : DynamicHTML)</p>
<p>반드시 DOM Tree가 완성된 후 동적인 페이지 구현 가능</p>
<!-- body 태그의 마지막 자식 태그로 script 태그를 선언하면 onload 이벤트 리스너 속성을
이용하지 않아도 HTML 태그를 조작하여 동적인 페이지 구현 가능 -->
<script type="text/javascript">
alert("동적인 페이지를 구현하기 위해 HTML 태그 조작하는 명령 실행");
</script>
</body>
</html>
36_element
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>DOM(Document Object Model) - Element 객체</h1>
<hr>
<p>Node 객체 : 태그(TagNode)와 태그내용(TextNode)을 자바스크립트 객체로 표현</p>
<p>Element 객체 : 태그(TagNode)만을 자바스크립트 객체로 표현</p>
<hr>
<h2 id="headline">h2 태그에 의해 출력되는 내용</h2>
<ul>
<li>li 태그에 의해 출력되는 내용-1</li>
<li>li 태그에 의해 출력되는 내용-2</li>
<li>li 태그에 의해 출력되는 내용-3</li>
</ul>
<p class="text">p 태그에 의해 출력되는 내용</p>
<script type="text/javascript">
// document.getElementById(id) : document 객체의 자식태그에서 id 속성값으로 태그를
// 검색하여 검색된 하나의 태그를 Element 객체로 반환하는 메소드
// > document 객체 대신 Element 객체를 사용하여 자식태그를 검색해 Element 객체로 반환 가능
var h2E = document.getElementById("headline"); // [object HTMLHeadingElement]
// alert(h2E);
// Node.nodeName : Node(Element) 객체의 노드명(태그명)을 저장한 프로퍼티
// alert(h2E.nodeName); //H2
// Node.nodeValue : Node(Element) 객체의 노드값(태그내용)을 저장한 프로퍼티
// alert(h2E.nodeValue); //null
// Node.firstChild : Node(Element) 객체의 첫번째 자식 Node(Element) 객체를 저장한 프로퍼티
// alert(h2E.firstChild); //[object Text] >> TextNode
// alert(h2E.firstChild.nodeName); //#text
// alert(h2E.firstChild.nodeValue); //h2 태그에 의해 출력되는 내용
// Text 객체의 nodeValue 프로퍼티의 속성값 변경 - 태그내용 변경
// h2E.firstChild.nodeValue="h2 태그의 내용 변경";
// document.getElementsByTagName(tagName) : document 객체의 자식태그에서 태그명으로 태그를
// 검색하여 검색된 다수의 태그를 NodeList 객체로 반환하는 메소드
// > document 객체 대신 Element 객체를 사용하여 자식태그를 검색해 NodeList 객체로 반환 가능
// NodeList 객체 : 다수의 Node 객체(Element)가 저장된 객체 - HTMLCollection 객체
var liList = document.getElementsByTagName("li");
// alert(liList); //[object HTMLCollection]
// NodeList.length : NodeList 객체에 저장된 Node(Element) 객체의 갯수를 저장한 프로퍼티
// alert(liList.length);
/*
for(i=0;i<liList.length;i++) {
// NodeList.item(index) : NodeList 객체에 저장된 Node(Element) 객체 중 매개변수로
// 전달받은 첨자위치의 Node(Element) 객체를 반환하는 메소드
var liE = liList.item(i);
// alert(liE); // [object HTMLLIElement]
alert(liE.firstChild.nodeValue);
}
*/
/*
//document.getElementsByClassName(class) : document 객체의 자식태그에서 태그의 class 속성값으로
//태그를 검색하여 검색된 다수의 태그를 NodeList 객체로 반환하는 메소드
// > document 객체 대신 Element 객체를 사용하여 자식태그를 검색해 NodeList 객체로 반환 가능
var pList=document.getElementsByClassName("text");
//alert(pList); //[object NodeList]
alert(pList.item(0).firstChild.nodeValue);
*/
/*
// document.querySelector(selector) : document 객체의 자식태그에서 CSS 선택자로 태그를
// 검색하여 검색된 하나의 태그를 Node(Element) 객체로 반환하는 메소드
// > document 객체 대신 Element 객체를 사용하여 자식태그를 검색해 Element 객체로 반환 가능
var pE=document.querySelector(".text");
// alert(pE);//[object HTMLParagraphElement]
alert(pE.firstChild.nodeValue);
*/
//document.querySelectorAll(selector) : document 객체의 자식태그에서 CSS 선택자로 태그를
//검색하여 검색된 다수의 태그를 NodeList 객체로 반환하는 메소드
// > document 객체 대신 Element 객체를 사용하여 자식태그를 검색해 NodeList 객체로 반환 가능
var pList=document.querySelectorAll(".text");
// alert(pList); //[object NodeList]
alert(pList.item(0).firstChild.nodeValue);
</script>
</body>
</html>
37_element_add
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>DOM(Document Object Model) - 태그 추가</h1>
<hr>
<div id="imageDiv"></div>
<script type="text/javascript">
//document.createElement(tagName) : 매개변수로 전달받은 태그명의 Element 객체를 생성하여 반환하는 메소드
var h2E=document.createElement("h2"); // <h2></h2>
//alert(h2E);//[object HTMLHeadingElement]
//document.createTextNode(content) : 매개변수로 전달받은 태그내용이 저장된 Text 객체를 생성하여 반환하는 메소드
var h2T=document.createTextNode("h2 태그에 의해 출력되는 내용");
//alert(h2T);//[object Text]
//Node.appendChild(newNode) : 매개변수로 전달받은 Node(Element) 객체를 Node(Element) 객체의 자식으로 추가하는 메소드
h2E.appendChild(h2T); //<h2>h2 태그에 의해 출력되는 내용</h2>
//document.body : document 객체에서 body 태그를 자바스트립트 객체로 표현
// > DOM Tree에 새로운 태그를 추가하여 저장 >> 출력
document.body.appendChild(h2E);
var imgE=document.createElement("img"); //<img>
//Element.attributeName : Element 객체에 프로퍼티를 추가하면 태그에 속성과 속성값을 추가하는 것과 동일한 기능 수행
imgE.src="images/Koala.jpg"; //<img src="images/Koala.jpg">
//Node.setAttribute(name, value) : Node(Element) 객체의 태그 속성값을 변경하는 메소드
// => 매개변수로 전달받은 태그 속성이 없는 경우 속성 추가
//Node.getAttribute(name) : Node(Element) 객체의 태그 속성값을 반환하는 메소드
//Node.removeAttribute(name) : Node(Element) 객체의 태그 속성을 삭제하는 메소드
imgE.setAttribute("width", "300"); //<img src="images/Koala.jpg" width="300">
var divE=document.getElementById("imageDiv"); //<div id="imageDiv"></div>
divE.appendChild(imgE); //<div id="imageDiv"><img src="images/Koala.jpg" width="300"></div>
var hrE=document.createElement("hr"); //<hr>
//Node.insertBefore(newElement, before) : 기존 Node(Element) 객체 전에 새로운 Node(Element) 객체를 삽입하는 메소드
document.body.insertBefore(hrE, h2E);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>DOM(Document Object Model) - 태그 변경</h1>
<hr>
<ul>
<li>메뉴-1</li>
<li>메뉴-2</li>
<li>메뉴-3</li>
</ul>
<ul>
<li>메뉴-4</li>
<li>메뉴-5</li>
<li>메뉴-6</li>
</ul>
<hr>
<div id="text"></div>
<script type="text/javascript">
var ulList=document.getElementsByTagName("ul");
var liList=ulList.item(0).getElementsByTagName("li");
var liE=liList.item(1); //<li>메뉴-2</li>
//Text 객체를 이용하여 태그 내용 변경
//liE.firstChild.nodeValue="신메뉴"; // <li>신메뉴</li>
var newText=document.createTextNode("신메뉴");
//Node.replaceChild(newNode, oldNode) : Node(Element) 객체의 기존 자식 Node(Element) 객체를
//새로운 Node(Element) 객체로 변경하는 메소드
liE.replaceChild(newText, liE.firstChild);
/*
var divE=document.getElementById("text"); //<div id="text"></div>
var pE=document.createElement("p"); //<p></p>
var pT=document.createTextNode("p 태그에 의해 출력되는 내용");
pE.appendChild(pT); //<p>p 태그에 의해 출력되는 내용</p>
divE.appendChild(pE); //<div id="text"><p>p 태그에 의해 출력되는 내용</p></div>
*/
var divE=document.getElementById("text"); //<div id="text"></div>
//Node.innerHTML : Node(Element) 객체에 자식 태그 또는 태그내용을 저장한 프로퍼티
// > Node(Element) 객체의 innerHTML 프로퍼티를 사용하여 하위태그 및 태그내용 변경 가능
divE.innerHTML="<p>p 태그에 의해 출력되는 내용</p>";
</script>
</body>
</html>
40_clock
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style type="text/css">
#displayDiv {
width: 600px;
margin: 0 auto;
padding: 30px 0;
font-size: 2em;
font-weight: bold;
text-align: center;
border: 2px solid black;
}
</style>
</head>
<body>
<h1>DOM(Document Object Model) - 시계</h1>
<hr>
<div id ="displayDiv">2023년 06월 08일 17시 03분 35초</div>
<script type ="text/javascript">
var displayDiv = document.getElementById("displayDiv");
var displayClock = function() {
// 클라이언트의 현재 날짜와 시간이 저장된 Date 객체를 생성하여 변수에 저장
var now = new Date();
// Date 객체를 이용하여 태그내용으로 출력될 값을 변수에 저장
var printNow=now.getFullYear()+"년 "+(now.getMonth()+1)+"월 "+now.getDate()+"일 "
+now.getHours()+"시 "+now.getMinutes()+"분 "+now.getSeconds()+"초";
// div 태그에 태그내용을 변경하여 출력
displayDiv.innerHTML=printNow;
}
displayClock(); // 함수 호출 - 현재 날짜와 시간이 태그에 출력
setInterval(displayClock, 1000); // 1초마다 함수 호출
</script>
</body>
</html>
