OpenFrameWork
오픈프레임워크_Day34
px
2015. 4. 30. 21:41
### : 목차 구분 기호
--- : 목차 내에 항목 구분 기호
@@@ : 태그 용도
--- : 목차 내에 항목 구분 기호
@@@ : 태그 용도
,,, : 같은 항목 내에 구분 기호
목차
1. 이론 및 정보
2. 설정 및 그 밖에
3. 소스코드 또는 실습
4. 과제
###################################
1. 이론 및 정보
-----------------------------------
* 스마트에디터 -> 자바스크립트로 만듬
-----------------------------------
* document 객체는 DOM이라는 걸로 쓰임?
-----------------------------------
********* DOM(Document Object Model) -> Document (html,xml,...markup language)
자바스크립트가 html에 접근할 수 있도록 해줘야함
근데 다른 언어 끼리 어떻게 의사소통을 하나?
하나의 약속을 함! => DOM
태그들을 객체로 만들어서 다른 언어들이 접근할 수 있게 해준다.
- DOM API
- www.w3c.org/DOM
- 정의
1) 문서를 객체로 표현하기 위한 표준
2) 이때의 문서는 markup language 문서이다.
3) 자바스크립트,자바,C,C#등 다양한 언어에서 DOM API를 지원
@@@35일차 시작
1. innerHTML을 이용한 화면 동적 변경(ajax?에서 많이 사용)
@@@35일차 끝
-----------------------------------
-----------------------------------
-----------------------------------
-----------------------------------
-----------------------------------
-----------------------------------
-----------------------------------
###################################
2. 설정 및 그 밖에
-----------------------------------
###################################
2. 설정 및 그 밖에
-----------------------------------
-----------------------------------
-----------------------------------
-----------------------------------
###################################
3. 소스코드 또는 실습
-----------------------------------
###################################
3. 소스코드 또는 실습
-----------------------------------
3-1
/JavascriptExam/WebContent/제4강 객체/03-Math.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
function getRandom() {
//alert(Math.random());
alert(Math.ceil(Math.random()*9));
}
</script>
</head>
<body>
<input type="button" value="난수" onclick="getRandom()" /> <br />
</body>
</html>
4. 과제
-----------------------------------
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
function getRandom() {
//alert(Math.random());
alert(Math.ceil(Math.random()*9));
}
</script>
</head>
<body>
<input type="button" value="난수" onclick="getRandom()" /> <br />
</body>
</html>
-----------------------------------
3-2
/JavascriptExam/WebContent/제4강 객체/04-String.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script>
document.write("안녕하세요?".length+"<br/>");
document.write("안녕하세요?".big()+"<br/>");
document.write("안녕하세요?".big()+"<br/>");
document.write("안녕하세요?".bold()+"<br/>");
document.write("안녕하세요?".fontcolor("red")+"<br/>");
document.write("안녕하세요?".italics()+"<br/>");
document.write("안녕하세요?".strike()+"<br/>");
document.write("홍길동님"+"안녕하세요?".sub()+"<br/>");
var str1 = "안녕하세요", str2 = "자바스크립트";
var str3 = "안녕하세요? 자바-스크립트";
document.write(str1.charAt(3)+"<br/>");
document.write(str1.concat(str2)+"<br/>");
document.write(str2.indexOf('스')+"<br/>");
document.write(str2.indexOf('이')+"<br/>");
document.write(str2.lastIndexOf('스')+"<br/>");
document.write(str3.split(' ')+"<br/>");
document.write(str3.split('?')+"<br/>");
document.write(str3.split('자')+"<br/>");
document.write(str3.split('-')+"<br/>");
// 시작 위치와 끝위치
document.write(str3.substring(2, 6)+"<br/>");
// 시작 위치와 갯수, 시작 위치부터 6개
document.write(str3.substr(2, 6)+"<br/>");
</script>
</body>
</html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script>
document.write("안녕하세요?".length+"<br/>");
document.write("안녕하세요?".big()+"<br/>");
document.write("안녕하세요?".big()+"<br/>");
document.write("안녕하세요?".bold()+"<br/>");
document.write("안녕하세요?".fontcolor("red")+"<br/>");
document.write("안녕하세요?".italics()+"<br/>");
document.write("안녕하세요?".strike()+"<br/>");
document.write("홍길동님"+"안녕하세요?".sub()+"<br/>");
var str1 = "안녕하세요", str2 = "자바스크립트";
var str3 = "안녕하세요? 자바-스크립트";
document.write(str1.charAt(3)+"<br/>");
document.write(str1.concat(str2)+"<br/>");
document.write(str2.indexOf('스')+"<br/>");
document.write(str2.indexOf('이')+"<br/>");
document.write(str2.lastIndexOf('스')+"<br/>");
document.write(str3.split(' ')+"<br/>");
document.write(str3.split('?')+"<br/>");
document.write(str3.split('자')+"<br/>");
document.write(str3.split('-')+"<br/>");
// 시작 위치와 끝위치
document.write(str3.substring(2, 6)+"<br/>");
// 시작 위치와 갯수, 시작 위치부터 6개
document.write(str3.substr(2, 6)+"<br/>");
</script>
</body>
</html>
-----------------------------------
3-3
/JavascriptExam/WebContent/제4강 객체/04-String과제.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
ID : <input type="text" name="id"/><br/><br/>
Email : <input type="text" name="email"/><br/><br/>
Password : <input type="password" name="pw"/><br/><br/>
주민등록번호 : <input type="text" name="jumin1"/>
- <input type="text" name="jumin2"/><br/><br/>
남자 <input type="radio" name="gender" value="남자"/>
여자 <input type="radio" name="gender" value="여자"/><br/><br/>
주소 : <input type="text" name="addr" /><br/><br/>
</body>
</html>
<!--
1. ID 입력 후 다음 양식으로 커서를 옮기면 입력한 ID를 대문자로 변경함.
2. Email이 제대로 입력되었는지 체크하도록 한다. (@ 여부로 체크)
잘못 입력했을 경우 "올바르게 입력하세요"라고 메시지를 출력한다.
(현재 텍스트 상자에서 커서를 잃어버렸을 때 동작하도록 한다.)
3. 패스워드란에 반드시 4글자 이상을 입력하도록 한다.
4. 주민 번호 뒷자리 첫글자가 1 또는 3이면 남자, 2또는 4이면 여자에 체크를
하도록 한다.(뒷자리를 다 입력한 후 커서를 다른 곳으로 옮겼을 때 동작)
5. 각 항 공통으로 값을 입력하지 않았을 경우도 체크한다.
(값을 입력하지 않았을 경우 "반드시 값을 입력하세요"라고 출력)
-->
-----------------------------------
3-4
/JavascriptExam/WebContent/제4강 객체/05-Screen.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script>
document.write(screen.height+"<br/>");
document.write(screen.width+"<br/>");
document.write(screen.availHeight+"<br/>");
document.write(screen.availWidth+"<br/>");
document.write(screen.pixelDepth+"<br/>");
document.write(screen.colorDepth+"<br/>");
</script>
</body>
</html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script>
document.write(screen.height+"<br/>");
document.write(screen.width+"<br/>");
document.write(screen.availHeight+"<br/>");
document.write(screen.availWidth+"<br/>");
document.write(screen.pixelDepth+"<br/>");
document.write(screen.colorDepth+"<br/>");
</script>
</body>
</html>
-----------------------------------
3-5
/JavascriptExam/WebContent/제4강 객체/06-for_in.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script>
var arr = new Array(1,"홍길동",2,"임꺽정",3,"이수일");
//값을 v에 옮겨 담는게 아니라 위치를 옮겨 담음
for(var v in arr){
document.write(arr[v]+"<br/>");
}
document.write("<hr/>");
for(var v in screen){
document.write(v+"<br/>");
}
document.write("<hr/>");
for(var v in document){
document.write(v+"<br/>");
}
</script>
</body>
</html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script>
var arr = new Array(1,"홍길동",2,"임꺽정",3,"이수일");
//값을 v에 옮겨 담는게 아니라 위치를 옮겨 담음
for(var v in arr){
document.write(arr[v]+"<br/>");
}
document.write("<hr/>");
for(var v in screen){
document.write(v+"<br/>");
}
document.write("<hr/>");
for(var v in document){
document.write(v+"<br/>");
}
</script>
</body>
</html>
-----------------------------------
3-6
/JavascriptExam/WebContent/제4강 객체/07-with.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script>
/*
document.write("연속해서<br/>");
document.write("document객체를<br/>");
document.write("사용할<br/>");
document.write("필요가<br/>");
document.write("없습니다.<br/>");
위 상황을 편하게 바꾸는 방법
*/
with(document){
write("연속해서<br/>");
write("document객체를<br/>");
write("사용할<br/>");
write("필요가<br/>");
write("없습니다.<br/>");
}
</script>
</body>
</html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script>
/*
document.write("연속해서<br/>");
document.write("document객체를<br/>");
document.write("사용할<br/>");
document.write("필요가<br/>");
document.write("없습니다.<br/>");
위 상황을 편하게 바꾸는 방법
*/
with(document){
write("연속해서<br/>");
write("document객체를<br/>");
write("사용할<br/>");
write("필요가<br/>");
write("없습니다.<br/>");
}
</script>
</body>
</html>
-----------------------------------
3-7
/JavascriptExam/WebContent/제4강 객체/08-window.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
function fnOpen() {
//winddow.open("보여질 문서","창의 이름","창 모양에 대한 속성");
//window.open("http://w3cschool.com","pop1");
/*
창 모양에 대한 속성, 한개를 지정하면 다른것은 지정안한다고 인식
menubar,toolbar,directories,scrollbars,status,
location,width,height,height,left,top,resizable,
fullscreen,channelmode
*/
//window.open("04-String과제.html","","menubar=yes, toolbar=yes, width=300, height=400, resizable=no");
//window.open("04-String과제.html","","fullscreen");
window.open("04-String과제.html", "", "channel");
}
function fnStatus() {
window.status = "안녕하세요....자바스크립트 입니다.";
}
function fnwatch() {
var now = new Date();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
document.f1.watch.value = "현재 시간은 " + hour + " 시" + min +
" 분 " + sec + " 초 입니다.";
// 자신을 호출, 재귀 호출
//gTime = setTimeout(fnwatch, 1);
}
var gTime;
function fnSetTimeOut() {
// 두번째 인자는 몇초인지
//gTime = setTimeout(fnwatch, 3);
// 인터벌은 자동으로 호출 함, 별도 재귀호출 필요 없음
gTime = setInterval(fnwatch, 1);
}
function fnStop() {
clearTimeout(gTime);
}
function fnSub() {
window.open("sub.html","","width=300,height=100");
}
</script>
</head>
<body>
<form name="f1">
<input type="button" value="팝업창 열기" onclick="fnOpen()" /><br /><br />
<span onmouseover="fnStatus()" onmouseout="window.status=''">
마우스를 올려놓아 보시오</span>
<input type="button" value="윈도우 닫기" onclick="self.close()" /><br /><br />
<input type="button" value="윈도우 닫기1" onclick="window.close()" /><br /><br />
<input type="text" name="watch" style="text-align: center" size="50" />
<input type="button" value="현재 시간" onclick="fnSetTimeOut()"/>
<input type="button" value="중지" onclick="fnStop()"/><br /><br />
<br /><br />
<hr/>
<input type="button" value="sub window호출" onclick="fnSub()"/>
<input type="button" value="address" style="background-color: yellow"/>
<br /><br />
</form>
</body>
</html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
function fnOpen() {
//winddow.open("보여질 문서","창의 이름","창 모양에 대한 속성");
//window.open("http://w3cschool.com","pop1");
/*
창 모양에 대한 속성, 한개를 지정하면 다른것은 지정안한다고 인식
menubar,toolbar,directories,scrollbars,status,
location,width,height,height,left,top,resizable,
fullscreen,channelmode
*/
//window.open("04-String과제.html","","menubar=yes, toolbar=yes, width=300, height=400, resizable=no");
//window.open("04-String과제.html","","fullscreen");
window.open("04-String과제.html", "", "channel");
}
function fnStatus() {
window.status = "안녕하세요....자바스크립트 입니다.";
}
function fnwatch() {
var now = new Date();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
document.f1.watch.value = "현재 시간은 " + hour + " 시" + min +
" 분 " + sec + " 초 입니다.";
// 자신을 호출, 재귀 호출
//gTime = setTimeout(fnwatch, 1);
}
var gTime;
function fnSetTimeOut() {
// 두번째 인자는 몇초인지
//gTime = setTimeout(fnwatch, 3);
// 인터벌은 자동으로 호출 함, 별도 재귀호출 필요 없음
gTime = setInterval(fnwatch, 1);
}
function fnStop() {
clearTimeout(gTime);
}
function fnSub() {
window.open("sub.html","","width=300,height=100");
}
</script>
</head>
<body>
<form name="f1">
<input type="button" value="팝업창 열기" onclick="fnOpen()" /><br /><br />
<span onmouseover="fnStatus()" onmouseout="window.status=''">
마우스를 올려놓아 보시오</span>
<input type="button" value="윈도우 닫기" onclick="self.close()" /><br /><br />
<input type="button" value="윈도우 닫기1" onclick="window.close()" /><br /><br />
<input type="text" name="watch" style="text-align: center" size="50" />
<input type="button" value="현재 시간" onclick="fnSetTimeOut()"/>
<input type="button" value="중지" onclick="fnStop()"/><br /><br />
<br /><br />
<hr/>
<input type="button" value="sub window호출" onclick="fnSub()"/>
<input type="button" value="address" style="background-color: yellow"/>
<br /><br />
</form>
</body>
</html>
-----------------------------------
3-8
/JavascriptExam/WebContent/제4강 객체/sub.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
function fnAddress() {
var addr = document.f1.addr.value;
opener.document.f1.address.value=addr;
self.close();
}
</script>
</head>
<body>
<form name="f1">
주소 입력 : <input type="text" name="addr" />
<input type="button" value="확인" onclick="fnAddress()" />
</form>
</body>
</html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
function fnAddress() {
var addr = document.f1.addr.value;
opener.document.f1.address.value=addr;
self.close();
}
</script>
</head>
<body>
<form name="f1">
주소 입력 : <input type="text" name="addr" />
<input type="button" value="확인" onclick="fnAddress()" />
</form>
</body>
</html>
-----------------------------------
3-9
/JavascriptExam/WebContent/제4강 객체/09-navigator.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script>
with(document){
write("codeName : "+navigator.appCodeName + "<br/>");
write("appName : "+navigator.appName + "<br/>");
write("version : "+navigator.appVersion + "<br/>");
write("UserAgent : "+navigator.userAgent+ "<br/>");
write("platform : "+navigator.platform + "<br/>");
write("설치된 플러그인 갯수 : "+navigator.plugins.length + "<br/>");
if(navigator.javaEnabled())
write("자바 사용 가능");
else
write("자바 불사용 가능");
} </script>
</body>
</html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script>
with(document){
write("codeName : "+navigator.appCodeName + "<br/>");
write("appName : "+navigator.appName + "<br/>");
write("version : "+navigator.appVersion + "<br/>");
write("UserAgent : "+navigator.userAgent+ "<br/>");
write("platform : "+navigator.platform + "<br/>");
write("설치된 플러그인 갯수 : "+navigator.plugins.length + "<br/>");
if(navigator.javaEnabled())
write("자바 사용 가능");
else
write("자바 불사용 가능");
} </script>
</body>
</html>
-----------------------------------
3-10
/JavascriptExam/WebContent/제4강 객체/10-image.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<img src="../images/Tulips.jpg" name="img1" width="300" height="400" />
<img src="../images/Desert.jpg" name="img2" width="300" height="400" />
<script>
with (document) {
write('이름 : ' + img1.name + "<br/>");
write("이름 : " + document.images[0].name + "<br/>");
write("폭 : " + images[0].width + "<br/>");
write("높이 : " + images[0].hegiht + "<br/>");
images[0].width = 500;
write("폭 : " + images[0].width + "<br/>");
write("이미지 갯수 : " + images.length + "<br/>");
}
</script>
</body>
</html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<img src="../images/Tulips.jpg" name="img1" width="300" height="400" />
<img src="../images/Desert.jpg" name="img2" width="300" height="400" />
<script>
with (document) {
write('이름 : ' + img1.name + "<br/>");
write("이름 : " + document.images[0].name + "<br/>");
write("폭 : " + images[0].width + "<br/>");
write("높이 : " + images[0].hegiht + "<br/>");
images[0].width = 500;
write("폭 : " + images[0].width + "<br/>");
write("이미지 갯수 : " + images.length + "<br/>");
}
</script>
</body>
</html>
-----------------------------------
3-11
/JavascriptExam/WebContent/제4강 객체/폼 객체/1-form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
function fnFirst() {
//alert(document.forms[0].elements[0].value);
//alert(document.forms[0].elements[1].value);
//alert(document.forms[0].elements[2].value);
//alert(document.f1.id.value);
//alert(document.f1.pw.value);
//alert(document.f1.email.value);
//alert(document.forms[1].gender.value);
//alert(document.f2.gender.value);
//alert(document.f2.elements[2].value);
//alert(document.getElementById("address").value);
//alert(document.getElementById("gender").value);
//var gender = document.forms[1].gender;
var gender = document.getElementsByName("gender");
for (var i = 0; i < gender.length; i++) {
if(gender[i].checked)
alert(gender[i].value);
}
}
</script>
</head>
<body>
<form name="f1">
ID : <input type="text" name="id"/><br/><br/>
PW : <input type="password" name="pw"/><br/><br/>
EMAIL : <input type="text" name="email"/><br/><br/>
ID : <input type="button" value="확인" onclick="fnFirst()" /><br/><br/>
</form>
<hr/>
<form name="f2">
성별 : <input type="radio" name="gender" value="male" id="gender"/>남자
<input type="radio" name="gender" value="female" id="gender"/>여자<br/><br/>
하고싶은 말 <br/>
<textarea rows="5" cols="40" name="say"></textarea>
<input type="button" value="확인" onclick="fnFirst()" /><br/><br/>
</form>
<input type="text" value="address" id="address"/><br/><br/>
</body>
</html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
function fnFirst() {
//alert(document.forms[0].elements[0].value);
//alert(document.forms[0].elements[1].value);
//alert(document.forms[0].elements[2].value);
//alert(document.f1.id.value);
//alert(document.f1.pw.value);
//alert(document.f1.email.value);
//alert(document.forms[1].gender.value);
//alert(document.f2.gender.value);
//alert(document.f2.elements[2].value);
//alert(document.getElementById("address").value);
//alert(document.getElementById("gender").value);
//var gender = document.forms[1].gender;
var gender = document.getElementsByName("gender");
for (var i = 0; i < gender.length; i++) {
if(gender[i].checked)
alert(gender[i].value);
}
}
</script>
</head>
<body>
<form name="f1">
ID : <input type="text" name="id"/><br/><br/>
PW : <input type="password" name="pw"/><br/><br/>
EMAIL : <input type="text" name="email"/><br/><br/>
ID : <input type="button" value="확인" onclick="fnFirst()" /><br/><br/>
</form>
<hr/>
<form name="f2">
성별 : <input type="radio" name="gender" value="male" id="gender"/>남자
<input type="radio" name="gender" value="female" id="gender"/>여자<br/><br/>
하고싶은 말 <br/>
<textarea rows="5" cols="40" name="say"></textarea>
<input type="button" value="확인" onclick="fnFirst()" /><br/><br/>
</form>
<input type="text" value="address" id="address"/><br/><br/>
</body>
</html>
-----------------------------------
3-12
-----------------------------------
3-13
-----------------------------------
3-14
-----------------------------------
3-15
-----------------------------------
3-16
-----------------------------------
3-17
-----------------------------------
3-18
-----------------------------------
3-19
-----------------------------------
3-20
-----------------------------------
###################################4. 과제
-----------------------------------
4-1
-----------------------------------
4-2
-----------------------------------
4-3
-----------------------------------
4-4
-----------------------------------
4-5
-----------------------------------
###################################
5. 과제 해결
-----------------------------------
5. 과제 해결
-----------------------------------
5-1
-----------------------------------
5-2
-----------------------------------
5-3
-----------------------------------
5-4
-----------------------------------
###################################
6. 기타
----------------------------------- -----------------------------------