[Do it!] 자바스크립트

🔎내부 스크립트 외부로 분리

HTML내부에 자바스크립트를 작성하기 보다 파일을 따로 만들어서 외부로 분리하는것이 좋다.
그렇게 하면 소스 찾기도 쉽고 누군가 소스를 손상시킬 걱정을 하지 않아도 된다.
즉, 외부로 분리하는 주 목적은 프로젝트 관리를 원활하게 하기 위함이다.

<script src = "파일 경로"> </script>

위 코드를 html head태그에 삽입해준다.

1. 자바스크립트 객체 종류

(1) 내장 객체(Built-in Object)

ex) String, Date, Array, Math, 정규 표현 객체 등

(2) 브라우저 객체 모델(BOM)

ex) window, screen, location, history, navigator 객체 등
** 브라우저(window)객체는 document와 location의 상위 객체이다.
(아래 사진 참고)

(3) 문서 객체 모델(DOM)

HTML문서 구조를 말합니다.
ex) html태그가 최 상위 객체고, 그 하위 객체로는 head와 body가 있다.
** 자바스크립트 문서 객체 모델은 IE 8 이하 버전에서는 호환성이 떨어져서 보통 제이쿼리 문서 객체 모델을 많이 사용한다.

2. 브라우저 객체 모델

(1) window 객체 메소드

open() → url페이지 새창으로 나타내기(팝업창 띄우기)
alert() → 경고창 나타내고 방문자가 확인버튼 누르면, alert() 다음 코드 실행
prompt() → 질의응답창 나타내기, 바문자가 확인버튼 클릭하면 입력한 답변을 return
confirm() → 확인을 누르면 true를, 취소를 누르면 false를 return
setInterval(코드, 시간간격(ms)) → 코드를 일정시간 간격으로 반복실행(시간 간격은 ms단위)
clearInterval() → setInterval()메소드 취소
setTimeout(코드, 시간간격(ms)) → 일정 시간 이후 코드 실행 후 종료(재귀호출하면 setInterval()처럼 사용 가능)
clearTimeout() → setTimeout()메소드 취소

(2) screen 객체 속성

: 사용자의 모니터 정보를 제공하는 객체
→ width, height, availWidth, availHeight, colorDepth

• location 객체 속성/메소드

  : 사용자 브라우저와 관련된 속성과 메소드를 제공하는 객체
  → href, hash, hostname, host, protocol, search
  reload() → 창 새로고침

(3) history 객체 속성/메소드

: 사용자가 방문한 사이트의 기록을 남기고 이전 방문 사이트와 다음 방문 사이트로 다시 돌아갈 수 있는 속성과 메소드 제공하는 객체
→ length(방문 기록에 저장된 목록의 개수)
back() → 이전 방문 사이트로 이동
forward() → 다음 방문 사이트로 이동
go(이동숫자) → 이동숫자에 -2를 입력하면 2단계 이전의 방문 사이트로 이동

(4) navigator 객체 속성

: 현재 방문자가 사용하는 브라우저 정보와 운영체제 정보를 제공하는 객체
→ appCodeName, appName, appVersion, language, product, platform, online, userAgent

3. 함수

(1) 일반 함수와 익명 함수의 차이?

→ 일반 함수 정의는 함수 호출 시 호이스팅(hoisting)기술을 지원하기 때문에 함수 정의문보다 호출문이 먼저 나와도 함수 정의문을 끌어올려 함수를 호출한다. 그러나 익명 함수 선언 참조 방식은 호이스팅을 지원하지 않는다.

• 버튼 누를때마다 함수 실행

//onclick을 이용하면 버튼을 누를 때 마다 함수 실행
<button onclick = "함수();">버튼 글씨</button> 

• 매개변수 없이 함수에 전달된 값 받아오기
  → 함수에서 arguments를 사용하면 매개변수를 사용하는 것처럼 함수 호출문의 값을 받아올 수 있다.

(2) 객체 생성자 함수

: 객체 생성자의 함수명은 소문자로 시작해도 되지만 가능한 대문자로 만드는것이 좋다. (개발자간의 약속)

• console.log(객체)
  : 콘솔에 생성된 객체를 출력해서 객체에 등록된 속성과 함수를 확인할 수 있다.
• 객체 생성자 함수에서 프로토타입 사용
  : 객체 생성자 함수를 선언하고 객체를 생성하게 되면 객체를 생성한 만큼 함수가 여러번 등록되기 때문에 메모리를 낭비하게 된다. 이럴 때 프로토타입을 사용하여 함수를 등록하면 여러개의 함수를 등록할 필요 없이 여러 객체가 함수를 공유할 수 있다.

function CheckWeight(){}
CheckWeight.prototype.함수명 = function(){}

(3) 자바스크립트 내장 함수

: 자바스크립트 엔진에 내장된 함수들도 있는데 필요하면 구글링을 하는게 좋을 것 같다.

👏이렇게 책의 첫째마당인 자바스크립트를 다 읽었다. C, C++, Java, Python과 같은 다른 언어들을 조금 알고 있어서 그런지 빠르게 읽을 수 있었던 것 같다. 내일부터는 둘째마당인 제이쿼리 부분을 읽어야겠다 :) 👏