Web App. 개발을 위한 객체지향 JavaScript [2일차 - 2]

파일 사용하여 호출하기

src에 js 파일이 있는 위치를 지정해주면 해당 파일을 불러오게 된다. 이때 아래 예제와 같이 파일 이름만 작성하면 html이 있는 폴더에서 뒤지게 된다.

exaple.html 파일

coffee.js 파일

디버그 사용하기

중단점을 사용하기 위해서 Chrome의 개발자 도구를 사용해 보자.

F12를 누그로 Source 탭을 누르고 원하는 라인 번호에 오른쪽 클릭을 해보면 그림과 같이 파란 색 표시가 된다.

이제 F5 를 눌러 페이지르 다시 읽어오면 아래와 같이 break point에 멈추는 것을 볼수 있다. 이상태에서 오른쪽 창에 보면 local variable과 global variable 등을 볼수 있다.

그림 오른쪽에 보면 한 단계씩 진행하거나 함수 단위로 진행할 수도 있다. Call Stack은 함수 콜 순서도 볼 수 있다.

성공하고 싶다면 위대한 아이디어를 떠올려야 한다는 강박관념에서 벗어나 위대한 팀을 경작하는 데 집중해야 한다. - 제프 앳우드:코딩호러의 이펙티브 프로그래밍(스택오버 플로우 공동 창집자)

객체

객체를 생성하기 위해서는 new Object();를 수행한다.

이렇게 JavaScript에서는 생성된 객체에 동적으로 properties, method를 추가 할 수 있다.

customer1['name'] 과 같이 호출 할 수도 있다. 이러한 방식은 이름이 변결이 될때 유용하여 다음과 같이 쓸수 있다.

customer[variable]

다음 예제를 수행해 보자

coffee.js

coffee.html

Result

객체를 사용할때 다음과 같이 할 수도 있다.