[개발] - Front/Mega-JavaScript

1. 자바스크립트 도입

완벽한 장면 2023. 5. 17. 21:56

자바스크립트가 하는 일

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
반응형