> [!date] published: 2021-05-23 > [!Info] > Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편을 읽고, 공부하고, 정리한 글 > [책 정보](http://www.easyspub.co.kr/20_Menu/BookView/A001/295/PUB) ## 💛 개발 환경 준비하기 ➡️ 크롬 브라우저 [(다운로드 링크)](https://www.google.com/chrome/?brand=BNSD&gclid=CjwKCAjw-qeFBhAsEiwA2G7Nl8lHXbwPgiu_fBG7RXnS7y8vSEeElJF7EIU8mvu5t094K1riqRvegBoCWJUQAvD_BwE&gclsrc=aw.ds) ➡️ 비주얼 스튜디오 코드 [(다운로드 링크)](https://code.visualstudio.com/) ## 💛 비주얼 스튜디오 코드와 인사하기 _자료실의 실습 파일 이용_ ### ✨ 라이브 서버 확장 기능 사용하기 라이브 서버 확장 기능을 사용하면 작성한 소스를 웹 브라우저에서 바로 확인할 수 있다. ## 💛 자바 스크립트 소스 작성하고 실행하기 ### ✨ HTML 문서 안에 자바스크립트 소스 작성하기 HTML 문서 내부에 자바스크립트를 작성하는 방법은 `<script>` 태그 안에 자바스크립트 소스를 작성하는 것이다. **규칙** - `<script>` 태그는 HTML 문서 어디에도 위치할 수 있다. - `<script>` 한개의 문서에서 여러개 사용해도 된다. - `<script>` 태그가 삽입된 위치에서 소스가 실행된다. `<script>` 태그 위치는 제한이 없지만 삽입된 위치에서 소스가 실행되기 때문에 위치를 신경써줘야 한다. 하지만 매번 위치를 신경써주는 것은 번거롭기 때문에 보통 HTML 문서의 끝 부분인 `</body>` 태그 앞 부분에 `<script>` 태그를 삽입한다. ### ✨ 외부 스크립트 파일 연결하기 자바스크립트 소스를 따로 작성하여 HTML 문서에 연결하는 것을 '외부 스크립트 파일을 연결한다.' 라고 한다. HTML 문서에 자바스크립트 소스를 작성하면 한 눈에 모든 내용을 확인할 수 있다는 장점이 있지만 규모가 큰 프로젝트에서 같은 동작을 하는 자바스크립트 코드를 여러개의 HTML 문서에서 사용할 때와 같은 경우 처럼 많은 경우에서는 자바스크립트 소스를 따로 작성하는 편이 더 편리하므로 보통은 따로 작성하는 방법을 많이 사용한다. `<script src="js/change.js"></script>` ## 💛 나의 첫 번째 자바스크립트 프로그램 _자료실의 실습 파일 이용_ ### ✨ 크롬 브라우저에서 프로그램 소스 확인하기 크롬 브라우저 화면에서 필요한 요소에 마우스 포인터를 올려두고 마우스 오른쪽 클릭 -> [검사] 를 클릭하면 개발자 도구 화면의 Elements 탭이 출력된다. 그곳에서 자신이 작성한 소스를 확인할 수 있다. ## 💛 자바스크립트의 입력과 출력 ### ✨ 크롬 브라우저의 콘솔 도구와 함께 공부하기 1. 콘솔 사용하기 2. 주소창에 "about:blank"입력 -> cmd + option + j ![[347fa9f6-13ef-4151-bb38-d3fe858f239e.png]] 3. `undefined`라고 출력되는 것은 콘솔 창에서 결과를 표시할 때에 특별히 표시할 값이 없을 경우이다. ![[c4f598aa-17dc-4452-ac4d-6dfb1555ff50.png]] ### ✨ 사용자 입력값 받기 - prompt() 함수 사용자에게 값을 입력받을 때 가장 쉽게 사용할 수 있는 함수가 `prompt()` 함수이다. `prompt()` 함수를 실행하면 입력할 수 있는 팝업이 화면에 출력하고, 그 창을 통해서 입력한 내용을 콘솔에 출력한다. ![[0306ea7b-ea42-4bb2-9211-592c3b2683fb.png]] ![[c4d30022-c186-4bad-8665-348b318041e6.png]] ( ) 안에 원하는 문장을 입력하면 프롬프트 창에 그 문장을 표시할 수 있다. ![[561e0f30-c12a-456f-b97d-0abc82a8b23b.png]] `prompt("안내 문장", "기본 값")` 이렇게 코드를 작성하면 프롬프트 창의 텍스트 필드 안에 기본 값을 표시할 수도 있다. ![[1154e891-ba6f-4838-adaf-6800aedf265e.png]] ### ✨ 알림 창으로 출력하기 - alert() 함수 웹 브라우저에서 간단한 알림을 표시하려고 할 때 `alert()` 함수를 사용한다. ![[c7cd3288-928e-439b-859f-f0a85cd108f5.png]] ### ✨ 웹 브라우저 화면에 출력하기 - document.write() 함수 `document.write()` 함수는 괄호 안의 내용을 브라우저 화면에 표시하는 역할을 한다. **예제)** 나이를 입력받아 웹 브라우저에 출력하는 소스를 작성하시오. ```javascript var age = prompt("나이를 입력하세요"); document.write(age); ``` ![[0285377b-3cb2-4291-b6e5-845fccb94ce0.png]] ![[f4914ec1-22f8-4ecd-b74a-725864ed6fd7.png]] ### ✨ 콘솔에 출력하기 - console.log() 함수 `console.log()` 함수를 사용하면 document.write() 함수와는 달리 괄호 안의 내용이 콘솔 창에 출력된다. **예제)** 아까 입력받은 나이를 콘솔에 출력하는 소스를 작성하시오. ```javascript console.log(age); ``` ![[3ff8a3d0-fa0c-4449-b383-6a5e750ef014.png]] ### ✨ 크롬 브라우저 콘솔로 오류 찾아내기 콘솔 창에는 오류 내용이 표시되기 때문에 자바스크립트 소스의 오류를 발견하는데에 도움이 된다. ## 💛 자바스크립트 소스를 작성할 때 지켜야 할 규칙 1. **대소문자를 구별하여 소스를 다르게 작성한다.** 2. **들여쓰는 습관을 들인다.** 자바스크립트 인터프리터는 들여쓰기를 신경쓰지 않지만 가독성을 위해서는 들여쓰는 것이 좋다. 3. **세미콜론(;)으로 문장을 구분한다.** 세미콜론의 존재 여부가 소스의 실행에는 영향을 주지 않지만 실수에 대한 오류를 예방하기 위해서는 세미콜론으로 문장의 끝을 표시해주는 것이 좋다. 4. **주석 방법** - 한줄 주석 `//` - 여러 줄 주석 `/* */` 5. **식별자는 정해진 규칙을 지켜 작성한다.** 식별자란 변수, 함수, 속성 등을 구별하기 위해 이름 붙이는 특정 단어를 의미한다. 식별자의 첫번째 글자는 문자, 언더바(\_), 달러기호($)로 시작해야 한다. 6. **예약어는 식별자로 사용할 수 없다.** 예약어란 자바스크립트에 먼저 등록된 요소이다. **예약어 예)** - arguments - breake - case - continue - default - if - else - true - ... 더 많은 예약어는 [여기](https://www.w3schools.com/js/js_reserved.asp)에서 확인할 수 있다.