01.자바스크립트 시작하기

* 자바스크립트의 가장 큰 특징은 객체기반언어이라는 것이다.

 

1단계 : 고객(클라이언트)에게 사이트 개발의뢰 받아 고객의 요구에 맞게 기획안 작성

2단계 : 기획안을 토대로 UI 디자인 제작 

3단계 : 디자인 파일을 전달받은 퍼블리셔는 이미지를 이용해 인터넷 문서인 HTML, CSS를 이용해 화면의 모양을 잡아 정적인 웹 문서를 완성하고, 자바스크립트 또는 jQuery를 사용 3단계의 과정을 프런트엔드 개발이라함. 

         - 눈에 보이는 부분까지 개발하는 것을 프런트엔드 개발이라 한다.

4단계 :  완성된 HTML 문서를 백엔드 개발자에게 전달. 백엔드 개발자는 ASP, PHP, JSP등 서버 언어를 사용, 

화면에 보이지 않는 부분을 개발.

---

* 자바스크립트로 제작된 다양한 라이브러리

- 제이쿼리, Angular(앵귤러).js, React(리엑트).js, 폰갭(PhoneGap), Node(노드).js 등

 

- Node.js를 사용할 경우 백엔드 프로그램 언어와 같이 서버(Server)에서도 작동.

- javascript는 사이트 제작, 모바일 웹, 앱, 스마트 TV 제작 등 다양한 UI 개발에 사용됨.

---

* 크롬 개발자 도구 (F12)

Elements : HTML(element), 요소에 적용된 css을 검사할 수 있음.

Console :  자바스크립트 오류 체크는 물론 디버깅(debugging)을 할 수 있음

Source : 브라우저가 자바스크립트를 파싱(parsing)해오는 과정을 보여줌,

           소스 패널도 오류체크와 디버깅(debugging) 가능

 

* 디버깅 : 프로그래머가 실수로 잘못 코딩한 프로그램을 실행하면 오류(error)가 발생. 이런현상을 bug라 부르고 이런 버그를 검사하고 수정하는 작업을 debugging이라고 한다. 

---

* 자바스크립트 편집기

- 자바스크립트를 좀 더 쉽고 편하게 편집할 수 있는 편집기는 edit plus, 노트패드, 아톰(Atom), 서브라임 텍스트, 브라켓, 웹스톰, 비주얼 스튜드오 코드 등이 있다.

 

- 비주얼 스튜디오 설치 사이트

https://www.visualstudio.com/ko/

Visual Studio IDE, 코드 편집기, Azure DevOps 및 App Center - Visual Studio

 

- Visual Studio Code를 깔기로 함. 

---

1. 먼저 실습할 파일을 저장할 폴더를 만든다. (C:\jbt\visualStudio 생성)

2. 폴더 열기를 누르고 생성한 폴더를 선택하면 탐색기 폴더가 생성된다. 

   - 생성한 폴더를 탐색기로 직접 끌고 와도 비주얼 스튜디오 탐색기에 폴더 생성됨.

3. html 기본문서 양식을 작성할 때는 비주얼 스튜디오 코드에 포함된 이맷(Emmet) 기능을 사용하면 편함.

   이맷기능은 HTML, CSS를 약식으로 표기하여 작성할 수 있는 기능 

   ex) "HTML:5" 라고 입력한 다음 TAB 버트을 누르며 자동으로 HTML5 기본 양식으로 작성된다. 

4. 사이드 바에 있는  확장기능 버튼을 누르고 검색창에 open-in-browser를 입력해 검색한다. 

   - 제작자 이름이 'coderfee'인 확장기능을 선택하고 설치 버튼 클릭

5. ctrl + alt + O를 누르면 상단에 어떤 브라우저로 실행할 지 선택 가능

---

** prompt라는 영어 단어는 '(질문, 힌트 등을 주어서 말을 하도록) 유도하다'라는 의미/  prompt 함수의 역할은 꼭 이 단어의 의미와 비슷 / alert 창처럼 표출된다.

ex) var age = prompt("당신의 나이는?","0");