15-1 자바스크립트로 무엇을 할까
15-2 웹 브라우저가 자바스크립트를 만났을 때
15-3 자바스크립트 용어와 기본 입출력 방법
15-4 자바스크립트 스타일 가이드
15-1 자바스크립트로 무엇을 할까
- 웹의 요소를 제어함
- 웹 애플리케이션을 만듦
- 다양한 라이브러리를 사용할 수 있음
- 서버 개발을 할 수 있음
15-2 웹 브라우저가 자바스크립트를 만났을 때
웹 문서 안에 <script> 태그로 자바스크립트 작성하기
<script>태그 안에 직접 자바스크립트 코드를 작성함- 웹 문서 어디든 삽입 가능하며, 해당 위치에서 바로 실행됨
- 일반적으로 \ 태그 끝나기 직전에 삽입하는 것이 좋음
외부 스크립트 파일로 연결해서 자바스크랍트 작성하기
- 자바스크립트 코드를 .js 파일로 따로 저장하고 HTML에 연결
- HTML에서는
<script src="파일명.js"></script>로 연결 - 코드가 깔끔해지고, 여러 문서에서 재사용 가능
- 유지보수도 용이 (JS 파일만 수정하면 연결된 모든 HTML에 반영됨)
- 대소문자 구분함: sum, Sum, SUM 모두 다르게 인식
- 외부 JS 파일에는
<script>태그를 쓰지 않음
웰 브라우저에서 스크립트를 해석하는 과정
- HTML → CSS → JS 순서로 분석
<script>태그를 만나면 자바스크립트 해석기가 코드를 실행 준비- 클릭 같은 이벤트 발생 시, JS 코드 실행 후 결과를 화면에 반영
15-3 자바스크립트 용어와 기본 입출력 방법
식과 문
- 식(Expression): 값을 만들어내는 코드
- 예) 5, "hello", inch * 2.54, prompt() 등
- 문(Statement): 명령을 수행하는 코드
- 예) if, for, alert(), document.write() 등
간단한 입출력 방법
alert("메시지")
- 알림창을 띄워 사용자에게 간단한 메시지를 보여줌
confirm("메시지")
- 확인/취소 버튼이 있는 창을 띄워 사용자의 선택을 받을 수 있음
- 반환값: true (확인), false (취소)
prompt("메시지", "기본값")
- 입력창을 띄워 사용자로부터 문자열을 입력받음
- 반환값: 사용자가 입력한 문자열
document.write("내용")
- 웹 페이지에 직접 출력
- HTML 태그도 사용 가능
console.log("내용")
- 브라우저 개발자 도구 콘솔 창에 출력
- 디버깅용으로 자주 사용
15-4 자바스크립트 스타일 가이드
코딩 규칙이 왜 필요할까요?
- 자바스크립트는 데이터 유형이 유연해서 실수가 생기기 쉬움
- 여러 사람이 함께 코드를 작성할 때 일관된 스타일이 필요함
- 코드를 공유하거나 유지·보수할 때 효율적
- 스타일 가이드를 따르면 가독성 향상, 오류 감소, 디버깅 편리
자바스크립트 스타일 가이드
- 코딩 규칙 = 스타일 가이드, 코딩 컨벤션, 표준 스타일 등
- 구글, 에어비앤비 등에서 배포한 스타일 가이드를 참고함
- 팀에서 자체적으로 규칙을 정해 사용할 수도 있음
자바스크립트 기본 스타일 가이드
1. 들여쓰기
- 코드 구조를 쉽게 파악할 수 있도록 들여쓰기 필수
- 보통 공백(space)으로 들여쓰기 (탭이 아닌)
2. 세미콜론
- 문장 끝에 세미콜론(;)을 붙이는 것이 권장됨
- 안 붙여도 실행되지만 오류 예방과 가독성에 좋음
3. 공백
- 연산자, 값 등 사이에 공백을 넣어 가독성 확보
4. 주석
- 한 줄 주석:
// - 여러 줄 주석:
/* ... */ - 코드를 이해하기 쉽도록 설명 추가
5. 식별자 작성 규칙
- 변수나 함수 이름은 영문자, _ , $로 시작해야 함
- 두 단어 이상일 때는 camelCase(예:
userName) 사용 권장 - 공백X, 숫자로 시작X
6. 예약어 사용 금지
var,let,if등 자바스크립트에 정해진 키워드는 변수 이름으로 사용 불가
