통합 후 삭제예정

23.03.07 ver

1. 참고 도서 & 자료

• 웹 표준의 정석 http://aladin.kr/p/Fyssu

Do it! HTML + CSS + 자바스크립트 웹 표준의 정석

---

2. 자바스크립트 언어의 큰 줄기, 식(expression)과 문(statement)

식은 표현식이라고도 하며, 연산식뿐만 아니라 실제 값도, 함수를 실행하는 것도 식이 된다.

4*29 // 연산식은 식
"안녕하세요?"; // 문자열도 식
921 // 숫자도 식

문은 명령이다. 문의 끝에는 세미콜론(;)을 붙여서 구분한다.

넓은 의미에서 '문'은 값이나 식까지 포함한다.

---

3. 간단한 입출력 방법

■ 알림 창(alert)

가장 많이 사용하는 간단한 대화 상자

alert("안녕하세요?")

 

■ 확인 창(confirm) 출력하기

사용자가 [확인]이나 [취소] 버튼 중에서 직접 클릭할 수 있다.

let replay = confirm("정말 삭제하시겠습니까?")

 

■ 프롬프트 창(prompt)에서 입력받기

텍스트 필드가 있는 작은 창. 텍스트 필드 안에 간단한 메시지를 입력할 수 있으며 그 내용을 가져와 프로그램에서 사용할 수 있다.

let name = prompt("이름을 입력하세요.") 또는
let name2 = prompt("이름을 입력하세요", "아무개")

 

■ 웹 브라우저 화면에 출력을 담당하는 document.write() 문

단순히 브라우저 화면에서 결괏값을 확인하는 용도로 많이 사용한다.

따옴표 안에는 HTML 태그도 함께 사용할 수 있다.

<script>
  document.write("<h1>어서오세요</h1>");
 </script>

 

■ 콘솔 창에 출력하는 console.log()문

콘솔 창은 웹 브라우저의 개발자 도구 창에 포함되어 있는 공간이다. 콘솔 창에서 소스 코드의 오류를 발견하거나 변숫값을 확인할 수도 있다.

 

F12 또는 Ctrl + Shift + J 를 눌러 콘솔창을 열 수 있다.

---

4. 스타일 가이드

문법에 맞게 코딩하는 것도 중요하지만 좀 더 읽기 쉽고 오류를 줄일 수 있도록 코드를 작성하는 것도 중요하다.

 

동의어 : 코딩 규칙, 코딩 컨벤션, 코딩 스타일, 표준 스타일

 

■ 왜 코딩 규칙이 필요할까?

▶ 자바스크립트는 웹 문서에 동적인 효과를 주기 위해 출발한 언어이므로 다른 프로그래밍 언어에 비해 데이터 유형(type)이 유연해서 곳곳에 사용자가 주의를 기울이지 않으면 오류가 발생할 수 있다.

-> 이런 이유에서 타입스크립트(TypeScript)가 대두되고 있다. 유연성보다는 안정성을 선택했다고 봐도 무방하다.

 

▶ 게다가 오픈소스에 기여하거나 누군가와 공유할 소스라면 더욱 깔끔하게 작성해야 한다.

 

▶ 회사에서 웹 개발 프로젝트를 진행한다면 통일된 코딩 스타일이 꼭 필요하다.

 

▶ 또한 스타일 가이드에 따라 작성된 웹 사이트나 애플리케이션은 유지*보수할 때도 수월하고 비용도 훨씬 줄어든다.

 

■ 지켜야 할 규칙

1. 코드를 보기 좋게 들여쓰기

들여쓰기를 해서 작성하면 소스 간의 포함 관계를 알아보기 쉽다.

 

2. 세미콜론으로 문장을 구분

사실 자바스크립트에서는 문장이 끝날 때 세미콜론을 붙이지 않아도 실행된다. 하지만 스타일 가이드에서는 세미콜론을 붙이도록 권장한다. 이렇게 문장을 명확하게 표시해 주면 소스를 디버깅하기 쉽기 때문이다. 그러므로 소스는 한 줄에 한 문장만 작성하는 것이 좋다.

 

3. 공백을 넣어 읽기 쉽게 작성

개발자가 소스 코드를 읽거나 디버깅을 할 때는 공백이 있어야 가독성이 좋다.

 

4. 소스 코드를 잘 설명하는 주석을 작성

 

5. 식별자는 정해진 규칙을 지켜 작성

식별자(identifier)는 개발자가 자바스크립트의 변수, 함수, 속성 등을 구별하려고 이름 붙인 특정 단어

 

식별자의 첫 글자는 반드시 영문자나 언더스코어(_), 또는 달러 기호($)로 시작해야 한다. 두 단어 이상이 모여 하나의 식별자를 만들 경우, 단어 사이를 하이픈(-)이나 언더바(_)로 연결해서 사용한다. 첫 번째 단어는 소문자로 시작하고 두 번째 단어는 대문자로 시작하는 것이 일반적이다.

 

6. 예약어는 식별자로 사용할 수 없다.

예약어(keyword)는 키워드라고도 하는데, 식별자로 사용할 수 없도록 자바스크립트에 미리 정해 놓은 단어

---

5. 질문

Q. 자바스크립트 예약어에는 무엇이 있는가?

• 참고문서
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#reserved_words
  
  
• 대체로 자바스크립트 문법에서 자주 접하는 친구들
  break / case / catch / class / const / continue / debugger / default / delete / do / else / export / extends / false / finally / for / function / if / import / in / instanceof / new / nell / return / super / switch / this / throw / true / try / typeof / var / while / with