자바스크립트는 html 내부에 사용할 경우, script를 입력해 사용하며 head/body 모두 사용가능하다. 보통은 body에 넣어서 사용한다.
*마지막으로 자바스크립트를 읽게 만드는 속성이다.
자바스크립트는 웹 문서에서 이미지나 텍스트 등의 요소를 제어하는 경우가 많으므로 되도록이면 이미지나 텍스트 등을 다 표시한 후에 실행하는 것이 좋다 그래서 /body태그 직전에 자바스크립트를 삽입한다.
주석만들기
한줄짜리 주석을 사용하고싶을 때 '//'기호를 사용한다.
여러줄의 주석을 사용하고싶을 경우에는 css와 마찬가지로 /**/를 사용한다.
외부 스트립트 파일로 연결해서 자바스크립트 작성하기
css파일과 마찬가지로 자바스크립트 소스도 따로 파일로 저장한 후 웹 문서에 연결해서 사용할 수 있 있다. 이렇게 하면 웹문서 안에 소스가 한결 깔끔해진다.
외부 자바스크립트 파일은 script태그 없이 자바스크립트 소스만 작성하고 확장자는 .js파일로 저장한다. 그리고 html문서에서 script 태그의 src속성을 이용해서 자바스크립트 파일을 연결하면 된다.
[기본형]
<script src="외부 스크립트 파일 경로"></script>
-
head안에 연결하기
헤드에 자바스크립트를 연결할 경우에 마지막으로 자바스크립트를 읽게 만드는 defer속성을
입력 후에 아래에 내부 자바스크립트를 연결시킨다. -
body안에 연결하기
보통은 자바스크립트를 사용할 때 바디의 가장 아랫줄이나 바디의 다음줄에 붙여서 사용한다.
바디 맨 아래에 자바스크립트를 연결할 경우에는 마지막으로 읽으므로 굳이 defer을 사용하지않아도 된다.
웹문서 안에 script태그로 자바스크립트 작성하기
위의 이미지와 같이 css 스타일시트와 마찬가지로 html문서 안에 script를 입력하여 사용할 수 있고, src를 통해 자바스크립트 경로를 연결할 수있다.
화면에 어떤 문구를 추가하고 싶을 때 document.write를 사용한다.
✔ 자바스크립트 코드 입력시 주의사항(=코딩 컨벤션*약속된규칙을 의미)
1.자바스크립트는 대/소문자를 구분하여 작성해야 한다.
-document.write()->0 올바른 문법
-Document.Write()->x 틀린 문법.오류남
2.코드를 한 줄 작성한 후에는 ;으로 마무리한다. 세미클론을 쓰지 않고 한 줄에 두개의 코드를 작성하면 오류가 발생한다.
*한 줄에 한 문장만 쓰는 것이 가독성이 좋음.
-document.write();->0
-document.write()document.write()->x 오류남.
3.문자형 데이터를 작성할 때에는 ""(큰따옴표)와 ''(작은 따옴표)의 겹침 오류를 조심해야한다.
-document.write('hello '김땡땡' world') 셋트인 따옴표를 구분할 수있도록 적어준다.
-document.write('hello "김땡땡" world') ->0 올바른 문법
-document.write("hello '김땡땡' world") ->0 올바른 문법
-document.write("hello \'김땡땡'\ world") ->0 올바른 문법 역슬래쉬:달러표시
=> 엔터 위에 있는 역슬래쉬(￦) \를 기호 앞에 붙여주면 문자의 시작과 끝을 구분하는 구분자가 아니라 다음에 오는 기호를 단순한 문자로 처리한다.
따옴표는 문자의 시작과 끝을 나타낸다. 따라서 큰 따옴표로 시작했을 경우에는 문자의 끝에 큰 따옴표가 있어야한다.
4.코드를 작성할때에는 {},[],()의 괄호의 짝이 맞아야 한다.
-document.write{} =>0 올바른 문법
-document.write[} =>X 틀린 문법
브라우저 렌더링 과정
브라우저 렌더링 과정이라는 것은 도메인 주소(http://www.~~~.com)를 브라우저에 요청할 때
해당 html과 css,javascript를 불러와서 화면에 표현하는 과정을 뜻한다.
1.HTML파일을 파싱
: 웹 브라우저에서 HTML파일을 읽어오고 구조를 해석하는 과정을 말한다.
브라우저가 HTML문서를 파싱하면 DOM(document object model)트리를 만든다.
DOM은 웹 페이지의 구조를 표현하는 트리 구조로, 각 요소는 노드로 표현됨.
2.CSS파일을 파싱
:HTML파싱 후에 CSS파일을 파싱하여 CSSOM(CSS object model)트리
CSSOM은 스타일 규칙을 표현하는 트리구조로 각 스타일 규칙은 노드로 표현됨.
3.DOM과 CSSOM을 결합
:브라우저는 DOM과 CSSOM을 결합하여 Render Tree(렌더트리)를 생성한다.
렌더트리는 화면에 표시되는 요소들만 구성된 트리구조로, 각 요소는 화면에 어떻게
배치될지 결정하는 정보를 가지고 있다.
4.레이아웃
:렌더 트리를 기반으로 브라우저는 각 요소의 크기와 위치를 계산하여 레이아웃을 수행한다.
이 과정에서 각 요소의 크기, 위치, 여백, 색상 등이 계산되고 레이아웃은 화면에 보여지는
모습을 그려주는 과정으로 굉장히 중요한 과정이다.
5.페인팅
:레이아웃이 완성되면 브라우저는 화면에 요소들을 페인팅하여 실제 화면에 표시함.
이 과정에서 각 요소의 색상, 텍스트, 이미지 등이 화면에 그려지며 사용자가 볼 수 있는
최종 결과물이 나온다.
