'javascript' 카테고리의 글 목록 (3 Page)

javascript

Object.extend 상속. 2015.05.10
Class.create() 2015.05.10
자바/EJB]EL, JSTL(JSP Standard TAG Library)의 사용, EL and JSTL의 사용 1 | EJB WEBLOGIC 2015.05.10
JSON 2015.05.10

Object.extend 상속.

2015. 5. 10. 21:55

extend() 메소드는 두번째 인자로 지정한 오브젝트의 모든 것을 첫 번째 인자의 오브젝트에 복사한다.
첫번째와 두번째 오브젝트에 같은 이름의 프로퍼티가 있다면 오버라이드가 된다.

prototype.js 에 구현된 Object.extend() 의 소스를 살펴보면 아래와 같다.

Object.extend = function(destination, source) {
for (var property in source)
destination[property] = source[property];
return destination;
};

for (var property in source)
destination[property] = source[property];
for(in) 루프를 source 오브젝트의 프로퍼티 수만큼 반복한다. 루프가 반복될 때마다 property 변수에 source 오브젝트의
프로퍼티 이름이 순차적으로

설정되며, source 오브젝트의 프로퍼티 값을 destination[property] 으로 복사하게 된다.
프로퍼티를 복사한다는 것은 곧 프로퍼티가 가지고 있는 모든 걸 복사한다는 의미이다.

Object.extend() 메소드는 여러 오브젝트에서 상속받을 수 있으며, 상속을 받았던 오브젝트로 다시 상속을 해줄 수 있다.

실제 사용 예]

//객체를 생성하여 확장하기
var person = {name: 'utsman'};
var detail = {address: 'seoul'};

Object.extend(person, detail);

alert('name=' + person.name);   // result====>> name=utsman
alert('address=' + person.address); // result====>>address=seoul

//내장 객체 확장하기
Object.extend(
    String.prototype, {
          escapeQuot: function () {
                return this.gsub('"', '"').gsub("'", ''');
          }
    }

);

var str = '그가 말했다 "누구냐? 넌"';
alert(str.escapeQuot()); // result====>> 그가 말했다 "누구냐? 넌"

Class.create()

2015. 5. 10. 21:55

Prototype.js 에서 내부적으로 처리되는 소스 입니다.

var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}

Prototype 객체 생성 방식
var Animal = Class.create();
var snake = new Animal();

기존 방식으로 보면

function Animal() {
this.initialize = function() {
}

this.initialize();
}
var snake = new Animal();

실제 사용 예제 입니다. Prototype에서 이렇게 쓰는 의미를 찾는다면..
자주 사용하게될 소스를 미리 정의해서 쉽게 사용하자는 것, JSON 스타일의 코딩을 한다는 것.. 뭐 이정도?

기술적으로 해석하면 오브젝트가 생성되면서 자동적으로 initialize 함수를 실행(오브젝트의 초기 설정)을 하도록 처리되어진 기능

퀴즈 typeof Animal = '?' 물음표에 들어갈 내용은 무엇일까요?
퀴즈 alert(Animal

) 은 무엇이 출력될까요?

var snake = new Animal("Ringneck", "hissssssssss");

snake.speak(); // -> alerts "Ringneck says: hissssssssss!"

var Dog = Class.create();
Dog.prototype = Object.extend(new Animal(), {
initialize: function(name) {
this.name = name;
this.sound = "woof";
}
});

자바/EJB]EL, JSTL(JSP Standard TAG Library)의 사용, EL and JSTL의 사용 1 | EJB WEBLOGIC

2015. 5. 10. 21:55

자바/EJB]-[31] EL, JSTL(JSP Standard TAG Library)의 사용, EL and JSTL의 사용 1

EJB WEBLOGIC

[31] EL, JSTL(JSP Standard TAG Library)의 사용, EL and JSTL의 사용 1

▩ 표현 언어(Expression Language)
   - JSTL1.0규약에 소개되었고 JSP2.0에 새롭게 추가되었습니다. (JSP 2.0은 JSTL 1.1버전에 소개된 내용을 기준으로 제공합니다.)
   - 표현식(<%%>)보다 사용법이 간단합니다.
   - 실습을 위해서 Tomcat 5.0.X이상, Resin 3.0.X이상 설치 하세요.
   - JSP의 4가지 기본 객체가 제공하는 영역의 속성 사용
   - 집합 객체 지원, 수치, 관계, 논리 연산 제공, 자바 클래스 메소드 호출 기능 제공, 표현 언어만의 기본 객체 제공
   - 표현 방법 ${expr}
   - 값이 없는 경우 "null"값을 출력하지 않습니다.
   - EL은 모두 11개의 객체를 지원합니다.
   - 기본적으로 자바의 문법이 적용됩니다.
   - 만약 EL이 인식이 안되면 페이지 상단에 <%@ page isELIgnored="false"%> 를 선언해야 EL을 사용할 수 있습니다.
     <%@ page isELIgnored="false" contentType = "text/html; charset=euc-kr" %>

1. EL객체의 사용예
   - 실습용 폴더
     . D:/tomcat-5.0.19/webapps/ejb1000/el
     . D:/tomcat-5.0.19/webapps/ejb1000/WEB-INF
     . D:/tomcat-5.0.19/webapps/ejb1000/WEB-INF/classes

- http://127.0.0.1:8081/ejb1000/el/useELObject.jsp
- http://127.0.0.1:8081/ejb1000/el/useELObject.jsp?code=A0001

>>>>> useELObject.jsp
<%@ page isELIgnored="false" contentType = "text/html; charset=euc-kr" %>
<%
//name 인수에 "왕눈이"를 저장
request.setAttribute("name", "왕눈이");
%>
<html>
<head><title>EL Object</title></head>
<body>
<h1>
요청 URI: ${pageContext.request.requestURI} <br>
request의 name 속성: ${requestScope.name} <br>
code 파라미터: ${param.code} <br>
</h1>
</body>
</html>

▩ JSTL(JSP Standard TAG Library)의 사용
   - JSTL은 계속적으로 사용이 증가되고 있는 추세입니다.
   - 많이 사용되는 사용자 정의 태그를 모아서 JSTL이라는 규약이 만들어졌습니다.
   - 스크립틀릿, 표현식을 사용하는 것보다 훨씬 간결한 문법 구조를 지원합니다.

- JSTL은 5가지의 태그를 지원합니다.

     LIB     기능                                 접두어 관련 URL
     -------------------------------------------------------------------------------------
     Core    변수지원, 흐름 제어, URL 처리        c      http://java.sun.com/jsp/jstl/core
     XML     XML 코어, 흐름 제어, XML 변환        x      http://java.sun.com/jsp/jstl/xml
     국제화 지역, 메시지 형식, 숫자 및 날짜 형식 fmt    http://java.sun.com/jsp/jstl/fmt
     DB      SQL                                  sql    http://java.sun.com/jsp/jstl/sql
     함수    컬렉션 처리, String 처리             fn     http://java.sun.com/jsp/jstl/functions

1. 설치
- http://jakarta.apache.org/taglibs/doc/standard-doc/intro.html
. Standard Taglib nightly snapshot에서 "jakarta-taglibs-standard-20060214.zip"파일을 다운합니다.

   - 압축을 해제한 후 "C:/JAVA/jstl/jakarta-taglibs-standard-20050804/jakarta-taglibs/standard/lib"폴더안에 있는
     'jstl.jar', 'standard.jar'파일을 "D:/tomcat-5.0.19/common/lib" 또는 "C:/tomcat-5.0.19/webapps/ejb1830/WEB-INF/lib"폴더로
     복사합니다.
     . Resin은 'C:/ojt/resin-3.0.14/lib' 또는 "F:/resin-3.0.14/webapps/ejb1830/WEB-INF/classes"를 지정합니다.

- 실습용 폴더
. D:/tomcat-5.0.19/webapps/ejb1000/jstl

▩ Core Tag

기능        태그명     기능설명
---------------------------------------------------------------------------
변수 지원   set        jsp에서 사용될 변수를 설정합니다.
            remove     설정한 변수를 제거합니다.
---------------------------------------------------------------------------
흐름 제어   if         조건에 따라 내부 코드를 수행합니다.
            choose     다중 조건을 처리할 때 사용됩니다.
            forEach    Collection의 각 항목을 처리할 때 사용합니다.
            forTokens 구분자로 분리된 각각의 토큰을 처리할 때 사용합니다.
---------------------------------------------------------------------------
URL 처리    import     URL을 사용하여 다른 자원의 결과를 삽입합니다.
            redirect   지정한 경로로 이동합니다.
            url        URL을 재 작성합니다.
---------------------------------------------------------------------------
기타 태그   catch      예외 처리에 사용합니다.
            out        jspWriter에 내용을 알맞게 처리한 후 출력합니다.
---------------------------------------------------------------------------

▩ EL & JSTL의 사용 - Core Tag: 변수 지원 태그의 사용

1. 변수지원 태그, http://127.0.0.1:8081/ejb1000/jstl/setTag.jsp
<%@ page isELIgnored="false" contentType = "text/html; charset=euc-kr" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:set var="num1" value="${20}" />

<c:set var="num2">
10.5
</c:set>

<%
java.util.Date dt = new java.util.Date();
%>
<c:set var="today" value="<%=dt.toLocaleString()%>" />

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>set 태그와 remove 태그</title>
</head>
<body>
<H2>
변수 num1 = ${num1} <br>
변수 num2 = ${num2} <br>
num1 + num2 = ${num1 + num2} <br>
오늘은 ${today} 입니다.

<c:remove var="num1" />

2. Map 객체의 사용, http://127.0.0.1:8081/ejb1830/jstl/setTag2.jsp
<%@ page isELIgnored="false" contentType = "text/html; charset=euc-kr" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="map" value="<%= new java.util.HashMap() %>" />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>set 태그와 remove 태그</title>
</head>
<body>
<c:set target="${map}" property="name" value="왕눈이" />
<c:set target="${map}" property="aromi" value="아로미" />
<h2>
변수 map에 저장된 name 값: ${map.name}<br>
변수 map에 저장된 name 값: ${map.aromi}
</h2>
</body>
</html>

▩ EL & JSTL의 사용 - Core Tag: 흐름 제어 태그의 사용

1. if 흐름제어 태그의 사용
   - http://127.0.0.1:8081/ejb1830/jstl/ifTag.jsp
   - http://127.0.0.1:8081/ejb1830/jstl/ifTag.jsp?name=tree
   - http://127.0.0.1:8081/ejb1830/jstl/ifTag.jsp?name=tree&age=25
   - test는 변경할 수없습니다.
   - 한글은 비교가 안됩니다.

>>>>> ifTag.jsp
<%@ page isELIgnored="false" contentType = "text/html; charset=euc-kr" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>if 태그</title></head>
<body>
<c:if test="true">
무조건 수행<br>
</c:if>

<c:if test="${param.name == 'tree'}">
name 파라미터의 값이 ${param.name} 입니다.<br>
</c:if>

<c:if test="${18 < param.age}">
당신의 나이는 18세 이상입니다.
</c:if>
</body>
</html>

2. choose Tag
   - when tag는 조건이 true이면 실행합니다.
   - http://127.0.0.1:8081/ejb1830/jstl/chooseTag.jsp
   - http://127.0.0.1:8081/ejb1830/jstl/chooseTag.jsp?name=tree
   - http://127.0.0.1:8081/ejb1830/jstl/chooseTag.jsp?age=25

<%@ page isELIgnored="false" contentType = "text/html; charset=euc-kr" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>choose 태그</title></head>
<body>

<ul>
<c:choose>
<c:when test="${param.name == 'tree'}" >
    <li> 당신의 이름은 ${param.name} 입니다.
</c:when>
<c:when test="${param.age > 18}" >
    <li> 당신은 18세 이상입니다.
</c:when>
<c:otherwise>
    <li> 당신은 'bk'가 아니고 18세 이상이 아닙니다.
</c:otherwise>
</c:choose>
</ul>

</body>
</html>

3. forEach 태그
- Collection, Map에 저장되어 있는 값에 순차적으로 접근시에 사용합니다.
- http://127.0.0.1:8081/ejb1830/jstl/forEachTag.jsp

<%@ page isELIgnored="false" contentType = "text/html; charset=euc-kr" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    java.util.HashMap mapData = new java.util.HashMap();
    mapData.put("name", "아로미");
    mapData.put("today", new java.util.Date());
%>
<c:set var="intArray" value="<%= new int[] {1,2,3,4,5} %>" />
<c:set var="map" value="<%= mapData %>" />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>forEach 태그</title></head>
<body>
<h4>1부터 100까지 홀수의 합</h4>
<c:set var="sum" value="0" />
<c:forEach var="i" begin="1" end="100" step="2">
<c:set var="sum" value="${sum + i}" />
</c:forEach>
결과 = ${sum}

<c:forEach var="i" items="${intArray}" begin="2" end="4">
[${i}]
</c:forEach>

<c:forEach var="i" items="${map}">
${i.key} = ${i.value}<br>
</c:forEach>

</body>
</html>

4. forTokens Tag
- http://127.0.0.1:8081/ejb1830/jstl/forTokensTag.jsp

<%@ page contentType = "text/html; charset=euc-kr" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head><title>forTokens 태그</title></head>
<body>

콤마와 점을 구분자로 사용:<br>
<c:forTokens var="token"
items="빨강색,주황색.노란색.초록색,파랑색,남색.보라색"
delims=",.">
${token}
</c:forTokens>

</body>
</html>

JSON

2015. 5. 10. 21:55

object: {}
{ members }

members: pair
pair , members
pair: string : value
array: []
[ elements ]
elements: value
value , elements
value: string
number
object
array
true
false
null

string: ""
" chars "
chars: char
char chars
char: any-Unicode-character-
except-"-or-\-or-
control-character
\"
\\
\/
\b
\f
\n
\r
\t
\u four-hex-digits
number: int
int frac
int exp
int frac exp
int: digit
digit1-9 digits
- digit
- digit1-9 digits
frac: . digits
exp: e digits
digits: digit
digit digits
e: e
e+
e-
E
E+
E-

JSON (JavaScript Object Notation)은 경량의 DATA-교환 형식이다. 이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다. JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999의 일부에 토대를 두고 있다. JSON은 완벽하게 언어로 부터 독립적이지만 C-family 언어 - C, C++, C#, Java, JavaScript, Perl, Python 그외 다수 - 의 프로그래머들에게 친숙한 관습을 사용하는 텍스트 형식이다. 이러한 속성들이 JSON을 이상적인 DATA-교환 언어로 만들고 있다.

JSON은 두개의 구조를 기본으로 두고 있다:

name/value 형태의 쌍으로 collection 타입. 다양한 언어들에서, 이는 object, record, struct(구조체), dictionary, hash table, 키가 있는 list, 또는 연상배열로서 실현 되었다.
값들의 순서화된 리스트. 대부분의 언어들에서, 이는 array, vector, list, 또는 sequence로서 실현 되었다.

이러한 것들은 보편적인 DATA 구조이다. 사실상 모든 현대의 프로그래밍 언어들은 어떠한 형태로든 이것들을 지원한다. 프로그래밍 언어들을 이용하여 호환성 있는 DATA 형식이 이러한 구조들을 근간에 두고 있는 것은 당연하다.

JSON 에서, 이러한 형식들을 가져간다:

object는 name/value 쌍들의 비순서화된 SET이다. object는 { (좌 중괄호)로 시작하고 } (우 중괄호)로 끝내어 표현한다. 각 name 뒤에 : (colon)을 붙이고 , (comma)로 name/value 쌍들 간을 구분한다.

array은 값들의 순서화된 collection 이다. array는 [ (left bracket)로 시작해서 ] (right bracket)로 끝내어 표현한다. , (comma)로 array의 값들을 구분한다.

value는 큰따옴표안에 string, number ,true ,false , null, object ,array이 올수 있다. 이러한 구조들을 포함한다.

string은 큰따옴표안에 둘러 싸인 zero 이상 Unicode 문자들의 조합이며, 쌍다옴표안에 감싸지며,backslash escape가 적용된다. 하나의 문자(character)도 하나의 문자열(character string)로서 표현된다. string은 C 또는 Java 문자열 처럼 매우 많이 비슷하다.