JavaScript Confirm > 웹스터디

Html&CSS&Script JavaScript Confirm

페이지 정보

작성자 에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 16,497회 작성일 10-11-02 14:06

본문

1. 자바스크립트로 무엇을 할 수 있는가?
자바스크립트는 네스케이프 2.0, 익스플로러 3.0부터 지원되기 시작하였다.
자바스크리트는 객체 지향 스크립트 언어로서 프로그램 코드가 HTML 문서 사이에 직접 들어가도록 고안되었다.
이 자바스크립트로 만든 프로그램에서는 사용자가 마우스를 클릭하거나 키보드를 입력하는 것과 같은 작업을 즉시 처리할 수 있다. 또한 오직 클라이언트 쪽에서만 실행되기 때문에 네트웍을 통한 데이터의 전송 없이 모든 작업을 처리할 수 있다. 그러므로 사용자는 입력한 내용이 제대로 되었는지를 서버로 데이터를 전송하지 않고도 즉석에서 확인하여 처리할 수가 있게된 것이다.
사용자가 페이지를 열거나 이동할 때를 알아내어 원하는 작업을 수행할수 있고
브라우저 자체에 대한 정보를 알아낸다거나 플러그 인 정보를 알아낼 수 있으며
프레임을 제어한다거나
독립윈도우를 띄워 특정 정보를 전달할 수 있다
방문했던 페이지를 기록해 놓은 히스토리를 관리하는 등의 작업등도 수행할수 있으며
여러 가지 이벤트(사건)에 대한 각개의 반응들을 자유롭게 연출시킬 수 있다.
2. 자바스크립트는 자바와 어떻게 다른가?
자바스크립트가 여러 가지 측면에서 자바와 닮은 것은 사실이지만 동일한 언어는 아니다.
자바스크립트는 자바보다 훨씬 간단하며 프로그래밍도 훨씬 간편하여 누구나 조금만 익히면 쉽게 배워서 사용할 수 있다
자바보다 좀더 간편하고 편리해진 형태로 고안되었지만 대부분 자바의 문법구조를 따르고 있다.
자바는 미리 컴파일되어 코드를 해석해 놓지만 자바스크립트는 HTML 문서속에 삽입되어 불려지는 순간 코드가 해석된다. 따라서 컴파일러를 미리 준비해 놓지 않아도 되며 어디에서나 실행 가능하다.
자바스크립트는 자바처럼 타입체크를 철저히 하지 않으므로 프로그래밍이 용이하다.
자바처럼 타입체크를 철저히 하지 않는 대가로 몇가지 객체지향 요소를 포기하고 있는데, 가령 클래스를 정의할 수 없다거나 클래스를 상속할 수 없다든가 하는 것등이다.
대신 자바스크립트는 객체를 정의하여 사용할 수 있도록 하고 있다. 객체나 클래스는 자바나 자바스크립트에서 핵심이 되는 용어이므로 강좌중에 다시 정의하고 자세히 설명하도록 하겠다.
3. 가장 간단한 자바스크립트 프로그램 짜보기
우선 무턱대고 가장 간단한 프로그램을 짜보자. 어느 프로그래밍 교재에서나 맨처음 시작하는 프로그램
HELLO WORLD! 이다


<HTML>
      <HEAD>
           <TITLE>자바스크립트 테스트 </TITLE>
           <SCRIPT Language="Javascript">

           </SCRIPT>
      <BODY>
      </BODY>
</HTML>

자바스크립트는 <SCRIPT Language="Javascript">....</SCRIPT> 라는 태그에 의해서 구분된다.
스크립트의 종류가 자바스크립트만이 있는 것은 아니다. 익스플로러에서 요즘 밀고 있는 VBSCRIPT나..여러 가지 스크립트 언어들이 있지만 모두 자바스크립트에 비하면 기능들이 떨어지기 때문에 유독 자바스크립트만이 명성을 날리고 있다.

자바스크립트 코드는 보통 HEAD 태그 안에 들어간다.
그 이유는 브라우저가 코드를 해석할 때 HEAD에서부터 코드를 읽어 나가기 때문에 스크립트 코드를 먼저 읽게 만들기 위함이다. 스크립트 코드를 먼저 읽어야 BODY등에서 코드를 실행시킬 수가 있기 때문이다.
특별한 이유가 있지 않는 이상 자바스크립트 코드는 HEAD 태그 안에 넣는다고 알아두자.

document.write("HELLO WORLD!")
드디어 처음 만나는 자바스크립트 코드이다.
이 코드는 document(현재 브라우저 문서)에 write(써라) 무엇을? HELLO WORLD! 를... 이라고 명령하고 있다.

대부분의 자바스크립트 코드가 이처럼 이해하기 쉽게 짜여져 있다. 따라서 약간의 지식만 있다면 직접 코딩을 하는 것은 어렵더라도 이미 짜여진 코드를 읽고 디버깅하며, 응용하여 다른 방식으로 사용할 수 있는 수준까지 가는 것은 그리 어렵지 않다.

4. 주석문

<HTML>
      <HEAD>
           <TITLE>자바스크립트 테스트 </TITLE>
           <SCRIPT Language="Javascript">
           
           </SCRIPT>
      <BODY>
      </BODY>
</HTML>

다시한번 살펴보자.
은 자바스크립트가 지원되지 않는 브라우저들에서 코드가 그대로 브라우저에 나타나는 것을 방지해 주기 위함이다.

자바스크립트에서 사용되는 주석문은 /*와 */ 사이에 들어가는 문장
// 뒤에 오는 문장을 주석문으로 취급한다.
주석을 달아놓는 것은 소스를 읽기 쉽게 하고 설명을 붙이고 싶을 때 사용할 수 있다.

5. 자료형

자바스크립트에서 여러 가지 자료들이 어떠한 형태로 표현되는지에 대해 살펴보도록 하자.
현재 자바스크립트에서 기본적으로 지원하는 자료형에는 정수, 부동소수점, 문자, 문자열, null값, Boolean 등이 있다.
자세하게 살펴보기 보다 우선 이런 것이 있다 정도만이라도 알아두는 것이 좋겠다.
자바스크립트에서는 변수에 원하는 자료를 대입하기만 하면 자료형이 필요한데로 자동적으로 바뀌어지기 때문에 특별히 자료형에 얽매이거나 연연할 필요가 없다.

정수 : 정수는 10진수, 16진수, 8진수의 3가지 형태로 표현되고 있다. 양수나 음수가 될 수도 있다.
부동소수점 : 자바스크립트에서 부동소수점은 12.43, -4.555 와 같이 소수 부분이 있는 10진수를 의미한다. 지수를 사용하여 자리수가 큰 수도 표현할 수 있다. 예를 들어 2×10⁴같은 숫자는 2E4 로 표현한다.
자바스크립트에서는 가끔 부동소수점의 계산이 정확하지 못한 경우가 있으므로 가급적이면 정수형을 사용하는 것이 좋겠다.
Boolean : 크기가 1비트인 자료형으로서 true와 false의 두가지 값만을 갖는다.
이것은 주로 함수의 리턴 값이나 관계 연산자의 결과값으로 사용한다. (자세한 것은 추후 설명)
null 값 : null은 말 그대로 아무값도 없다는 것을 의미한다.
예를 들어 어떤 변수의 값을 조사하는데, 그 변수가 아무런 값으로도 정의되어 있지 않다면 null값이 나오게 되는 것이다.
if (test==null)
     document.write("test 변수는 정의되지 않았습니다.);
else
     document.write("test 변수값 : " +test);

if (만약에)
test==null  (test 값이 null (값이 없다면) 이라면) document.write (현재 문서에 출력하라) 무엇무엇을~
else (그렇지 않고 test 값이 있다면)
document.write (현재문서에 출력하라) test 변수값 : 얼마 라고
문자열
문자열은 따옴표 (" " 나 ' ') 사이에 들어가는 모든 문자들을 가리킨다.
'test'  "안녕하세요. 프리파인더입니다"  와 같은 경우이다.

6. 변수 선언하기

    1) 변수 만들기
        변수란 프로그램 내에서 특정 자료형의 값을 가지고 있는 저장 장소를 의미하는 것.
        변수는 반드시 알파벳 문자나 _ 로 시작해야 한다.
        예 : var aaa, ABc112, _finder  (단 자바스크립트는 대문자와 소문자를 구별한다)
    2) 예약어
        예약어란 자바스크립트 프로그램 내에서 사용되는 명령어, 키워드 등으로서 변수 이름으로 사용
        할 수 없다.

abstract boolean break byte case catch char class const continue default do double else extend false
final finally float for function goto if implements import in instanceof int interface long native
new null package private protected public return short static super switch synchronized this throw
thorws transient true try var void while with

    3) var를 이용하여 변수 선언하기
       자바스크립트에서는 변수를 사용하기만 해도 변수의 선언이 이루어 진다.
       하지만 프로그램 상에서 변수의 사용범위를 좀더 명확히 하고 체계적으로 보이도록 하기 위하여
       var를 이용하여 변수를 선언해주면 더욱 좋다.
       var를 통하여 변수를 선언하면 같은 이름의 변수라 할지라도 현재 자신이 속해 있는 영역 안에서만
       효력을 발생시키게 된다.
       var i=2  (i라는 변수를 선언하고 i의 값에 2를 대입하였다)

1  <HTML>
2     <HEAD>
3       <TITLE> 자바스크립트 테스트> </TITLE>
4        <SCRIPT Language="Javascript">
5           
17      <SCRIPT>
18   </HEAD>

19   <BODY>
20      <SCRIPT Language="Javascript">
21         
24      </SCRIPT>
25   </BODY>
26 </HTML>

앞의 라인 번호는 설명의 편의상 기입하였다. (실제로는 쓰면 안돼요~)

다소 어렵더라도 위의 예제를 한번 자세히 살펴보자.
우선 BODY부터 읽는다. (HEAD는 실제 실행이 시작되는 부분이 아니다)
BODY 22번 줄에서 first_func()라는 함수를 호출했다. 쭉~ 위로 올라가서 first_func()라는 함수를 찾아보자.

6번 줄에 있다. 이 함수는 무얼 하는 함수인가..
먼저 i에 1을 대입했다. (7번줄)
8번줄에서...document(현재문서에) write (써라) 무엇을?
문자열과 변수를 연결시켜 출력하고자 한다면 +기호로 둘을 연결시킨다.
문자열은 앞서 설명했지만 따옴표로 묶여진 문장이다. 그대로 출력한다, 변수형 i는 그 자체가 값이 아니라 그 변수가 가지고 있는 값이 실제 값이다. 7 번 줄에서 1을 대입한 것을 확인하라
그리고 마지막으로 "<P>"라는 문자열을 계속 이어서 출력하려고 하니 앗! html태그. 문장 단락 나눔 태그..
자바스크립트도 어차피 html내의 일부이므로 말을 들어야 할것이다.

그래서 8번 라인까지의 출력결과는 어떻게 될까요
    (이 질문을 클릭하면 답이 나온다)

계속 읽어 내려가니 second_func()함수를 first_func()가 호출. 12라인에 second_func()가 있다.
i에 2를 대입했다.. 그런데 이번엔 var에 의해서 선언되었다.
14번 라인에서의 출력결과는?
네.. sccond_func에서 i값 : 2
second_func()를 마치면 다시 제어는 원래의 장소 10번 라인으로 되돌아 간다.
앗. 또 출력하라고 한다. first_func에서 i값 : 얼마일까?????

var로 정의된 변수는 그 효력이 자신이 거주하고 있는 함수내에서만으로 한정된다. 그 밖으로 벗어나면 효력을 잃어 버리게 된다. 따라서.. 정답은 1

var의 기능에 대해 이해가 가셨는지?

7. 자바스크립트에서 사용되는 연산자

1) 수치연산자

덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/), 나머지(%), 증감연산자(++,--)가 있다.
모든 프로그래밍 랭귀지에서는 오른쪽에서 수치계산을 하여 왼쪽으로 값을 넘겨주는 구조를 취한다.
num=12.0+7.0   ☞ num=19.0
num=13.0%5.0   ☞ num=3.0

다소 낯선 연산자가 증감연산자일 텐데 변수의 값을 하나씩 증가시키거나 감소시키는 역할을 한다.
이 연산자는 변수의 앞에 붙느냐, 뒤에 붙느냐에 따라 의미가 달라지기 때문에 주의해야 할 필요가 있다.
num=10;              // num이라는 변수에 10을 대입한다
num++;               // num의 값을 1 증가시킨다. num=11
++num;               // num의 값을 1 증가시킨다. num=12 (여기서는 위의 것과 차이가 없다)
assign=num++    // 계산순서는 항상 왼쪽부터 num의 값을 assign에 대입한후 num을 1 증가,
                           // num=13, assign=12
assign=++num    // 계산순서는 항상 왼쪽부터 num을 증가시킨후 assign에 대입한다.
                           // num=14, assign=14  (이 차이를 음미해 보라)

2) 문자열 연산자 +

수치연산자 +가 문자열 사이에서 사용될 때에는 문자열 연산자로 변신한다!
즉 +기호 양쪽에 있는 문자열을 하나로 합하여 하나의 문자열로 만들어 주는 것이다.
str="안녕하세요 "+"프리파인더 입니다"
이결과로 str에는 "안녕하세요 프리파인더입니다." 라는 문자열이 대입되게 된다

3) 비교 연산자
A < B  A가 B보다 작다 , A>B A가 B보다 크다
A<=B  A가 B보다 작거나 같다,  A>=B A가 B보다 크거나 같다
A==B  A가 B와 같다,  A!=B  A가 B와 다르다
!A  A 가 아니다
4) 조건 연산자
&&(AND연산자), ||(OR연산자), ? 연산자가 있다.
&&(AND연산자)는 두 개의 조건이 모두 참인 경우에만 참이고 그 이외에는 모두 거짓이다.
||(OR연산자)는 두 개의 조건중 하나만 참이면 참이다.
? 연산자는 주어진 한 조건의 참/거짓에 따라서 값이 달라지도록 만들고 싶을 때 사용하는 연산자
조건문이 참인 경우 앞의 값이 선택되고 거짓인 경우 뒤의 값이 선택된다.
num=10;
assign=(num>5) ? 15 : 20 ;
이 연산은 먼저 num이 5보다 큰수인지를 조사한는 비교문부터 시작하게 된다. 물론 앞에서 num 변수에 10의 값을 넣었기 때문에 이 조건은 참이다. 그러므로 : 기호 앞에 있는 15가 선택되어 assign 변수에 들어가게 된다. 만약 비교문이 거짓이었다면 20의 값이 assign 변수에 들어갔을 것이다.
5) 대입 연산자
대입 연산자는 말 그래도 오른쪽에 있는 값을 왼쪽에 있는 변수에 대입하는 연산자이다. 이 연산자는 지금까지 많이 사용해 왔기 때문에 생략하기로 하고, 여기서는 복합 대입 연산자에 대해 살펴보도록 하겠다.
복합 대입 연산자는 대입 연산자에 수치 연산자를 덧붙인 것이다.
이것은 수치의 연산과 대입이 동시에 이루어 진다.
num=10;            // num에 10을 대입하였다
num+=20;         // num에 20을 더한후 그 값을 다시 num에 대입한다.
8. 제어문

대부분의 프로그램들은 한가지 일만을 하고 끝내는 것이 아니라 어떤 특정한 조건 하에서 특정 동작을 반복적으로 수행하는 경우가 많다. 이를 위해서 어떻게 해야 하는가?
이때 사용되는 것이 제어문이다.
제어문이란 프로그램 안에서 원하는 기능을 구현하기 위해 만들어 놓은 형식으로, 특정 조건에 맞는 기능을 수행시킨다거나, 같은 기능을 반복해서 수행시킨다거나, 특정위치로 이동시킨다거나 하는 식으로 프로그램을 구조화 시킨다.
이 제어문의 형식은 모든 프로그래밍 언어에서 거의 유사하며, 또한 프로그램을 이해하는데 있어 매우 중요하다.
프로그래밍을 처음 하는 사람이라면 특히 더욱 주의를 기울여 공부해야 할 부분이다.
프로그래밍의 기본이라고 할 수 있다.

1) if - else

조건 제어문을 구현하는 if는 주어진 조건을 만족시키는 경우에만 지정된 동작을 하도록 만들고 싶을 때 사용한다.

①  if (조건) {
        문장;
     }

③  if (조건1) {
        문장1;
     }
     else if(조건2){
        문장2;
     }
     else if(조건3){
        문장3;
        .......
     }     else{
        문장n;
     }

②  if (조건) {
        문장1;
     }
     else {
        문장2;
     }

①번 형식은 조건이 참인 경우에만 문장을 실행시킨다.
②번 형식은 조건이 참인 경우에는 1번 문장을 실행시키고 거짓인 경우에는 2번 문장을 실행시킨다.
③번 형식은 조건1이 참인 경우에 문장1을, 조건2가 참인 경우에는 문장2를, 조건 3이 참인 경우에는 문장 3을 실행시키며 어느조건도 만족시키지 못할 경우 문장 n을 실행시킨다.

// BODY 에 들어갈 자바스크립트

<script language="JavaScript">

</script>

위의 코드는 시간대마다 다른 메시지를 출력시키는 자바스크립트 프로그램이다. if 조건을 이용하여 각 시간에 따른 출력 메시지를 제어하고 있다.

2) while

while 문은 주어진 조건이 만족되는 동안 반복해서 지정된 기능을 수행시키는 반복 제어문이다.

          while (조건) {
              문장;
          }

즉 while 문은 조건이 참인 동안 계속해서 문장을 실행시키고 거짓이 되는 순간 while문을 벗어난다.

<HTML>
      <HEAD>
           <TITLE>자바스크립트 테스트 </TITLE>
      </HEAD>
      <BODY>
           <H1>1부터 10까지 제곱 구하기</H1>
           <SCRIPT Language="Javascript">
           
           </SCRIPT>
      </BODY>
</HTML>

위 예제에서 초기 i값을 1로 설정한후 while문에 들어간다. i가 11보다 작으므로 while문을 실행시킨다.
i와 i의 곱을 구해 출력한 다음 i를 1만큼 증가시킨다.
다시 조건을 검사하는데 i는 2이므로 다시 while 문을 실행, i의 값을 계속 1씩 증가시키면서 문장을 수행하다가 i가 11이 되면 조건을 만족시키지 못하므로 while 문을 빠져나오게 되고 스크립트가 종료된다.

3) for

for 문도 앞에 나온 while문처럼 주어진 조건 동안 반복햇 기능을 동작시키는 반복 제어문이다.
그러나 for 문은 while 문과 조금 다른 형식으로 사용된다. 즉 초기 변수값을 주고 이 변수값이 주어진 조건을 만족시키는 동안만 동작시키는 것이다.

for (초기값;조건;증감식) {
    문장;
}

for 문은 제일 먼저 변수에 초기값을 설정하고 변수값이 조건을 만족시키는 지를 체크하여 만족시키는 경우에만 문장을 실행시킨다. 그런데 변수값은 그대로 유지되는 것이 아니라 사이클을 돌 때마다 증감식을 통해 계속 바뀌어 나간다.

while 문으로 만들었던 것과 같은 예제의 프로그램을 만들어 보자

<HTML>
      <HEAD>
           <TITLE>자바스크립트 테스트 </TITLE>
      </HEAD>
      <BODY>
           <H1>1부터 10까지 제곱 구하기</H1>
           <SCRIPT Language="Javascript">
           
           </SCRIPT>
      </BODY>
</HTML>



while 문의 경우와 같은 방식으로 이해할 수 있을 것이다. 앞의 경우보다 더욱 간단한 프로그램이 만들어 졌다

4) break / continue

break는 앞에 나온 반복제어문 (while, for) 안에 위치하여 제어문을 강제로 종료시키는 역할을 한다.
continue는 break와 달리 제어문의 처음부분으로 제어를 이동시킨다.
break 나 continue 모두 제어를 강제로 이동시키는 것이기 때문에 세련되지 못한 프로그래밍 습관이라고 생각된다.

<HTML>
      <HEAD>
           <TITLE>자바스크립트 테스트 </TITLE>
      </HEAD>
      <BODY>
           <H1>1부터 10까지 제곱 구하기</H1>
           <SCRIPT Language="Javascript">
           
           </SCRIPT>
      </BODY>
</HTML>

5) return

return은 함수에서 특정값을 리턴값으로 보내고 싶을 때 사용한다.

<HTML>
      <HEAD>
           <TITLE>자바스크립트 테스트 </TITLE>
           <SCRIPT Language="Javascript">
           
           </SCRIPT>
      </HEAD>
      <BODY>
           <H1>1부터 10까지 제곱 구하기</H1>
           <SCRIPT Language="Javascript">
           
           </SCRIPT>
      </BODY>
</HTML>

함수부분에서 다시 설명하겠지만 여기서는 함수를 사용하여 함수에 계산과정을 의뢰하고 결과값을 리턴받았다
여기서는 계산식이 i*i로 단순하지만 계산이 복잡하다거나 여러 가지 동작을 수행하는 경우 따로 함수를 만들어 프로그램을 구조화 시키는 것은 좋은 습관이다.
square(i)로 전달된 값이 함수 square에서 연산하여 결과값이 return 명령으로 원래 호출했던 자리로 되돌려졌다.

9. 자바스크립트에서 함수 사용하기
함수란?
함수란 프로그램 내에서 특정 작업을 하기 위해 독립적으로 만들어진 하나의 단위이다. 함수를 쉽게 연상하려면 블랙박스를 연상하면 된다. 즉, 블랙박스처럼 어떤 값을 함수에 집어 넣으면 계산된 결과가 나오기 때문이다.
여기에서 입력되는 것을 매개변수(parameter)라 하고, 함수 계산 결과 나오는 것을 리턴값(return value)라고 한다.
물론 매개변수 값이 없는 것이 있을 수도 있고 리턴값이 없는 것이 있을 수도 있다.
프로그램에서 함수를 정의 하여 사용하는 목적은 특정 작업을 하나의 단위로 만들어 사용함으로써 반복적으로 사용할 수 있도록 하기 위함이다. 또한 특정 작업을 함수라는 단위로 분리해 냄으로서 프로그램 소스를 손쉽게 이해할 수 있도록 만들며, 더욱 구조화된 프로그램 소스를 만들 수 있게 한다.

자바스크립트에서 함수 정의하기

function 함수이름 (매개변수1, 매개변수2,......) {
       함수 문장
       return ans
}

위의 형식에서 매개변수는 없을 수도 있고 여러개 일 수도 있으며 리턴값도 없을 수 있다.
이 구조를 쉽게 이해할 수 있는 예제를 하나만 들어보겠다.

<HTML>
      <HEAD>
           <TITLE>자바스크립트 테스트 </TITLE>
           <SCRIPT Language="Javascript">
           
           </SCRIPT>
      </HEAD>
      <BODY>
           <H1><B>함수 예제</B></H1><P>
           <SCRIPT Language="Javascript">
           
           </SCRIPT>
      </BODY>
</HTML>



body에서 각기 다른 매개변수를 전달하며 testFunction이라는 함수를 두 번 호출하였고 함수는 그에 따른 작업을 하였다. 함수의 전형적인 사용례 이다.

이번에는 confirm이라는 자바스크립트 내장함수를 이용한 또 다른 예를 들어보겠다.
confirm은 화면에 question 메시지를 담은 대화 상자를 띄우고 확인/취소 여부를 물어보는 자바스크립트 내장함수
확인 버튼을 누르면 true가 리턴되고, 취소버튼을 누르면 false가 리턴된다.

<HTML>
      <HEAD>
           <TITLE>자바스크립트 테스트 </TITLE>
           <SCRIPT Language="Javascript">
           
           </SCRIPT>
      </HEAD>
      <BODY>
           <H1><B>이쁜이가 우리 모임에 참여하는 것을 찬성합니까?
                 </B></H1><P>
           <SCRIPT Language="Javascript">
           
           </SCRIPT>
      </BODY>
</HTML>

이 예제에서는 함수를 호출하여 리턴값을 answer라는 변수에 받았다. 그리고 그 값을 document.write라는 명령을 통해 화면으로 출력되도록 코딩하였다.

자바스크립트 내장함수
1. eval

eval 함수는 문자열로 입력된 수식을 계산해 주는 자바스크립트 내장함수이다. 예를 들어 '13+4'와 같은 문자열을 eval 함수의 매개변수로 입력하면, 문자열을 수식으로 변환한 후에 계산을 수행하여 17이라는 정수를 리턴해 주게 된다. 이 함수는 나중에 입력양식을 통해 입력받은 수식을 처리할 때 유용하게 사용될 수 있다.
자바스크립트 내에 내장되어 있는 함수이기 때문에 따로 함수를 정의하거나 할 필요 없이 그대로 사용하면 된다.

<HTML>
      <HEAD>
           <TITLE>자바스크립트 테스트 </TITLE>
      </HEAD>
      <BODY>
           <H1><B>수식 계산</B></H1><P>
           <SCRIPT Language="Javascript">
           
           </SCRIPT>
      </BODY>
</HTML>

   (위 함수의 실행예제)

여기서 prompt는 메시지와 입력필드를 가진 대화 상자를 보여주는 메소드이다. 사용자로부터 숫자나 문자열을 입력받고자 할 때 사용한다.
prompt(message,inputDefault)
message : 문자열이나 기존 객체의 특성, 대화 상자에 나타나는 메소드, 사용자에게 보내는 메시지 문구 작성
inputDefault : 문자, 숫자, 기존 객체의 특성, 입력 필드에 나타나는 값, 입력양식에 기본적으로 나타날 디폴트 값

2. parseInt / parseFloat

앞에서 우리는 정수와 문자열을 더할 때 정수가 문자열로 변환된다는 것을 배웠었다. 그런데 이와 반대로 문자열을 정수로 바꿀 수는 없을까? 바로 이때 사용하는 것이 parseInt라는 내장함수. parseInt는 입력된 문자열을 2진수, 8진수, 10진수, 16진수의 정수로 바꿔 준다.

10. 이벤트와 이벤트 핸들러

이벤트와 이벤트 핸들러의 의미

이벤트와 이벤트 핸들러는 자바스크립트에서 가장 중요한 개념중의 하나이다
이벤트와 이벤트 핸들러야 말로 자바스크립트의 핵심이라고 할수도 있을 것이다.

그럼 이벤트란 무엇일까?

이벤트는 사건이다.
이벤트는 방문자에 의해 일어난 특정한 동작이다.
자바스크립트는 이러한 이벤트를 체크한다.
이벤트의 예로
클릭이 발생했다거나 (click), 입력양식에 포커스가 왔다거나 (focus), 문서가 로딩되었다거나 (load), 링크위로 마우스가 왔다거나 (mouseover), 입력양식의 한 필드가 선택되었다거나 (select), 페이지를 떠난다거나 (unload), 입력양식을 서버로 보낸다거나 (submit) 하는 등등이다.
이렇게 방문자가 웹 브라우저 상에서 일으키는 동작이 이벤트이다.
그렇다면 이벤트 핸들러란 무엇일까?

이벤트 핸들러는 이벤트에 대한 자바스크립트의 반응이다.
이벤트 핸들러는 자바스크립트에 대한 동작 명령이다.
모든 이벤트 핸들러는 각각의 이벤트를 처리한다.
자바스크립트는 기본적으로 이벤트 핸들러에 의해 동작을 시작한다. (예외도 있음)
이벤트 핸들러의 예로
클릭이 발생했을 때 (onclick), 입력양식에 포커스가 왔을 때 (onfocus), 문서가 로딩되었을 때 (onload), 링크위로 마우스가 왔을 때 (onmouseover), 입력양식의 한 필드가 선택되었을 때 (onselect), 페이지를 떠날 때 (onunload), 입력양식을 서버로 보낼 때 (onsubmit) 하는 등등이다.
이벤트 핸들러는 이렇게 각각의 이벤트에 대한 반응 양식이다.
이벤트 핸들러는 각각의 이벤트에 on을 붙여주기만 하면 된다.
이벤트
이벤트 핸들러                     설             명
blur, onblur            입력양식의 필드에서 포커스가 다른곳으로 이동했을 때
click, onclick           입력양식이나 링크를 마우스로 클릭했을 때
change, onchange          입력양식 필드에 있는 값을 바꾸었을 때
focus ,onfocus          입력양식 필드로 포커스가 들어왔을 때
mouseover, onmouseover          링크위로 마우스가 왔을 때
mouseout, onmouseout          마우스가 링크안에 있다가 나갔을 때
select, onselect                  입력 양식의 한 필드를 선택했을 때
submit, onsubmit          입력 양식을 서버로 보낸 때
load, onload           문서가 읽혀졌을 때 (로딩되었을 때)
unload, onunload          문서를 나갈때
abort, onabort          이미지를 읽다가 중단시켰을 때
error, onerror          문서나 이미지를 읽다가 에러가 발생했을 때
이벤트 핸들러의 사용 예를 보자
버튼을 누르는 이벤트가 발생하자 이미 짜여진 스크립트의 이벤트 핸들러가 그 이벤트를 체크한다.
그 결과 자바스크립트 함수를 동작시키고, 함수에 짜여진 명령대로 엘럿창을 띠우는 스크립트이다.


// HEAD에 들어갈 자바스크립트
<script language="javascript">
function greeting() {
  alert('이벤트 핸들러입니다. onclick 에 의해 동작하죠')
}
</script>

// BODY에 들어갈 폼 태그

<input type="button" value="누르세요" onclick="greeting()">
위의 소스를 보자

HEAD에 있는 자바스크립트 함수 greeting은 이벤트가 일어나지 않는 한 동작을 시작하지 않는다.
BODY에서 버튼에 onclick라를 자바스크립트 이벤트 핸들러가 걸려있다.
방문자가 click 이라는 이벤트를 일으키는 순간
onclick 이라는 이벤트 핸들러가 그것을 감지하고 명령을 시작한다.
먼저 onclick 이벤트 핸들러는 greeting() 이라는 함수를 불러들인다.
greeting()은 HEAD 안에 정의된 함수이다.
greeting()은 alert 명령을 가지고 있다. (경고창을 띠우라는 명령)
명령에 따라 alert (자바스크립트 내장함수) 이 메시지를 브라우저 상에 띠워보낸다.
매우 간단하지만 모든 자바스크립트는 기본적으로 이러한 명령 구조를 가진다.
즉
이벤트핸들러는 이벤트를 체크하여 자바스크립트 함수를 호출하고, 그 함수는 정해진 동작을 수행하는 것이다.

댓글목록

등록된 댓글이 없습니다.

번호	제목	글쓴이	조회	날짜
28	Html&CSS&Script 익스플로러6 PNG 투명부분 회색으로 변하는 문제 해결	에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물	14375	01-13
27	MSSQL Microsoft SQL Server 2005 Express Edition	에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물	27139	01-12
26	PHP addslashes()함수의 역활	에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물	19344	01-11
25	웹접근성 웹접근성이란? 댓글+ 1개	에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물	18769	01-10
24	MYSQL mysql 기본문법	에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물	21691	12-30
23	Html&CSS&Script select option 으로 링크걸기, 새창으로	에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물	18515	11-10
22	Html&CSS&Script 백분률 계산 자바스크립	에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물	14178	11-02
21	Html&CSS&Script 자바스크립트 모음	에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물	18005	11-02
열람중	Html&CSS&Script JavaScript Confirm	에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물	16498	11-02
19	Html&CSS&Script PHP에서 팝업창 띄우기	에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물	31678	09-17
18	LINUX 3306포트열기	에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물	19233	08-17
17	MYSQL mysql root 암호 변경 Database	에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물	21237	08-11
16	PHP 웹페이지 이동시키기	에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물	18568	07-16
15	FLASH ASV(ActionScriptViewer)프로그램을 활용하여 추출하는법	에렐리안 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물	19490	06-15
14	Html&CSS&Script 메뉴 스크립트	에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물	16635	04-29
13	기타 [엑셀] 빈 행(Blank Row)들 일괄 삭제하기	에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물	25495	09-14
12	MYSQL mysql db백업/db압축풀기	에렐리안 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물	20640	08-28
11	PHP 그누보드 팝업관리프로그램	에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물	25605	08-14
10	FLASH 올플래시 웹페이지 제작시 플래시 정렬법및 풀사이즈	에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물	18526	07-16
9	Html&CSS&Script 자바스크립트와 스타일시트 도움이될만한 사이트	에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물	16621	04-01

EREL WORLD