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()
: 화면에 표시하는 역할
: 결괏값을 브라우저에 출력하는 용도
- console.log()
: 괄호 안의 내용을 콘솔창에 출력
: 사용 방법은 document.write()와 동일
- 브라우저 콘솔로 오류 찾아내기
02-6 자바스크립트 소스를 작성할 때 지켜야 할 규칙
- 자바스크립트 소스 작성 시 꼭 지켜야할 규칙 6가지
① 대소문자를 구별하여 소스를 작성한다
② 읽기 쉽게 들여쓰는 습관을 들인다
③ 세미콜론으로 문장을 구분한다
④ 자바스크립트 소스에 메모를 하려면 주석을 사용한다
⑤ 식별자는 정해진 규칙을 지켜 작성한다
: 식별자(Identifier)는 문법의 핵심 요소인 변수, 함수, 속성 등을 구별하기 위해
개발자가 이름 붙여준 특정 단어를 의미
: 식별자는 영문자, 밑줄, 달러 기호($)로 시작해야 함
⑥ 예약어는 식별자로 사용할 수 없다
'Programming > javascript' 카테고리의 다른 글
[4일차] Do it! 자바스크립트 입문 / 05 함수와 이벤트 (0) | 2021.12.06 |
---|---|
[3일차] Do it! 자바스크립트 입문 / 04 흐름을 제어한다! 제어문 (0) | 2021.12.05 |
[서평단] Do it! 자바스크립트 입문 - '입문'이란 단어의 중요성 (0) | 2021.11.28 |
[2일차] Do it! 자바스크립트 입문 / 03 변수와 자료형 그리고 연산자 (0) | 2021.11.26 |
<Do it! 자바스크립트 입문> 서평단 당첨! (0) | 2021.11.22 |