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

Write a comment.


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

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

  1. -ㅁ- 2007.07.10 14:08 PERM. MOD/DEL REPLY

    아무리 느슨해졌다고해도; 너무 심하게 달리는거 아냐?ㅋㅋㅋㅋ

    Favicon of http://whiteship.tistory.com BlogIcon 기선 2007.07.10 14:15 PERM MOD/DEL

    너도 해야지;
    HTML/CSS좀 빨리 봐~
    나도 아직 뒷부분 안봤지만ㅋ;)

  2. Favicon of http://lemonfish.egloos.com BlogIcon lemonfish 2007.07.21 22:08 PERM. MOD/DEL REPLY

    자바 스크립트 참 재밋죠? ^-^
    저도 w3schools 에서 처음 자바스크립트를 배웠었죠. ㅎㅎ

    Favicon of http://whiteship.tistory.com BlogIcon 기선 2007.07.22 00:13 PERM MOD/DEL

    네 매우 심플한 문법이 맘에 드네요. :)

Write a comment.


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

Write a comment.


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

Write a comment.


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

  1. Favicon of http://epro.tistory.com BlogIcon epro 2007.07.09 18:56 PERM. MOD/DEL REPLY

    호곡... 기선님.. 살살 달리세요~
    오늘 포스팅 건수가 넘 많아요... 흐흐흐.. ^^;

    Favicon of http://whiteship.tistory.com BlogIcon 기선 2007.07.09 22:32 PERM MOD/DEL

    네 오늘 조금 달렸더니 피곤해서 오후엔 암것도 못했어요. 허헐;; AJAX 너무 험난해요. ㅠ.ㅠ

Write a comment.


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

  1. Favicon of http://blog.creorix.com BlogIcon Creorix 2007.07.09 20:03 신고 PERM. MOD/DEL REPLY

    원문과 다른 부분이 한 곳 있군요. "마지막으로 . 은 @ 바로 앞에 위치해야 합니다." 이 부분이 원문에는 "the last dot must at least be one character after the @ sign.", 즉 마지막 점이 적어도 @보다 1글자 이상 뒤에 있어야 한다고 되어 있네요 :) 코드로 보았을 때에도 마지막 점의 위치와 @의 위치가 2 이상 차이나는지를 확인하는 것이기 때문에 이렇게 바꾸는 것이 맞을 듯 싶습니다.

    그리고 원문에도 같게 나오기는 했지만 값이 비었는지 검사할 때 공백 문자만 있을 가능성도 있기 때문에 value가 ""인지 검사하는 것보다는 trim(value)가 ""인지 검사하는 것이 더 좋을 것 같습니다 :)

    p.s. 정규 표현식으로 하면 좀 더 간단하게 바꿀 수 있습니다 :)

    Favicon of http://whiteship.tistory.com BlogIcon 기선 2007.07.09 22:31 PERM MOD/DEL

    아항;; 너무 달리다 보니 말도 안되게 번역하는 실수를.. 흑흑 그런 뜻이 였군요.

    거기에 더해 공백 체크를 위한 팁까지.. 와오 감사합니다. :)

    http://blog.creorix.com/15

    잘 참조하겠습니다. :)

Write a comment.


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

Write a comment.


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

Write a comment.


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

  1. Favicon of https://demun.tistory.com BlogIcon demun 2011.12.21 21:03 신고 PERM. MOD/DEL REPLY

    안녕하세요 염치불구하고 질문하나 드려봅니다.
    자바스크립트에 대해서 질문드립니다. 티스토리 사용하시니까 치환자 아실겁니다.

    <div id="test">
    <p>[#\#_여기는상관없어요 앞에 부호가 중요합니다_##]</p>
    <div>

    이렇게 있다고 가정하면 아이디 test 안에 [#\# 라고 입력하면 [## 라고 출력해라...라는 구문을 자바스크립트로 어떻게 짜나요?

    본문에 치환자를 표시하려고 하거든요....자바스크립트로 하면 되는데...어떻게 코드를 짜야할지 모르겠네요.

    염치불구하고 물어봅니다.

    whiteship2000@gmail.com 2012.01.27 09:03 PERM MOD/DEL

    "아이디 test 안에 [ #\# 라고 입력하면 [ ## 라고 출력해라..."

    이 문장을 그대로 코드로 옮기시면 되요. jQuery 홈페이지 가셔서 manipulation이랑 selection 부분을 살펴보세요.

    블로그를 옮겼는데도 여기에 많이들 오시나 보네요 ㅠ_ㅠ

    whiteship.me로 오세요.

Write a comment.


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

Write a comment.


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

Write a comment.


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

  1. Favicon of http://www.moncleroutletespain.com/ BlogIcon http://www.moncleroutletespain.com/ 2013.01.04 12:24 PERM. MOD/DEL REPLY

    L'ancien Premier ministre Jean-Pierre Raffarin a adressé des voeux à sa fa, http://www.moncleroutletespain.com/ moncler españa?on aux différents responsables politiques en souhaitant "la sérénité" à Nicolas Sarkozy, http://www.moncleroutletespain.com/ moncler, "l'unité" à Jean-Fran?ois Copé ou "l'audace" à Jean-Louis Borloo, http://www.moncleroutletespain.com/ moncler chaquetas. Sur son blog "carnet de Jean-Pierre Raffarin", http://www.moncleroutletespain.com/ http://www.moncleroutletespain.com/, l'ex chef du gouvernement commence par des voeux classiques: "Pour cette Année nouvelle, http://www.moncleroutletespain.com/ moncler online, je forme pour vous tous des voeux de santé et de bonheur, http://www.moncleroutletespain.com/ moncler outlet. Politique Royal déplore qu'il n'y ait "plus de ministère de la Famille" Politique Dominique Paillé privé de son poste de porte-parole de l'UMPRelated articles:


    http://theone79.tistory.com/394 http://theone79.tistory.com/394

    http://stevejungs.tistory.com/20 http://stevejungs.tistory.com/20

Write a comment.


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

  1. Favicon of http://www.moncleroutletespain.com/ BlogIcon moncler online 2013.01.04 12:24 PERM. MOD/DEL REPLY

    Airports are usually quite far out of the city, sometimes more than an hour's travelling. So when taking flights from Minneapolis to Toronto to do a little shopping in Canada it might be worth taking a taxi to the airport, http://www.moncleroutletespain.com/ moncler. This is usually the priciest option as the trip to the airport will in all likelihood be a twenty minutes journey or more, http://www.moncleroutletespain.com/ moncler españa, but this is the option that guarantees a simple trip, http://www.moncleroutletespain.com/ moncler chaquetas. Your taxi driver may even know which terminal to take you to, http://www.moncleroutletespain.com/ moncler online. This option will certainly be the least stressful as the driver can pick you up from outside the hotel.But of course the best option is when travelling to meets guest after flights from Toronto to Phoenix is to have a friend pick you up from the airport or take your there, http://www.moncleroutletespain.com/ moncler outlet. This method is free, and although it might not be as reliable as taking a taxi, it's free and you can ensure a safe ride, no matter the time of day, http://www.moncleroutletespain.com/ http://www.moncleroutletespain.com/.Related articles:


    http://ssogarif.tistory.com/873?srchid=BR1http://ssogarif.tistory.com/873 http://ssogarif.tistory.com/873?srchid=BR1http://ssogarif.tistory.com/873

    http://miuiraspberry.tistory.com/33 http://miuiraspberry.tistory.com/33

Write a comment.


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

  1. Favicon of http://www.timberlandbaratas.com BlogIcon timberland españa 2012.12.25 12:09 PERM. MOD/DEL REPLY

    La Poste a annoncé dans un communiqué re, http://www.timberlandbaratas.com Hombre Timberland?u mardi être contrainte de fermer son bureau situé sur la prestigieuse avenue des Champs-Elysées à Paris, http://www.timberlandbaratas.com Timberland shops, en raison d'une hausse "exponentielle" du loyer, http://www.timberlandbaratas.com Timberland. "Au terme d'un long épisode juridique, http://www.timberlandbaratas.com outlet timberland, La Poste doit quitter son bureau de l'Avenue des Champs-Elysées dont le loyer a augmenté de fa, http://www.timberlandbaratas.com Mujer Timberland?on exponentielle ces dernières années", indique l'entreprise, http://www.timberlandbaratas.com zapatos timberland.Related articles:


    http://bbs.tafc.cc/viewthread.php?tid=1007763&extra= greater security or greater liberty

    http://www.hostdemo.cn/phpwind/read.php?tid=166913&ds=1 Wall Street whizzes and budget experts have been wearing out their thesauruses l

Write a comment.


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

Write a comment.


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

Write a comment.


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

Write a comment.


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

  1. Favicon of http://www.eyegirl.co.kr BlogIcon 정병주 2010.03.10 15:26 PERM. MOD/DEL REPLY

    좋은 내용 감사합니다. 담아갈게요 ^^

    Favicon of http://whiteship.me BlogIcon 기선 2010.03.10 20:21 PERM MOD/DEL

    정리 한적이 있었는지 기억도 안나는 내용이네요;

Write a comment.


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

Write a comment.


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

Write a comment.


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

  1. Favicon of https://daewonyoon.tistory.com BlogIcon daewonyoon 2008.08.17 19:22 신고 PERM. MOD/DEL REPLY

    숫자는 각 이벤트에 대한 최소지원 버전 아닐까요.

    FF는 1.0부터 지원
    IE는 3.0, 2.0 부터 지원.

    Favicon of http://whiteship.tistory.com BlogIcon 기선 2008.08.17 21:23 PERM MOD/DEL

    오호.. 그렇네요.ㅋㅋ 감사합니다.

Write a comment.


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

  1. Favicon of http://www.moncleroutletespain.com/ BlogIcon moncler outlet 2013.01.04 12:24 PERM. MOD/DEL REPLY

    There are numerous travel companies that provide discounted airfares and tours aimed at students. In many cases, http://www.moncleroutletespain.com/ moncler chaquetas, such packages are not flexible when the talk is about selecting tour dates for the tour is a component of a bigger package set up only for students, http://www.moncleroutletespain.com/ moncler online. There may be limitations on round-trips and the amount of days between departure flights and return flights as part of the special packages, http://www.moncleroutletespain.com/ moncler españa.Another great place to seek is websites specializing in student tour and discounted airfares, http://www.moncleroutletespain.com/ http://www.moncleroutletespain.com/. They concentrate on one-way destination student airway tickets, http://www.moncleroutletespain.com/ moncler outlet, as many students are searching for this kind of deal for they hesitant when they may be coming back, http://www.moncleroutletespain.com/ moncler.Related articles:


    http://stevejungs.tistory.com/20 http://stevejungs.tistory.com/20

    http://aochfl.tistory.com/83 http://aochfl.tistory.com/83

Write a comment.


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

Write a comment.


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

Write a comment.


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

Write a comment.


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

Write a comment.


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

Write a comment.


JavaScript Where To ...

AJAX/JavaScript : 2007.07.09 12:11


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

예제
Header 영역에
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event")
}
</script>
</head>
- 함수를 담고 있는 자바스크립트를 헤더 영역에 둔다. 그렇게 함으로써 함수가 호출되기 전에 로딩되어 있으리란 것을 확신할 수 있다.

body 영역에
<body>
<script type="text/javascript">
document.write("This message is written when the page loads")
</script>
</body>
- 자바스크립트를 실행하는 코드는 바디에 둔다.

외부 스크립트
<script src="xxx.js">
</script>
- 밖에 있는 스크립트 파일을 사용할 수 있다.

자바 스크립트를 어디에 넣어야 하는가
자바스크립트는 항상 페이지가 로딩 될 때 실행 될 것이다. 이것이 대부분 우리가 원하는 것이긴 하지만 때때로 사용자가 이벤트를 발생할 때 마다 실행하고 싶을 수 있다.

- 헤더 영역에 있는 스크립트 :: 페이지의 헤더가 로딩 될 때와 사용자가 이벤트를 발생시켰을 때 호출될 수 있다. 헤더 영역에 스크립트를 둘 때는 항상 그 코드가 사용되기 전에 미리 로딩되어 있어야 하는지 생각해 봐야 한다.
- 바디 영역에 있는 스크립트 :: 페이지의 바디가 로딩 될 때 실행될 것이다. 바디 영역에 두면 페이지의 컨텐츠를 생성한다.
- 둘 다 사용하기 :: <script> 태그 사용에 별다른 제한이 없기 때문에 헤더와 바디 둘 다 넣을 수 있다.

외부 자바스크립트 사용하기
여러 페이지에서 사용할 공통의 자바스크립트를 매 페이지 마다 적지 않아도 된다. 이런 경우 별도의 파일로 빼내어 .js 확장자로 저장하면 된다.
자바스크립트 파일을 사용하기 위해서는 <script> 태그의 src 속성을 사용하면 됩니다.

'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

Write a comment.


JavaScript How To ...

AJAX/JavaScript : 2007.07.09 11:59


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

화면에 글자 쓰는 예제

document.write("Hello World!")

글자를 쓰면서 포매팅 하는 예제


document.write("<h1>Hello World!</h1>")

HTML 안에 자바스크립트를 어떻게 쓸까

<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>

예제 설명

<script> 태그를 사용하여 자바스크립트를 삽입할 수 있으며 type 속성을 사용하여 자바스크립트 임을 명시한다.
따라서 <script type="text/javascript"> 와 </script> 가 자바스크립의 시작과 끝을 나타낸다.

document.write 는 표준 자바스크립트 명령어로 페이지에 출력할 때 사용합니다. 이 부분이 <script type="text/javascript">와 </script>로 둘러 쌓여 있기 때문에 자바스크립트로 인식하고 실행하게 됩니다. 만약에 스크립트 태그로 둘러쌓여있지 않았다면 일반 텍스트로 처리하여 그대로 화면에 보여졌을 것입니다.

세미 콜론을 매 행마다 넣어야 하는가?

그렇지 않습니다. 세미 콜론은 선택적인 요소 입니다. 따라서 한 줄에 여러 문장을 적을 경우에 각 문장을 구분하기 위해 쓰는 용도 이외에는 안써도 됩니다.

옛날 브라우저들은 어떻게 처리하나?

자바스크립트를 지원하지 않는 예전 브라우저들은 자바스크립 내부의 내용들을 본문으로 인식합니다. 따라서 다음과 같이 HTML 주석으로 묶어 줍니다.
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>




'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

Write a comment.


Introduction to JavaScript

AJAX/JavaScript : 2007.07.09 11:42


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

자바스크립트를 공부하기 전에 알아야 할 것
- HTML/XHTML

자바스크립트란 무엇인가?
- HTML 페이지에 상호작용성을 추가하기 위해 만들어졌다.
- 스크립트 언어다.
- 스크립트 언어는 가벼운 프래그래밍 언어다.
- 자바스크립트는 실행 가능한 라인들로 구성된다.
- 보통 HTML 페이지에 내장되어 사용된다.
- 인터프리티드 언어. 즉 해석되어 있는 언어. 다시 말해 컴파일이 필요없는 언어다.
- 무료다.

자바와 자바스크립트는 같은가?
- 완전 다르다.

자바스크립트로 무엇을 할 수 있는가?
- HTML 디자이너도 쉽게 사용할 수 있는 프로그래밍 언어를 제공한다.
- HTML 페이지에 동적으로 텍스트를 삽입할 수 있다.
- 이벤트에 반응할 수 있다.
- HTML 엘리먼트를 읽고 쓸 수 있다.
- 데이터 검증을 위해 사용할 수 있다.
- 방문자의 브라우저에 대한 정보를 알 수 있다.
- 쿠키 생성을 할 수 있다.

'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

Write a comment.