국비지원 31일차 (자바스크립트.1)

※자바스크립트란?

- 동적으로 변경되는 콘텐츠를 만들고, 멀티미디어를 제어하고, 이미지에 애니메이션을 적용하는 등 거의 모든 작업을 수행할 수 있는 스크립팅 언어입니다. (모든 것이 가능한 것은 아니지만 몇 줄의 JavaScript 다양한 효과를 줄 수 있습니다.)

 

1. 파싱, 랜더링이란?

- 파싱 (구문분석)
텍스트 문서의 문자열을 토큰으로 분해(어휘 분석)하고,
토큰에 문법적 의미와 구조를 반영하여 parse Tree를 생성하는 일련의 과정.
(토큰: 문법적으로 의미가 있는 최소 단위)
우리들이 사용하는 IDE는 컴퓨터언어들을 순식간에 해석해서 형형색색으로 문법구조와 문법오류를 표시한다. 그 때문에 컴퓨터가 컴퓨터 언어를 해석하는 것을 너무나 당연하게 받아들이고 있지만, 사실 소스코드 자체는 텍스트 문서에 불과하다. 파싱이라는 과정을 거쳐서 문법적인 의미를 부여해야 컴퓨터가 언어를 해석할 수 있다.

- 렌더링
HTML, CSS, JS로 작성된 문서를 파싱 하여 브라우저에 시각적으로 출력하는 것

-렌더링 과정
주소창에 url을 입력하면, 브라우저는 HTML, CSS, Javascript 등 렌더링에 필요한 리소스들을 서버에 요청한다.
서버로부터 받은 리소스들을 통해 렌더링을 하는데, HTML, CSS, Javascript 소스들은 텍스트에 불과하기 때문에 파싱을 통해 브라우저가 이해할 수 있는 자료구조 형태로 만들어야 한다. 이때,
HTML이 파싱을 거치면 DOM tree,
CSS가 파싱을 거치면 CSSOM tree,
Javascript가 파싱을 거치면 AST(Abstract Syntax Tree)가 된다.

 

2. 스크립트 문법

<script src="경로"></script> <!-- 기본 js -->

    <script async src="경로"></script>

@스크립트는 어디에 던 명시 가능
컴퓨터가 읽자마자 바로 실행하기 때문에 건드릴 요소보다는 밑에 명시되어야 한다.
그래서 추천하는 script 위치는 body 끝나기 직전(렌더링 끝나자마자)

  - 내부 선언
    자바스크립트와 제이쿼리를 <script> <script> 태그 안에 명시
  - 외부 선언
    <script src="경로"><'/script>
            
* 명령어 끝날 때마다' ;'(세미콜론) 필수명시한다.

 

@async
- 기본은 html 코드를 읽다가 '<script' 부분을 보면 html 코드 읽던 거를 잠시 멈추고 해당 스크립트 파일을 다운로드하여오는데 async는 병렬 방식으로 DOM 도 그리면서 script를 다운로드하여온다.

- 장점: 스크립트를 다운로드하는 시간이 별도로 없기 때문에 상대적으로 기본 script 다운 방식보다 로드가 빠르다
- 단점: script가 다 받아지면 DOM 이 멈추고 스크립트를 실행하기 때문에 어차피 스크립트에서 오류가 나면 페이지가 멈춘다.

 

<script defer src="경로"></script>

@defer
- DOM을 로드하면서 동시에 script 들을 다운만 받는다.
- DOM 이 다 로드된 후, 다운로드한 스크립트를 실행한다.
- 장점: 외부파일이 여러 개인 경우 DOM 구조가 그려지는 동안 다운로드한 script 들을 코드 순서대로 실행하기 때문에 로드가 빠르다.
- header 안에 명시하면서 렌더링 이후 동작시킬 거면 defer 쓰는 게 좋다.

@문서 객체 모델(DOM)이란?
- 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다.
- 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.
- 이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현됩니다.

@ 자바스크립트는 이러한 객체 모델을 이용한 작업들.
- 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있습니다.
- 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있습니다.
- 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있습니다.
- 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있습니다.
- 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있습니다.
- 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가할 수 있습니다.
- 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응할 수 있습니다.

 

@자바스크립트 출력문

- 출력: 화면에 값을 표현해 주는 것
 *1) alert(): 팝업처럼 경고창 띄움
 *2) console.log(): 개발자도구 > 콘솔탭에 띄움
  3) document.write(): body 영역에 띄움

 줄 바꿈: \n - alert, console
         <br> - document에서만 줄 바꿈

 

<script>

        window.alert("안녕<br>하세\n요");

        console.log("안녕<br>하세\n요");

        document.write("안녕<br>하세\n요");

 </script>

* window.alert() :윈도객체에서 팝업창을 () 괄호 안에든 기능과 함께 출력해 준다.

* console.log() : 개빌자 도구에 콘솔탭에 () 괄호 안에 든 기능과 함께 출력해 준다.

* document.write() : body 영역에 () 괄호 안에 글씨를 출력해 준다.

 

* 줄 바꿈기능 alert,console 에서는 \n 을 이용해 줄바꿈을 할수있고, document 에서는 \n 은 못쓰고, <br> 을 이용해서 줄바꿈 이용가능하다.

 

@스크립트 자료형 

- 컴퓨터가 받아들일 수 있는 자료의 형태
  문자 - string
     큰따옴표나 따옴표로 감싸져 있는 자료
  숫자 - number
     쌍따옴표나 따옴표로 감싸져 있지 않은 숫자형태의 자료
  boolean - 참(true), 거짓(false)
  필요할 때마다 알아서 true - 1, false - 0으로 변경
   
  null - 존재하지 않음 (없음) ( 휴지를 빗대어 말하면 화장실에 휴지가 아예 없는 상태가 된다.)
  undefined - 정의되지 않음 (없음) ( 휴지를 빗대어 말하면 화장실에 휴지심만 있는 상태가 된다.)
  Nan - Not a number (숫자 아님)

 

console.log("=== 문자형 ===");

    console.log("abcd");

    console.log("100+100");

    console.log("100" + "100");

    console.log("=== 숫자형 ===");

    console.log(100 + 100);

    console.log("=== bool ===");

    console.log(true);

    console.log(false);

    console.log("");

@ boolean (비교)
        사칙연산: +, -, *, /, %(나머지)
        비교연산: >, <, <=, >=
        논리연산: &&(and) =>  A  &&  B (앞 뒤 다 true일 때만 최종 결과 true)
                    ||(or) =>  A  ||  B (앞 뒤 중에 하나만 true여도 최종 결과 true)

    console.log(100 == 101); (== 같냐 라는 뜻)

    console.log(100 > 101);

    console.log(10 < 20);

    console.log(20 < 30);

    console.log(10 < 20 < 30); (앞에 10<20 을 먼저 비교하면 true 이고 여기서 true < 30 이렇게 비교되는것이다 true 가 1을 뜻 하니 1<30 이라고 볼수있다. ->true)

    console.log(10 > 20 > 30); (앞에 10 >20 을 비교하면 false 이고 여기서  false > 30 이니 0 > 30과 같다 결과는 false이다

    console.log("");

    console.log(30 > 20  &&  20 > 10); (30>20 true (두개다 참이면: &&) 20> 10 true -> 둘다 참이므로 결과는 true이다)