자바스크립트 기초 2

자바스크립트 기초

morden Javacript 변수 선언

let : 변수 (변수를 선언 할 때에는 let 이라는 키워드를 사용)

   let value = 1;

   let value = 2;

   ※ 한번 선언했으면 똑같은 이름으로 선언하지 못한다.

   

const : 상수 (한번 선언하고 값이 바뀌지 않는 값)

 

 

ㅇ 변수(Variable)
   - 변수는 변화하는 값을 저장하는 공간이다. 변수는 한번에 1개의 데이터만 저장 가능하다.
   - 변수의 선언은 변수만 선언하고 값을 할당하지 않거나, 값을 할당하기도 한다.
     var temp;  // morden Javascript 에서는 더 이상 var 변수를 사용하지 않는다.
     var temp, i, data;
     var temp = 10;

  - 변수명은
     대문자 Temp 로 작성했으면 출력하거나 다른 곳에서 이용할 때 temp 라고 하면 에러가 발생한다.
     변수명은 반드시 영문자, 숫자, _(underbar, underscore) 로만 사용해야 하며, 공백문자는 포함할 수 없다.
     키워드를 사용할 수 없고, 변수 이름의 길이에는 제한이 없다.

     첫글자가 숫자로 시작할 수 없다.

     !, #, ?, $, @ 등과 같은 특수문자는 올 수 없다.

     자바스크립트 문법 안에서 규정한 예약어(키워드)는 변수로 사용할 수 없다.

   - 자바스크립트 데이터 타입(변수에 저장 가능한 데이터)
     숫자형 데이터, 문자형 데이터, 논리형(boolean)형 데이터, 널(Null)형 데이터 이다.
     변수형을 선언할 때에는 숫자형, 문자형 등을 구분하지 않는다.
     숫자형 변수는 정수, 실수 구분이 없다.
     문자열 변수는 작은 따옴표 나 큰 따옴표로 감싸야 한다.
     status = "My computer is working."
     document.write(status);

 

ㅇ 참, 거짓 판별

   - 자바스크립트에서는 소문자로 true 와 false 를 판별한다.

     TRUE는 '정의되지 않음' 오류가 발생한다.

     즉, 불린(boolen) 타입 : true/false

   - 참인지 거짓인지 확인할 때

     거짓으로 평가되는 false 문자열 자체와 0, -0, 빈 문자열, null, 비정의, NaN 을 제외하고는

     모든 값은 참으로 간주한다.

      즉, 비교결과가 0, null, 빈문자열(""), false, undefined, NaN 으로 판단되면 false 다.
     if(1 == true) document.write('true') // 참

ㅇ 자료형 확인 : typeof 연산자를 이용
     - 언제든지 type of 연산자를 이용해 변수의 형식을 확인할 수 있다.
     - 변수를 var n 으로 선언했다면, type of n 으로 확인한다.
   <script>
     alert(typeof('String')); //String
     alert(typeof(123)); //Number
     alert(typeof(true)); //Boolean
     alert(typeof(function(){})); //Function
     alert(typeof({})); //Object
     alert(typeof(abc)); // undefined : 아직 값이 설정되지 않는 것을 의미
       // 변수를 선언했지만 초기화를 하지 않았을 경우에도 undefined 출력된다
   </script>

ㅇ 이용문법
   - \n : 줄바꿈
   - 문자열 연결은 + 를 사용한다.
     '이런'+'식으로도'+' '+'출력 가능'
     PHP 에서는 마침표(.)로 문자열을 연결한다.
   - \t : Tab
   - \' : 작은 따옴표
   - \" : 큰 따옴표
   - \\ : 역슬레쉬(\)
   - %  : 나머지 연산자, alert(5 % 3);
   - 변수 : 값을 저장할 때 사용하는 식별자, 변수선언 var 식별자;

 

ㅇ 연산처리

   - 자바스크립트의 연산자는 수식의 왼쪽에서 오른쪽으로 처리된다.

   - || 연산자는 첫번째 피연산자가 참(true) 이면, 두번째 피연산자는 실행되지 않는다.

     의도하지 않는 문제가 발생할지 잘 확인해야 한다.

   - 다중 대입(a = b = c = 5) 은 가장 오른쪽이 먼저  실행되고, 오른쪽에서 왼쪽으로 계속 처리된다.

 

ㅇ 객체(object)

    - 자바스크립트는 객체지향언어는 아니지만, 객체를 사용하기 때문에 객체(object) 기반 언어라고 한다.

      객체는 속성(property)과 methods 를 가진다.

    - 자바스크립트의 객체는 내장 객체, BOM(브라우저 객체 모델), DOM(문서 객체 모델)로 나눌 수 있다.

    - 내장 객체를 생성할 때는 new 라는 키워드와 생성함수를 사용한다. (ex, var 참조변수=new Date();)

      내장 객체인 경우는 자체 자바스크립트 문법에서 정의된 속성과 메소드를 알아야 한다.

    - 객체 생성할 때 생성자 함수가 필요없는 객체 : Math Object, Number Object, String Object, RegExp Object

    - parseInt("20.5px") + 30 = 50

    - parseFloat("20.5px") + 30 = 50.5

    - function으로 정의된 생성자 함수의 객체의 정의는 new를 이용한다.
    - 생성자함수 안에는 this라는 용어를 이용해 정의한다.

 

ㅇ 객체배열은 http://link2me.tistory.com/1458 참조

 

ㅇ 윈도우 객체

    window 객체는 객체의 계층 구조에서 최상위에 존재하며 가장 기본적이면서도 중요한 객체다.

 

window.속성
window.속성 = 값  // window.status="환영합니다."
window.메소드()  // window.open();

window.메소드(인자 값)
--- window 객체의 속성 ---
- status : 상태 표시줄에 표시할 문자열 지정
- window : 창 자신을 가리킴
- frames : 창에 포함된 프레임을 배열 형태로 지정
- opener : open() 메소드를 사용해서 새 창을 열었을 경우, 새 창을 열도록 한 문서를 가리킴
- parent : 주종 관계를 이루고 있는 프레임 문서에서 상위 프레임을 가리킴
- self   : 현재 작업 중인 창, 즉 자기자신을 가리킴
- top    : 프레임이 설정되기 전의 상태로 돌아감, 프레임을 모두 무시하고 창 하나만 남음
- screenX : 창의 x 좌표 반환
- screenY : 창의 y 좌표 반환
- closed  : 창이 닫혀 있는지 확인한 후 true, false 반환
- name    : 창 이름 반환

 

window 객체 메서드
- alert() : 경고용 대화상자를 띄워줍니다.
- confirm() : 확인, 취소를 선택할 수 있는 대화상자를 띄워줍니다.
- open() : 새로운 창을 오픈합니다.
- prompt() : 입력창이 있는 대화상자를 띄워줍니다.
- setTimeout() : 일정 간격으로 함수를 호출하여 수행합니다. (Millisecond 단위)
- clearTimeout() : setTimeout 메소드를 정지합니다.
- eval() : 문자열을 숫자로 변환합니다.
- toString() : 오브젝트를 문자열로 변환합니다.
- blur() : focus가 다른 객체로 이동합니다.
- focus() : focus를 지정합니다.
- scroll() : 창을 스크롤 합니다.
- valueOf() : 오브젝트 값을 반환합니다.
- back() : 한 단계 전 URL(이전화면)로 돌아갑니다. (IE 지원 불가)
- find() : 창안에 지정된 문자열이 있는지 확인, 있다면 true 없으면 false를 반홥합니다. (IE 지원 불가)
- forward() : 한 단계 뒤의 URL(다음화면)로 이동랍니다. (IE 지원 불가)
- home() : 초기화 홈페이지로 이동합니다. (IE 지원 불가)
- moveby() : 창을 상대적인 좌표로 이동합니다. 수평방향과 수직방향의 이동량을 픽셀로 지정합니다.
- moveto() : 창을 절대적인 좌표로 이동합니다 . 창의 왼쪽 상단 모서리를 기준으로 픽셀을 지정합니다.
- resizeby() : 창의 크기를 상대적인 좌표로 재설정합니다 . 밑변의 모서리를 기준으로 수평방향, 수직방향을 픽셀로 지정합니다.
- resizeto() : 창의 크기를 절대적인 좌표로 재설정합니다 . 창 크기를 픽셀로 지정합니다.
- scrollby() : 창을 상대적인 좌표로 스크롤합니다. 창의 표시영역의 수평방향과 수직방향에 대해 픽셀로 지정합니다.
- scrollto() : 창을 절대적인 좌표를 스크롤합니다. 창의 왼쪽 상단 모서리를 기준으로 픽셀로 지정합니다.
- stop() : 불러오기를 중지합니다. (IE 지원 불가)
- captureEvents() : 모든 타입의 이벤트를 판단합니다.
- setInterval() : 일정시간마다 지정된 처리를 반복합니다.
- clearInterval() : setInterval 메소드의 정지합니다.
- print() : 화면에 있는 내용을 프린터로 출력합니다.
- handleEvent() : 이벤트 취급자를 정합니다.
- releaseEvent() : 다른 계층의 이벤트로 이벤트를 넘깁니다.
- routeEvent() : 판단한 이벤트와 같은 계층의 이벤트입니다.
- toSource() : 오브젝트값을 문자열로 반환합니다.

window 객체 이벤트 핸들러
- onLoad : 문서를 읽을 때 발생합니다.
- onUnload : 현재 문서를 지울려고 할 때 합니다.
- onBlur : 브라우저가 포커스를 잃을 때 발생합니다.
- onFocus : 브라우저에 포커스를 얻을 때 발생합니다.
- onDragDrop : 사용자가 다른곳에서 객체를 브라우저 안에 넣으려고 할 때 발생합니다. (IE 지원 불가)
- onError : 문서를 읽는 중에 에러가 생길 때 발생합니다.
- onMove : 브라우저의 위치를 변경했을 때 합니다. (IE 지원 불가)
- onResize : 창의 크기를 변경했을 때 합니다. (IE 지원 불가)

ㅇ Documents 객체

    브라우저의 내장 객체 중 window객체의 바로 하위에 존재하는 객체.
    - windows.document.~ 으로 표현하는 것이 정상이지만 보통은 window를 생략한다.

 

ㅇ history 객체

    브라우저 기록에 대한 정보를 가지고 있는 객체이다.

    - length    : 히스토리에 있는 URL의 개수
    - back()    : 히스토리 리스트에서 한 단계 뒤로 이동
    - forward() : 히스토리 리스트에서 한 단계 앞으로 이동
    - go()      : 히스토리 리스트에서 원하는 위치로 이동

<form>
  <input TYPE="button" value="이전으로"  onClick="history.back()">
  <input TYPE="button" value="다음으로"  onClick="history.forward()">
  <input TYPE="button" value="두단계 전으로"  onClick="history.go(-2)">
  <input TYPE="button" value="두단계 앞으로"  onClick="history.go(2)">
</form>

   

 

ㅇ location 객체
   현재 문서에 대한 정보를 가지고 있다.

 

속성	href	페이지의 URL주소
	host	URL주소의 호스트이름과 포트번호
	hostname	URL주소의 호스트이름
	protocol	프로토콜
	pathname	경로
	port	포트번호
	hash	레이블이름
	search	호출시 사용하는 형식
메소드	reload()	현재 페이지를 다시 읽음
	replace()	현재 페이지를 원하는 페이지로 바꿈