티스토리 뷰
자바스크립트가 하는 일
1. 웹의 요소를 제어한다.
- HTML은 웹 문서의 내용을 구성하고,
- CSS는 웹 문서의 레이아웃이나 색상, 스타일 등을 지정했다.
- 자바스크립트를 추가하면 웹 문서의 각 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있다.
- 웹 사이트 UI 부분에 많이 활용한다.
2. 웹 애플리케이션을 만든다.
- 과거 웹은 단순히 정보를 나열하고 검색했다면, 최근 웹은 사용자와 실시간으로 정보를 주고 받으며 마치 애플리케이션처럼 동작한다.
- 이 작업을 가능하게 만드는 게 자바스크립트
3. 다양한 라이브러리를 사용할 수 있다.
- 과거에는 서버에서 했던 일을 이제는 클라이언트에서도 할수 있다.
- 클라이언트에서 처리해야 할 기능이 많아지면서 자바스크립트 기능은 더욱 강력해지고 있다.
- 리엑트, 앵귤러, 뷰 등을 활용
4. 서버 개발을 한다.
- Node.js
웹 브라우저 + 자바스크립트
- 기본 형태 : <script> 내용~~ </script>
- 위치는 body 끝 부분에 주로 삽입하는 것이 일반적.
- 인라인이 기본적으로 안 된다.
- 영어 대소문자를 구문함!
- 여러 웹 문서에서 같은 자바스크립트 소스를 사용하는 경우에 똑같은 소스를 반복해서 삽입해야 함.
- 외부 자바스크립트 파일 작성해서 연동하면 편함(링크로)
- 그 방법으로는 확장자를 *.js 로 하고, <script> </script> 태그 없이 내용만 작성함.
예시, 웹 브라우저가 스크립트를 해석하는 과정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자색 바꾸기</title>
<style>
body { text-align: center; }
</style>
</head>
<body>
<hl id="heading">자바스크립트</hl>
<p id="text">위 텍스트를 클릭해 보세요</p>
<script>
var heading = document.querySelector('#heading');
heading.onclick = function() {
heading.style.color = "red";
}
</script>
</body>
</html>① 웹 브라우저는 1행에 있는 <!D0CTYPE html>를 보고 이 문서가 웹 문서라는 것을 알게 됩니다.
<html>과 </html> 태그 사이 의 내용을 HTML 표준에 맞춰 읽 기 시작합니 다.
② 웹 문서에서 HTML 태그의 순서와 포함 관계를 확인합니다.
<head>와 </head> 태그, <body>와 </body> 태그 사이에 각각 어떤 태그가 있는지 확인하죠.
그리고 태그 간의 관계는어떻게 되어 있는지 등을 분석합니다.
③ 태그분석이 끝나면 7~14행의 스타일 정보를 분석합니다.
④ 20행에 있는 <script> 태그를 만나면
웹 브라우저 안에 포함된 자바스크립트 해석기에게 스크립트 소스를 넘깁니다.
자바스크립트 해석기는 <script>와 </scirpt> 사이의 소스를 해석합니다.
⑤ ②에서 분석한 HTML과 ③에서 분석한 CSS 정 보에 따라 웹 브라우저 화면에 표시합니다.
⑥ 이제 웹 브라우저에서 ‘자바스크립트’ 텍스트를 클릭하면 분석해 놓은 자바스크립트를 실행해서
그 결과를 화면에 표시합니다.
728x90
반응형
'[개발] - Front > Mega-JavaScript' 카테고리의 다른 글
| 6. 자바스크립트 기본 문법 (4) 반복문 (0) | 2023.05.20 |
|---|---|
| 5. 자바스크립트 기본 문법 (3) 조건문 (0) | 2023.05.20 |
| 4. 자바스크립트 기본 문법 (2) 연산자 (0) | 2023.05.19 |
| 3. 자바스크립트 기본 문법 (1) 변수, 자료형 (0) | 2023.05.19 |
| 2. 자바스크립트 기본 입출력, 스타일 가이드 (0) | 2023.05.17 |
Comments
Related Articles
more
