📖자바스크립트
연결방법
<script src="./js/javascript.js"></script>📌브라우저 렌더링 과정
브라우저 레더링 과정이란 도메인 주소(웹 주소)를 브라우저에 요청할 때 해당 html과 css, js를 불러와서 화면에 표현하는 과정이다.
📍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. 페인팅
: 레이아웃이 완성되면 브라우저는 화면에 보여질 요소들을 페인팅하여 실제 화면에 표시한다.
이 과정에서 각 요소의 색상, 텍스트, 이미지 등이 화면애 그려지며, 사용자가 볼 수 있는 최종 결과물이 나온다.
📌자바스크립트 코드 입력 시 주의사항(=코딩 컨벤션/코딩 스타일)
✔️1. 자바스크립트는 대/소문자를 구분하여 작성해야한다.
- document.write('문자') => 올바른 문법
- Document.write('문자') => 틀린문법. 오류남✔️2. 코드를 한 줄 작성한 후에는 ;으로 마무리한다.
만약 세미콜론을 쓰지 않고 한 줄에 두 문장을 쓸 경우 오류가 발생한다.
* 한 줄에 한 문장만 쓰는 것이 가독성이 좋다.
- document.write(); => 올바른 문법
- document.write() document.write() => 틀린문법. 오류남✔️3. 문자형 데이터를 작성할 때에는 ""(큰따옴표)와 ''(작은따옴표)로 문자를 감싸야하고 따옴표의 겹침 오류를 주의해야 한다.
- document.write('hello "헬로" world'); => 올바른 문법
- document.write("hello '헬로' world"); => 올바른 문법, 큰따옴표안에 작은 따옴표
- document.write("hello "헬로" world"); => 틀린 문법, 큰따옴표안에 큰 따옴표
- document.write('hello '헬로' world''); => 틀린 문법, 큰따옴표안에 큰 따옴표
- document.write('hello \'헬로'\ world'); => 올바른 문법 ''안에 ''표가 또 들어가야 할때
=> : 역 슬래쉬를 기호 앞에 붙여주면 문자의 시작과 끝을 구분하는 따옴표가 아니라
그 다음기호를 단순한 문자로 처리한다. 즉, \다음에 등장하는 기호를 단순 문자처리하는 기능
- document.write('hello "헬로' world"); => 틀린 문법. 따옴표가 교차될 수 없다.✔️4. 코드를 작성할 때에는 {}나 []나 ()의 짝이 맞아야한다.
- document.write(}; => 틀린 문법
- document.write(); => 올바른 문법📌자바스크립트의 주석기호
☝️ // : 한 줄 주석. 한 줄짜리 짧은 주석을 입력할 때 사용한다. 다음줄로 넘어가는 문장은 오류남
✌️ /* */ : 여러 줄 주석. 두 줄 이상의 긴 주석을 입력할 때 사용한다.
📌 자바스크립트의 식과 문
자바스크립트에서 '식'은 '표현식'이라고도 하는데, 어떤 값을 만들어 낼 수 있다면 모두 식이 될 수 있고, 식은 '변수'라는 것에 저장된다.
'문'은 '명령'이라고 할수 있다. 문의 끝에는 ;을 붙여 구분한다.
📌브라우저의 콘솔창 활용하기
브라우저의 개발자도구 안에 있는콘솔창은 자바스크립트가 동작이나 계산식을 잘 수행하고 있는지 실험해보는 실험창이다.
콘솔창에 실험해보도록 명령을 내리려면 console.log()라는 문장을 사용한다.
[기본형]
console.log(실험할 값)📌자바스크립트에서 많이 쓰는 문장
브라우저 화면에 결과를 나타내고 싶을 때 document.write()라는 문장을 사용한다.
document는 html문서를 뜻하고, .write()'문자를 써라'라는 문장이다.
변수
변수는 변하는 값을 저장할 수 있는 메모리 공간이고 데이터가 오직 한 개만 저장된다. 만약 새로운 데이터가 들어오면 기존에 있던 데이터는 사라지고 마지막에 들어온 데이터만 남는다.
데이터의 종류 - 문자형(string), 숫자형(Number),논리형(Boolean)데이터, 빈(Null)데이터, underfined데이터
📌변수선언
변수를 사용할 준비를 하는 과정. 변수를 선언할 때에는 var, let, const라는 키워드를 변수명 앞에 붙여준다.
변수명에는 영문과 숫자, 그리고 일분 특수문자(_, $)만 포함 할 수 있다.
변수명
ex) var userName '카멜표기법' 첫글자를 대문자로
var user_name '스네이크 표기법' 단어와 단어 사이에 언더바변수명은 의미에 맡게 지어주고 이렇게 이름을 규칙에 따라 짓는 것을 '코딩 컨벤션'이라고 한다.
[기본형]
1. var 변수명 = 값;
:변수에 초기 값을 넣어 초기화 한 상태
2. var 변수명;
: 변수를 만들어 둔 상태