Proprietary AJAX toolkits: The other side of the coin

원문 : Proprietary AJAX toolkits: The other side of the coin
Solutions from JackBe, Tibco, and Backbase have more integration, built-in IDEs for your app-dev pleasure

요약
오픈 소스 AJAX 툴킷과 proprietary 툴킷 즉 유료 툴킷을 말하는듯..이 둘을 살짝 비교한 글인데, 이 글이 작성된지 1년이다 되가기 때문에 아직도 유효한 이야기 인지는 잘 모르겠지만 다음과 같이 면에서 유료 툴킷의 장점을 이야기 하고 있습니다.

1. First, the professional AJAX tools often come with built-in, drag-and-drop development environments.
유료 툴킷 : Tibco’s General Interface, JackBe
무료 툴킷 : Google, Microsoft Atlas

2. Integrated data formats unify the proprietary toolkits.
유료 툴킷 : Backbase
무료 툴킷 : Google

3. The proprietary toolkits also come with sophisticated debuggers.
유료 툴킷 : Backbase
뮤료 툴킷 :
Dojo, Yahoo, Google

즉 IDE, 일관된 데이터 형식, 디버깅 툴 면에서 유료 툴킷과 오픈 소스를 비교하고 있습니다. 라고 이야기를 하고 있군요. 지금은 1년이나 지났는데 오픈 소스도 많이 좋아지지 않았을까요.

자바스크립트 튜토리얼 정리 끝

참조 및 번역 http://www.w3schools.com/js/default.asp

자바스크립트는 웹에서 사용하는 스크립트 언어 입니다!

자바스크립트는 수만 개의 웹 페이지에서 디자인을 향상 시키고, 폼을 검증하고, 브라우저를 인식하고, 쿠키를 생성하는데 사용하고 있습니다.

자바스크립트는 인터넷에서 가장 유명한 스크립트 언어입니다.

자바스크립트는 배우기 쉬워요! 즐겨보세요!

JS Basic

JS HOME(Whiteship’s Note)
JS Introduction(Introduction to JavaScript)
JS How To(JavaScript How To …)
JS Where To(JavaScript Where To …)
JS Variables(JavaScript Variables)
JS If…Else(JavaScript If…Else와 Switch Statement)
JS Switch
JS Operators(JavaScript Operators)
JS Popup Boxes(JavaScript Popup Boxes)
JS Functions(JavaScript Functions)
JS For Loop(JavaScript For Loop와 While Loop)
JS While Loop
JS Break Loops
JS For…In
JS Events(JavaScript Events)
JS Try…Catch(JavaScript Try…Catch Statement)
JS Throw(JavaScript Throw Statement)
JS onerror(JavaScript The onerror Event)
JS Special Text(JavaScript Special Characters)
JS Guidelines(JavaScript Guidelines)

JS Objects

JS Objects Intro(JavaScript Objects Introduction)
JS String(avaScript String Object)
JS Date(JavaScript Date Object)
JS Array(JavaScript Array Object)
JS Boolean(JavaScript Boolean Object)
JS Math(JavaScript Math Object)
JS HTML DOM(JavaScript HTML DOM Objects)

JS Advanced

JS Browser(JavaScript Browser Detection)
JS Cookies(JavaScript Cookies)
JS Validation(JavaScript Form Validation)

JS Animation(JavaScript Animation)

JS Image Maps
JS Timing(JavaScript Timing Events)
JS Create Object(JavaScript Create Your Own Objects)
JS Summary

Basic 부분은 요약 하는 식으로 정리했으며
Object와 Advanced 부분은 거의 번역을 했습니다.

전부 살표보신 분들은 재미삼아 퀴즈도 보실 수 있습니다.
물론 다 보지 않고도 퀴즈만 볼 수도 있지요.ㅋ

사용자 삽입 이미지문제 난이도는 매우 쉬운데(20문제 푸는데 3분 10초면..그냥 찍기 수준입니다.ㅋㅋ).. 저는 두 문제를 틀려버렸어요;;

JavaScript Create Your Own Objects

참조 및 번역 : http://www.w3schools.com/js/js_objects.asp

자바스크립트 객체

본 튜토리얼 초기에 자바스크립에 내장되어 있는 객체들 String, Date, Array 기타 등등 같은 것들을 살펴봤습니다. 이런 내장된 객체에 더해서 여러분이 직접 객체를 만들 수 있습니다.

객체는 단지 속성과 메소드로 구성된 특별한 데이터의 종류 입니다.

예제로 생각해보자: person은 객체다. 속성은 객체와 관련있는 값들이다. person의 속성은 name, height, weight, age, skin tone, eye color, 기타 등등이 있다. 모든 person은 이러한 속성들을 가지고 이지만 그 들의 값은 person 마다 다르다. 객체는 메소드도 가지고 있다. 메소드는 객체가 수행할 수 있는 행위다. person의 메소드는 eat(), sleep(), work(), play() 기타 등등이다.

속성

객체의 속성에 접근하는 문법은 다음과 같다.
objName.propName

객체에 값을 추가함으로써 속성을 추가할 수 있다. personObj가 이미 존재 한다고 생각하고 속성 이름 firstname, lastname, age 그리고 eyecolor에 값을 줄 수 있다.

personObj.firstname=”John”
personObj.lastname=”Doe”
personObj.age=30
personObj.eyecolor=”blue”

document.write(personObj.firstname)

위의 코드는 다음과 같이 출력할 것이다.
John

메소드

객체는 메소드도 가지고 있다.

다음과 같은 문법으로 메소드를 호출 할 수 있다.
objName.methodName()

주의: 메소드에서 필요로 하는 파라미터를 괄호 안에 넣어 줄 수 있다.

persionObj 의 sleep() 메소드를 다음과 같이 호출 할 수 있다.

personObj.sleep()

객체 만들기

새로운 객체를 만드는 여러 방법이 있습니다.

1. 객체의 인스턴스를 직접 만들기

다음의 코드는 객체의 인스턴스를 만들고 4개의 속성을 추가합니다.

personObj=new Object()
personObj.firstname=”John”
personObj.lastname=”Doe”
personObj.age=50
personObj.eyecolor=”blue”

personObj에 메소드를 추가하는 것도 간단합니다. 다음의 코드는 eat()이라는 메소드를 personObj에 추가하고 있습니다

personObj.eat=eat

2. 객체의 탬플릿 만들기

탬플릿은 객체의 구조를 정의합니다.

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname
this.lastname=lastname
this.age=age
this.eyecolor=eyecolor
}

탬플릿은 단순한 함수라는 것에 주목하시기 바랍니다. 함수의 내부에서 this.속성명 과 같은 식으로 추가할 수 있습니다. “이런” 작업을 하는 이유는 한 번에 여러 개의 person 객체를 사용할 수 있기 때문입니다.

탬플릿을 만들고 나면, 새로운 객체를 다음과 같이 만들 수 있습니다.

myFather=new person(“John”,”Doe”,50,”blue”)
myMother=new person(“Sally”,”Rally”,48,”green”)

person 객체 몇몇 메소드를 추가할 수 도 있습니다. 이것도 역시 탬플릿 내부에서 합니다.

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname
this.lastname=lastname
this.age=age
this.eyecolor=eyecolor

this.newlastname=newlastname
}

메소드는 객체에 붙이는 단순한 함수 입니다. 다음에는 newlastname() 함수를 작성합니다.

function newlastname(new_lastname)
{
this.lastname=new_lastname
}

newlastname() 함수는 person의 새로운 last name을 person객체 대입합니다.
자바스크립트는 “this”를 사용함으로써 어떤 person을 다루고 있는지 알게 됩니다. 이제 다음과 같이 사용할 수 있습니다.
myMother.newlastname(“Doe”).

JavaScript Timing Events

참조 : http://www.w3schools.com/js/js_timing.asp

자바스크립트 타이밍 이벤트

자바스크립트를 사용해서, 특정 코드를 함수가 호출 됐을 때 즉시 호출하지 않고 일정 타임 후에 실행하도록 할 수 있습니다. 이것을 타이밍 이벤트라고 합니다.

자바스크립트로 타이밍을 다루는 것은 매우 간단합니다. 다음 두 개의 핵심 메소드를 사용하면 됩니다.
    * setTimeout() – 특정 코드를 특정 밀리초 후에 실행합니다.
    * clearTimeout() – setTimeout()을 취소합니다.

주의: setTimeout() 과 clearTimeout()은 둘 다 HTML DOM Window 객체의 메소드 입니다.

setTimeout()

문법
var t=setTimeout(“javascript statement”,milliseconds)

setTimeout() 메소드가 반환하는 값 – 위 문장에서 리턴 값은 t라는 변수에 저장됩니다. 만약 setTimeout()을 취소하고 싶을 때 이 변수명을 참조할 수 있습니다.

setTimeout()의 첫 번째 인자는 자바스크립트 문장입니다. 따라서 “alert(‘5 seconds!’)” 또는 “alertMsg()”같은 함수 호출이 될 수 있습니다.

두 번째 인자는 몇 밀리초 후에 첫 번쨰 인자에 있는 문장을 실행하길 원하느냐 입니다.

Note: There are 1000 milliseconds in one second.
주의: 1000 밀리초가 1초 입니다.

예제

아래의 예제는 버튼을 클릭하면 5초 후에 경고창이 뜨게 됩니다.
[#M_ more.. | less.. |
<html>
<head>
<script type=”text/javascript”>
function timedMsg()
{
var t=setTimeout(“alert(‘5 seconds!’)”,5000)
}
</script>
</head>

<body>
<form>
<input type=”button” value=”Display timed alertbox!”
onClick=”timedMsg()”>
</form>
</body>
</html>
_M#]
예제

타이머를 무한 루프 돌리려면, 함수가 자기 자신을 호출하도록 하면 됩니다. 아래의 예제에서 버튼을 클릭하면 필드 값이 0부터 시작하여 무한대로 증가하게 됩니다.
[#M_ more.. | less.. | <html>
<head>
<script type=”text/javascript”>
var c=0
var t
function timedCount()
{
document.getElementById(‘txt’).value=c
c=c+1
t=setTimeout(“timedCount()”,1000)
}
</script>
</head>

<body>
<form>
<input type=”button” value=”Start count!”
onClick=”timedCount()”>
<input type=”text” id=”txt”>
</form>
</body>

</html>_M#]
clearTimeout()

문법
clearTimeout(setTimeout_variable)

예제

아래의 예제는 위의 “무한 루프” 예제와 같습니다. 단 하나 차이는 “Stop Count!” 버튼을 클릭하여 멈출 수 있다는 것입니다.
[#M_ more.. | less.. |
<html>
<head>
<script type=”text/javascript”>
var c=0
var t

function timedCount()
{
document.getElementById(‘txt’).value=c
c=c+1
t=setTimeout(“timedCount()”,1000)
}

function stopCount()
{
clearTimeout(t)
}
</script>
</head>

<body>
<form>
<input type=”button” value=”Start count!”
onClick=”timedCount()”>
<input type=”text” id=”txt”>
<input type=”button” value=”Stop count!”
onClick=”stopCount()”>
</form>
</body>

</html>
_M#]

JavaScript Animation

출처 : http://www.w3schools.com/js/js_animation.asp

자바스크립트 애니메이션

자바스크립트를 사용하여 동적인 이미지를 만드는 것이 가능합니다.

그 트릭은 바로 서로 다른 이벤트 마다 다른 이미지로 변경하는 것입니다.

다음의 예제에서 우리는 웹 페이지의 링크 버튼으로 보이는 이미지를 추가할 것입니다. 그런 다음 onMounseOver 이벤트와 onMouseOut 이벤트를 사용하여 자바스크립트 함수를 호출하고 그 곳에서 이미지를 변경할 것입니다.

HTML 코드

HTML 코드는 다음과 같습니다.

<a href=”http://www.w3schools.com” target=”_blank”>
<img border=”0″ alt=”Visit W3Schools!”
src=”b_pink.gif” name=”b1″
onmouseOver=”mouseOver()”
onmouseOut=”mouseOut()” />
</a>

나중에 자바스크립트에서 참조할 수 있도록 이미지가 name 속성을 가지고 있는 것에 주목하기 바랍니다.

onMouseOver 이벤트는 브라우저에서 마우스가 이지미 위로 올라왔슴을 알려주고 브라우저가 이미지를 다른것도 바꾸는 함수를 호출하도록 합니다.

onMouseOut 이벤트는 브라우에서 마우스가 이미지 밖으로 나갔음을 알려주고, 다른 자바스크립트 함수를 실행합니다. 이 함수는 다시 원래의 이미지로 설정합니다.

자바스크립트 코드

이미지를 변경하는 자바스크립트 코드는 다음과 같습니다.

<script type=”text/javascript”>
function mouseOver()
{
document.b1.src =”b_blue.gif”
}
function mouseOut()
{
document.b1.src =”b_pink.gif”
}
</script>

mouseOver() 함수는 이미지를 “b_blue.gif”로 바꿉니다.
mouseOut() 함수는 이미지를 “b_pink.gif”로 바꿉니다.