Whiteship's Note


1장~6장 정리

AJAX/JavaScript : 2008.04.04 19:46


자바스크립트는 Unicode를 사용함.

대소문자를 가림. HTML은 대소문자를 안 가리는데..

공백 상관없음.

세미콜론 안 붙이면 알아서 붙인걸로 인식한다. 붙여주는게 좋음.

주석은 자바랑 같음.

변수명 규칙도 자바랑 같음.

세 가지 primitive 타입이 있음. number, string, boolean. 이 들의 Wrapper 클래스들 있다. AutoBoxing/unBoxing 해준다.

자바스크립트는 function도 Object. 따라서 메소드의 인자로 넘길 수도 있다.

Function 만들 때 Function Literal 형태로 만들 수 있다.
var square = function(x) { return x*x; }

Object 만들 때도 Literal 형태로 만들 수 있다.
var point = { x:2.3, y:-1.2 };

초기화 안 한 변수는 undefined.

변수를 선언한 위치에 따라 Scope이 결정되는데, local에서 var를 사용하지 않고 변수 선언하면 전역변수가 된다. 변수 선언은 항상 함수 맨 위에 하는 것이 좋고, var는 맨날 붙이는게 좋다.

==은 자바의 equals()랑 비슷하고, ===는 자바의 ==랑 비슷하다.

for/in 루프가 있군.

with라는게 있군.

'AJAX > JavaScript' 카테고리의 다른 글

1장~6장 정리  (0) 2008.04.04
자바스크립트 튜토리얼 정리 끝  (4) 2007.07.10
JavaScript Create Your Own Objects  (0) 2007.07.10
JavaScript Timing Events  (0) 2007.07.10
JavaScript Animation  (2) 2007.07.09
JavaScript Form Validation  (2) 2007.07.09
JavaScript Cookies  (0) 2007.07.09
JavaScript Browser Detection  (0) 2007.07.09
JavaScript HTML DOM Objects  (2) 2007.07.09
JavaScript Math Object  (0) 2007.07.09
JavaScript Boolean Object  (0) 2007.07.09
top


4. Ajax Application Examples

AJAX/18주 완성 : 2007.07.16 12:55


이번에는 AJAX 관련 서적에 있는 샘플 코드들을 실행시켜보는 것으로 이루어져있습니다. 따라서 PPT는 없고 실습과 숙제로 구성되어 있습니다.

실습
1. Foundation of AJAX 에 있는 샘플 코드 다운로드 & 실행하기

넷빈즈의 프로젝트 기반으로 만들어진 샘플 코드라서 이클립스에서 실행하려면 약간 불편합니다.
1. Eclipse에서 Dynamic Web Project 생성(이때 웹 기본 폴더를 WebContents 에서 web 으로 수정해 줍니다.)
사용자 삽입 이미지

사용자 삽입 이미지
2. 샘플 코드가 있는 곳에 가서 복사
사용자 삽입 이미지
3. 프로젝트에 붙여넣기
사용자 삽입 이미지
4. 그러면 패키지 경로가 이상해서 에러가 납니다.(패키지 경로 맨 앞에 붙는 java를 띄어냅니다.)
사용자 삽입 이미지
5. 마지막으로 Run on Server를 실행합니다.
사용자 삽입 이미지

숙제
"Pro AJAX and Java Frameworks" 책의 Chapter5 예제 코드를 실행하는 것이 숙제로 군요...
1. 샘플 코드 다운 & 압축 풀기
- 전송 속도가 100kb 정도 입니다. 다운로드 하는데 10분 정도 소요 됩니다.
2. 이 뒤부터는 위에서 설명한 방법대로 Eclipse 에서 NetBeans 기반의 프로젝트를 실행할 수 있습니다.
사용자 삽입 이미지


'AJAX > 18주 완성' 카테고리의 다른 글

4. Ajax Application Examples  (0) 2007.07.16
3. Ajax Frameworks and Toolkits  (0) 2007.07.12
2. JavaScript Basics  (0) 2007.07.09
1. Ajax Basics & Development Tools  (0) 2007.07.06
top


3. Ajax Frameworks and Toolkits

AJAX/18주 완성 : 2007.07.12 12:06


아흑.. 이번에도 선수 학습이 있군요.
Proprietary AJAX toolkits: The other side of the coin
Surveying open-source AJAX toolkits

두 개의 아티클을 읽은 다음에 PPT를 봐야겠습니다.
PDF: 1 slide per page

실습
Online lab document

숙제
Homework

사용자 삽입 이미지
와.. 엄청나게 다양한 AJAX 툴킷들이 있었구요. 이중에서 들어본건 Dojo, DWR, GWT.. 나머지는 첨들어 봅니다.
위에 나열된 각각의 기술 들 중에 특정 구현체 하나를 선택해서 실습해 보도록 되어 있습니다.
그리고 맨 마지막에는 어떤 경우에 무엇을 사용할지 설명하고 있습니다.


'AJAX > 18주 완성' 카테고리의 다른 글

4. Ajax Application Examples  (0) 2007.07.16
3. Ajax Frameworks and Toolkits  (0) 2007.07.12
2. JavaScript Basics  (0) 2007.07.09
1. Ajax Basics & Development Tools  (0) 2007.07.06
top


Proprietary AJAX toolkits: The other side of the coin

AJAX/article : 2007.07.11 12:09


원문 : 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년이나 지났는데 오픈 소스도 많이 좋아지지 않았을까요.


'AJAX > article' 카테고리의 다른 글

Proprietary AJAX toolkits: The other side of the coin  (0) 2007.07.11
top


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

AJAX/JavaScript : 2007.07.10 12:14


참조 및 번역 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초면..그냥 찍기 수준입니다.ㅋㅋ).. 저는 두 문제를 틀려버렸어요;;

'AJAX > JavaScript' 카테고리의 다른 글

1장~6장 정리  (0) 2008.04.04
자바스크립트 튜토리얼 정리 끝  (4) 2007.07.10
JavaScript Create Your Own Objects  (0) 2007.07.10
JavaScript Timing Events  (0) 2007.07.10
JavaScript Animation  (2) 2007.07.09
JavaScript Form Validation  (2) 2007.07.09
JavaScript Cookies  (0) 2007.07.09
JavaScript Browser Detection  (0) 2007.07.09
JavaScript HTML DOM Objects  (2) 2007.07.09
JavaScript Math Object  (0) 2007.07.09
JavaScript Boolean Object  (0) 2007.07.09
top


JavaScript Create Your Own Objects

AJAX/JavaScript : 2007.07.10 11:56


참조 및 번역 : 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").

'AJAX > JavaScript' 카테고리의 다른 글

1장~6장 정리  (0) 2008.04.04
자바스크립트 튜토리얼 정리 끝  (4) 2007.07.10
JavaScript Create Your Own Objects  (0) 2007.07.10
JavaScript Timing Events  (0) 2007.07.10
JavaScript Animation  (2) 2007.07.09
JavaScript Form Validation  (2) 2007.07.09
JavaScript Cookies  (0) 2007.07.09
JavaScript Browser Detection  (0) 2007.07.09
JavaScript HTML DOM Objects  (2) 2007.07.09
JavaScript Math Object  (0) 2007.07.09
JavaScript Boolean Object  (0) 2007.07.09
top


JavaScript Timing Events

AJAX/JavaScript : 2007.07.10 11:29


참조 : 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초 후에 경고창이 뜨게 됩니다.

예제

타이머를 무한 루프 돌리려면, 함수가 자기 자신을 호출하도록 하면 됩니다. 아래의 예제에서 버튼을 클릭하면 필드 값이 0부터 시작하여 무한대로 증가하게 됩니다.

clearTimeout()

문법
clearTimeout(setTimeout_variable)

예제

아래의 예제는 위의 "무한 루프" 예제와 같습니다. 단 하나 차이는 "Stop Count!" 버튼을 클릭하여 멈출 수 있다는 것입니다.



'AJAX > JavaScript' 카테고리의 다른 글

1장~6장 정리  (0) 2008.04.04
자바스크립트 튜토리얼 정리 끝  (4) 2007.07.10
JavaScript Create Your Own Objects  (0) 2007.07.10
JavaScript Timing Events  (0) 2007.07.10
JavaScript Animation  (2) 2007.07.09
JavaScript Form Validation  (2) 2007.07.09
JavaScript Cookies  (0) 2007.07.09
JavaScript Browser Detection  (0) 2007.07.09
JavaScript HTML DOM Objects  (2) 2007.07.09
JavaScript Math Object  (0) 2007.07.09
JavaScript Boolean Object  (0) 2007.07.09
top


JavaScript Animation

AJAX/JavaScript : 2007.07.09 18:03


출처 : 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"로 바꿉니다.

'AJAX > JavaScript' 카테고리의 다른 글

1장~6장 정리  (0) 2008.04.04
자바스크립트 튜토리얼 정리 끝  (4) 2007.07.10
JavaScript Create Your Own Objects  (0) 2007.07.10
JavaScript Timing Events  (0) 2007.07.10
JavaScript Animation  (2) 2007.07.09
JavaScript Form Validation  (2) 2007.07.09
JavaScript Cookies  (0) 2007.07.09
JavaScript Browser Detection  (0) 2007.07.09
JavaScript HTML DOM Objects  (2) 2007.07.09
JavaScript Math Object  (0) 2007.07.09
JavaScript Boolean Object  (0) 2007.07.09
top


JavaScript Form Validation

AJAX/JavaScript : 2007.07.09 17:52


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

자바스크립트 폼 검증

자바스크립트를 사용하여 HTML 폼에 입력된 데이터를 서버로 보내기 전에 검증할 수 있습니다.

폼 데이터는 일반적으로 자바스크립트를 사용하여 다음의 것들을 확인합니다.

    * 필수 속성을 빈 값으로 뒀는지?
    * 유효한 e-mail 주소를 입력했는가?
    * 유효한 날짜를 입력했는가?
    * 숫자를 입력해야할 곳에 문자를 입려하진 않았는지?

필수 속성 확인

아래의 함수는 입력 필드가 비어있는 상태가 아닌지 확인합니다. 만약에 비어있으면 경고 창에 메시지를 출력하고 false를 반환합니다. 만약에 값이 입력 됐으면 true를 반환합니다.

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false}
else {return true}
}
}

전체적인 스크립트는 다음과 같습니다.

E-mail 검증

아래의 함수는 일반적인 email 형식을 갖춘 문자열을 입력했는지 확인합니다.

이 말은 입력한 데이터가 반드시 @ 과 . 를 가지고 있는지 확인합니다. 그리고 @는 첫 번째 글자가 되면 안되고 마지막으로 . 은 @ 바로 앞에 위치해야 합니다.

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
  {alert(alerttxt);return false}
else {return true}
}
}


전체적인 코드는 다음과 같습니다.

'AJAX > JavaScript' 카테고리의 다른 글

1장~6장 정리  (0) 2008.04.04
자바스크립트 튜토리얼 정리 끝  (4) 2007.07.10
JavaScript Create Your Own Objects  (0) 2007.07.10
JavaScript Timing Events  (0) 2007.07.10
JavaScript Animation  (2) 2007.07.09
JavaScript Form Validation  (2) 2007.07.09
JavaScript Cookies  (0) 2007.07.09
JavaScript Browser Detection  (0) 2007.07.09
JavaScript HTML DOM Objects  (2) 2007.07.09
JavaScript Math Object  (0) 2007.07.09
JavaScript Boolean Object  (0) 2007.07.09
top


JavaScript Cookies

AJAX/JavaScript : 2007.07.09 17:37


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

쿠키란 무엇인가?

쿠키는 방문자의 컴퓨터에 정되는 변수다. 매번 컴퓨터가 브라우저에 페이지를 요청할 때 쿠키도 같이 보낸다. 자바스크립트를 사용하면, 쿠키의 값을 가져오거나 새로운 쿠키를 만들 수 있다.

쿠키 예제:

    * 이름 쿠키 - 방문자가 처음으로 여러분의 웹 페이지를 방문 했을 때 그들은 그들의 이름을 적을 것입니다. 이 이름을 쿠키에 저장합니다. 다음에 방문자가 다시 여러분의 페이지를 방문하면 저장되어 있는 쿠키에서 이름을 가져와서 그들에게 "Welcome 기선!" 환영 문구를 보여줄 수 있습니다.
    * Password 쿠키 - 방문자가 웹 페이지에 처음 방문하면, 그들은 패스워드를 입력합니다. 이 패스워드를 쿠키에 저장합니다. 다음번에 방문자가 다시 웹 페이지를 들리게 되면 쿠키에서 패스워드를 가져와서 자동으로 채워줍니다
    * 날짜 쿠키 - 방문자가 처음 웹 페이지를 방문하면, 현재 날짜를 쿠키에 저장합니다. 다음 번에 방문자가 다시 웹 페이지를 찾아오면, 쿠키로 부터 날짜를 가져와서 "지난 번에는 2007년 7월 9일에 접속했었군요" 라고 보여줄 수 있다.

쿠키 만들고 저장하기

이 예제에서 우리는 쿠키를 만들어서 방문자의 이름을 저장하겠습니다. 처음으로 방문자가 웹 페이지를 방문하면, 그들에게 이름을 입력하도록 요구합니다. 그런다음 이 이름을 쿠키에 저장합니다. 다음번에 같은 페이지를 다시 방문하면 그들에게 환영 문구를 출력합니다.

먼저, 방문자의 이름을 쿠키 변수에 저장하는 함수를 작성합니다:
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

함수의 매개 변수는 쿠키의 이름, 쿠키의 값 그리고 쿠키를 유지시킬 일 수를 받아 옵니다.

위의 함수에서 먼저 쿠키를 유지할 날짜 수를 날짜로 변환하여 소멸될 날짜를 만듭니다. 그러고 나서 document.cookie 객체를 사용하여 쿠키의 이름과 소멸될 날짜를 저장합니다.

Then, we create another function that checks if the cookie has been set:
쿠키가 설정되어 있는지 확인하는 다른 함수를 작성합니다.

function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    {
    c_start=c_start + c_name.length+1
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    }
  }
return ""
}

위의 함수는 먼저 document.cookie에 쿠키가 들어있기는 한지 확인합니다. 만약 document.cookie가 비어 있지 않다면 찾고자 하는 이름의 쿠키가 저장되어 있는지 확인합니다. 만약 쿠키를 찾으면 쿠키의 값을 반환하고 그렇지 않다면 비어있는 문자열을 반환합니다.

마지막으로, 쿠키가 설정되어 있으면 환명 문구를 보내고, 쿠키가 설정되어 있지 않으면 prompt 박스를 출력하여 사용자의 이름을 물어보는 함수를 작성합니다.
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
  {alert('Welcome again '+username+'!')}
else
  {
  username=prompt('Please enter your name:',"")
  if (username!=null && username!="")
    {
    setCookie('username',username,365)
    }
  }
}

'AJAX > JavaScript' 카테고리의 다른 글

자바스크립트 튜토리얼 정리 끝  (4) 2007.07.10
JavaScript Create Your Own Objects  (0) 2007.07.10
JavaScript Timing Events  (0) 2007.07.10
JavaScript Animation  (2) 2007.07.09
JavaScript Form Validation  (2) 2007.07.09
JavaScript Cookies  (0) 2007.07.09
JavaScript Browser Detection  (0) 2007.07.09
JavaScript HTML DOM Objects  (2) 2007.07.09
JavaScript Math Object  (0) 2007.07.09
JavaScript Boolean Object  (0) 2007.07.09
JavaScript Array Object  (1) 2007.07.09
top


JavaScript Browser Detection

AJAX/JavaScript : 2007.07.09 16:33


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

브라우저 인식하기

이 튜토리얼에 있는 대부분의 것들은 자바스크립트가 가능한 브라우저라면 전부 동작합니다. 하지만, 일부 브라우저에서는 동작하지 않을 수도 있습니다. 특히 오래된 브라우저들.

따라서, 방문자의 브라우저 종류와 버전을 알아내는 것은 유용하며 그렇게 함으로써 적절한 정보를 제공할 수 있습니다.

이 방법을 실현하기 위한 최선책은 여러분의 웹 페이지들이 브라우저에 따라 적절하게 보여줄 수 있을 만큼 똑똑하게 만드는 것입니다.

자바스크립트는 Navigator 라 불리는 객체를 포함하고 있으며 이것으로 상기 목적을 달성할 수 있습니다.

Navigator 객체는 방문자의 브라우저 name, 버전, 기타 등등의 정보를 포함하고 있는 객체입니다.

Navigator 객체

자바스크립트 Navigator 객체는 방문자의 브라우저에 대한 모든 정보를 담고 있습니다. Navigator 객체가 담고 있는 두 개의 속성을 살펴보겠습니다.

    * appName -  브라우저의 이름을 담고 있습니다.
    * appVersion - 브라우저의 버전이외에도 다양한 정보를 담고 있습니다.

예제
<html>

<body>
<script type="text/javascript">
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)

document.write("Browser name: "+ browser)
document.write("<br />")
document.write("Browser version: "+ version)
</script>
</body>

</html>

browser 변수는 브라우저의 이름을 담고 있습니다. 예를 들어 "Netscape" 또는 "Microsoft Internet Explorer"와 같은 값을 담고 있죠.

appVersion 속성은 단순한 버전 넘버 외에도 많은 정보를 포함하고 있지만 지금은 버전 넘버에만 관심이 있습니다. 버전 넘버만 빼내기 위해서 parseFloat()를 호출하여 문자열 내에서 소수로 보이는 첫번째 숫자를 빼내옵니다.

중요! IE 5.0 이상에서는 버전 넘버가 다릅니다! 마이크로소프트가 IE 5.0과 IE 6.0에서 appVwersion 문자열을 4.0으로 시작하도록 했습니다!!! 대체 이사람들 왜 이런걸까요??? 하지만, 자바스크립트는 IE6, IE5 그리고 IE4에서도 동일합니다. 따라서 대부분의 스크립트는 괜찮을 겁니다.

예제

다음의 스크립트는 방문자의 브라우저에 따라 다른 경고 메시지를 보여줍니다.
<html>
<head>
<script type="text/javascript">
function detectBrowser()
{
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
if ((browser=="Netscape"||browser=="Microsoft Internet Explorer")
&& (version>=4))
  {alert("Your browser is good enough!")}
else
  {alert("It's time to upgrade your browser!")}
}
</script>
</head>

<body onload="detectBrowser()">
</body>
</html>

'AJAX > JavaScript' 카테고리의 다른 글

JavaScript Create Your Own Objects  (0) 2007.07.10
JavaScript Timing Events  (0) 2007.07.10
JavaScript Animation  (2) 2007.07.09
JavaScript Form Validation  (2) 2007.07.09
JavaScript Cookies  (0) 2007.07.09
JavaScript Browser Detection  (0) 2007.07.09
JavaScript HTML DOM Objects  (2) 2007.07.09
JavaScript Math Object  (0) 2007.07.09
JavaScript Boolean Object  (0) 2007.07.09
JavaScript Array Object  (1) 2007.07.09
JavaScript Date Object  (1) 2007.07.09
top


JavaScript HTML DOM Objects

AJAX/JavaScript : 2007.07.09 16:12


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

그밖에 자바스크립트 객체
Object Description
Window The top level object in the JavaScript hierarchy. The Window object represents a browser window. A Window object is created automatically with every instance of a <body> or <frameset> tag
Navigator Contains information about the client's browser
Screen Contains information about the client's display screen
History Contains the visited URLs in the browser window
Location Contains information about the current URL

HTML DOM

HTML DOM은 W3C 표준이고 HTML을 위한 Document Object Model의 약자다.

HTML DOM은 HTML을 구성하는 객체의 표준 집합체를 정의하고 HTML 문서를 접근하고 생성하기 위한 표준적인 방법인다.

모든 (문자와 속성을 가지고 있는) HTML 요소들에 DOM 통해서 접근할 수 있다. 컨텐츠를 구정, 삭제 할 수 있으며 새로운 엘리먼트를 추가할 수도 있다.

HTML DOM은 독립적인 플랫폼이자 언어다. Java, 자바스크립트 그리고 VBScript 같은 프로그래밍 언어 처럼 사용할 수 있다.

다음의 링크들에서 자바스크립트를 사용하여 각각의 DOM 객체를 생성하고 접근하는 방법을 배울 수 있다.
Object Description
Document Represents the entire HTML document and can be used to access all elements in a page
Anchor Represents an <a> element
Area Represents an <area> element inside an image-map
Base Represents a <base> element
Body Represents the <body> element
Button Represents a <button> element
Event Represents the state of an event
Form Represents a <form> element
Frame Represents a <frame> element
Frameset Represents a <frameset> element
Iframe Represents an <iframe> element
Image Represents an <img> element
Input button Represents a button in an HTML form
Input checkbox Represents a checkbox in an HTML form
Input file Represents a fileupload in an HTML form
Input hidden Represents a hidden field in an HTML form
Input password Represents a password field in an HTML form
Input radio Represents a radio button in an HTML form
Input reset Represents a reset button in an HTML form
Input submit Represents a submit button in an HTML form
Input text Represents a text-input field in an HTML form
Link Represents a <link> element
Meta Represents a <meta> element
Option Represents an <option> element
Select Represents a selection list in an HTML form
Style Represents an individual style statement
Table Represents a <table> element
TableData Represents a <td> element
TableRow Represents a <tr> element
Textarea Represents a <textarea> element

'AJAX > JavaScript' 카테고리의 다른 글

JavaScript Timing Events  (0) 2007.07.10
JavaScript Animation  (2) 2007.07.09
JavaScript Form Validation  (2) 2007.07.09
JavaScript Cookies  (0) 2007.07.09
JavaScript Browser Detection  (0) 2007.07.09
JavaScript HTML DOM Objects  (2) 2007.07.09
JavaScript Math Object  (0) 2007.07.09
JavaScript Boolean Object  (0) 2007.07.09
JavaScript Array Object  (1) 2007.07.09
JavaScript Date Object  (1) 2007.07.09
JavaScript String Object  (1) 2007.07.09
top


JavaScript Math Object

AJAX/JavaScript : 2007.07.09 15:55


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

Matk 객체 메소드
Method Description FF N IE
abs(x) Returns the absolute value of a number 1 2 3
acos(x) Returns the arccosine of a number 1 2 3
asin(x) Returns the arcsine of a number 1 2 3
atan(x) Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians 1 2 3
atan2(y,x) Returns the angle theta of an (x,y) point as a numeric value between -PI and PI radians 1 2 3
ceil(x) Returns the value of a number rounded upwards to the nearest integer 1 2 3
cos(x) Returns the cosine of a number 1 2 3
exp(x) Returns the value of Ex 1 2 3
floor(x) Returns the value of a number rounded downwards to the nearest integer 1 2 3
log(x) Returns the natural logarithm (base E) of a number 1 2 3
max(x,y) Returns the number with the highest value of x and y 1 2 3
min(x,y) Returns the number with the lowest value of x and y 1 2 3
pow(x,y) Returns the value of x to the power of y 1 2 3
random() Returns a random number between 0 and 1 1 2 3
round(x) Rounds a number to the nearest integer 1 2 3
sin(x) Returns the sine of a number 1 2 3
sqrt(x) Returns the square root of a number 1 2 3
tan(x) Returns the tangent of an angle 1 2 3
toSource() Represents the source code of an object 1 4 -
valueOf() Returns the primitive value of a Math object 1 2 4

Math 객체 속성
Property Description FF N IE
constructor A reference to the function that created the object 1 2 4
E Returns Euler's constant (approx. 2.718) 1 2 3
LN2 Returns the natural logarithm of 2 (approx. 0.693) 1 2 3
LN10 Returns the natural logarithm of 10 (approx. 2.302) 1 2 3
LOG2E Returns the base-2 logarithm of E (approx. 1.414) 1 2 3
LOG10E Returns the base-10 logarithm of E (approx. 0.434) 1 2 3
PI Returns PI (approx. 3.14159) 1 2 3
prototype Allows you to add properties and methods to the object 1 2 4
SQRT1_2 Returns the square root of 1/2 (approx. 0.707) 1 2 3
SQRT2 Returns the square root of 2 (approx. 1.414) 1 2 3

Math 객체

Math 객체는 산술연산 작업을 할 수 있도록 도와준다.

Math 객체는 몇 몇 산술적인 변수들과 함수들을 가지고 있다. 따라서 별도의 Math 객체를 만들어 사용하지 않아도 된다.

'AJAX > JavaScript' 카테고리의 다른 글

JavaScript Animation  (2) 2007.07.09
JavaScript Form Validation  (2) 2007.07.09
JavaScript Cookies  (0) 2007.07.09
JavaScript Browser Detection  (0) 2007.07.09
JavaScript HTML DOM Objects  (2) 2007.07.09
JavaScript Math Object  (0) 2007.07.09
JavaScript Boolean Object  (0) 2007.07.09
JavaScript Array Object  (1) 2007.07.09
JavaScript Date Object  (1) 2007.07.09
JavaScript String Object  (1) 2007.07.09
JavaScript Objects Introduction  (0) 2007.07.09
top


JavaScript Boolean Object

AJAX/JavaScript : 2007.07.09 15:50


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

Boolean 객체 메소드
Method Description FF N IE
toSource() Represents the source code of an object 1 4 -
toString() Converts a Boolean value to a string and returns the result 1 4 4
valueOf() Returns the primitive value of a Boolean object 1 4 4

Boolean 객체 속성
Property Description FF N IE
constructor A reference to the function that created the object 1 2 4
prototype Allows you to add properties and methods to the object 1 2 4

Boolean 객체
Boolean 객체는 boolean 갑을 랩핑하고 있는 객체다.
Boolean이 아닌 값을 Boolean으로 변경할 때 사용한다.
new 키워드를 사용하여 새로운 객체를 생성할 수 있다.
초기값이 없거나, 0, -0, null, NaN, "", false, undefined일 경우 false가 되고,
그 이외의 경우에는 true가 된다.

다음의 객체들은 false를 나타낸다.
var myBoolean=new Boolean()
var myBoolean=new Boolean(0)
var myBoolean=new Boolean(null)
var myBoolean=new Boolean("")
var myBoolean=new Boolean(false)
var myBoolean=new Boolean(NaN)

다음의 객체들은 true를 나타낸다.
var myBoolean=new Boolean(true)
var myBoolean=new Boolean("true")
var myBoolean=new Boolean("false")
var myBoolean=new Boolean("Richard")

'AJAX > JavaScript' 카테고리의 다른 글

JavaScript Form Validation  (2) 2007.07.09
JavaScript Cookies  (0) 2007.07.09
JavaScript Browser Detection  (0) 2007.07.09
JavaScript HTML DOM Objects  (2) 2007.07.09
JavaScript Math Object  (0) 2007.07.09
JavaScript Boolean Object  (0) 2007.07.09
JavaScript Array Object  (1) 2007.07.09
JavaScript Date Object  (1) 2007.07.09
JavaScript String Object  (1) 2007.07.09
JavaScript Objects Introduction  (0) 2007.07.09
JavaScript Guidelines  (0) 2007.07.09
top


JavaScript Array Object

AJAX/JavaScript : 2007.07.09 15:33


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

Array 객체의 메소드
Method Description FF N IE
concat() Joins two or more arrays and returns the result 1 4 4
join() Puts all the elements of an array into a string. The elements are separated by a specified delimiter 1 3 4
pop() Removes and returns the last element of an array 1 4 5.5
push() Adds one or more elements to the end of an array and returns the new length 1 4 5.5
reverse() Reverses the order of the elements in an array 1 3 4
shift() Removes and returns the first element of an array 1 4 5.5
slice() Returns selected elements from an existing array 1 4 4
sort() Sorts the elements of an array 1 3 4
splice() Removes and adds new elements to an array 1 4 5.5
toSource() Represents the source code of an object 1 4 -
toString() Converts an array to a string and returns the result 1 3 4
unshift() Adds one or more elements to the beginning of an array and returns the new length 1 4 6
valueOf() Returns the primitive value of an Array object 1 2 4

Array 객체의 속성
Property Description FF N IE
constructor A reference to the function that created the object 1 2 4
index   1 3 4
input   1 3 4
length Sets or returns the number of elements in an array 1 2 4
prototype Allows you to add properties and methods to the object 1 2 4

Array 정의하기
1. 비어 있는 개체를 만든 다음에 세팅하기(배열 객체의 길이를 정해 줄 수도 있다.)
var mycars=new Array(3)
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
2. 배열을 만들 때 세팅하기
var mycars=new Array("Saab","Volvo","BMW")

예제
<html>
<body>

<script type="text/javascript">

function sortNumber(a, b)
{
return a - b
}

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(arr.sort(sortNumber))

</script>

</body>
</html>
출력
10,5,40,25,1000,1
1,5,10,25,40,1000

'AJAX > JavaScript' 카테고리의 다른 글

JavaScript Cookies  (0) 2007.07.09
JavaScript Browser Detection  (0) 2007.07.09
JavaScript HTML DOM Objects  (2) 2007.07.09
JavaScript Math Object  (0) 2007.07.09
JavaScript Boolean Object  (0) 2007.07.09
JavaScript Array Object  (1) 2007.07.09
JavaScript Date Object  (1) 2007.07.09
JavaScript String Object  (1) 2007.07.09
JavaScript Objects Introduction  (0) 2007.07.09
JavaScript Guidelines  (0) 2007.07.09
JavaScript Special Characters  (0) 2007.07.09
top


JavaScript Date Object

AJAX/JavaScript : 2007.07.09 15:23


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

Date 객체의 메소드
Method Description FF N IE
Date() Returns today's date and time 1 2 3
getDate() Returns the day of the month from a Date object (from 1-31) 1 2 3
getDay() Returns the day of the week from a Date object (from 0-6) 1 2 3
getMonth() Returns the month from a Date object (from 0-11) 1 2 3
getFullYear() Returns the year, as a four-digit number, from a Date object 1 4 4
getYear() Returns the year, as a two-digit or a four-digit number, from a Date object. Use getFullYear() instead !! 1 2 3
getHours() Returns the hour of a Date object (from 0-23) 1 2 3
getMinutes() Returns the minutes of a Date object (from 0-59) 1 2 3
getSeconds() Returns the seconds of a Date object (from 0-59) 1 2 3
getMilliseconds() Returns the milliseconds of a Date object (from 0-999) 1 4 4
getTime() Returns the number of milliseconds since midnight Jan 1, 1970 1 2 3
getTimezoneOffset() Returns the difference in minutes between local time and Greenwich Mean Time (GMT) 1 2 3
getUTCDate() Returns the day of the month from a Date object according to universal time (from 1-31) 1 4 4
getUTCDay() Returns the day of the week from a Date object according to universal time (from 0-6) 1 4 4
getUTCMonth() Returns the month from a Date object according to universal time (from 0-11) 1 4 4
getUTCFullYear() Returns the four-digit year from a Date object according to universal time 1 4 4
getUTCHours() Returns the hour of a Date object according to universal time (from 0-23) 1 4 4
getUTCMinutes() Returns the minutes of a Date object according to universal time (from 0-59) 1 4 4
getUTCSeconds() Returns the seconds of a Date object according to universal time (from 0-59) 1 4 4
getUTCMilliseconds() Returns the milliseconds of a Date object according to universal time (from 0-999) 1 4 4
parse() Takes a date string and returns the number of milliseconds since midnight of January 1, 1970 1 2 3
setDate() Sets the day of the month in a Date object (from 1-31) 1 2 3
setMonth() Sets the month in a Date object (from 0-11) 1 2 3
setFullYear() Sets the year in a Date object (four digits) 1 4 4
setYear() Sets the year in the Date object (two or four digits). Use setFullYear() instead !! 1 2 3
setHours() Sets the hour in a Date object (from 0-23) 1 2 3
setMinutes() Set the minutes in a Date object (from 0-59) 1 2 3
setSeconds() Sets the seconds in a Date object (from 0-59) 1 2 3
setMilliseconds() Sets the milliseconds in a Date object (from 0-999) 1 4 4
setTime() Calculates a date and time by adding or subtracting a specified number of milliseconds to/from midnight January 1, 1970 1 2 3
setUTCDate() Sets the day of the month in a Date object according to universal time (from 1-31) 1 4 4
setUTCMonth() Sets the month in a Date object according to universal time (from 0-11) 1 4 4
setUTCFullYear() Sets the year in a Date object according to universal time (four digits) 1 4 4
setUTCHours() Sets the hour in a Date object according to universal time (from 0-23) 1 4 4
setUTCMinutes() Set the minutes in a Date object according to universal time (from 0-59) 1 4 4
setUTCSeconds() Set the seconds in a Date object according to universal time (from 0-59) 1 4 4
setUTCMilliseconds() Sets the milliseconds in a Date object according to universal time (from 0-999) 1 4 4
toSource() Represents the source code of an object 1 4 -
toString() Converts a Date object to a string 1 2 4
toGMTString() Converts a Date object, according to Greenwich time, to a string. Use toUTCString() instead !! 1 2 3
toUTCString() Converts a Date object, according to universal time, to a string 1 4 4
toLocaleString() Converts a Date object, according to local time, to a string 1 2 3
UTC() Takes a date and returns the number of milliseconds since midnight of January 1, 1970 according to universal time 1 2 3
valueOf() Returns the primitive value of a Date object 1 2 4

Date 객체의 속성
Property Description FF N IE
constructor A reference to the function that created the object 1 4 4
prototype Allows you to add properties and methods to the object 1 3 4

Date 만들기

Date 객체로 날짜와 시간을 다룰 수 있다.
Date myDate = new Date()
위와 같이 new 키워드를 사용하여 새로운 객체를 생성할 수 있고 기본으로 현재 시간과 날짜로 세팅된다.

Date 객체 다루기

2010년 1월 14일
var myDate=new Date()
myDate.setFullYear(2010,0,14)
Java와 마찬가지로 month가 약간 이상하다. 아무리 0이 인덱스의 처음이라지만 1월을 0으로 표현한건 별로 맘에 안든다.

5일 뒤로
var myDate=new Date()
myDate.setDate(myDate.getDate()+5)
+ 연산자를 써서 날짜를 변경시킬 수 있나보다. 기본은 일로 취급하는 듯.

날짜 비교하기

var myDate=new Date()
myDate.setFullYear(2010,0,14)

var today = new Date()

if (myDate>today)
  alert("Today is before 14th January 2010")
else
  alert("Today is after 14th January 2010")
부등호로 비교할 수 있다니.. 편리하군.

'AJAX > JavaScript' 카테고리의 다른 글

JavaScript Browser Detection  (0) 2007.07.09
JavaScript HTML DOM Objects  (2) 2007.07.09
JavaScript Math Object  (0) 2007.07.09
JavaScript Boolean Object  (0) 2007.07.09
JavaScript Array Object  (1) 2007.07.09
JavaScript Date Object  (1) 2007.07.09
JavaScript String Object  (1) 2007.07.09
JavaScript Objects Introduction  (0) 2007.07.09
JavaScript Guidelines  (0) 2007.07.09
JavaScript Special Characters  (0) 2007.07.09
JavaScript The onerror Event  (2) 2007.07.09
top


JavaScript String Object

AJAX/JavaScript : 2007.07.09 15:12


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

String 객체의 모든 메소드
Method Description FF N IE
anchor() Creates an HTML anchor 1 2 3
big() Displays a string in a big font 1 2 3
blink() Displays a blinking string 1 2  
bold() Displays a string in bold 1 2 3
charAt() Returns the character at a specified position 1 2 3
charCodeAt() Returns the Unicode of the character at a specified position 1 4 4
concat() Joins two or more strings 1 4 4
fixed() Displays a string as teletype text 1 2 3
fontcolor() Displays a string in a specified color 1 2 3
fontsize() Displays a string in a specified size 1 2 3
fromCharCode() Takes the specified Unicode values and returns a string 1 4 4
indexOf() Returns the position of the first occurrence of a specified string value in a string 1 2 3
italics() Displays a string in italic 1 2 3
lastIndexOf() Returns the position of the last occurrence of a specified string value, searching backwards from the specified position in a string 1 2 3
link() Displays a string as a hyperlink 1 2 3
match() Searches for a specified value in a string 1 4 4
replace() Replaces some characters with some other characters in a string 1 4 4
search() Searches a string for a specified value 1 4 4
slice() Extracts a part of a string and returns the extracted part in a new string 1 4 4
small() Displays a string in a small font 1 2 3
split() Splits a string into an array of strings 1 4 4
strike() Displays a string with a strikethrough 1 2 3
sub() Displays a string as subscript 1 2 3
substr() Extracts a specified number of characters in a string, from a start index 1 4 4
substring() Extracts the characters in a string between two specified indices 1 2 3
sup() Displays a string as superscript 1 2 3
toLowerCase() Displays a string in lowercase letters 1 2 3
toUpperCase() Displays a string in uppercase letters 1 2 3
toSource() Represents the source code of an object 1 4 -
valueOf() Returns the primitive value of a String object 1 2 4

String 객체의 모든 속성들
Property Description FF N IE
constructor A reference to the function that created the object 1 4 4
length Returns the number of characters in a string 1 2 3
prototype Allows you to add properties and methods to the object 1 2 4

예제
<html>
<body>

<script type="text/javascript">

var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/,"W3Schools"))

</script>
</body>
</html>
결과
Visit W3Schools!

'AJAX > JavaScript' 카테고리의 다른 글

JavaScript HTML DOM Objects  (2) 2007.07.09
JavaScript Math Object  (0) 2007.07.09
JavaScript Boolean Object  (0) 2007.07.09
JavaScript Array Object  (1) 2007.07.09
JavaScript Date Object  (1) 2007.07.09
JavaScript String Object  (1) 2007.07.09
JavaScript Objects Introduction  (0) 2007.07.09
JavaScript Guidelines  (0) 2007.07.09
JavaScript Special Characters  (0) 2007.07.09
JavaScript The onerror Event  (2) 2007.07.09
JavaScript Throw Statement  (0) 2007.07.09
top


JavaScript Objects Introduction

AJAX/JavaScript : 2007.07.09 15:08


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

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

JavaScript is an Object Oriented Programming (OOP) language.

An OOP language allows you to define your own objects and make your own variable types.

객체 지향 프로그래밍

자바스크립트는 객체 지향 프로그래밍 언어 중 하나다. OOP 언어는 각자의 객를 정의할 수 있고 사용자 정의 변수 타입을 만들 수 있다.

하지만, 객체를 만드는 방법은 나중에 Advanced 자바스크립트 섹션에서 배울 것이다. 여기서는 내장되어 있는 자바스크립트 객체를 살펴보고 사용해 볼 것이다. 다음 부터 내장된 객체들을 하나씩 살펴보겠다.

객체는 특별한 종류의 데이터다. 객체는 속성과 메소드를 가지고 있다.

속성

속성은 객체와 연관된 값들이다.

다음의 예제에서 처럼 String 객체의 속성인 length로 문자열이 몇 개의 문자로 구성되어 있는지 알 수 있다.
<script type="text/javascript">

var txt="Hello World!"
document.write(txt.length)

</script>
결과 값은 다음과 같다.
12

메소드

메소드는 객체의 의해 수행될 수 있는 액션이다.

다음의 예제에서 String 객체의 toUpperCase() 메소드를 사용하여 대문자로 출력해주고 있다.
<script type="text/javascript">

var str="Hello world!"
document.write(str.toUpperCase())

</script>
결과 값은 다음과 같다.
HELLO WORLD!

'AJAX > JavaScript' 카테고리의 다른 글

JavaScript Math Object  (0) 2007.07.09
JavaScript Boolean Object  (0) 2007.07.09
JavaScript Array Object  (1) 2007.07.09
JavaScript Date Object  (1) 2007.07.09
JavaScript String Object  (1) 2007.07.09
JavaScript Objects Introduction  (0) 2007.07.09
JavaScript Guidelines  (0) 2007.07.09
JavaScript Special Characters  (0) 2007.07.09
JavaScript The onerror Event  (2) 2007.07.09
JavaScript Throw Statement  (0) 2007.07.09
JavaScript Try...Catch Statement  (0) 2007.07.09
top


JavaScript Guidelines

AJAX/JavaScript : 2007.07.09 14:38


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

대소문자에 민감합니다.
- 즉 대소문자를 가리기 때문에 주의해야 함.

공백에는 민감하지 않습니다.
- 즉 코드에서 공백을 사용해도 괜찮습니다.
name="Hege"
name = "Hege"

줄 바꾸기
- 문자열을 작성할 때 다음 줄에서 계속 작성하고 싶다면 "\"을 사용합니다.
document.write("Hello \
World!")

주석
- 한 줄 주석 //
//this is a comment
document.write("Hello World!")
- 여러줄 주석 /* */
/* This is a comment
block. It contains
several lines */
document.write("Hello World!")

이것으로 자바스크립트 Basic은 끝났군요.
다음은 자바스크립트 Objects를 공부합니다.


'AJAX > JavaScript' 카테고리의 다른 글

JavaScript Boolean Object  (0) 2007.07.09
JavaScript Array Object  (1) 2007.07.09
JavaScript Date Object  (1) 2007.07.09
JavaScript String Object  (1) 2007.07.09
JavaScript Objects Introduction  (0) 2007.07.09
JavaScript Guidelines  (0) 2007.07.09
JavaScript Special Characters  (0) 2007.07.09
JavaScript The onerror Event  (2) 2007.07.09
JavaScript Throw Statement  (0) 2007.07.09
JavaScript Try...Catch Statement  (0) 2007.07.09
JavaScript Events  (2) 2007.07.09
top


JavaScript Special Characters

AJAX/JavaScript : 2007.07.09 14:08


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

자바스크립트의 문자열에서 따옴표(")나 엠퍼세드(&)를 입력하기 위해서는 \를 사용해야 합니다.
Code Outputs
\' single quote
\" double quote
\& ampersand
\\ backslash
\n new line
\r carriage return
\t tab
\b backspace
\f form feed


예)
var txt="We are the so-called "Vikings" from the north." (X)
var txt="We are the so-called \"Vikings\" from the north." (O)
document.write ("You \& me are singing!")

'AJAX > JavaScript' 카테고리의 다른 글

JavaScript Array Object  (1) 2007.07.09
JavaScript Date Object  (1) 2007.07.09
JavaScript String Object  (1) 2007.07.09
JavaScript Objects Introduction  (0) 2007.07.09
JavaScript Guidelines  (0) 2007.07.09
JavaScript Special Characters  (0) 2007.07.09
JavaScript The onerror Event  (2) 2007.07.09
JavaScript Throw Statement  (0) 2007.07.09
JavaScript Try...Catch Statement  (0) 2007.07.09
JavaScript Events  (2) 2007.07.09
JavaScript For Loop와 While Loop  (1) 2007.07.09
top


JavaScript The onerror Event

AJAX/JavaScript : 2007.07.09 14:02


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

onerror 이벤트
예외를 처리하는 다른 방법 중에 하나인 onerror 이벤트를 살펴보겠다.

onerror 이벤트는 페이지에 스크립트 에러가 발생할 때 마다 호출 된다.

onerror 이벤트를 사용하기 위해서는, 반드시 에러를 다룰 함수를  만들어야한다. 그런 뒤 onerror 이벤트 핸들러로 해당 함수를 호출하면 된다. 이 때 불려지는 함수는 세 개의 인자를 가지게 된다. msg(에러 메시지), url(에러를 발생시킨 페이지의 url) 그리고 line(몇 번째 행에서 에러가 발생했는지)

문법
onerror=handleErr

function handleErr(msg,url,l)
{
//Handle the error here
return true or false
}
onerror 에 의해 반환되는 값으로 브라우저에 표준 에러 메시지를 출력할지 말지 결정할 수 있다. 만약에 false를 반환하면 브라우저는 자바스크립트 콘솔에 표준 에러 메시지를 출력합니다. 하지만 만약 true를 반환한다면 브라우저는 표준 에러 메시지를 출력하지 않습니다.

예제
<html>
<head>
<script type="text/javascript">
onerror=handleErr
var txt=""

function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n"
txt+="Error: " + msg + "\n"
txt+="URL: " + url + "\n"
txt+="Line: " + l + "\n\n"
txt+="Click OK to continue.\n\n"
alert(txt)
return true
}

function message()
{
adddlert("Welcome guest!")
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()" />
</body>

</html>
에러가 발생하면 onerror 이벤트가 발생하고 거기에 정해준 콜백 메소드가 실행됩니다. 이 때 메시지를 직접 작성한 뒤 표준 에러 메시지를 출력하지 않고 handleErr() 함수에서 작성한 메시지를 보여줍니다.

'AJAX > JavaScript' 카테고리의 다른 글

JavaScript Date Object  (1) 2007.07.09
JavaScript String Object  (1) 2007.07.09
JavaScript Objects Introduction  (0) 2007.07.09
JavaScript Guidelines  (0) 2007.07.09
JavaScript Special Characters  (0) 2007.07.09
JavaScript The onerror Event  (2) 2007.07.09
JavaScript Throw Statement  (0) 2007.07.09
JavaScript Try...Catch Statement  (0) 2007.07.09
JavaScript Events  (2) 2007.07.09
JavaScript For Loop와 While Loop  (1) 2007.07.09
JavaScript Functions  (0) 2007.07.09
top


JavaScript Throw Statement

AJAX/JavaScript : 2007.07.09 13:48


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

throw문

throw문을 사용하여 예외를 생성할 수 이다. try-catch문과 함께 사용하여 프로그램의 흐름을 제어 할 수 있다.
예외는 문자열, 숫자, Boolean 또는 객체가 될 수 있다.

 문자열 예외를 발생시키는 예제
<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","")
try
{
if(x>10)
throw "Err1"
else if(x<0)
throw "Err2"
}
catch(er)
{
if(er=="Err1")
alert("Error! The value is too high")
if(er == "Err2")
alert("Error! The value is too low")
}
</script>
</body>
</html>

특이하네요. 자바보다 훨씬 심플하군요.

'AJAX > JavaScript' 카테고리의 다른 글

JavaScript String Object  (1) 2007.07.09
JavaScript Objects Introduction  (0) 2007.07.09
JavaScript Guidelines  (0) 2007.07.09
JavaScript Special Characters  (0) 2007.07.09
JavaScript The onerror Event  (2) 2007.07.09
JavaScript Throw Statement  (0) 2007.07.09
JavaScript Try...Catch Statement  (0) 2007.07.09
JavaScript Events  (2) 2007.07.09
JavaScript For Loop와 While Loop  (1) 2007.07.09
JavaScript Functions  (0) 2007.07.09
JavaScript Popup Boxes  (0) 2007.07.09
top


JavaScript Try...Catch Statement

AJAX/JavaScript : 2007.07.09 13:43


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

자바스크립트 - 에러 잡기
인터넷을 돌아다니다 보면 누구나 한번쯤 "디버그 하시겠습니까?"라는 팝업창을 본적이 있을 것이다. 이런 창은 개발자들에게는 유용한 정보일지 몰라도 사용자에게는 그렇치 않다. 아마 사이트를 바로 떠날 것이다.

이번에는 그러한 에러를 잡아서 자바스크립트로 창을 띄워서 사용자를 잃지 않는 방법을 살펴본다.

웹 페이지에서 에러를 잡는 두 가지 방법
1. try - catch문 사용
2. onerror 이번트 사용

Try...Catch Statement
try 블럭으로 에러가 발생하는지 확인할 부분을 감싸고 catch 블럭으로 에러가 발생했을 때 할 일을 정의한다.
문법
try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}

예제
<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
  {
  adddlert("Welcome guest!")
  }
catch(err)
  {
  txt="There was an error on this page.\n\n"
  txt+="Click OK to continue viewing this page,\n"
  txt+="or Cancel to return to the home page.\n\n"
  if(!confirm(txt))
    {
    document.location.href="http://www.w3schools.com/"
    }
  }
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()" />
</body>

</html>

에러가 발생할 부분을 try 블럭으로 감싸고 catch에서 사용자에게 보여줄 에러 메시지를 작성하고 confirm()으로 확인창을 띄워서 사용자가 Cancle을 클릭하면 다른 페이지로 이동하도록 한다.

'AJAX > JavaScript' 카테고리의 다른 글

JavaScript Objects Introduction  (0) 2007.07.09
JavaScript Guidelines  (0) 2007.07.09
JavaScript Special Characters  (0) 2007.07.09
JavaScript The onerror Event  (2) 2007.07.09
JavaScript Throw Statement  (0) 2007.07.09
JavaScript Try...Catch Statement  (0) 2007.07.09
JavaScript Events  (2) 2007.07.09
JavaScript For Loop와 While Loop  (1) 2007.07.09
JavaScript Functions  (0) 2007.07.09
JavaScript Popup Boxes  (0) 2007.07.09
JavaScript Operators  (0) 2007.07.09
top


JavaScript Events

AJAX/JavaScript : 2007.07.09 13:33


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

Events are actions that can be detected by JavaScript.


이벤트
자바스크립트를 사용하면 동적인 웹 페이지를 만들 수 있다. 이벤트는 자바스크립트에 의해 확인될 수 있는 액션이다.

웹 페이지의 모든 엘리먼트들은 자바스크립트 함수를 호출할 수 있는 특정 이벤트들을 가지고 있다. 예를 들어, 사용자가 버튼을 눌렀을 때 함수를 호출할 수 있는 버튼 엘리먼트의 onClick 이벤트를 사용할 수 있다. 이벤트는 HTML 태그안에 정의한다.

이벤트의 예:
    * 마우스 클릭
    * 웹 페이지 또는 이미지 로딩
    * 웹 페이지의 특정 지역으로 마우스를 올려놓는 것
    * HTML 폼의 입력 창을 선택하는 행위
    * HTML 폼 보내기
    * 키보드 입력

모든 이벤트 종류

FF : 파이어폭스 N : 네스케이프 IE : 인터넷 익스플로러
Attribute The event occurs when... FF N IE
onabort Loading of an image is interrupted 1 3 4
onblur An element loses focus 1 2 3
onchange The user changes the content of a field 1 2 3
onclick Mouse clicks an object 1 2 3
ondblclick Mouse double-clicks an object 1 4 4
onerror An error occurs when loading a document or an image 1 3 4
onfocus An element gets focus 1 2 3
onkeydown A keyboard key is pressed 1 4 3
onkeypress A keyboard key is pressed or held down 1 4 3
onkeyup A keyboard key is released 1 4 3
onload A page or an image is finished loading 1 2 3
onmousedown A mouse button is pressed 1 4 4
onmousemove The mouse is moved 1 6 3
onmouseout The mouse is moved off an element 1 4 4
onmouseover The mouse is moved over an element 1 2 3
onmouseup A mouse button is released 1 4 4
onreset The reset button is clicked 1 3 4
onresize A window or frame is resized 1 4 4
onselect Text is selected 1 2 3
onsubmit The submit button is clicked 1 2 3
onunload The user exits the page 1 2 3
숫자들은 무얼을 뜻하는건지;;; 모르겠네요.

onload and onUnload
페이지에 들어오거나 떠날 때 발생하는 이벤트.
onload를 사용하여 사용자의 브라우저 타입을 확인하여 그에 맞는 페이지를 보여줄 수 있다.
주로 웹 페이지에 들어오거나 나갈 때 쿠키를 다루기 위해 사용한다. 예를 들어, 페이지를 처음 방문할 때 팝업 창을 띄워서 이름을 물어보고 다음에 방문 할 때 "Hi, 기선"과 같이 인사말을 뿌릴 수 있다.

onFocus, onBlur and onChange
폼의 필드를 검증할 때 주로 사용한다.
다음의 코드는 사용자가 폼의 컨텐츠를 변경 시킬 때 마다 checkEmail() 함수를 호출한다.
<input type="text" size="30"
id="email" onchange="checkEmail()">;

onSubmit
폼을 제출 하기 전에 폼의 모든 필드를 검증할 때 사용한다.
예를 들어 폼을 제출하기 전에 checkForm() 함수에서 검증을 하고 그 결과 에러가 있으면 제출하지 않고 에러가 없으면 제출하도록 다음과 같이 코딩할 수 있다. checkForm() 함수가 true를 반환하면 제출되고 false를 반환하면 제출되지 않는다.
<form method="post" action="xxx.htm"
onsubmit="return checkForm()">

onMouseOver and onMouseOut
'변하는'버튼을 만들 때 사용합니다.

'AJAX > JavaScript' 카테고리의 다른 글

JavaScript Guidelines  (0) 2007.07.09
JavaScript Special Characters  (0) 2007.07.09
JavaScript The onerror Event  (2) 2007.07.09
JavaScript Throw Statement  (0) 2007.07.09
JavaScript Try...Catch Statement  (0) 2007.07.09
JavaScript Events  (2) 2007.07.09
JavaScript For Loop와 While Loop  (1) 2007.07.09
JavaScript Functions  (0) 2007.07.09
JavaScript Popup Boxes  (0) 2007.07.09
JavaScript Operators  (0) 2007.07.09
JavaScript If...Else와 Switch Statement  (0) 2007.07.09
top


JavaScript For Loop와 While Loop

AJAX/JavaScript : 2007.07.09 12:54


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

for 문 예제
<script type="text/javascript">
for (i = 1; i <= 6; i++)
{
document.write("<h" + i + ">This is header " + i)
document.write("</h" + i + ">")
}
</script>

while 문 예제
<script type="text/javascript">
i = 0
while (i <= 5)
{
document.write("The number is " + i)
document.write("<br>")
i++
}
</script>

do-while 문 예제
<script type="text/javascript">
var i=0
do
{
document.write("The number is " + i)
document.write("<br />")
i=i+1
}
while (i<0)
</script>

자바랑 동일하기 때문에 pass

'AJAX > JavaScript' 카테고리의 다른 글

JavaScript Special Characters  (0) 2007.07.09
JavaScript The onerror Event  (2) 2007.07.09
JavaScript Throw Statement  (0) 2007.07.09
JavaScript Try...Catch Statement  (0) 2007.07.09
JavaScript Events  (2) 2007.07.09
JavaScript For Loop와 While Loop  (1) 2007.07.09
JavaScript Functions  (0) 2007.07.09
JavaScript Popup Boxes  (0) 2007.07.09
JavaScript Operators  (0) 2007.07.09
JavaScript If...Else와 Switch Statement  (0) 2007.07.09
JavaScript Variables  (0) 2007.07.09
top


JavaScript Functions

AJAX/JavaScript : 2007.07.09 12:49


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

예제
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b
}
</script>
</head>

<body>
<script type="text/javascript">
document.write(product(4,3))
</script>
<body>

자바스크립트 함수
페이지가 로딩 될 때 자바스크립트를 실행하는 것을 방지하기 위해 함수를 사용할 수 있다.
함수는 이벤트가 발생하거나 그것이 호출될 때 실행된다.
함수 호출은 페이지의 어디에서나 가능하다.(심지어 다른 페이지에서도 해당 함수를 포함한 자바스크립트 파일 .js를 내장하여 호출 할수 있다.)
함수는 HTML의 헤더와 바디 영역 모두에 둘 수는 있지만 함수를 호출할 때 이미 로딩되어 있도록 하려면 헤더에 두는 것이 좋다.

함수를 어떻게 정의하는가
매개 변수가 있는 경우
function functionname(var1,var2,...,varX)
{
some code
}

매개 변수가 없는 경우
function functionname()
{
some code
}

return 문
함수에서 반환할 값을 나타낼 때 사용한다.
function prod(a,b)
{
x=a*b
return x
}

'AJAX > JavaScript' 카테고리의 다른 글

JavaScript The onerror Event  (2) 2007.07.09
JavaScript Throw Statement  (0) 2007.07.09
JavaScript Try...Catch Statement  (0) 2007.07.09
JavaScript Events  (2) 2007.07.09
JavaScript For Loop와 While Loop  (1) 2007.07.09
JavaScript Functions  (0) 2007.07.09
JavaScript Popup Boxes  (0) 2007.07.09
JavaScript Operators  (0) 2007.07.09
JavaScript If...Else와 Switch Statement  (0) 2007.07.09
JavaScript Variables  (0) 2007.07.09
JavaScript Where To ...  (0) 2007.07.09
top


JavaScript Popup Boxes

AJAX/JavaScript : 2007.07.09 12:39


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

경고창
사용자의 입력을 확인할 때 사용한다. OK만 선택가능 함.
<script type="text/javascript">
function disp_alert()
{
alert("I am an alert box!!")
}
</script>

확인창
선택할 수 있는 창이 뜬다. OK를 선택하면 true를 반환하고 Cancel을 선택하면 false를 반환한다.
<script type="text/javascript">
function disp_confirm()
  {
  var r=confirm("Press a button")
  if (r==true)
    {
    document.write("You pressed OK!")
    }
  else
    {
    document.write("You pressed Cancel!")
    }
  }
</script>

입력 창
입력할 수 있는 창이 뜨는데 이 때 무언가를 입력하고 OK를 클릭하면 입력한 값을 반환하고 Cancle을 클릭하면 null을 반환한다.
<script type="text/javascript">
function disp_prompt()
  {
  var name=prompt("Please enter your name","Harry Potter")
  if (name!=null && name!="")
    {
    document.write("Hello " + name + "! How are you today?")
    }
  }
</script>

'AJAX > JavaScript' 카테고리의 다른 글

JavaScript Throw Statement  (0) 2007.07.09
JavaScript Try...Catch Statement  (0) 2007.07.09
JavaScript Events  (2) 2007.07.09
JavaScript For Loop와 While Loop  (1) 2007.07.09
JavaScript Functions  (0) 2007.07.09
JavaScript Popup Boxes  (0) 2007.07.09
JavaScript Operators  (0) 2007.07.09
JavaScript If...Else와 Switch Statement  (0) 2007.07.09
JavaScript Variables  (0) 2007.07.09
JavaScript Where To ...  (0) 2007.07.09
JavaScript How To ...  (0) 2007.07.09
top


JavaScript Operators

AJAX/JavaScript : 2007.07.09 12:31


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

산술 연산자
+, -, *, /, %, ++, --

대입 연산자
=, +=, -=, *=, /=, %=

비교 연산자
==, !=, <, >, <=, >=, ===[각주:1]

논리 연산자
&&, ||, !

문자열 연산자
+ 연산자를 사용해서 문자열을 붙일 수 있슴.

조건 연산자(자바의 3항 연산자)
variablename=(condition)?value1:value2
예) greeting=(visitor=="PRES")?"Dear President ":"Dear "

전부 자바의 연산자와 동일하며 자바에 없는 연산자 ===는 다음의 예제를 통해 알 수 있습니다.
x=5
y="5"
x==y returns true
x===y returns false


  1. 변수의 값과 타입이 모두 같은지 확인한다. [본문으로]

'AJAX > JavaScript' 카테고리의 다른 글

JavaScript Try...Catch Statement  (0) 2007.07.09
JavaScript Events  (2) 2007.07.09
JavaScript For Loop와 While Loop  (1) 2007.07.09
JavaScript Functions  (0) 2007.07.09
JavaScript Popup Boxes  (0) 2007.07.09
JavaScript Operators  (0) 2007.07.09
JavaScript If...Else와 Switch Statement  (0) 2007.07.09
JavaScript Variables  (0) 2007.07.09
JavaScript Where To ...  (0) 2007.07.09
JavaScript How To ...  (0) 2007.07.09
Introduction to JavaScript  (0) 2007.07.09
top


JavaScript If...Else와 Switch Statement

AJAX/JavaScript : 2007.07.09 12:25


참조 :
http://www.w3schools.com/js/js_if_else.asp
http://www.w3schools.com/js/js_switch.asp

if문 예제
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>")
}
else if (time>=10 && time<16)
{
document.write("<b>Good day</b>")
}
else
{
document.write("<b>Hello World!</b>")
}
</script>

switch문 예제
<script type="text/javascript">
//You will receive a different greeting based
//on what day it is. Note that Sunday=0,
//Monday=1, Tuesday=2, etc.

var d=new Date()
theDay=d.getDay()
switch (theDay)
{
case 5:
  document.write("Finally Friday")
  break
case 6:
  document.write("Super Saturday")
  break
case 0:
  document.write("Sleepy Sunday")
  break
default:
  document.write("I'm looking forward to this weekend!")
}
</script>

둘 다 자바의 조건문이랑 완전 같기 때문에 pass
&&와 || 연산자 사용도 같습니다.

'AJAX > JavaScript' 카테고리의 다른 글

JavaScript Try...Catch Statement  (0) 2007.07.09
JavaScript Events  (2) 2007.07.09
JavaScript For Loop와 While Loop  (1) 2007.07.09
JavaScript Functions  (0) 2007.07.09
JavaScript Popup Boxes  (0) 2007.07.09
JavaScript Operators  (0) 2007.07.09
JavaScript If...Else와 Switch Statement  (0) 2007.07.09
JavaScript Variables  (0) 2007.07.09
JavaScript Where To ...  (0) 2007.07.09
JavaScript How To ...  (0) 2007.07.09
Introduction to JavaScript  (0) 2007.07.09
top


JavaScript Variables

AJAX/JavaScript : 2007.07.09 12:19


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

예제
<script type="text/javascript">
var name = "Hege"
document.write(name)
document.write("<h1>"+name+"</h1>")
</script>
데이터를 저장하기 위해 변수를 사용할 수 있다.

변수
변수는 저장하기를 원하는 데이터를 담을 "컨테이너"다. 변수의 값은 스크립트 내에서 변할 수 있다. 값을 보거나 변경하기 위해 변수를 참조할 수 있다.
대소문자를 구분한다.
변수의 첫 글자는 반드시 (숫자가 아닌)문자이거나 언더바여야 한다.

변수 선언하기
var를 사용하여 선언할 수 있지만 var를 사용하지 않고도 선언할 수 있다.
var strname = some value
strname = some value

변수에 값 대입하기
변수를 왼쪽에 대입하려는 값은 오른쪽에
var strname = "Hege"
strname = "Hege"

Lifetime of Variables
함수 안에서 변수를 선언하면 지역 변수 :: 해당 함수 내에서만 참조할 수 있다. 따라서 여러 함수에서 같은 이름의 변수를 사용할 수 있다.
함수 밖에서 변수를 선언하면 전역 변수 :: 페이지가 로딩 될 때 선언되며 페이지가 종료될 때 까지 사용할 수 있다.


'AJAX > JavaScript' 카테고리의 다른 글

JavaScript Try...Catch Statement  (0) 2007.07.09
JavaScript Events  (2) 2007.07.09
JavaScript For Loop와 While Loop  (1) 2007.07.09
JavaScript Functions  (0) 2007.07.09
JavaScript Popup Boxes  (0) 2007.07.09
JavaScript Operators  (0) 2007.07.09
JavaScript If...Else와 Switch Statement  (0) 2007.07.09
JavaScript Variables  (0) 2007.07.09
JavaScript Where To ...  (0) 2007.07.09
JavaScript How To ...  (0) 2007.07.09
Introduction to JavaScript  (0) 2007.07.09
top