🚩 1일차 진도 : 『Do it! 자바스크립트 입문』 1~2장
02-1 개발 환경 준비하기 : 크롬, 비주얼 스튜디오 코드
크롬 브라우저, 비주얼 스튜디오 코드 설치 필요.
비주얼 스튜디오 코드의 확장 기능으로 한글팩 설치하기.
02-2 비주얼 스튜디오 코드와 인사하기
비주얼 스튜디오 코드의 확장 기능으로 라이브 서버 설치하기. 라이브 서버는 내가 수정한 자바스크립트 소스를 웹 브라우저를 통해 바로바로 체크할 수 있게 도와주는 기능이다.
02-3 자바스크립트 소스 작성하고 실행하기 : 자바스크립트 소스를 작성하는 2가지 방법
1) HTML 문서 안에 자바스크립트 소스 작성하기
HTML 문서 안에 자바스크립트 소스를 작성하려면
<body>
<script>
// 이 곳에 소스 코드를 작성하면 된다.
</script>
</body>2) 외부 스크립트 파일 연결하기
규모가 큰 프로젝트라면 동일한 자바스크립트를 여러 개의 HTML 문서에 작성해야 하는 경우가 있다. 이때 HTML 문서에 일일이 복사-붙여넣기 하지 않고 자바스크립트 파일을 따로 만들어서 HTML 문서에 연결만 해주면 간단하게 해결할 수 있다.
js 파일과 html 파일을 연결하려면 html 문서의 script 태그에 다음과 같이 입력하면 된다. 단, js 파일의 이름은 "change.js"이며 change.js는 js 폴더 안에 있다.
<script src="js/change.js"></script>02-4 나의 첫 번째 자바스크립트 프로그램
- HTML 문서에 자바스크립트 소스 코드를 넣어, 이름을 입력하면 브라우저가 나에게 인사하도록하는 프로그램을 만들었다.
- 아직 문법을 공부하는 단계가 아니라 어떤 뜻인지는 모르겠다. 그러나 이 실습을 통해 HTML 문서 안에 자바스크립트 소스를 넣으면 웹 브라우저에서 이런 프로그램이 동작하도록 할 수 있구나 정도를 느꼈다.
- 자바스크립트 프로그램이 실행되는 방식 : 웹 브라우저에는 HTML 분석기, CSS 분석기, 자바스크립트 해석기가 있다. 이 분석기와 해석기는 맨 처음부터 코드를 읽어가며 자기가 맡은 부분을 분석·해석한다.
02-5 자바스크립트의 입력과 출력
크롬 브라우저의 콘솔 도구
about:blank라고 치고 Ctrl + Shift + J를 누르면 콘솔창이 나타난다.
표시할 결괏값이 없을 때엔 undefined라고 표시됨
오류가 아니라 출력할 내용이 없다는 뜻이다.
사용자 입력값 받기 - prompt() 함수
prompt 함수를 이용하면 사용자가 값을 입력할 수 있는 창을 생성할 수 있다. 또한 괄호 안에 따옴표로 원하는 문자를 입력할 수도 있다. 따옴표로 감싼 문자를 2개 넣어서 프롬프트 창의 텍스트 필드 안에 기본 값을 표시할 수도 있다.
알림 창으로 출력하기 - alert() 함수
alert 함수의 괄호 안에 따옴표로 감싼 문자를 넣으면 원하는 문자가 알림창에 출력된다.
웹 브라우저 화면에 출력하기 - document.write() 함수
document.write()함수는 괄호 안의 내용을 크롬 브라우저 화면에 표시해준다.
var name = prompt("이름 : ");
document.write(name + "님, 어서오세요!");
콘솔에 출력하기 - console.log() 함수
console.log() 함수는 괄호 안의 내용을 콘솔 창에 출력한다.
크롬 브라우저 콘솔로 오류 찾아내기
소스 코드에 오타가 발생할 경우에 대비하여 콘솔에서 오류를 찾아낼 수 있다.
02-6 자바 스크립트 소스를 작성할 때 지켜야 할 규칙
1. 대소문자를 구별한다.
2. 읽기 쉽게 들여 쓴다.
비주얼 스튜디오 코드에서 Tab 한 번은 4글자만큼 들여 쓴다.
3. ;로 문장을 끝맺는다.
4. 주석을 이용하여 메모한다.
alert("안녕"); // 알림창을 통해 "안녕"이라고 말하는 코드한 줄 주석은 위와 같이 입력한다.
/*
알림 창을 통해 사용자가 나이를 입력하면
콘솔 창에서 해당 나이를 출력하는 코드
*/
var age = prompt("나이를 입력하세요.");
console.log(age);여러 줄 주석은 위와 같이 입력한다.
5. 식별자를 지정할 때에는 다음 규칙에 따른다.
- 식별자의 첫 글자는 반드시 영문자, 밑줄, 또는 달러 기호로 시작한다. 그 이후에는 영문자, 밑줄, 달러 기호, 숫자를 사용할 수 있다.
- 식별자는 단어 사이에 공백을 둘 수 없으며 단어와 단어 사이를 하이픈, 밑줄로 연결하여 사용할 수 있다. 하이픈이나 밑줄 없이 사용할 경우 첫 번째 단어는 소문자로, 두 번째 단어는 대문자로 시작한다.
6. 예약어는 식별자로 사용할 수 없다.
arguments, breake, case, continue, default, do, else, false, for, function, if, null, return, super, switch, this, true, try, typeof, var, void, while, with 등
도전! 응용 문제
문제 1.
소스코드 수정
결과는 없음 왜냐면 실습 파일에 welcome.js 파일이 없기 때문이다 설마 내가 만드는 건가..?
문제 2.
소스코드 수정
결과
문제 3. 오류 찾기
크롬 콘솔창을 통해 보니 prompt가 propt로 오타가 났다.
소스 코드 수정
결과
1일차 요약
- 오늘은 자바스크립트의 소스 코드를 작성하고 실행하는 방법에 대해 배웠다.
- 비주얼 스튜디오 코드로 소스 코드를 작성하고, 라이브 서버 기능을 이용해 작성한 코드를 크롬에서 실행시킬 수 있었다. 이때 html 문서 안에 자바스크립트 소스를 작성하는 방법에는 2가지가 있는데, 첫째는 html 문서의
<script>태그 안에 소스 코드를 작성하는 방법이다. 둘째는 외부 스크립트 파일을 html 문서에 연결하는 방법이다. 두번째 방법을 이용하면 프로젝트의 규모가 커질 때 소스 코드를 효율적으로 작성 및 관리할 수 있다. - 한편, 자바스크립트의 입출력과 관련된 함수는 prompt(), alert(), document.write(), console.log()가 있다. prompt()는 사용자에게 입력을 받을 수 있는 알림창을 띄운다. alert()는 사용자에게 어떤 내용을 출력하는 알림창을 띄운다. document.write()는 괄호 안에 따옴표로 감싼 문자를 넣어 원하는 문자를 웹 브라우저 화면에 출력할 수 있다. console.log()는 괄호 안에 따옴표로 감싼 문자를 넣어 원하는 문자를 콘솔창에 출력할 수 있다. 크롬의 콘솔창을 이용하면 직접 소스 코드를 입력해볼 수도, 오류가 생기면 어느 지점에서 오류가 생겼는지도 파악할 수도 있다.
- 자바스크립트 소스를 작성할 때 지켜야할 규칙 6가지가 있다. 첫째, 대소문자를 구별할 것. 둘째, 들여쓸 것. 셋째, ;로 문장을 끝맺을 것. 넷째, 주석을 이용해 메모할 것. 다섯째, 식별자를 지정할 때에는 지정된 규칙에 따를 것. 여섯째, 예약어는 식별자로 사용할 수 없다는 것.
참고문헌
고경희, 『Do it! 자바스크립트 입문』, 이지스퍼블리싱, 2021
2개의 댓글
2022.08.27 복습
✔ HTML 문서 안에 자바스크립트 소스를 작성하려면 <script> 태그를 이용할 것. 위치는 </body> 바로 위
✔ 외부 스크립트 파일을 연결하려면 html 문서에 다음과 같이 작성한다 : <script src="파일 위치/파일 이름"></script>
✔ prompt() : 사용자가 값을 입력할 수 있는 창을 생성
✔ alert() : 괄호 안에 따옴표로 감싼 문자를 넣으면 원하는 문자가 알림창에 출력됨
✔ document.write() : 괄호 안에 따옴표로 감싼 문자를 넣으면 원하는 문자가 브라우저 화면에 출력됨
✔ console.log() : 괄호 안에 따옴표로 감싼 문자를 넣으면 원하는 문자가 콘솔창에 출력됨
✔ 소스 코드에 오타가 발생한다면 콘솔창을 이용해 오류를 발견할 수 있음
✔ 자바스크립트 소스를 작성하는 규칙 : 대소문자 구별, 들여쓰기, ;로 끝맺음, 주석, 식별자 규칙, 예약어는 식별자로 사용 불가
2022.08.19. 복습