JavaScript 특징 및 일반 프로그래밍언어와의 차이점

Posted by ironmask84
2015. 9. 16. 14:15 나는 프로그래머다!/HTML5


JAVASCRIPT 

  • 소개
    • HTML의 한계성을 극복하고 동적인 웹 페이지 제작을 가능하게 하는 기능
    • 문제점 및 한계
      • 브라의저의 버전에 따라 호환성에 문제가 있다
      • 익스플로러와 네비게이터에서는 다소 차이가 발생한다.
      • JavaScript의 표준이 없다.
    • 특징
      • JavaScript는 스크립트 언어이다.
      • C,C++,Java와 비슷한 문법을 지니고 있다.
      • JavaScript는 객체기반언어이다.
      • Event 중심으로 동작한다.
      • 플랫폼에 독립적이다.
    • 사용법
      • <Script Language=Javascript>

         <!--

        문장들.........;

        // -->

        </Script>

        <!-- 과 // -->는 자바스크립트를 지원하지 않는 브라우저에서는 주석으로 처리하라는 의미이다

        </Head> 위에나 BODY 내에 기술되면 된다.

  • 연산자
    • 산술열산자
      • + 덧셈  -뺄셈  *곱셈  /나눗셈  %나머지  ++증가연산자  --감소연산자
    • 문자열연산자
      • +문자열 합치기  +=문자열 합치기
    • 논리연산자
      • ! NOT, 논리부정, 논리값의 반대를 취한다.

        && AND, 논리곱, 두 식이 모두 참일 경우에만 참을 리턴

        || OR, 논리합, 두 값중 하나라도 참이면 참을 리턴

    • 대입연산자
      • =   오른쪽의 연산결과를 왼편의 변수에 대입한다.

        += 왼편의 값과 오른편의 값과 합하여 왼편 변수에 대입한다.

        -=  왼편의 값에서 오른편의 값을 빼고 그 결과를 왼편 변수에 대입한다.

        *=  왼편의 값과 오른편의 값을 곱하여 왼편 변수에 대입한다.

        /=   왼편의 값을 오른편의 값으로 나눈다음 그 결과를 왼편 변수에 대입한다.

        %= 왼편의 값을 오른편의 값으로 나눈 다음 그 나머지를 왼편 변수에 대입한다.

    • 비교연산자
      • == 같다  != 다르다  > 크다  >= 크거나 같다  <작다  <=작거나 같다
    • 비트연산자
      • X&Y   X , Y 두 비트 모두가 1이면 1, 그렇지 않으면 0

        X | Y   X 또는 Y의 비트가 1이면 1, 그렇지 않으면 0

        X ^ Y  X , Y의 두 비트가 다르면 1, 그렇지 않으면 0

        ~X      X의 비트가 0이면 1, 그렇지 않으면 0

        X  <<  Y     X 를 Y 비트 만큼 왼쪽으로 Shift (최하위 비트 0적용)

        X  >>  Y     X 를 Y 비트 만큼 오른쪽으로 Shift (최상위 비트는 Shift전의 최상위 비트 값 적용)

        X  <<  Y     X 를 Y 비트 만큼 오른쪽으로 Shift (최상위 비트 0적용)

  • 조건문
    • i f  문
      • if (condition) {statement1;}

        else {statement2;}

    • switch 문

      • switch (expt)

        {

                        case lavel1:

                               statement1;

                               break;

                        ....

                        case  labeln:

                                  statementn;

                                  break;

                        default:

                                 statementk;

                                 break;

        }

  • 반복문
    • for  문
      • for ( 초기값; 조건식; 증가값) {   statement;}
    • while 문
      • whlie (조건식) {   statement;}
    • do  while 문
      • whlie (조건식) {   statement;}
    • laber  문
      • labelName;    statements
      • 프로그램의 특정 블럭에 대하여 식별자를 정의하는 문이다.
    • break 문
      • break;
      • break 문은 반복문이나 label 문을 탈출하도록 하는 문장이다.
      • 만약 label 문으로 탈출하고 싶으면 break label Name; 형식으로 기술하면 된다.
    • continue 문
      • continue;
      • continue 문은 반복문이나 label 문을 다시 시작하도록 하는 문장이다.
      • 만약 label 문을 다시 시작하고 싶으면 continue labelname; 형식으로 기술하면 된다.
  • 함수
    • function 함수이름(인자){     명령문;     [return expression;] }
    • 빌트-인함수
      • 자바스크립트에 이미 포함되어 있는 함수들

        ecal(식) 문자열로 입력된 식을 계산하여 숫자로 리턴

        parselnt(문자열, n) 문자열의 값을 n진수 문자열로 생각하고 이를 10진수의 값으로 바꿔서 리턴

        parseFloat(문자열) 문자열의 값을 부동소수점 숫자로 리턴

        isFinite(변수) 변수가 수인지 판별해서 true/false 리턴

        isNaN(testValue) testValue가 숫자인지 아닌지를 판별해서 trua/false 리턴

        escape (문자열) ASCII 스트링을 URL로 인코딩

        unescape (문자열) escape의 반대

        escape 예제

  • 객체
    • 생성될 객체이름 = new 객체이름(...) ;
  • Global 객체
    • 빌트인 함수들 Global Method라고도 함
  • 내장객체
    • Date 객체
      • 생성자
        • new Data() 현제 시간의 객체

          new Data(atring) "월 일, 년 시:분:초" 시간의 객체

          new Data(y, m, d) y:년, m:월, d:일 날짜의 객체

          new Data(y, m, d, h, m, s) y:년, m:월, d:일, h:시, m:분, s:초 시간의 객체

      • Methods
        • getYear() 년도 4자리를 리턴

          getMonth() 달을 리턴

          getDate() 일을 리턴

          getDay() 요일을 리턴(0.1,2,3,4,5,6)

          getHours() 시간을 리턴(0 에서 23)

          getMinutes() 분을 리턴(0에서 59)

          getSeconds() 초를 리턴(0에서 59)

          getTime() 70-1-1 00:00:00 을 기준으로 현시간의 밀리초 수를 리턴

          getTimezoneOffset() 로컬시간과 GMT 사이의 차이를 리턴

          parse(datestr) dataStr에 대하여 1970-1-1 00:00:00 을 기준으로 현시간의 밀리초

          setYear (년도) 년도 세팅

          setMouth(월) 월을 세팅

          setDate( 일) 일을 세팅

          setHours(시간) 시간을 세팅

          setMinutes(분) 분을 세팅

          setSeconds(초) 초를 세팅

          setTimes(시간) 시간을 세팅

          toGMTString() Date 객체의 날짜들 GMT 스트링으로 리턴

          toLocaleString() Date 객체의 날짜를 로컬 표현의 스트링으로 리턴

          UTC(y,m,d,h,m,s) 인자를 입력받아 밀리 초의 값 리턴

    • document
      • 속성
        • alinkColor     Alink 속성을 표시하는 스트링

          anchors    문자내의 애커들에 대한 배열

          applets    문서내의 애플릿들에 대한 배열

          bgColor   배경색깔의 속성값을 반영하여 자바스크립트 코드에서 수정 가능

          cookie  쿠키에 대한 레퍼런스

          domain   이 문서를 보내온 서버의 도메인 이름 스트링

          embeds   문서내의 내장 객체들에 대한 배열

          fgColor   문서내의 글자색깔 속성을 반영하는 스트링, 자바스크립트 코드에서 수정 가능

          forms   문서내에 존재하는 폼들에 대한 배열

          images   문서내에 존재하는 이미지들에 대한 배열

          lastModified    문서가 수정된 최근 날짜를 표시하는 스트링

          layers  문서내에 존재하는 레이어에 대한 배열

          linkColor  링크 속성을 표시라는 스트링

          links   문서내에 존재하는 링크들에 대한 배열

          plugins   브라우저 내에 설치된 플러그인들에 대한 배열

          referer   이 문서를 로드한 문서의 URL을 표시하는 스트링

          title   문서의 제목인 TITLE 속성을 반영하는 스트링

          URL   이 문서의 URL을 반영하는 스트링

          vlinkColor   vlink 속성을 반영하는 스트링

      • 매소드
        • captureEvents(이벤트타입들)    파라미터로 주어진 이벤트를 캡쳐할 것을 지시한다.

          close()    문서에 출력되는 스티림을 닫고 미출력된 문서의 나머지 부분을 화면에 출력

          getSelection()  현재 윈도우에서 마우스나 키보들로 선택된 문자열을 리턴

          handleEvent()   파리미터로 지정된 이벤트의 이벤트 핸들러를 호출

          open()   비어있는 새문서를 연다.

          releaseEvent()   지정된 타입의 이벤트를 더 이상 캡쳐하지 않도록 지정

          writeln()   write() 후에 "\n"을 추가하여 출력

    • window
      • 속성
        • defaultStatus     디폴트 상태바 메시지

          document     현재 나타나는 문서

          frame    윈도우 내의 프레임

          frame array   문서에 나타나는 윈도우 프레임 객체를 순서대로 나열한 배열

          history   윈도우 히스토리 리스트

          length  윈도우에서 프레임의 개수를 나타낸다.

          location   윈도우에서 나타나는 문서의 완전한 URL

          name   윈도우가 열릴 때 주어지는 이름

          opener    window,open이 현재 윈도우를 열도록 사용하는 스크립트의 윈도우를 참조한다.

          parent   현재 프레임을 포함하는 윈도우 프레임과 윈도우 객체의 프로퍼티이다.

          self   현재 윈도우나 현재 프레임

          status    상태바의 메시지

          top   현재의 프레임을 가지고 있는 최고 윈도우

          window   현재 윈도우나 현재 프레임

          toolbar    윈도우 틀바 객체에 대한 레퍼런스

          statusbar   윈도우 상태바 객체에 대한 레퍼런스

      • 매소드
        • alert()   경고 메시지를 가진 상자를 출력한다.

          back()   톱레벨 윈도우에서 최근 히스트로리로 돌아간다.

          blur()   윈도우의 포커스를 해제한다.

          captureEvent()   이벤트를 캡쳐할 것을 지시한다.

          clear In terval()   setInterval에 의해 설정된 타이머를 해제한다.

          clear Timeout()   setTimeout에 의해 설정된 타이머를 해제한다.

          close()   윈도우를 종료한다.

          con firm() 확인 메시지를 담은 상자를 출력한다.

          find()   윈도우의 본문에서 지정된 텍스트 스트링을 찾는다.

          forward()   히스트리 리스트에서 다음 URL을 로드한다.

          handleEvent()   파라미터에 지정된 이벤트의 이벤트 핸들러를 직접 호출한다.

          home()   브라우저에 설정된 홈 페이지를 로드한다.

          moveBy(폭,높이)    윈도우를 현재 위치에서 상대적인 량 만큼 이동한다.

          moveTo(x좌표,y좌표)   윈도우를 임의의 절대 위치로 이동한다.

          open()   새로운 웹 브라우저를 연다

          print()   윈도우의 내용을 프린트 한다.

          prompt()   프롬프트를 출력하고 입력창을 출력한다.

          releaseEvents()   캡쳐하기로 된 이벤트의 캡쳐를 해제한다.

          releaseBy(폭,높이)   윈도우를 현재 크기에서 상대적인 량만큼 크기를 변경한다.

          releaseTo(x좌표,y좌표)    윈도우를 임의의 크기로 변경한다.

          routeevent()   이벤트가 정상적인 경로로 전달되도록 한다.

          scrollBy(폭,높이)    지정된 량만큼 윈도우를 스크롤한다.

          scrollTo(x좌표,y좌표)   윈도우를 절대적인 위치로 스크롤한다.

          set Interval()   지정된 주기를 반복적으로 타이머 이벤트가 발생하도록 타이머를 설정한다.

          set Timeout()   지정된 시간이 지나면 1회적으로 타이머 이벤트가 발생하도록 타이머를 설정한다.

          stop()   윈도우에 문서의 로드를 중단한다.

  • 데이터형
    • Number : 정수, 실수 등
    • 논리값 : True or False
    • String : 문자열
    • Null : 아무런 값도 존재하지 않는 경우
    • Undefined : 변수는 선언되었지만 어떤 값으로 초기화 되지 않는 경우
  • 변수
    • 변수를 선언하는 방법
      • 변수이름 = 초기값;
      • var 변수이름;
      • var 변수이름 = 초기값;
    • 변수선언시 주의 사항
      • 첫번째 문자는 반드시 영문자 또는 "_"
      • 공백문자가 포함되어서는 안된다
      • 이미 자바 스크립트에서 사용되는 예약어는 변수로 사용할 수 없다
      • 자바스크립트는 대소문자를 깐깐하게 구별한다
    • 전역변수
      • 선택적으로 var를 사용해서 변수 선언
      • 전역변수를 특정 함수 내에서 사용하기 위해서는  this 라는 키워드를 사용하면 된다.
      • C에서는 ::를 앞에 붙여서 표현
    • 지역변수
      • 반드시 var 를 사용해서 변수 선언
  • + - 상수
    • 특수문자
      • \\    Backslash

        \'    Single Quotation Mark

        \"    Double Quotation Mark

        \t    Tab

        \n   New Line

        \f    Form Feed

        \b   Backspace

        \r    Carriage Return

        C와 유사하다.

  • 기타
    • HTML 관련
      • html 문서 열 때 생성되는 객체

        window    최상위 객체로, 윈도우 마다 하나씩 존재하는 객체이다.

        document   HTML 문서마다 하나씩 존재하며, HTML 내용에 관한 정보를 가진다.

        상당히 자주 사용된다.

        history   현재 window에서 방문기록을 가지고 있는 객체이다.

        go, back    등의 메소드와 함께 사용된다.

        location   현재 HTML 페이지의 UTL에 관한 정보를 가지는 객체이다.

        navigator   현재 사용중인 브라우저의 이름과 버전등에 관한 정보를 지닌 객체이다.

        form    폼에 대한 정보를 가지고 있는 객체이다. form에 name을 붙여서 구별할 수 있다.

        하나의 document에 여러개의 form 객체를 생성할 수 있다.

        frme   frame 태그에 의해 생성된 객체이다.

        link   <A HREF="">로 표현된 객체. 링크마다 하나의 객체가 생성된다.

        image   이미지를 표현하는 객체

        layer   DHTML에서 지원하는 객체

        anchor   HTML 문서내의 앵커를 표현하는 객체 <A name="">

        area   HTML 문서내의 이미지 맵의 한 영역을 표현하는 객체

    • 이벤트
      • abort    onAbort    사용자가 이미지 로딩을 강제로 중단할 때

        blur     onBlur    윈도우,  폼 구성요소, 프레임이 포커스를 잃을 때

        change    onChange   Select, Text, Textarea 객체의 필드 값을 변경한 후 포커스를 잃을 때

        click    onClick    폼 구성 요소가 클릭될 때

        dblclick    onDblclick   폼 구성 요소나 링크를 더블 클릭할 때

        dragdrop    onDragDrop   사용자가 한 객체를 브라우저 윈도우 상으로 드롭할 때

        error    onError    문서나 이미지의 로딩시 오류가 발생할 때

        focus   onFocus    윈도우, 프레임, 프레임셋, 폼 요소가 포커스를 받을 때

        keydown   onkeyDown     사용자가 키를 누르는 순간

        keypress   onkeypress    사용자가 키를 누른 채 유지하는 동안

        keyup    inkeyUp  사용자가 누른 키를 놓는 순간

        load   onLoad   브라우저에 HTML 문서 로딩 직후 혹은 프레임셋 문서의 모든 프레임의 로딩이 마칠 때

        mousedown    onMouseDown    사용자가 마우스를 누르는 순간

        mousemove    onMouseMove    사용자가 마우스를 움직일 때 마다

        mouseover    onMouseOver   사용자가 마우스 커서를 이미지맵이나 링크 위에 올려 놓을 때

        mouseup    onMouseUp    사용자가 마우스 커서를 이미지맵이나 링크 위에서 내려 놓을 때

        move    onMove    사용자가 자바스크립트 코드에 의해 윈도우나 프레임의 위치가 이동될 때

        reset   onReset  사용자가 reset 버튼을 누를 때

        resize    onResize   사용자나 자바스크립트 코드에 의해 윈도우나 프레임의 크기가 조절되는 순간

        select    onSelect   사용자가 Text나 Textarea  객체의 필드 내의 텍스트 일부를 선택할 때

        submit  onSubmit    사용자가 submit 버튼을 누를 때

        unload    onUnload    사용자가 현재 HTML 문서 보기를 종단하고 다른 웹 사이트로 이동할 때


출처 : http://cafe.naver.com/dotnettree/4