오픈프레임워크

OpenFrameWork

오픈프레임워크_Day33

px 2015. 4. 29. 15:54

### : 목차 구분 기호
--- : 목차 내에 항목 구분 기호
@@@ : 태그 용도

,,, : 같은 항목 내에 구분 기호

목차
1. 이론 및 정보
2. 설정 및 그 밖에
3. 소스코드 또는 실습
4. 과제

###################################
1. 이론 및 정보
-----------------------------------

* HTML은 정적인 언어, 동적인 언어는? JAVASCRIPT

-----------------------------------

*. Script Language

- 무언가를 도와주기 위한 언어

ex) javascript, vbscript, jscript...

-----------------------------------

**. JavaScript

HTML5에서 자바스크립트가 매우 중요한 역할을 하게 되었음

자바스크립트를 사용할 수 있는 다양한 라이브러리

Angular.js, node.js, jQuery, ...

-----------------------------------

***. JAVASCRIPT : 객체 기반 언어

1. 사용법

(1) inline style

- 이벤트 핸들러용(태그안에 사용)

(2) internal style

(3) external style(.js)

2. 자바스크립트 맛보기

(1) document.write()

(2) alert()

(3) 이벤트

- onblur

- onclick

- onfocus

- onmouseover

- onmouseout

- onselect

- onsubmit

- onreset

- onunload

- onload

- onabort

- onerror

- ondbclick

- ondragdrop

- onkeydown

- onkeypress

- onkeyup

- onkeymousedown

- onkeymousemove

- onmouseup

- onmove

- onresize

3. 변수, 연산자

(1) 변수 선언 방법

1) 암시적 선언

i = 10;

2) 명시적 선언

var i;

i = 10;

i = 'a';

i = 3.14;

i = 다른객체

(2) === 연산자 (값과 형식이 같은지 비교, 많이 쓰이지는 않음)

A === B

4. 함수(메서드)

(1) 문법

function 함수명(...){

함수내용;

...

[return [값];]

}

(2) 변수

1)지역변수 : 함수 안에서 var를 통한 선언

2)전역변수

(3) 내장 함수

1) 메시지 함수 : alert(), confirm(), prompt()

2) eval() : 작성된 문자열을 자바스크립트 코드로 검증 및 교정, 유효하게 한다

3) parseInt(), parseFloat()

4) String(), Number()

5) isNaN(), isFinite() : 숫자가 아닌 값은 false, 숫자는 true

6) escape(), unescape()

알파벳과 숫자 및 * @ - _ + . / 를 제외한 문자를 모두 16진수 문자로 바꾸어 주거나 - escape

다시 원상태로 복구 해주는 함수 - unescape

URL이나 쿠키문자열과의 충돌을 피하기 위해 사용함.

...

5. 객체

(1) 내장 객체

1) Array 객체

- 1차원 배열만 지원

myarray = new Array(10);

myarray = new Array();

myarray[0] = 값;

...

- 2차원 배열 사용시

myarr1 = new Array(10);

myarr2 = new Array(10);

myarr3 = new Array(10);

myarr = new Array(myarr1, myarr2, myarr3);

- 속성과 메서드

length

concat(),join(),reverse(),sort,slice(), ...

2) Date 객체

getFullYear(), getMonth(), getDate(), getDay(),

getHours(), getMinutes(), getSeconds(), getTime(), ...

setter 메서드도 존재

@@@34일차 시작

3) Math 객체

4) String 객체

- anchor(), bold(), fontcolor(), fontsize(), italics(), link(),

toLowerCase(), toUpperCase(), ...

*. 에디터 기능 활용

- 네이버 스마트 에디터

- 다음 에디터

- ck 에디터

...

- charAt(), concat(), indexOf(), lastindexOf(), split(), substring(),

substr(), ...

5) Screen 객체

- availHeight, availWidth, height, width

- pixelDepth(픽셀당 비트 수), colorDepth(사용가능 색상수)

6) 객체와 함께 쓰면 참 좋은 문법

- for ~ in

- with

(2) 브라우저 객체

window

parent

frame

self

top

document

link

anchor

image

applet

form

text

textarea

checkbox

radio

select

button

reset

password

layer

area

location

history

navigator

------------------------------------------------------

1) window(생략가능)

open(),status,close(),moveTo(),resizeTo(),resizeBy(),

scrollBy(),scrollTo(),alert(),confirm(),prompt(),print(),focus(),

blur(),setTimeout(),setInterval(),clearTimeout(),closed,

defaultStatus,opener,name,...

2) location

- 속성

hash,host,hostname,href,pathname,port,protocol,

search (대부분 href만 씀)

- 메서드

reload(), replace()

- 사용 방법

location.href="http://서버명/...";

location.href="특정 html";

location.reload(); //새로고침

3) history

history.back() - 이전 페이지로 이동

4) navigator(웹 브라우저 정보)

- 속성

appCodeName, appName, appVersion, userAgent, platform

- 메서드

JavaEnabled() (자바 가능 여부)

5) image - HTML로 넣어 놓으면 자바스크립트에 등록이 되서 쓸 수 있음

- 속성

border, complete, height, width, hspace, vspace,

length, lowsrc, name, src

- 메서드

onabort()- 사진 받다가 중지, onerror()- 사진 받다가 에러, onload()-사진을 처음 받을 때

(3) 사용자 정의 객체

@@@34일차 끝

-----------------------------------

<script type="text/javascript">

위와 같이 쓰는데

<script>

공식적으로 자바스크립트라 안적어도 됨

-----------------------------------

* window 객체는 java의 object같은 역할이고 생략가능

-----------------------------------

* 자바스크립트에서 '', "" 구분안함

<body onload="document.write('여기는 body<br/>');alert('body라니까');">

여기서는 홑을 쓴 이유는 짝을 맞추기 위해서임 큰 의미 없음

아래와 같이 홑,쌍 짝만 맞으면 됨

<body onload='document.write("여기는 body<br/>");alert("body라니까");'>

-----------------------------------

<body onload="document.write('여기는 body<br/>');alert('body라니까');">
<input type="button" value="버튼"
onclick="alert('난 버튼이야')"/>
</body>

에서 onload에 document.write가 body 전체에 적용이 되서 아래 button 이 안뜸...

-----------------------------------

* 인터프리터(Interpretered) 언어 -> html,javascript... 한줄씩 컴파일?

-----------------------------------

* 우선순위

자바스크립트가 먼저, 그 다음 html

위 코드에서 func1보다 func3가 먼저 실행 된다는 점!

-----------------------------------

* <a href="#" onclick="func2(10, 20)">func2 호출</a>

에서 #은 링크 기능을 막겠다는 의미

-----------------------------------

* 특별한 일이 아니라면 지역변수를 사용하라

함수 안에서 변수 앞에 var로 다시 명시적 선언을 하면 지역변수가 된다

-----------------------------------

* 자바스크립트 디버깅

크롬 - F12

IE - F12 디버깅 가능

-----------------------------------

* 자바스크립트가 어떻게 HTML에 접근 하는가?

DOM 방식

HTML을 하나의 Document처럼 인식해서 접근

document는 body를 가리킴

-----------------------------------

* NaN => Not A Number

-----------------------------------

* 자바스크립트 문법이 자바와 교묘하게 다른 부분이 있으니 확실하게 구분을 해야한다

-----------------------------------

* onblur는 해당 태그에서 포커스가 뺏길때 발생하는 이벤트

-----------------------------------

###################################
2. 설정 및 그 밖에
-----------------------------------

/JavascriptExam/WebContent/js/external.js

만들 때 아래와 같이 만듬

-----------------------------------

* javascript는 document가 없으니 정리를 잘 해 놓아야 함

-----------------------------------

-----------------------------------
###################################
3. 소스코드 또는 실습
-----------------------------------

3-1

/JavascriptExam/WebContent/제1강 자바스크립트 사용법/1-internal.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
     document.write("head안에 선언된 자바스크립트입니다.<br/>");
     window.alert("head안에 선언된 메시지 박스입니다.");
</script>
</head>
<body>
<script>
     document.write("body안에 선언된 자바스크립트입니다.<br/>");
     window.alert("body안에 선언된 메시지 박스입니다.");
</script>
</body>
</html>

-----------------------------------

3-2

/JavascriptExam/WebContent/제1강 자바스크립트 사용법/2-inline.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body onload="alert('body라니까');">
<input type="button" value="버튼"
onclick="alert('난 버튼이야');document.write('여기는 body<br/>');"/>
</body>
</html>

-----------------------------------

3-3

/JavascriptExam/WebContent/제1강 자바스크립트 사용법/3-external.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript" src="../js/external.js"></script>
</head>
<body>
</body>
</html>

-----------------------------------

3-4

/JavascriptExam/WebContent/제2강 변수 및 연산자/1-변수.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
     i = 10;
     document.write((i + 10) + "<br/>");
     i = "나는 변수다";
     document.write(i + "<br/>");
     i = 3.14;
     document.write((i+3) + "<br/>");
     var j;
     j = '이것은 명시적인 변수선언';
     document.write(j + "<br/>");
</script>
</head>
<body>
</body>
</html>

-----------------------------------

3-5

/JavascriptExam/WebContent/제2강 변수 및 연산자/2-연산자.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
     var a = 20, b = '20', c;
     c = a == b;
     document.write(c+"<br/>");

     c = a === b;
     document.write(c+"<br/>");
</script>
</head>
<body>
</body>
</html>

-----------------------------------

3-6

/JavascriptExam/WebContent/제3강 함수/1-함수의 정의 및 호출.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
     function func1() {
          alert("첫번째 함수 입니다.");
     }
     function func2() {
          alert("두번째 함수 입니다.");
     }
     function func3() {
          alert("세번째 함수 입니다.");
     }
</script>
</head>
<body onload="func1();">
     <input type="button" value="버튼" onclick="func2();"/>
     <br/><br/>
     이번엔 아래에서 호출한다.
     <script>
          func3();
     </script>
</body>
</html>

-----------------------------------

3-7

/JavascriptExam/WebContent/제3강 함수/2-인자있는 함수.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
     function func1(param1) {
          alert("인자 값 : " + (param1 + 5));
     }
     function func2(p1,p2) {
          alert(p1+p2);
     }
     function func3(p1, p2, p3) {
          var hap = p1+p2+p3;
          return hap;
     }
</script>
</head>
<body>
     <input type="button" value="버튼1" onclick="func1(100)"/><br/>
     <input type="button" value="버튼2" onclick="func1('100')"/><br/>
     <input type="button" value="버튼3" onclick="func1('abc')"/><br/>
     <a href="#" onclick="func2(10, 20)">func2 호출</a>
     <span onclick="func2(10, '20')">func2호출</span>
     <input type="button" value="버튼4"
          onclick="alert('결과 : '+func3(2, 3, 4))"/>
</body>
</html>

-----------------------------------

3-8

/JavascriptExam/WebContent/제3강 함수/3-지역변수 전역변수.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
     var var1 = 10;
     function func1() {
          //전역 선언
          //var2 = 20;

          //지역 선언
          var var2 = 20;
          alert(var1+","+var2);
     }
     function func2() {
          alert(var1+","+var2);
     }
</script>
</head>
<body>
     <input type="button" value="func1 호출" onclick="func1()"/><br/>
     <input type="button" value="func2 호출" onclick="func2()"/><br/>
</body>
</html>

-----------------------------------

3-9

/JavascriptExam/WebContent/제3강 함수/4-내장함수1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
     function confirmTest(){
          var result = confirm("당신의 선택은?");
          if(result == true)
               alert("예를 선택하셨습니다.");
          else
               alert("아니오를 선택하셨습니다.");
     }
     function promptTest() {
          var result = prompt("당신의 이름을 입력해 주세요");
          alert("당신의 이름은 "+result+" 입니다");
     }
     function evalTest() {
          var var1="50+3*7";
          //document.write(var1 + "<br/>");
          document.write(eval(var1) + "<br/>");
     }
     function evalTest1() {
          alert(document.f.addr.value);
     }
     function evalTest2() {
          var var1 = "document.f.addr"+".value";
          alert(var1);
     }
     function evalTest3() {
          var var1 = "document.f.addr"+".value";
          alert(eval(var1));
     }
     function parseTest() {
          //alert("33"+"22");
          alert(parseInt("33")+parseInt("22"));
     }
     function parseTest1() {
          var var1 = "333abc", var2 = "3.14!";
          //alert(var1+", "+var2);

          //숫자 이외의 값을 버림
          alert(parseInt(var1)+", "+parseFloat(var2));

          //진법 전환
          alert(parseInt("33",8)+", "+parseInt("33",16));
     }
     function stringnumberTest() {
          alert(Number("10")+Number("100"));
          alert(String(10)+String(100));
     }
</script>
</head>
<body>
     <input type="button" value="confirm 테스트" onclick="confirmTest()"/><br/><br/>
     <input type="button" value="prompt 테스트" onclick="promptTest()"/><br/><br/>
     <input type="button" value="eval 테스트" onclick="evalTest()"/><br/><br/>
     <input type="button" value="eval 테스트1" onclick="evalTest1()"/><br/><br/>
     <input type="button" value="eval 테스트2" onclick="evalTest2()"/><br/><br/>
     <input type="button" value="eval 테스트3" onclick="evalTest3()"/><br/><br/>
     <form name="f">
          <input type="text" name="addr"/>
     </form><br/><br/>
     <input type="button" value="parse 테스트" onclick="parseTest()"/><br/><br/>
     <input type="button" value="parse 테스트1" onclick="parseTest1()"/><br/><br/>
     <input type="button" value="String, Number 테스트" onclick="stringnumberTest()"/><br/><br/>
</body>
</html>

-----------------------------------

3-10

/JavascriptExam/WebContent/제3강 함수/5-내장함수2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
     function isFiniteTest(){
          document.write("12345 : "+ isFinite(12345)+"<br/>");
          document.write("\"12345\" : "+ isFinite("12345")+"<br/>");
          document.write("12.345 : "+ isFinite(12.345)+"<br/>");
          document.write("5+6*7: "+ isFinite(5+6*7)+"<br/>");
          document.write("012345: "+ isFinite(012345)+"<br/>");
          document.write("우리나라 : "+ isFinite("우리나라")+"<br/>");
          document.write("korea : "+ isFinite("korea")+"<br/>");
          document.write("12345우리나라 : "+ isFinite("12345우리나라")+"<br/>");
     }

     function isNaNTest(){
          document.write("\"12345\" : "+ isNaN("12345")+"<br/>");//숫자로 인식
          document.write("12.345 : "+ isNaN(12.345)+"<br/>");
          document.write("우리나라 : "+ isNaN("우리나라")+"<br/>");
     }

     function escapeTest(){
          document.write("우리나라 : "+ escape("우리나라")+"<br/>");
          document.write("korea : "+ escape("korea")+"<br/>");
          document.write("#$%^ : "+ escape("#$%^ ")+"<br/>");
          document.write("12345 : "+ escape("12345")+"<br/>");
          document.write("*@-_+./ : "+ escape("*@-_+./")+"<br/>");
          document.write(unescape("%23%24%25%5E%20")+"<br/>");
          document.write(unescape("%uC6B0%uB9AC%uB098%uB77C")+"<br/>");
     }
</script>
</head>
<body>
     <input type="button" value="isFinite() 호출" onclick="isFiniteTest()"/><br/><br/>
     <input type="button" value="isNaNTest() 호출" onclick="isNaNTest()"/><br/><br/>
     <input type="button" value="escapeTest() 호출" onclick="escapeTest()"/><br/><br/>

</body>
</html>

-----------------------------------

3-11

/JavascriptExam/WebContent/제4강 객체/01-Array.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script>

     /*
     myarr = new Array();
     myarr[0] = "홍길동";
     myarr[1] = 3.14;
     myarr[2] = 12345;
     */
     /*
     myarr = new Array("홍길동",3.14,12345);
     for (var i = 0; i < myarr.length; i++) {
          document.write(myarr[i]+"<br/>");
     }
     */

     /*
     myarr1 = new Array(1, "홍길동","서울");
     myarr2 = new Array(2, "임꺽정","경기");
     myarr = new Array(myarr1,myarr2);
     document.write(myarr[0][0]+","+myarr[0][1]+"<br/>");
     document.write(myarr[1][0]+","+myarr[1][1]+"<br/>");
     */

     var myarr = new Array("홍길동","임꺽정","이수일","심순애");
     // join메서드가 하나로 합치는데 도와줌
     document.write(myarr.join()+"<br/>");
     document.write(myarr.join(" and ")+"<br/>");
     document.write(myarr.join(":")+"<br/><br/>");

     var myarr2 = myarr.reverse();
     for (var i = 0; i < myarr2.length; i++) {
          document.write(myarr2[i]+"<br/>");
     }
     document.write("<br/>");

     myarr2 = myarr.sort();
     //myarr2 = myarr.reverse();
     for (var i = 0; i < myarr2.length; i++) {
          document.write(myarr2[i]+"<br/>");
     }
     document.write("<br/>");

     myarr2 = myarr.slice(1,3);
     document.write(myarr2.join()+"<br/>");

     myarr2 = new Array("Korea","France","England","Brazil");
     myarr3 = myarr.concat(myarr2);
     document.write(myarr.join()+"<br/>");
     document.write(myarr2.join()+"<br/>");
     document.write(myarr3.join()+"<br/>");
</script>
</body>
</html>

-----------------------------------

3-12

/JavascriptExam/WebContent/제4강 객체/02-Date.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
     var today = new Date();
     document.write(today);

     var week = new Array("일","월","화","수","목","금","토");
     var day = week[today.getDay()];
     document.write("오늘은 " +day+"요일 입니다.<br/><br/>");

     function getAge(){
          var today = new Date();
          var year = today.getFullYear();
          var birth = document.f1.v_year.value;
          document.f1.v_age.value = year - birth + 1;
     }
</script>
</head>
<body>
<form name="f1">
     나이를 자동으로 계산하는 예제<br/><br/>
     출생년도 : <input type="text" name="v_year" onblur="getAge();"/><br/>
     나이 : <input type="text" name="v_age" readonly="readonly"/><br/>
</form>
</body>
</html>

###################################
4. 과제
-----------------------------------

4-1

-----------------------------------

4-2

-----------------------------------

4-3

-----------------------------------

4-4

-----------------------------------

4-5

-----------------------------------

###################################
5. 과제 해결
-----------------------------------

5-1

-----------------------------------

5-2

-----------------------------------

5-3

-----------------------------------

5-4

-----------------------------------

###################################

6. 기타

-----------------------------------

저작자표시 비영리 변경금지 (새창열림)