[JavaScript] JavaScript 기초 1일차(160312, 토)

첫 주말강의이자 5번째 Kosta강의, 09:00 ~ 18:00. 8시간의 교육이 예정되어 있습니다.

 

오늘도 간단하게 환경설정을 위한 파일부터 복사를 했습니다.

 

10년 전과는 지금 책도 다르다고 설명, 예전에는 자바스크립트가 하나의 쳅터정도에 불과 했으나 지금은 책 하나 1300 페이지 5만원 가량의 책 또한 나오는 추세입니다.

 

Java와 Jave Script는 전혀 관계가 없습니다.

 

Java와는 실행 구조 메커니즘은 완전 다르고 Java와 기초문법과 객체지향 프로그래밍을 할 수 있는것이 유사하지만 객체지향 프로그래밍은 다른 언어로도 충분히 할 수 있다고 설명해주셨습니다.

과거에는 특정 단순한 기능 위주로 개발 및 사용을 하였습니다. 하지만 2010년 이후 그리고 현재에는 상호작용이 가능 하도록 사용을 합니다.

Web 2.0시대에 도래하면서  Ajax와 같이 활용을 하여 UI적인 변화를 겪으면서 자바스크립트가 각광받게 되었습니다.

HTML 5는 플러그인을 없에자는 것이었고 응용프로그램과 같이 사용할 수 있는 웹프로그램을 만들 수 있는것을 지향합니다.

 

(시대에 따른 흐름 ?)

1) DOM script ?

2) J Query (자바 스크립트의 라이브러리) 작업 생산성과 효율이 뛰어나서 자바스크립트를 사용하면 사용을 하지 않을 수 없다고 봐야 하는 상황이고 이러한 상황때문에 J Query를 쓰면서도 자바스크립트를 사용하지 않는다고 생각하는 사람도 있다고 하셨습니다.

3) Node JS - 스크립트 자체로 서버를 만들어 사용하는 것을 목적으로 하며 요즘 각광받고있습니다. 노드JS는 비동기식 프로그래밍을 해야하는데 동기식 프로그래밍에 익숙해진 개발자는 동기식으로 프로그래밍을 하면 최적의 성능을 발휘할 수 없습니다.

4) Angular JS -> 비지니스 모델과의 동기화 MVC의 처리를 하기 위한 스크립트입니다.

 

2)는 UI개발위주라면 3) ~4)는 비지니스 모델에 더 치우친 개발입니다.

2) 이후의 어느것을 사용하던 JavaScript의 기본 문법을 알아야 보다 효율적으로 다른 스크립트를 활용할 수 있다고 하셨습니다.

함수~! 객체~!!!! DOM!!에 대한 이해가 오늘의 주제라고 하셨습니다.

this가 나오면 어렵고 소심해진다고 하셨습니다.

top down방식으로 해석되며 인터프리터 방식으로 동작합니다.

 

 

 

요즘은 헤드단 보다 바디 단에서 부르는게 추세이고 그 이유는 그게 속도가 빠르다고 합니다.

자바스크립트는 자바 뿐 타언어와 비교하여도 문법이 느슨합니다.

 

 

설치를 진행하였습니다.  개인 노트북 사용자는 특히 apache-tomcat-7.0.37을 설치하고 마지막 쯤 체크박스를 모두 해제하도록 하라고 하셨습니다.

이클립스를 설치 후 Workspace를 설정해 주었습니다.

서버와 프로젝트 만들고 서버설치 하는등의 작업을 하였습니다.

 

아래는 글꼴을 바꾸는 부분입니다.

firefox를 설치하면 FireBug를 이용할 수 있고 이클립스에서 파이어폭스 콘솔에 설정에 가서 Enable에 체크가 되어있는지 확인을 해야 합니다. 체크가 되어있어여 디버그를 이용할 수 있습니다.

 

 

파이어폭스로 실행을 하면 파이어 폭스 창 우측 상단에 곤충모양의 버튼(1번)이 있습니다. 누르면 아래부분에 보이는 창이 위로 올라와 화면 하단에 보입니다. 그 창의 상단 텝에 콘솔(2번)탭이 있는데 콘솔텝에서 우클릭을 하면 사용중이면 지금 화면에서 메뉴가 올라오는 것 처럼 팝업메뉴가 보이고 비사용중이면 Disabled하나만 보입니다 그때 체크를 하면(3번) 됩니다.

 

=========================================  2  ======================================

컨트롤 스페이스!!!!  -> 자동완성 단축키

링크 잘 됬는지 확인은 알트키 누르고 클릭하면 파일이 열린다 (하이퍼링크)

 

한줄(블럭) 복사 : Ctrl + Alt + 위(아래) 

8. 블록 주석(/*..*/) 추가.(3.0 NEW): CTRL+SHIFT+/ 

근데 해보니 화면이 반전되었습니다. 저는....

 

추가 설정 ( 인코딩 변경 )

 

 

 

 

 

1) 자료형

자료형에 대해 확인을 해 보고 있습니다.

자바스크립트는 데이터타입(자료형)을 변수할당 전까지 가지고 있지 않아서 확인을 하고싶으면 (typeof intNum)를 사용하여 확인할 수 있어야 합니다.

Undefined와 Null은 다릅니다. 또한 자바스크립트는 자동으로 자료형이 변환됩니다.

2) 변수의 사용범위 규칙 (Scope Rule)

 - 전역변수

 - 지역변수

 

3) 형 변환...

 //문자열 => 숫자형 변환 : eval(), parseInt(), Number()

 var num = "15";
 //num= eval(num);   //=> 자료형 고려하여 숫자로 변환합니다. -> 숫자랑 문자 섞이면 Error
 //num= Number(num);  //=> 자료형 상관없이 숫자로 변환합니다. -> 숫자랑 문자 섞이면 Error 없음
 //num= parseInt(num);  //=> 변환할 수 있는 부분(숫자)만 변환합니다.
 

// == 일때와 ===일때 차이가 있음
 //==는 형변환을 안하고 비교하고 ===은 datatype까지 같아야 함.

 

==================================== 3 ============================================

(11:07 ~ 12:46)

자바스크립트 기본문법

1. 연산자

 산술연산자, 관계연산자, 논리연산자, 비트연산자, 할당연산자, 증감연산자, 조건연산자(3항연산자)

 

2. 제어문

 if, else , switch, while, do...while, for, break, continue, return

 

b_exam05.html

 

3. 사용자 정의 함수

1) 선언적 함수 - 선언부 위에 호출부가 위치해도 상관없음

2) 익명함수 - 선언부 아래에 호출부가 위치해야 함, 선언 이전에 호출하면 Error

두 차이는 호출되는 위치의 차이는 함수가 메모리에 올라가를 시점이 다르기 때문이라고 설명을 해 주셨습니다.

 

자바스크립트는 변수에 함수를 할당할 수 있으며 함수를 할당받은 변수 또한 다른 변수에 할당할 수 있습니다.

함수를 리턴하는 함수를 만들 수 있으며 이 내용에 대해서 실습을 해 보라고 하셨습니다.

 

인자와 리텀값에 함수를 사용하는 것이 익숙하지 않을 뿐이지 어려운 내용은 아니라고 하셨습니다.

 

4. 객체모형 (Object Model)

이전에 window, math등의 내장 객체를 사용했습니다.

1) 내장객체

내장객체는 java가 제공하는 객체입니다.

core객체는 string, date, math와 같은 프로그래밍을 하기위한 API같은 것입니다.

BOM(browser object model)은 window, document등입니다.

 

DOM(Document Object Model)은 HTML로 작성한 문서를 Tree구조로 표현해주는 것입니다.

tree구조로 표현된 노드 하나하나는 객체가 됩니다.

2) 사용자 정의 객체

 3가지의 표현방법이 있습니다.

 

 

사용자 정의 함수, 내장객체, DOM관련 객체 에 대해서 앞으로 이 순으로 수업을 진행할 것이라고 설명 해 주셨습니다.

class를 지원하지 않고 상속도 지원하지 않습니다. 상속은 흉내를 내서 사용할 수 있지만 100% 상속을 구현하기는 어렵습니다.

 

객체는 속성(Proprtties)과 메소드(Method)로 구성됩니다.

함수도 객체이며 객체처럼 생성됩니다!!

========================================  4  =======================================

14:04 ~ 14:58     

수업 시작과 거의 동시에 연습문제를 던지셨습니다.

리터럴 형식으로 객체를 생성 후 동적인 속성에 함수를 등록 후 함수를 호출하는 예제를 구현하시오.

 o_exam04.html

우선 했는데 확신은 안 서고 Java를 처음 배우는 느낌이 나서 즐겁습니다.

함수의 수행 영역 (context)에 따른 변수의 참조와 같은 것을 확인하고 클로저라는 개념에 대해 학습을 하며 또 다른 예제문제를 던져주셨습니다.

 // 클로저를 이용하여 함수에 선언된 10을 실행 context가 종료 후에도 콘솔에 출력되도록 하시오

 o_exam04.html

========================================  5  =======================================

15:08 ~ 16:08

 

프로토 타입?

프로토타입이라는 메모리영역은 객체가 생성되면 만들어 져서 생성자 함수를 호출할 때 마다 메모리에 올라가는 것이 아니라 객체가 생성될 때 마다 프로토타입의 메모리를 링크(연결)해서 사용하는 느낌이라고 설명을 하셨는데 맞게 이해한건지 감이 잘 오지를 않습니다.

요점은 Memery에 객체생성시마다 메소드를 메모리에 올리지 않아도 되는 것 같은 느낌입니다. 프로토타입이라는 키워드를 사용하면 된다고 하였습니다.

실습을 해 보던 중 똑같이 작성을 한 것 같은데 Error가 나서  o_exam05.html의 내용을 정확하게 한번 추후에 보아야 할 것 같습니다.

우선 강사님께서 작성하신 파일을 Backup 받고 오후에 작업한 것 부터는 USB드라이브에 작업이 되도록 workspace를 변경하였습니다.

자바스크립트는 상속이라는 개념을 도입하지 않았는데 자바스크립트에서 그럼 어떻게 구현을 해야할까?

 

부모의 생성자함수를 자식에서 호출을 한다? 자신의 Prototype을 부모의 Prototype을 참조하도록 하는 것입니다. 약간의 억측?이 있지는 하지만 중복되는 코드의 작성을 줄일 수 있습니다.

 

사용자 정의 객체 정리!!!!

1) Object 객체를 이용

2) 리터럴 형식을 이용 -> 단 한번만 객체를 생성하기 위함

3) 생성자함수를 호출 -> 여러 객체를 생성하기 위함.

 

생성자함수의 this를 사용하여 정의하는 것은 속성(property)이라고 함.

new연산자를 사용하여 객체를 생성하면 . 기호를 사용하여 호출을 할 수 있습니다.

method에 대한 memory를 중복하여 할당하므로 Prototype을 사용하면 Memory에는 단 한번만 올릴 수 있습니다.

생성자 함수에 속성으로 설정을하면 정보은닉이 되지 않으므로 지역변수로 맴버를 갖고 있고 메소드를 구현하여 처리를 할 수도 있습니다.

 

상속 기능을 구현하고 싶다면 부모의 생성자 함수를 호출하고, 부모의 프로토타입의 주소값을 자식의 프로토타입에 할당 해 주고 프로토타입에서 컨스트럭터는 자기자신으로 설정해주면 추후에도 문제가 없습니다.

=====================================  6  ==========================================

16:28 ~ 17:16

 

자바스크립트의 내장객체

웹브라우저에서는 모습을 나타내지 않는 객체들입니다.

1) Array 객체

속성 : length

메소드 : ....많이 있습니다.

실습으로 Array에 각종 method를 사용 해 보았습니다.

i_exam01.html

2)  Math객체

난수만들기와 그것을 이용해서 로또번호를 만들어보는 예제를 작성해보았습니다.

i_exam02.html

 

===================================    7    =========================================

(17: 25~ 17:39)

마지막 시간에는 이전 Math객체와 관련하여 예제를 하나 만들어보자고 하셨습니다.

베너이미지가 들어갈 때마다 변경되는 것을 맛보기로 구현을 해 보았습니다.