2022 AI SW 온라인 교육/SW 코딩 훈련트랙

[SW코딩] 핵심 JavaScript 기초 - 01. 자바스크립트 시작하기

parkes811 2022. 12. 3. 19:02

01 자바스크립트 소개

 

  • 자바스크립트란?

- 이미지 슬라이드 효과, 팝업 효과 등의 기능을 포함한 동적인 웹사이트 제작 시 사용되는 프로그래밍 언어

- HTML(내용), CSS(디자인), JS(동작)를 활용해 동적인 웹사이트를 제작한다.

 

  • 자바스크립트의 활용 범위

- IOT : IOT 분야에서 파이썬, 자바스크립트 등과 같은 스크립트 언어로 사물인터넷 분야를 만드는데 자주 사용된다.

- 하이브리드 앱 : Android, IOS는 다른 운영체제를 사용하고 있어 서로 다른 개발 언어를 사용해야 하는데

자바스크립트 기반인 리액트 네이티브 프레임워크는 Android, IOS에서 한 번에 개발할 수 있게 해준다. 

- 서버 개발 : node.js는 자바스크립트 기반의 서버 프로그래밍 언어로 서버 개발도 할 수 있다.

 

02 자바스크립트의 변수

 

- Variable, 변수 : 데이터를 담는 공간

 

  • 변수의 선언과 데이터 저장

- 변수 선언 : 데이터를 담을 공간을 생성하는 것

- 변수 초기화 : 생성된 변수에 데이터를 전달하는 것

 

  • 변수의 데이터 변경

 

  • 변수 안의 데이터 확인 방법

- console.log();는 변수 안에 데이터를 확인할 때 사용하는 명령어

 

  • 자바스크립트 사용 방법

- <script> 태그 안에 src의 속성 값으로 js 파일을 입력 후 html 파일과 연동을 시켜 사용한다.

- 크롬 개발자 도구 콘솔 창에서 변수 값을 확인할 수 있다.

 

 

03 자바스크립트 데이터 타입

 

  • 데이터 타입 : 초콜릿도 다양한 종류가 존재하듯 변수에 전달되는 데이터 타입에도 여러 종류가 존재한다.

 

  • 자바스크립트의 8가지 데이터 타입

  • String, 문자열 : "큰 따옴표" 또는 '작은 따옴표' 안에 작성된 데이터

- 문자열 내 ' 를 출력하고 싶으면 \를 쓰고 특정 기호를 사용하게 되면 출력이 가능하다.

 

  • Number, 숫자 : 별도의 기호 없이 숫자를 입력항 상태

 

  • Function, 함수

 

- function (width, height) : width, height는 함수에 매개변수이다.

- area (10, 20) : 10, 20은 area 함수에 인자이다.

- return : 함수 내 데이터를 저장할 때 사용

 

  • Array, 배열 : 비슷한 성격을 갖고 있는 데이터를 하나의 변수 안에서 관리하고, 좌표값(index)으로 관리한다.

 

  • Object, 객체 : 프로퍼티, 메서드, 데이터로 구성되어 여러 종류의 데이터 타입을 삽입 가능

 

  • Boolean, 불린 : 참 또는 거짓 데이터가 들어가 있는 상태

 

  • Undefined, NULL, 정의되지 않은 데이터 타입과 Null 타입