JavaScript - 특징, 콘솔 출력

HTML과 CSS/JavaScript

JavaScript - 특징, 콘솔 출력

큐트아리 2023. 10. 27. 11:38

1. 자바 스크립트 (JavaScript)

자바스크립트는 1995년에 브렌던 아이크(Brendan Eich)에 의해 개발된 웹 개발 언어로, 웹 페이지를 동적으로 만들고 상호작용을 가능하게 합니다. 이 언어는 주로 웹 브라우저에서 클라이언트 측 스크립트 언어로 사용되며, 웹 페이지를 다루고 웹 애플리케이션을 만드는 데 주로 활용됩니다. 또한, 서버 측 및 모바일 애플리케이션 개발에도 사용되며, 웹 기술과 애플리케이션 개발에서 중요한 역할을 합니다.

2. 자바스크립트 특징

- 객체 기반의 스크립트 언어
- 대소문자를 구별
- 문장 끝에 ; 사용(과거에는 필수, 현재는 생략 가능)
- html 문서에 어느 곳에던 사용 가능 (head, body 다 가능)
- <script></script>를 사용하여 작성
- 외부 자바스크립트도 사용 가능 <script src='파일명'></script>

3. 자바 스크립트의 출력

Web API Console을 통해 브라우저 console 창에 출력

< 예시 코드 - HTML >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트 출력</title>
    <script src="./script/script.js"></script>
    <script>
        console.log('안녕하세요! 자바스트립트') //출력하는 역할, 브라우저의 개발자 모드의 console창에 띄움//
    </script>
</head>
<body>
    <h2>자바스크립트 출력</h2>
</body>
</html>

< 예시 코드 - JavaScript >

console.log('Hello JavaScript!')

< 결과 >

4. 자바 스크립트 실행 순서

파이썬과 똑같이 인터프리터 방식으로 실행됩니다. 즉, 위에서 아래로 실행합니다. 하지만 어떠한 위치나 기능을 사용하냐에 따라 순서를 정할 수 있습니다. 주로 외부의 자바스크립트를 사용할때 다운로드에 시간이 걸리는 경우에 사용합니다.

4.1. JavaScript 파일 및 문장을 <head>에 넣었을 경우
- 문서 시작 -> <head>에 있는 script 다운로드 or 실행 -> <body> -> 끝
(느릴시에 html 실행되지 않은 상태에서 빈 화면이 보일 수 있음)

4.2. JavaScript 파일 및 문장을 <body> 끝에 넣었을 경우
- 문서 시작 -> <body> -> script 다운로드 or 실행 -> 끝
(완벽하지 않은 HTML 문서가 먼저 보여 잘못된 ui가 실행될 수 있음)

4.3. <script async>를 사용할 경우(위치는 상관X)
문서 시작 -> script 다운로드 or 실행 -> <body> -> 끝
(head에 넣는것과는 달리 script파일이 여러개 있을 경우에 먼저 다운된 script 먼저 실행, 연관성이 있는 script파일일 경우 하나의 스크립트만 실행하면 문제가 발생할 수 있음)

4.4. <script defer>를 사용할 경우(위치는 상관X) (자주쓰임)
문서 시작 -> script 다운로드 or 실행 -> <body> -> 끝
(HTML시작됨과 동시에 script 파일을 다운로드/실행을 진행, script 실행은 페이지 구성이 모두 끝날 때까지 지연, script 순서에 따라 실행)
head body async