[인프런] 자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.1 이론

1. 웹 프로그래밍이란

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

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

백엔드 프로그래밍: 서버에서 데이터 관리를 프로그래밍(웹서버, DB, PHP, JSP, ASP) => JSP가 대세 => Spring

프론트엔드 프로그래밍: 서버에서 받아온 정보를 웹 브라우저에 어떻게 표시할 것인지 프로그래밍 (HTML, CSS, 자바스크립트)

 

2. 자바 스크립트의 역할

- 웹 사이트를 동적으로 만들 수 있다. (사이트 내 내비게이션 바)

- 웹 브라우저에서 실행되는 프로그램을 만들 수 있다. (지도, 위성 사진, 버스 정보) => API

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

 

3. 자바 스크립트의 특징

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

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

- 다양한 자바스크립트 공개 API(Application Programming Interface)를 사용할 수 있다.

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

 

4. 자바 스크립트 소스 작성 및 실행하기

<script> 태그 안에 자바 스크립트 작성

1) <script> 태그는 HTML 문서 어디에든 사용할 수 있다.

2) <script> 태그는 한 문서 안에서 여러 개를 사용해도 된다.

3) <script> 태그가 삽입된 위치에서 소스가 실행된다.

 

5. 외부 스크립트 파일 연결하기

1) 새 문서 만들고 js 폴더에 change.js로 저장한다. (확장자를 js로 지정하기)

2) change-2.html에서 <script> ~ </script> 사이의 소스를 복사해서 change.js에 붙여 넣는다.

3) change-2.html에서 <script> 태그부터 </script> 태그까지 소스를 삭제한다.

4) 자바 스크립트 소스 자리에 <script> 태그를 사용해 change.js를 연결한다.

<script src = "js\change.js"></script>

 

6.SYNTAX

1) prompt() 함수

사용자에게 값을 입력받을 때 가장 쉽게 사용할 수 있는 함수

var name = prompt("이름을 입력하세요."); // prompt 함수는 문자열(String)을 받는다. 출력을 의미한다.

2) document.write() 함수

결과 값을 웹 브라우저 화면에 출력

document라는 객체 안에 write 함수가 들어있음

document.write("<b><big>" + name + "</big><b>님, 환영합니다."); //document는 (웹)문서 자체를 의미한다.

3) console.log() 함수

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

4) parseInt(value)

value 값의 자료형을 Int 정수형으로 변환

5) confirm("~");

확인 창 띄움

 

7. 자바 스크립트 규칙

- 대소문자를 구별하여 소스를 작성한다.

- 읽기 쉽게 들여쓰는 습관을 들인다.

- 세미콜론으로 문장을 구분한다.

- 소스에 메모하려면 주석을 사용한다.

- 식별자는 정해진 규칙을 지켜 작성한다.

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

 

8. 변수를 선언하는 규칙

- 이름은 의미있게 짓는다.

- 여러 단어를 연결한 변수 이름을 낙타 모양으로 만들어준다. (ex. lastDay)

- 변수 이름의 첫 글자는 반드시 문자나 밑줄, 달러 기호로 시작해야 한다.

 

9. 변수 선언과 값/식 할당

1) var 다음에 변수 이름을 적어서 변수를 선언

2) 변수 오른쪽에 = 기호를 붙이고 오른쪽에 저장할 값이나 식을 작성

(변수 선언과 값 할당을 동시에 할 수도 있음. 변수는 선언과 동시에 초기화를 하는 습관 가지기.)

 

10. 자료형

기본형

- number(숫자): 따옴표 없이 표기한 숫자를 나타낸다.

- string(문자열): 작은 따옴표(')나 큰따옴표(")로 묶어 나타낸다.

- boolean(논리형): 참(true)과 거짓(false)이란 두 가지 값만 가지고 있는 유형이다.

- undefined: 자료형을 지정하지 않았을 때의 유형이다. 변수를 선언만 하고 값을 정의하지 않으면 undefined가 된다.

- null: 값이 유효하지 않을 때의 유형이다.

 

복합형

- array(배열): 하나의 변수에 여러 값을 지정하는 유형이다.

- object(객체): 함수와 속성이 함께 포함된 유형이다.

 

숫자형

1) 정수

- 소수점이 없는 숫자

- 표현 방법에 따라 10진수, 8진수, 16진수

2) 실수

- 소수점이 있는 숫자

- 자바 스크립트에서는 정밀한 실수 계산을 못 함

 

문자형

- 작은 따옴표(')나 큰 따옴표(")로 묶은 자료

- 숫자도 따옴표로 묶으면 문자형이 됨

 

논리형

- 참(True)과 거짓(False)이라는 값을 표현하는 자료형

- 프로그램에서 조건을 확인할 때 많이 사용

 

11. 배열

- 하나의 변수에 여러 값 저장

- 배열의 인덱스는 0부터 시작

- 배열에 있는 값을 가져오려면 배열 이름과 대괄호 안에 인덱스 사용

 

12. 객체

- 여러 자료를 중괄호로 묶은 것

- 키(key)와 값(value)을 한 쌍으로 여러 자료 저장

 

배열은 같은 타입을 묶고 객체는 다른 타입도 묶는다.

(C언어의 구조체, Java의 클래스)

 

13. 자바스크립트 자료형의 특징

- 느슨한 자료형 체크(var 이라는 자료형을 사용해서 여러 타입의 자료 받을 수 있음 = weak datatype check

- 자바스크립트는 미리 변수의 자료형을 지정하지 않음

- 변수를 지정하고 원하는 값을 할당만 하면 됨

 

14. 연산자 형변환

- 숫자형과 문자형을 더하면 숫자를 문자열로 인식함

- 곱하기나 나누기, 나머지 연산에서는 문자형 자료를 모두 숫자로 자동 인식함