[1일차 ] Do it! 자바스크립트 입문 / 01 안녕? 자바스크립트! ~ 02 자바스크립트와 친해지기

---

01 안녕? 자바스크립트!

01-1 웹 프로그래밍이란?

 - 프로그래밍(Programming)

    : 프로그램 만드는 과정

    : 사람이 원하는 대로 컴퓨터가 작동할 수 있도록 컴퓨터 언어로 명령어를 나열하는 행위

 - 코딩과 프로그래밍의 차이

   : 코딩(Coding)은 소스 코드를 작성하는 행위

   : 프로그래밍은 어떤 문제를 분석하고, 논리적으로 해결할 수 있는 방법을 찾아

    코딩하는 과정까지 포함하는 더 넓은 개념

 

 - 웹 프로그래밍

   : 웹에 관련된 프로그램을 만드는 행위

   : 웹 브라우저와 관련된 프로그램을 작성하는 것

 - Back-end : 서버에서 사용자의 요청을 처리하거나 데이터를 관리

 - Front-end : 서버에서 받아 온 정보를 웹 브라우저에 어떻게 보여줄 것인지 프로그래밍

 - 웹 프로그래밍에서 가장 많이 쓰이는 프로그래밍 언어가 '자바스크립트'

 

 

 

01-2 자바스크립트로 무엇을 할 수 있을까?

 - 웹 사이트를 동적으로 만든다

   예) 메뉴에 마우스 포인터를 올렸을 때 하위 메뉴

        영화 사이트 < > 모양 화살표 클릭 시 영화 포스터 좌우로 움직임

 - 웹 브라우저에서 실행되는 프로그램을 만들 수 있다

   예) 버스 노선, 정류장 정보 등을 보여주는 웹 사이트

 - 서버를 구성하고 서버용 프로그램을 만들 수 있다

   예) Node.js 프레임워크로 서버 프로그램 개발

 

 

 

01-3 자바스크립트의 특징은 무엇일까?

 - 모든 웹 브라우저에서 작동

   : 웹 초장기 시절부터 사용한 언어 => 대부분의 웹 브라우저에서 작동

     ※ 그러나 최신 문법을 웹 브라우저에 즉시 사용할 수 있는 것은 아님!

 - 웹 브라우저에서 실행 결과를 즉시 확인할 수 있다

 - 풀스택 웹 개발뿐 아니라 다양한 용도의 프로그램을 만들 수 있다

 - 다양한 자바스크립트 공개 API를 사용할 수 있다

   ※ API : 데이터를 다른 사람이 손쉽게 가져갈 수 있도록 미리 준비한 체계

 - 다양한 라이브러리와 프레임워크를 사용할 수 있다

   ※ 라이브러리 : 자바스크립트로 미리 구현해 놓은 기능을 묶어 놓은 것

   ※ 프레임워크 : 프레임워크에서 기본으로 제공하는 소스를 수정하거나 추가하는 방법으로

                      웹 프로그램을 만들 수 있게 미리 준비한 일종의 틀

                      예) React, Angulat, Vue 등

 

 

 

 

 

---

02 자바스크립트와 친해지기

02-1 개발 환경 준비하기

 - 비주얼 스튜디오 설치

 

 

 

02-2 비주얼 스튜디오 코드와 인사하기

 - 작업 폴더를 서렁하고 파일 열어보기

 - 다른 파일과 비교하며 코드 작성하기

 - 라이브 서버 확장 기능 사용하기

 

 

 

02-3 자바스크립트 소스 작성하고 실행하기 (실습)

 - HTML 문서 안에 자바스크립트 소스 작성하기

<script> 태그 규칙
① <script> 태그는 HTML 문서 어디에든 사용 가능
② <script> 태그는 한 문서 안에 여러 개를 사용 가능
③ <script> 태그가 삽입된 위치에서 소스가 실행함

     

 - <script> 태그는 주로 </body> 태그 앞에 삽입

 - 외부 스크립트 파일을 연결하는 이유

   : 자바스크립트 소스를 따로 작성하여 HTML 문서에 연결하는 것을 '외부 스크립트 파일을 연결한다'라고 표현

   : 유지보수를 편하게 하려고

 - javascript 파일을 HTML에 연결방법

   : </body> 태그 바로 앞에 <script src="스크립트 파일 경로/파일명.js"></script> 

 

 

 

02-4 나의 첫 번째 자바스크립트 프로그램

 - 인사하는 브라우저 만들기 (실습)

자바스크립트로 만든 팝업창에 이름을 입력하면 인사해주는 기능 구현

 

 

 

02-5 자바스크립의 입력과 출력

 - 크롬 브라우저의 콘솔 도구와 함께 공부하기

 - 개발자 도구 열어보기 (F12 또는 Ctrl + Shift + J)

   : 실무에서 자주 쓰임

 - prompt()

   : 팝업 창에 사용자가 값을 입력할 수 있게 만들어 줌

   : 큰따옴표나 작은따옴표로 원하는 문장을 감싸 넣으면 프롬프트 창에 문장을 표시함

   : 주로 어떤 내용을 입력해야 하는지 안내할 때 사용

 - alert()

   : 간단한 알림 내용을 표시하려고 할 때 사용

   : 소괄호 안에 원하는 내용을 큰따옴표나 작은따옴표로 감싸주면 됨

 - document.write()

   : 화면에 표시하는 역할

   : 결괏값을 브라우저에 출력하는 용도

document.write() 실습

 

 

 - console.log()

   : 괄호 안의 내용을 콘솔창에 출력

   : 사용 방법은 document.write()와 동일

console.log() 실습

 

 

 - 브라우저 콘솔로 오류 찾아내기

개발자 도구로 오류 확인 후 수정 (실습) 

 

 

 

02-6 자바스크립트 소스를 작성할 때 지켜야 할 규칙

 - 자바스크립트 소스 작성 시 꼭 지켜야할 규칙 6가지

① 대소문자를 구별하여 소스를 작성한다
② 읽기 쉽게 들여쓰는 습관을 들인다
③ 세미콜론으로 문장을 구분한다
④ 자바스크립트 소스에 메모를 하려면 주석을 사용한다
⑤ 식별자는 정해진 규칙을 지켜 작성한다
    : 식별자(Identifier)는 문법의 핵심 요소인 변수, 함수, 속성 등을 구별하기 위해
      개발자가 이름 붙여준 특정 단어를 의미
    : 식별자는 영문자, 밑줄, 달러 기호($)로 시작해야 함
⑥ 예약어는 식별자로 사용할 수 없다