Javascript 에 대한 기본 상식 객체지향, DOM에 대해서.. 매일 업데이트 (20180128)

Javascript

자바스크립트는 현존하는 최강의 언어이다.(개인적인 생각) 어떠한 것도 자바스크립트로 표현이 가능하다. 게임 그리고 그래픽등등.. 자바스크립트는 동적인 웹 환경을 위해 만들어졌다. 페이지와 대화하며, 데이터가 바로 표시되고 여러 이벤트 그리고 프로그래밍 스타일을 반영한다.


Camel case 캐멀케이스 변수명을 사용 ex) maxFixedNum

1.input : ducument.write("김도현입니다.<br>");

output : 김도현입니다. (그리고 줄바꿈)

2. console.log()

콘솔로그를 사용하면 디버깅을 하기 조금 수월하다. 오류 메시지를 콘솔에 출력해 어디가 잘못되었는지 찾기 수월해진다. (추후에 더 자세한 디버깅 방법을 게시하겠어요)

3. alert("김도현인데?");

김도현인데? 라는 문구를 가진 경고창이 뜬다.

4. <script src:"dohyun.js"></script>

 외부 자바스크립트 파일을 참조할 때에는 스크립트 요소 안에 아무 것도 넣지 마세요~

5. var hello = prompt("김도현의 나이를 추측해 보세요!");

prompt를 이용해 값을 입력받아 hello변수에 저장했다.

6. var randomNum = Math.floor(Math.random() * 5);

floor함수로 인해 0.12324은 0이되고, 3.12345는 3이 된다.
random함수는 0~5까지의 숫자를 랜덤으로 정한다.


7. var scores = [50, 51, 60, 74, 34, 23];

일반 적으로 C, Java와 배열 초기화 방법이 살짝 다르다.

var genres = [];

요소가 하나도 없으며, 길이가 0인 배열이 새로 만들어진다.

var genres = [];
genres[0] = "로카빌리";
genres[1] = "앰비언트";
var size = genres.length;
size는 2가 된다. 이런식으로도 가능하다!

genres.push("도현하이");
이런식도 가능!

객체지향언어이기도 한 Javascript

객체란 그저 속성을 모아놓은 것이라 생각하면 좋다. 객체지향에서 빠질 수 없는 자동차로 예를 들어보자.
쉐보레같은 제조사가 있다. 자동차에는 최대 승객수가 있고, 총 주행거리가 있고 색상이 있고, 등등..

var chevy = {
     make: "fiat",
     model: "벨 에어",
     year: 1957,
     color: "빨간색",
     passengers: 2,
     convertible: false
};

위에서 객체 안에 속성을 넣었다. 이제 속성값을 확인하고, 바꾸고, 새로운 속성을 추가하거나, 제거할 수도있다. 하지만 일반적으로는 속성을 이용해 계산을 한다.

속성에 접근하는 방법은 객체명, 점, 그리고 속성명을 나열하면 된다.

fiat.passengers
객체명 다음에 점 그리고 속성명 순이다.

var people = fiat.passenger;  이렇게 된다면 people 에는 2가 담기게 되는 것이다.

속성값을 바꾸고 싶다면 fiat.passenger = 5;
속성값을 추가 하고 싶다면 fiat.needsWashing = true;

실제로 변수에 객체가 들어가는 것은 아니다.
대신 변수에는 객체에 대한 참조가 들어간다.
참조는 실제 객체에 대한 포인터나 주소 같은 것이다.
점 표기법을 사용하면 자바스크립트 인터프리터는 객체에 대한 참조를 이용해 객체를 찾고, 그 안에 들어 있는 속성에 접근한다.

기본 변수의 초기화 var x = 3;
객체 변수의 초기화 var myCar = {...}; 자동차 객체에 대한 참조가 이 변수에 들어간다.

Javascript DOM(Document Object Model)

document 는 전역 객체이다. 그리고 getElementById()는 메서드이다.

자바스크립트와 HTML은 서로 별개의 것이다. HTML은 태그를 가진 문서이고 자바스크립트는 코드이다.
이 둘이 어떻게 서로 대화할 수 있을까? 궁극적으로는 웹 페이지를 문서 객체 모델 (Document Object Model, DOM)이라고 부르는 방법으로 표현함으로써 가능하다. 그런데 DOM은 어디에서 오는 것일까?
다음과 같이 브라우저가 웹 페이지를 로딩할 때 DOM을 생성한다.

1. 브라우저에 웹페이지를 로딩하면 브라우저가 HTML을 파싱하고 화면에 출력할 뿐만 아니라, 태그를 나타내는 일련의 객체도 만든다. 이 객체들이 DOM에 저장된다.
2.자바스크립트는 DOM과 대화하고 DOM에 들어 있는 요소에 접근할 수 있다. 뿐만 아니라 자바스크립트는 DOM을 이용해 요소를 생성하거나 제거할 수 있다.
3.자바스크립트가 DOM을 수정하면 브라우저는 웹 페이지를 동적으로 갱신하므로 웹 페이지에서 새로운 내용을 볼 수 있게 된다.