1장 자바 스크립트 시작하기
자바스크립트는 HTML, CSS와 더불어 웹을 구성하는 요소중에 하나다. 1장에서는 자바스크립트를 실습하기 위한 비주얼 스튜디오를 설치하고 사용법을 익힌다. 웹 브라우저로는 크롬을 사용한다. 웹 페이지에 데이터를 출력하는 네 가지 방법에 대해서 배우고, 프로그램에 설명문을 추가하는 주석문에 대해 학습한다.
1.1 자바 스크립트와 개발 도구
자바 스크립트는 클라이언트 단에서 웹 페이지를 동적으로 만드는데 사용된다. 자동차의 엔진이라고 할 수 있다.
웹 페이지에서 일어나는 모든 동작을 제어하는데 사용된다.
1.1.1 웹과 자바스크립트
2023년 현재 자바스크립트는 웹 브라우저에서 사용할 수 있는 유일한 컴퓨터 언어이다. 동적인 웹 페이지를 만들기 위해서는 자바스크립트를 사용해야 한다.
세계에서 3번째로 인기있는 프로그래밍 언어이다. 자바스크립트로 작성한 프로그램을 스크립트(Script)라고 부른다. 스크립트는 웹 페이지의 HTML 문서 안에 들어가있다. 브라우저가 웹 페이지를 불러올 때 자동으로 실행된다.
자바스크립트로 작성된 코드는 웹 페이지가 실행될 때 브라우저에 탑재된 자바스크립트 엔진에서 바로 실행된다. Node.js를 활용하면 브라우저 뿐 아니라 웹 서버 쪽에서도 자바 스크립트를 사용할수 있다.
예전에는 클라이언트에서 웹 페이지를 동적으로 만드는 것이 주요 기능이였지만, 지금은 서버 컴퓨터에서도 JSP나 PHP같은 웹 서버 프로그래밍 언어 대신 자바 스크립트를 그대로 사용할 수 있게 되었다. Node.js를 사용하면 자바스크립트 하나로 클라이언트나 서버에서 필요한 모든 기능을 구현할 수 있다.
1.1.1 개발 도구
프론트엔드나 백엔드 웹 개발자들은 텍스트 에디터를 사용하는 경우가 많다. 이 책에서는 비주얼 스튜디오 코드를 사용한다. 자바스크립트 파일을 실행하기 위한 브라우저로는 크롬을 기본으로 사용한다. 엣지나 파이어폭스를 사용해도 무방하다.
1.2 비주얼 스튜디오 코드 설치
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
이 사이트에서 다운 받아서 설치하면 된다. 다음 버튼을 누르면 그냥 설치가 진행된다.
1.3 자바스크립트 코드 작성과 실행
비주얼 스튜디오 메인 화면에서 파일 > 새파일을 선택한 다음 예제 1-1의 내용을 입력하고 적당한 폴더에 HTML 파일(exam: hello.html)로 저장한다.
| 예제 1-1 '안녕하세요.' 브라우저에 출력하기 | hello.html | 코드 원문 |
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<p id="show"></p>
<!-- 자바 스크립트 코드 시작 -->
<script>
document.getElementById("show").innerHTML = "안녕하세요.";
</script>
<!-- 자바 스크립트 코드 종료 -->
</body>
</html>| 예제 1-1 '안녕하세요.' 브라우저에 출력하기 | hello.html | 코드 분석 |
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<p id="show"></p>
<script>
document.getElementById("show").innerHTML = "안녕하세요.";
</script>
</body>
</html>
윈도우 탐색기를 열어서 파일 이를을 더블 클릭하거나 우측 마우스 버튼을 누른 다음 연결 프로그램 > Chrome을 선택해서 크롬 브라우저로 실행하면 브라우저에 '안녕하세요'가 출력된다.
자바 스크립트 코드는 <script>와 </script> 사이에 들어간다.
1.4 데이터 출력
자바 스크립트를 통해서 브라우저에 데이터를 출력하는 방법은 크게 네 가지로 나누어진다.
1. innerHTML 이용
2. document.write() 이용
3. alert() 이용
4. console.log() 이용
1.4.1 inner HTML로 출력하기
다음은 innerHTML을 이용해서 웹 페이지 안에 있는 HTML 요소 <p>에 데이터를 출력하는 예이다.
| 예제 1-2. innerHTML로 출력하기 | inner_html.html | 코드 원문 |
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<p id="show"></p>
<script>
document.getElementById("show").innerHTML = 10 + 20;
</script>
</body>
</html>| 예제 1-2. innerHTML로 출력하기 | inner_html.html | 코드 분석 |
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<p id="show"></p>
<!-- 문단를 만들고 id명을 show로 한다. -->
<script>
document.getElementById("show").innerHTML = 10 + 20;
// document.getElementById 메서드를 사용해서 "show"가 가리키는 요소를 불려온다.
// innerHTML을 사용해서 10+20의 결과를 문단에 추가한다.
</script>
</body>
</html>
1.4.2 document.write()로 출력하기
document.write()는 변수나 데이터를 브라우저 화면에 출력하는 가장 간단한 방법이다. document.write는 실제 프로그램에서는 잘 사용되지 않다. 그러나 브라우저 화면에 데이터를 간단하게 출력할 수 있어서 실습에서 데이터를 출력하는데 많이 사용한다.
| 예제 1-3. document_write()로 출력하기 | docuemnt_write.html | 코드 원문 |
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<body>
<script>
document.write(10+20);
</script>
</body>
</html>
| 예제 1-3. document_write()로 출력하기 | docuemnt_write.html | 코드 분석 |
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<body>
<!-- 자바스크립트 코드 시작 -->
<script>
document.write(10+20);
// document.write 함수로 웹 페이지에 출력
</script>
<!-- 자바스크립트 코드 종료 -->
</body>
</html>
1.4.3 alert()로 알림창에 출력하기
alert()는 다음 예에서와 같이 브라우저 알림창에 데이터를 출력하는데 사용된다.
| 예제 1-4. alert()로 알림창에 출력하기 | alert.html | 코드 원문 |
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<script>
alert(10+20);
</script>
</body>
</html>| 예제 1-4. alert()로 알림창에 출력하기 | alert.html | 코드 분석 |
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<!-- 자바 스크립트 코드 시작 -->
<script>
alert(10+20);
// alert() 함수로 브라우저 알림창에 데이터 출력
</script>
<!-- 자바 스크립트 코드 종료 -->
</body>
</html>
1.4.4 console.log()로 콘솔에 출력하기
console.log()는 브라우저 콘솔에 데이터를 출력하는데 사용된다.
| 예제 1-5. console.log()로 브라우저 콘솔에 데이터 출력하기 | console_log.html | 코드 원문 |
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<script>
console.log(10+20);
</script>
</body>
</html>| 예제 1-5. console.log()로 브라우저 콘솔에 데이터 출력하기 | console_log.html | 코드 분석 |
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<!-- 자바스크립트 코드 시작 -->
<script>
console.log(10+20);
// console.log() 메서드로 데이터 값 콘솔에 출력
</script>
<!-- 자바스크립트 코드 종료 -->
</body>
</html>
1.5 주석문
자바스크립트 프로그램을 작성하다 보면 작성자, 작성일, 프로그램 설명 등의 주석(comment)을 달 필요가 있다. 자바 스크립트에서 주석을 사용하는 방법에는 두가지가 있다.
1. /* */ : 여러 줄의 주석을 다는 데 사용
2. // : 한줄의 주석을 다는 데 사용
다음은 예제 1-5에 주석문이 사용된 예이다. 이 주석문은 실행 결과에는 전혀 영향을 미치지 않는다.
| 예제 1-6. 자바스크립트 주석문 | comment.html | 코드 원문 |
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<script>
/* console.log()는 브라우저 콘솔에
데이터 값을 출력합니다. */
console.log(10 + 20); // 30을 콘솔에 출력
// console.log(100); // 100은 출력되지 않음
</script>
</body>
</html>| 예제 1-6. 자바스크립트 주석문 | comment.html | 코드 분석 |
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<!-- 자바 스크립트 코드 시작 -->
<script>
/* console.log()는 브라우저 콘솔에
데이터 값을 출력합니다. 여러 줄을 주석 처리할 때 사용 */
console.log(10 + 20); // 30을 콘솔에 출력
// console.log(100); // 100은 출력되지 않음, 주석처리 했기 때문에
</script>
<!-- 자바 스크립트 코드 종료 -->
</body>
</html>주석문은 프로그램 실행에 전혀 영향을 미치지 않기 때문에 위 예제 1-6의 실행 결과는 앞 예제 1-5과 완전히 동일하다.
1. /*와 */은 여러줄의 설명글을 감싸는데 사용된다.
2. 한 줄의 설명글을 달기 위해 //가 사용된다.
3. 자바스크립트 문장 앞에 설명글을 사용하면 해당 문장은 사용되지 않는다.
이와 같이 설명글은 특정 문장의 실행을 임시로 멈추고자 할 때도 사용된다.
'프로그래밍 > 예제로 배우는 자바스크립트 요약 및 분석(IT 전공 서적)' 카테고리의 다른 글
| 예제로 배우는 자바스크립트 요약 및 코드 분석 3장-3.3.2~3.5 (0) | 2023.10.08 |
|---|---|
| 예제로 배우는 자바스크립트 요약 및 코드 분석 3장-3.1 ~ 3.3.1 (0) | 2023.10.07 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 2장 - 3,4 (0) | 2023.10.07 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 2장-2 (0) | 2023.10.07 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 2장-1 (0) | 2023.10.06 |