Javascript
[JS] Javascript란
로아다
2023. 6. 11. 18:34
728x90
반응형
Javascript
- 웹 점유율 100%의 프로그래밍 언어
- 웹 브라우저가 해석하여 실행시킬 수 있는 프로그램이 언어
- 최근에는 언어 자체의 성능이 좋아져서 다른 용도로도 많이 사용된다. (구글이 만든 크롬 내부의 자바스크립트 해석 성능(V8 엔진)이 너무 좋아서 node.js 등을 만들 수가 있었다)
- 기존에는 JavaScript가 주로 웹 브라우저에서 프론트엔드 개발에 사용되었다. Node.js는 이러한 기존의 상황을 변화시키고자 개발되었다.Node.js는 Chrome V8 JavaScript 엔진을 기반으로 만들어진 런타임 환경으로, 서버 측에서 JavaScript를 실행할 수 있게 해준다. 이를 통해 JavaScript 개발자들은 프론트엔드와 백엔드 개발 모두를 담당할 수 있게 되었다.
Javascript가 할 수 있는 일
- 웹 페이지 요소의 스타일을 변경한다.
- 웹 페이지 요소에 이벤트를 추가한다.
- 웹 페이지에 요소를 추가하거나 수정/삭제한다.
- html, css 모든것을 js로 제어할 수 있다. (치트키급 성능)
웹 페이지가 해석되는 순서
- 브라우저가 웹 코드를 통해 HTML 구조를 먼저 계층적으로 정리한다. 그 결과로 DOM(Document Object Model)이 생성된다.
- 화면에 그릴 순서를 정리한다.
- 각 요소의 CSS 스타일 결정
- 레이아웃을 설정하고 그린다.
- 위의 과정 도중 자바스크립트를 만나면 해당 과정을 일시 중단하고 자바스크립트를 먼저 실행한다. (이런규칙때문에 js는 맨아래쪽에 배치하거나, 로딩단계에서 필요한 경우 맨위쪽에 배치하는 편)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_Javascript.html</title>
</head>
<body>
<h3># Javascript</h3>
<ul>
<li>웹 점유율 100%의 프로그래밍 언어</li>
<li>웹 브라우저가 해석하여 실행시킬 수 있는 프로그램이 언어</li>
<li>최근에는 언어 자체의 성능이 좋아져서 다른 용도로도 많이 사용된다
(구글이 만든 크롬 내부의 자바스크립트 해석 성능(V8 엔진)이 너무 좋아서
node.js 등을 만들 수가 있었다)</li> <!-- @ 기존에는 JavaScript가 주로 웹 브라우저에서
프론트엔드 개발에 사용되었습니다. Node.js는 이러한 기존의 상황을 변화시키고자 개발되었습니다.
Node.js는 Chrome V8 JavaScript 엔진을 기반으로 만들어진 런타임 환경으로, 서버 측에서
JavaScript를 실행할 수 있게 해줍니다. 이를 통해 JavaScript 개발자들은 프론트엔드와
백엔드 개발 모두를 담당할 수 있게 되었습니다. -->
</ul>
<h3># Javascript가 할 수 있는 일</h3>
<ul>
<li>웹 페이지 요소의 스타일을 변경한다</li>
<li>웹 페이지 요소에 이벤트를 추가한다</li>
<li>웹 페이지에 요소를 추가하거나 수정/삭제한다</li>
<!-- @ html css 모든것을 js로 제어할 수 있다. (치트키급 성능)-->
</ul>
<h3># 웹 페이지가 해석되는 순서</h3>
<ol>
<li>브라우저가 웹 코드를 통해 HTML 구조를 먼저 계층적으로 정리한다,
그 결과로 DOM(Document Object Model (@용어암기필요))이 생성된다.</li>
<li>화면에 그릴 순서를 정리한다</li>
<li>각 요소의 CSS 스타일 결정</li>
<li>레이아웃을 설정하고 그린다</li>
<li>위의 과정 도중 자바스크립트를 만나면 해당 과정을 일시 중단하고
자바스크립트를 먼저 실행한다. <!-- @ 이런규칙때문에 js는 맨아래쪽에 배치하거나, 로딩단계에서
필요한 경우 맨위쪽에 배치하는 편-->
</li>
</ol>
<div id="div1" onclick="this.style.backgroundColor = 'navy';"
style="border: solid 3px black; width: 100px; height: 100px; padding: 3px">
div입니다
</div>
<!-- Javascript를 사용할 수 있는 영역 생성-->
<script>
// 자바스크립트 주석1
/* 자바스크립트 주석2 */
div1 = document.getElementById('div1');
// 자바스크립트로 요소의 css속성 변경하기
div1.style.backgroundColor = 'red';
div1.style.color = 'white';
</script>
</body>
</html>728x90
반응형