WebOS와 JavaScript
Webkit : 렌더링엔진(HTML을 파싱. 파싱하면 DOM 트리(비가시성 요소 포함) 만들어진다. - 렌더트리)
(CSS - 파싱 - CSS룰 - 렌더트리)
XML
- DOM : Tree메모리
- SAX
v8 : Javascript 해석기
1. Open webOS Architecture Diagram
* Java 개발자가 꼭 알아야 할 프레임워크!
Spring, jQuery
2. Enyo
- 모듈화와 캡슐화를 강조한 객체지향 자바스크립트 애플리케이션 프레임워크(기반, 자주사용하는 것들을 미리 만들어놓은 것.)
자바스크립트
1.자바스크립트 개요
- ECMAScript 표준을 준수
- 프로토타입 기반 객체지향 언어
- html문서에 삽입되어, 브라우저의 해석기에 의해 인터프리터 방식으로 해석되어 실행이된다.
*컴파일러와 인터프리터의 차이?
- 컴파일러 : 컴파일하며 바이너리 파일이 생성된다. 바이너리 파일은 그 플랫폼에 의존하는 경향이 있다. ex) C, C++
- 인터프리터 : 인터프리터만 있으면 어느 플랫폼에서든 실행이 가능하다. 단점은 그때그때 한줄씩 구문 검사를 하고, 속도가 느리다. ex) 자바스크립트
- 클래스를 정의할 수 없다.
- 그러나 함수를 정의하고 함수로 객체를 생성할 수 있다.
- 장점
- 작업속도가 빠르다
- 플랫폼 독립적
- 단점
- 소스코드가 노출된다.
- 객체와 객체 함수가 적다.
4. 자바스크립트의 기본 구조
- <script>태그를 사용하여 HTML 문서에 코드 작성
HTML5인 경우 소스코드의 제일 상단에 <!DOCTYPE html>이 붙어있다.
HTML5인 경우 type없이 <script> ... </script>만 써도된다.
> document.write("<h2>안녕하세요</h2>");
document는 문서 하나를 말한다.
document.write는 브라우저 화면에 그리는 것이 아니라 브라우저 화면에 무엇인가를 나타내기 위한 출력이다.
alert("Hello")는 알림창을 띄우는 건데, 이 alert앞에는 window가 생략되있는 것이다.
window는 최상위 객체이기때문에 생략 가능하다.
그래서 window.alert("Hello")이지만 alert("Hello")라고 쓸 수 있는 것이다.
5. 자바스크립트의 실행 위치
- <head> 태그 영역에 배치
- <body> 태그 영역에 배치
- 자바스크립트를 외부 파일로 사용되는 경우
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> <title>문서의 제목을 입력합니다.</title> </head> <body> <!-- 브라우저 화면에 보여지는 내용입니다. --> <div>안녕하세요</div> <script> var myDiv = document.querySelector("div"); <!-- div라는 태그를 찾아서 DOM객체 반환 --> myDiv.innerHTML = "반갑습니다"; </script> </body> </html> |
왜냐하면 div가 DOM태그에 입력되기 이전에 script가 전부 실행 되게 되기때문에 myDiv가 null이 된다.
따라서 <script>를 <body>의 마지막에 넣어준다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <title>문서의 제목을 입력합니다.</title> <script> function init() { var myDiv = document.querySelector("div"); myDiv.innerHTML = "반갑습니다"; } </script> </head> <body onload="init();"> <!-- 브라우저 화면에 보여지는 내용입니다. --> <div>안녕하세요</div> </body> </html> |
*중요한 또 다른 방식
<test3.html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <title>문서의 제목을 입력합니다.</title> <script src="default.js" defer> </script> </head> <body> <!-- 브라우저 화면에 보여지는 내용입니다. --> <div>안녕하세요</div> </body> </html> |
<default.js>
1 2 3 4 5 | function init() { var myDiv = document.querySelector("div"); <!-- div라는 태그를 찾아서 DOM객체 반환 --> myDiv.innerHTML = "반갑습니다"; } init(); |
* <!-- defer : HTML문서를 다 실행한 후에 <script>실행 -->
* <!-- HTML5의 경우. <async>의 경우 <script>다 다운받으면 바로 worker(백그라운드에서 돌아간다)를 실행시킨다. -->
6. 자바스크립트의 기본 문법
- 자바스크립트 구문
- 문장 끝에 세미콜론(;)을 입력한다.
- 자바스크립트 파일은 공백과 엔터를 지우고, 변수 이름도 a, b로 바꾸는 packing을 해서 암호화한다.
- 자바스크립트 주석
- // : 한 줄 주석 처리
- /* ~ */ : 한 줄 이상의 주석 처리
- 변수 선언
- var 키워드 이용
- var 없이 변수 사용 가능하지만 그러면 전역변수(최상위 객체의 멤버)가 됨
- 변수의 스코프(scope)는 함수 단위임
7. 데이터 타입
- Primitive data type : 숫자(isFinite(), isNaN()), 문자열, 불린 타입(비교 결과가 0, null, "", false, undefined, NaN으로 판단되면 false,나머진 true), undefined, null
- Reference data type : 객체, 배열, 함수, 기타
- 객체
- 자바스크립트에서 객체는 모든것을 의미한다. (문자열, 숫자, 배열, 함수 등)
- 자바스크립트는 내장 객체와 사용자 정의 객체가 있다.
8. 연산자
> a=8;
b=20;
c=0;
d=a&&b&&c;
console.log(d);
0
> a=8;
b=20;
c=0;
d=a||b||c;
console.log(d);
8
9. 제어문
- for/in 문
- 사용법
for (변수 in 객체) {
//실행 코드 블록
}
- 객체의 멤버에 접근하기 위해[]사용 가능
- 사용자가 정의한 속성에만 접근 가능하지만, Object 객체에 원래 정의된 속성에는 접근할 수 없다. - 반복문 안에서 변수 선언시 var 변수로 선언하지 않으면 전역변수가된다. (함수 밖에서 참조 가능)
var second = prompt("두 번째 수를 입력하세요");
console.log(parseInt(first) + parseInt(second));
console.log(first + second);
수를 입력받아 해당하는 구구단을 출력하세요.
> var dan = prompt("단을 입력하세요");
dan = parseInt(dan);
if(!isNaN(dan)) {
for(var i=1; i<=9; i++) {
console.log(i + "*" + dan + "=" + (i*dan));
}
}else {
console.log("잘못된 입력입니다");
}
- try/catch/finally
-사용법
try {
//실행 코드를 포함
} catch(error) {
//예외가 발생했을 경우 처리할 코드
} finally {
//항상 실행되는 코드 포함
} - throw
원인이 있는 곳에 try catch
원인이 발생하는 곳에서 throw
예제)
삼촌(caller)이 조카(callee)에게 500원을 주고 케이크를 사오라고 한다면 케이크를 못 사온 조카의 잘못일까? 삼촌의 잘못일까? 당연히 500원을 준 삼촌이 잘못이다! 고로 삼촌을 예외처리해주자!
* el이 null값이 들어있다는 error를 잡아준다.
* 밑에 경우가 올바른 경우
*위의 경우보다 오류 메세지를 더 알아보기 쉽게 한 코드(최종 코드)
11. 함수
- 기본 개념
- 함수의 정의
- 예약어 'function'으로 시작
- 익명함수 : 자기가 자기의 함수를 바로 호출해서 사용하는 것 (제일 밑에 소스코드) - 함수의 역할
- 호출 가능한 루틴으로서의 함수 (method)
- 값으로서의 함수 (method)
- 다른 인스턴스를 생성할 수 있는 요소. 객체 타입으로서의 함수 (생성자함수) - 함수와 변수 스코프
렉시컬(lexical, 구문) 특성 : 코드 그대로의 환경을 기준으로 정의한 변수 스코프에서 변수의 검색이 일어난다.
함수 밖에서 선언된 전역변수를 함수 안에서 초기화 하지 않고 참조하면 undefined
전역변수를 지역변수로 다시 선언할 때에는 반드시 초기화를 해줘야한다. 그렇지 않으면 undefined! - 메모리구조(★★★)
실행코드블록에서는 변수 스코프를 참조할수 있기때문에 붙여놓았다.
변수 스코프에서는 prototype이라는 속성을 제공하는데, 이 것을 이용하면 프로토타입의 객체를 반환받을 수 있다.
프로토타입 객체의 constructor을 이용하면 원래 함수 객체로 돌아갈 수 있다.
변수가 저장되는 곳은 : 변수 스코프, 프로토타입 객체, 공개변수영역 - 함수 정의 방법
- 기본 방법
function add(x, y) {
return x+y;
}
- 함수 리터럴 사용 (가장 많이 사용)
var add = function(x, y) {
return x+y;
}
- function 생성자 사용(맨 마지막 인자가 실행코드이고, 나머지는 함수의 인자이다.)
var add = Function("x", "y", "return x+y"); - 함수 호출과 함수 인자
- 함수 호출시에 인자의 수는 정의시 매개변수의 수와 일치하지 않아도 됨
인자보다 부족하면 undefined(or NaN), 인자보다 많으면 버려진다. - arguments
- 함수 인자로 전달되는 데이터를 가진 객체, Object 타입
- arguments.callee : 익명함수(anonymous function)로 재귀함수를 만들때
- arguments.length : 전달되는 인자의 개수를 알 수 있다. - 자바스크립트 클로저
- 내부 함수를 반환값으로 사용하는 특수한 함수
- 클로저를 이용하면 독립된 변수 공간을 가진 인스턴스를 반환한다.
function outer() {
var x=0;
return function() {
return ++x;
}
}
var f = outer();
var g = outer();
f(); //1
f(); //2
g(); //1
g(); //2
outer()(); //1
outer()(); //1
-> 지역변수값이 정적(static)변수가 되게 만들어준다.
숙제!!
17개의 숫자 더하는 프로그램을 짜보세요.
* for문 조건식에서 n=arguments.length라고 준 이유는 메모리 공간을 하나 더 차지하기는 하지만 for문을 돌면서 항상 계산(i<arguments.length)할 필요가 없기 때문이다.
'IT' 카테고리의 다른 글
| [PhoneGap] Cordova 3.0 설치 (Android, Tizen - Windows) (1) | 2014.06.18 |
|---|---|
| [JS] 전문가교육 2일차 - 오후 (0) | 2014.05.25 |
| [JS] 전문가교육 2일차 - 오전 (0) | 2014.05.25 |
| [JS] 전문가교육 1일차 - 오전 (0) | 2014.05.24 |
