자바스크립트 개요
웹브라우저 지원: Javascript는 html과 함께 클라이언트로 다운로드 하여 실행할 수 있음
HTML에서 사용하기 위한 예약어
HTML의 헤드부분에서 <scipt> 태그 사용
HTML안에 JavaScript를 포함하거나, 외부의 JavaScript 파일을 참조할 수 있음
동작원리: 자바스크립트가 삽입된 문서를 브라우저가 읽어들일때 해석한다.
이때 즉시 실행될 수 있고, 어떤 이벤트가 발생됐을때 실행될 수도 있다.
자바스크립트 개요
HTML문서 내에서 JavaScript의 위치
1)Script태그 - 외부 자바스크립트 파일 불러오기
<SCRIPT LANGUAGE= “Javascript1.5” SRC= “common.js” TYPE= “text/Javascript”>
LANGUAGE 속성: 스크립트 언어 지정
SRC속성: 독립된 자바스크립트 파일 경로 지정
TYPE: 자바스크립트로 작성된 텍스트 임을 명시
2)인라인으로 선언하기
Script태그의 위치
HTML내의 어느 부분에도 삽입해도 가능하지만, <head> 태그와 태그 사이에 삽입하는것을 권장함.
헤더부분에 위치한 자바스크립트 프로그램은 브라우저의 각종 입/출력 발생이전에 초기화 되기 때문에 브라우저에 의해 먼저 점검됨.
자바스크립트 기본문법
대소문자를 구분함
문자열은 “ 또는 ‘로 구분하고 겹치지 않아야 한다.
주석은 <!-- -->
자바스크립트 자료형
논리형 상수: true or false
null: 아무런 값을 가지지 않음을 의미함. 값 또는 이벤트를 지울때 많이 사용
undefined: 선언된 변수에 아무런 값도 할당되지 않음을 의미함
NaN: 숫자가 아닌것.
Infinity: 무한대처럼 표현할 수 없는 매우 큰 값이 할당됨.
데이터형의 자동 변환
자바스크립트는 자료의 형검사에 관대함
사용될 변수형을 미리 선언할 필요 없이 var로 통일
데이터형은 스크립트 실행중에 자동으로 변환된다.
문자형과 숫자형을 변환하는 특수함수
eval: 문자 또는 값으로 표현된 문자열을 숫자로 변환함. 또는 문자열을 객체화 할때도 쓰인다.
parseInt: 문자열을 정수로
parseFloat: 문자열을 소수로
변수의 초기값: var로 변수를 선언하고 초기값을 할당하지 않고 변수를 호출하면 undefined 값을 갖게됨.
특정 값을 지정하지 않고 변수를 선언하여 초기화 할 때는 그 변수에 null값을 할당함.
전역변수: function 기능함수 외부에서 선언된 변수
문서의 전 영역에서 변수에 접근 및 수정 가능
지역변수: function 내에서 선언된 변수
선언된 함수 내에서만 변수의 접근 및 수정이 가능함
HTML 파일 안에 자바스크립트 함수를 선언하는것을 인라인선언방식이라고 한다.
// 버튼을 클릭하면 함수가 실행되는 간단한 예제.
JavaScript는 변수에 함수를 할당해서 함수처럼 사용 할 수 있다.
이때 함수를 할당한 변수의 데이터타입은 function이다.
자바스크립트는 다른 자바나 C 같은 언어와 달리 명시적인 타입이 없다. 자바스크립트 변수는 어떤 자료형의 값도 담을 수 있으며, 한 변수를 다른 타입의 값으로 할당할 수 있다.
주의:
== : 데이터 타입은 제외하고 데이터 값만 비교한다.
===: 데이터 타입까지 포함하여 비교한다.
함수도 변수처럼 함수호출시 전달 될 수 있다.
또한 호출한 함수 내에서도 함수로 사용 할 수 있다.
//전달인자가 함수일 경우 함수를 실행하고,함수가 아닐경우 '함수가 아닙니다'를 출력하는 예제
//함수안에서 함수를 리턴후에 리턴한 함수를 호출하는 예제
자바스크립트는 달리 함수 호출시, 전달인자가 몇개가 전달되던지 에러가 나지 않는다
함수 선언시 매개변수로 지정한 개수만 사용하게 된다.
함수 실행시 컨텍스트 영역 관련 예제
//함수를 전달인자로 받았을때는 그 함수의 컨텍스트에서 판단한다.
//그래서 결과는 value1가 된다.
클로저
내부함수는 외부함수의 지역변수에 접근할 수 있는데
외부 함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부 함수가 외부함수의 변수에 접근할 수 있다.
이러한 매커니즘을 클로저라고 한다.
//외부함수가 종료되더라도 내부함수 주소를 return받아서 사용할 수 있도록 한다.
//클로저를 표현하는 두가지 방법 예제
콜백함수: 책에서 파라미터로 넘어오는 함수를 콜백함수라고 정의한다.
어떤 사건이 되면 자동으로 호출되는 함수라고 이해할 수도 있다.
한글을 깨지지 않고 URL을 전달할 수 있는 내장함수
-encodeURIComponent(uriComponent)
DOM의 기본기능
각 문서에 있는 태그들을 노드가 있는 트리구조로 해석해 낼수 있다고 가정하는것.
태그: 요소노드와 텍스트 노드가 있다.
각 요소노드에 있는 속성값들은 속성노드로 인식한다.
속성: 객체에 대한 자료를 정의하며 객체의 특성을 나타낸다.
예) myCar.color = "black";
자바스크립트 객체는 배열표기를 사용하여도 참조 할 수 있다.
예) myCar["color"] = "black";
메서드: 객체가 동작하는 동작방식을 정의함.
객체명.메소드명()으로 호출 할 수 있다.
자바스크립트의 객체 생성 방법
new Object()를 이용한 객체 생성 : 임시적으로 사용할때.
Literal 객체 생성 : 하나 내지 두개만 생성시
생성자함수에 의한 객체 생성 : 재사용성이 좋다.
//new Object()를 이용한 객체 생성 예제
// 리터럴 형식을 이용한 객체 생성 예제
함수도 객체이므로 동적인 프로퍼티가 추가 가능하다.
//함수 선언 후 새로운 함수와 변수를 추가하는 예제
//리터럴 형식으로 객체를 임의로 생성 후
//동적프로퍼티로 함수를 추가 후 호출해서 사용하는 예제
생성자함수를 이용한 객체 생성
JAVA는 객체를 생성하기 위해서 클래스를 구현해야 하지만
자바스크립트는 생성자를 만들면 된다.
//생성자함수 student를 이용해 배열에 여러개의 객체를 생성하여 할당하는 예제
프로토타입은 생성자 함수로 생성된 객체가 공통으로 가지는 공간이다.
Prototype: 객체에 새로운 속성 또는 메소드를 추가 할 때 사용한다.
//생성자 함수 선언후, 생성자 함수의 프로토타입공간에 함수를 선언하고,
//객체를 생성하여 프로토타입 내의 함수를 호출하는 예제
'Today I learned' 카테고리의 다른 글
| 12월27일 (0) | 2018.12.27 |
|---|---|
| 12월13일 (0) | 2018.12.26 |
| 11월27일 (0) | 2018.11.27 |
| singleton pattern (0) | 2018.10.26 |
| JAVA 2주차 강의 정리 (0) | 2018.10.24 |
댓글