본문 바로가기
  • think normal
새로워지기/서른의 생활코딩

파란하늘 님이 스프링 노트 < 기초지식부터 ~ >

by 청춘만화 2011. 4. 10.
자바스크립트 관련 이론을 설명해주는 곳은 정말 셀 수 없이 많다.
따라서 어설프게 잘못된 개념을 스스로 작성해서 적는 것 보다는
나보다 더 친절하게 설명해 주시는 분들의
블로거나 페이지를 소개시켜주는 편이 좋을 것 같다. 

다시말해 자료의 재활용과 기존 블로그들의 재 활성화를 위함이다.

직접적으로 알지는 못하지만 이렇게 인연이 닿아
이런 고수님들을 소개해드릴 수 있게 되어
개인적으로도 영광이다.
작성하신 분들도 앞으로도 이런 영광스러움의 마음이 늘 함께하시길 바란다. 

아, 
삭제를 원하시면 댓글로 말씀하시면 바로 지우겠습니다.
다른 의도는 없었습니다.
미리 양해 말씀 남깁니다.
 

첫 출처는 
파란하늘 님이 스프링 노트이다.
http://bluesky.springnote.com/pages/388011




기본지식

선언
  1. HTML에 JavaScript 삽입
    1. <script language="javascript">
      1. JavaScript Statements
    2. </script>
  2. HTML에 JavaScript 코드 파일 삽입
    1. <script language="javascipt" src="src.js">
    2. </script>

변수의 대소문자 구분

변수에 포함된 데이터의 형을 지정하지 않고, JavaScript 인터프리터가 변수에 포함된 데이터 형을 추적하고 변환.

데이터 형
  • 숫 자 형 : 정수와 부동 소수
  • BOOLEAN : true, false
  • STRING : 작은 따옴표나 큰 따옴표에 들어가 있는 값으로, 특수문자 포맷 사용시에는 '\'와 함께 사용.
  • null : 아무런 값도 없는 것으로, 변수를 초기화 시키거나 어떤 값이나 이벤트를 지울 때 사용됨
  • undefined : 변수만 만들고, 값을 할당하지 않은 상태.

유형간의 변환
  • 스트링 피연산자가 비스트링 연산자와 사용된 경우 다른 연산자를 모두 스트링으로 변환.
  • BOOLEAN값은 1과 0으로 변환되어 수치 연산을 지원.
  • null값은 스트링 연산에 대해서는 "null", 논리 연산에서는 false, 그리고 수치 연산에서는 0으로 각각 변환.
  • 변환 함수
    1. eval() : 스트링 표현식을 수치값으로 변환하고, 파라미터가 수치형태가 아닌 스트링 값이면 에러 발생.
    2. parseInt() : 스트링에 포함된 첫번째 정수를 리턴하고, 스트링이 정수로 시작되지 않으면 0을 리턴.
    3. parseFloat() : 스트링에 포함된 첫번째 부동 소수를 리턴하거나 스트링이 적절한 부동 소수로 시작되지 않으면 0을 리턴.

배열

값의 시퀀스를 정렬할 수 있는 객체로, JavaScript의 특수형으로 배열 사용 전엔 반드시 선언해야 한다.

배열 선언 예

  1. arrayName = new Array(arrayLength)
    arrayName = new Array()
    arrayName = new Array(value0,value1, ..., valuen)

JavaScript만의 특수 연산자
  • comma(,) 연산자 : 두 표현식을 계산하고, 두 번째 표현식의 값 리턴.
  • delete 연산자 : 객체의 프로퍼티나 배열 인덱스의 요소 삭제하고, 항상 undefined 값 리턴.
  • new 연산자 : 객체 형의 인스턴스를 만들기 위해 사용.
  • typeof 연산자 : 연산자의 형을 식별하는 스트링 값을 리턴.
  • void 연산자 : 값을 리턴하지 않는다.

지역 변수와 전역 변수

함수 안에서만 사용되는 것을 지역 변수라 하고, 프로그램 내에서 사용되는 변수를 전역 변수라 하는 데, 지역 변수 사용시 반드시 var 키워드와 함께 선언해야 함

 

이벤트 처리

이벤트  정의와 사용
  • 이벤트 : 사용자가 웹페이지나 기타 다른 브라우저에 수행한 작업으로 인한 결과
  • 이벤트 처리 : 이벤트로 인해 수행되는 프로세스
  • 이벤트 핸들러 : 프로세스를 수행하는 코드
  • 사용 예 : 사용자가 링크 위로 마우스를 갖다 대면 다이얼로그 박스를 표시한다거나, 폼에 입력한 데이터를 검증한다거나, 버튼을 클릭할 때 애니메이션을 나타내거나, Java 애플릿과 브라우저 플러그인이 상호작용을 하도록 한다. 22
HTML 태그JavaScript 이벤트설명
다양 mouseMove 마우스 이동
<A> ... </A>

Click

dbClick

mouseDown

mouseUp

mouseOver

mouseOut

keyDown

keyUp

keyPress

마우스로 링크를 클릭

마우스 링크 위에서 더블 클릭

마우스 버튼을 누름

마우스 버튼을 놓음

마우스를 링크 위로 이동

링크 위에 있던 마우스를 링크 밖으로 이동

사용자가 키를 누름

사용자가 키를 놓음

사용자가 키를 눌렀다가 놓음

<IMG>

abort

error

load

keyDown

keyUp

keyPress

사용자 액션으로 인해 이미지 로딩 작업을 중단함

이미지 로딩하는 동안 에러 발생

이미지가 로드되고 화면에 나타남

사용자가 키를 누름

사용자가 키를 놓음

사용자가 키를 눌렀다가 놓음

<AREA>

mouseOver

mouseOut

dbClick

마우스가 클라이언트측 이미지맵의 한 영역으로 이동함

마우스가 이미지맵 영역 밖으로 이동

사용자가 이미지맵의 한 영역을 더블클릭함

<BODY> ... </BODY>

Click

dbClick

keyDown

keyUp

keyPress

mouseDown

mouseUp

사용자가 문서의 본문을 클릭

문서의 본문을 더블 클릭함

키를 누름

키를 놓음

키를 눌렀다가 놓음

마우스 버튼을 누름

마우스 버튼을 놓음

<BODY> ... </BODY>

<FRAMESET> ... </FRAMESET>

<FRAME> ... </FRAME>

blur

error

focus

load

unload

move

resize

dragDrop

윈도우에서 현재 입력 포커스가 사라짐

윈도우가 로드되는 동안 에러 발생

입력 포커스가 현재 윈도우로 이동

윈도우 로딩이 완료됨

윈도우를 종료함

윈도우가 이동됨

윈도우의 크기가 바뀜

윈도우에 객체를 드롭

<FORM> ... </FORM>

submit

reset

사용자가 폼을 제출

사용자가 폼을 재설정

<INPUT TYPE="text">

blur

focus

change

select

현재 입력 포커스가 텍스트 필드에서 사라짐

현재 입력 포커스가 텍스트 필드로 이동

텍스트 필드가 변경되어 현재 입력 포커스가 사라짐

텍스트 필드에 있는 텍스트가 선택됨

<INPUT TYPE="password">

blur

focus

패스워드 필드에서 입력 포커스가 사라짐

패스워드 필드에 입력 포커스 생김

<TEXTAREA> ... </TEXTAREA>

blur

focus

change

select

keyDown

keyUp

keyPress

텍스트 영역이 현재 입려 포커스가 사라짐

텍스트 영역에 입력 포커스 생김

텍스트 영역이 변경되어 입력 포커스가 사라짐

텍스트 영역에서 텍스트가 선택됨

키를 누름

키를 놓음

키를 눌렀다 놓음

<INPUT TYPE="button">

Click

blur

focus

mouseDown

mouseUp

버튼이 클릭됨

입력할 수 없도록 버튼이 흐려짐

입력할 수 있도록 포커스 생김

버튼 위에서 왼쪽 마우스 버튼 누름

버튼 위에서 왼쪽 마우스 버튼 놓음

<INPUT TYPE="submit">

Click

blur

focus

제출 버튼이 클릭됨

제출 버튼에서 입력 포커스가 사라짐

제출 버튼에 입력 포커스 생김

<INPUT TYPE="reset">

Click

blur

focus

리셋 버튼이 클릭됨

리셋 버튼에서 포커스가 사라짐

리셋 버튼에서 포커스가 놓임

<INPUT TYPE="radio">

Click

blur

focus

라디오 버튼이 클릭

라디오 버튼에서 입력 포커스가 사라짐

라디오 버튼에 입력 포커스 놓임

<INPUT TYPE="checkbox">

Click

blur

focus

체크 박스가 클릭

체크 박스에서 입력 포커스가 사라짐

체크 박스에 입력 포커스 놓임

<INPUT TYPE="file">

blur

change

focus

파일 업로드 폼 요소에서 입력 포커스 사라짐

사용자가 업로드 될 파일을 선택

파일 업로드 폼 요소에 입력 포커스 놓임

<SELECT> ... </SELECT>

blur

change

focus

선택 요소가 현재 입력 포커스 잃음

선택 요소가 변경되어 입력 포커스가 사라짐

선택 요소에 현재 입력 포커스가 놓임

이벤트 핸들링 속성
 이벤트 핸들링 속성실행되는 상황
onAbort 이미지를 로딩하는 작업이 사용자의 한 행동으로 인해 취소되었음
onBlur

문서나 윈도우, 프레임세트, 폼 요소에서 현재 입력 포커스가 사라짐

onChange 텍스트 필드나 텍스트 영역, 파일 업로드 필드, 선택 항목이 변경되어 현재 입력 포커스가 사라짐
onClick 링크나 클라이언트측 이미지맵 영역, 폼 요소가 클릭됨
onDbClick 링크나 클라이언트측 이미지 맵 영역, 폼 요소가 더블 클릭됨
onDragDrop 드래그된 객체가 윈도우나 프레임에 드롭됨
onError 이미지나 윈도우, 프레임을 로딩하는 동안 에러가 발생함
onFocus 문서나 윈도우, 프레임 세트, 폼 요소에 입력 포커스 놓임
onKeyDown 키를 누름
onKeyPress 키를 눌렀다 놓음
onKeyUp 키를 놓음
onLoad 이미지나 문서, 프레임이 로드됨
onMouseDown 마우스 버튼 누름
onMouseMove 마우스를 이동함
onMouseOut 링크나 클라이언트측 이미지맵에서 마우스를 옮김
onMouseOver 마우스를 링크나 클라이언트측 이미지 맵으로 옮김
onMouseUp 마우스 버튼을 놓음
onMove 사용자가 윈도우나 프레임을 이동함
onReset 폼의 리셋 버튼을 클릭하여 폼을 리셋시킴
onResize 사용자가 윈도우나 프레임의 크기를 조절
onSelect 텍스트는 텍스트 필드나 영역에서 선택ㄱ됨
onSubmit 폼이 제출됨

onUnload

사용자가 문서나 프레임 세트를 종료함

객체 정의

개체 유형 정의
  • 프로퍼티 : 객체에 들어있는 데이터 값에 액세스 할 때 사용
  • 메소드 : 객체에 어떤 작업을 할 때 사용하는 함수

객체 유형 만들기

사용자가 직접 유형을 정의하고 특정 객체 인스턴스를 만들 수 있느데 이렇게 만들려면 객체 유형의 특정 인수턴스를 만들 때 사용하는 함수를 정의하기만 하면 된다.

본래 이러한 생성자 함수는 다음과 같은 일을 한다.

  • 객체 유형의 프로퍼티에 값을 할당한다.
  • 객체 유형의 메소드로 사용할 수 있는 다른 함수를 지정한다

댓글