Preface
이번 장에선 자바스크립트란 무엇인지, 이를 통해 어떤 작업을 할 수 있는지 등을 알아봤다.
입출력 방법이나 함수 등에 관한 내용은 뒤에서 더욱 자세히 배울 것 같고,
스타일 가이드는 다른 언어들과 크게 다른 부분이 없어 딱히 적을 내용이 없다.
1. 자바스크립트로 무엇을 할까
- 자바스크립트의 주요 기능
1) 웹의 요소를 제어한다. (웹 사이트 UI 부분에 많이 활용)
2) 웹 어플리케이션을 만든다.
3) 다양한 라이브러리를 사용한다. (리액트, 앵귤러, 뷰, 제이쿼리 등)
4) 서버 개발을 할 수 있다. (Node.js)
2. 웹 브라우저가 자바스크립트를 만났을 때
- 자바스크립트 소스는 <script> 태그 안에 작성한다.
1) 웹 문서 안의 어디든 위치할 수 있다.
→ 되도록 이미지나 텍스트를 모두 표시한 후에 실행하는 것이 좋으므로 </body> 태그 직전에 삽입한다.
2) 하나의 문서에서 여러 개를 사용할 수 있다.
- 자바스크립트는 영어 대소문자를 구별한다.
- 자바스크립트 파일은 외부 스크립트 파일로 연결하는 것이 좋다.
1) <script> 태그 없이 소스만 작성한다.
2) 확장자: *.js
3) <script> 태그의 src 속성을 이용해서 자바스크립트 파일을 연결한다.
<script src="외부 스크립트 파일 경로"></script>
3. 자바스크립트 용어와 기본 입출력 방법
- 식(표현식): 연산식뿐만 아니라 실제 값, 함수를 실행하는 것 등 어떤 값을 만들어 낼 수 있는 모든 것
→ 변수에 저장된다.
- 문: 명령이라고 생각할 수 있고, 문의 끝에는 세미콜론을 붙여서 구분한다.
- 알림 창(alert): 가장 많이 사용하는 간단한 대화 상자
- 알림 창 출력하기
alert(메시지)
- 확인 창(confirm): 사용자가 확인이나 취소 버튼 중에서 직접 클릭할 수 있는 창
- 확인 창 출력하기
→ 사용자가 어떤 버튼을 눌렀는지 결과를 변수에 저장한 후 그 값에 따라 프로그램에서 처리한다.
confirm(메시지)
- 프롬프트 창(prompt): 텍스트 필드가 있는 작은 창
- 프롬프트 창에서 입력받기
prompt(메시지) 또는 prompt(메시지, 기본값)
- document.write( )문: 웹 문서에서 괄호 안의 내용을 브라우저 화면에 표시(출력)하는 명령문
1) 실제 웹 브라우저 화면에 표시할 내용이나 결괏값이 저장된 변수를 넣을 수 있다.
2) HTML 태그도 함께 사용할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
</head>
<body>
<h1>어서오세요</h1>
<script>
var name = prompt("이름을 입력하세요.");
document.write("<b><big>" + name + "</big></b>님, 환영합니다.");
<!-- +는 연결 연산자이다. -->
</script>
</body>
</html>
- console.log( ) 문: 괄호 안의 내용을 콘솔 창에 표시한다.
1) 콘솔 창: 웹 브라우저의 개발자 도구 창에 포함되어 있는 공간
2) HTML 태그를 사용할 수 없다.
- 콘솔 창에서 오류를 찾고 수정할 수 있다.
1) option + command + J 단축키로 콘솔 창을 연다.
2) 오류 개수와 오류 발생 위치를 표시해준다.
3) 오류 발생 위치를 클릭하면 오류가 발생한 파일과 행이 표시된다.
4. 자바스크립트 스타일 가이드
- 코드를 보기 좋게 들여쓰기 해야 한다.
- 각 문장을 세미콜론으로 구분한다.
→ 소스는 한 줄에 한 문장만 작성한다.
- 공백을 넣어 읽기 쉽게 작성한다.
- 소스 코드를 잘 설명하는 주석을 작성한다.
1) 한 줄 주석: 슬래시(//) 2개
2) 여러 줄 주석: 여는 주석 기호(/*)와 닫는 주석 기호(*/)
- 식별자(identifier): 개발자가 자바스크립트의 변수, 함수, 속성 등을 구별하려고 이름 붙인 특정 단어
- 식별자는 정해진 규칙을 지켜 작성한다.
1) 식별자의 첫 글자는 반드시 영문자나 언더스코어(_), 또는 달러 기호($)로 시작해야 한다.
2) 두 단어 이상이 모여 하나의 식별자를 만들 경우 단어 다이에 공백을 둘 수 없고, 단어 사이를 하이픈(-)이나 언더바(_)로 연결해서 사용한다.
3) 하이픈이나 언더바 없이 두 단어를 붙여 사용할 경우 첫 번째 단어는 소문자로 시작하고 두 번째 단어는 대문자로 시작한다.
- 예약어는 식별자로 사용할 수 없다.
'Web Front > HTML + CSS + 자바스크립트' 카테고리의 다른 글
| [JS] 함수와 이벤트 (1) (0) | 2022.08.06 |
|---|---|
| [JS] 자바스크립트 기본 문법 (0) | 2022.08.04 |
| [CSS] 반응형 웹과 미디어 쿼리 (0) | 2022.08.03 |
| [CSS] 트랜지션과 애니메이션 (0) | 2022.08.01 |
| [CSS] CSS 고급 선택자 (0) | 2022.07.30 |
댓글