모바일 부터 하드웨어까지 가능하게 하는 가장 강력한 언어, GITHUB 에서 가장 많은 프로젝트, 해커톤에서 가장 많이 사용되는 언어, 오바마 대통령도 배웠던 언어, 바로 자바스크립트입니다.

1. Welcome to
Javascript
1. 자바스크립트 기초

2. 1. Javascript 소개
2. Javascript 역사
2. HelloWorld!
3. 변수
4. 식별자 규칙
5. 데이터 유형
Javascript 기초 1
선수 추천 과정
HTML5
CSS3

3. Javascript 소개 Javascript 기초1
Javascript 는 인터넷 초기에 인기를 끈 Netscape 에 탑재된 브라우저 전용의 스크립
트 언어이다. 초기에는 LiveScript 라는 이름으로 불렸으나, 당시 주목 받던 Java 언어
로 인하여 Javascript 라는 이름으로 개명 되었다.
스크립트 언어
간편한 코딩을 목적으로 만들어졌으며, 처음인 사람도 쉽게 배울 수 있다. 객체지향적인 구조를 가지고 있어
서 재사용성 및 유지보수성이 용이하다.
인터프리터 언어
프로그램을 해석해서 컴퓨터가 이해할 수 있는 형식으로 번역하면서 실행한다. 이른다 컴파일 언어에 비해
동작이 느리지만, 컴파일과 같은 별도의 절차가 필요 없으므로 작성하여 바로 손쉽게 실행할 수 있다.
OS와 무관한 다양한 브라우저에서 지원
일부 컴파일 언어가 특정 플랫폼에 종속적이지만, 브라우저가 설치되어 있거나 Node.JS 같은 서비스가 실
행되는 다양한 환경에서 이용 가능한 언어이다.
Core, 브라우저 제어, Ajax 영역으로 나뉨
일반적인 언어 부분인 Core, 브라우저 DOM(Document Object Model) 을 제어하는 부분, Ajax 를 위
한 XMLHttpRequest 부분 등으로 구성되어 있다.

4. Javascript 역사 Javascript 기초1
1990년대 웹 페이지를 위한 효과용도로 이용되다가 과도한 효과와 크로스 브라우징 문
제로 2000년 초반 외면 받기 시작함. 2005년 Ajax 로 인하여 주목 받기 시작하여
2009년 NodeJS 의 등장으로 서버까지 아우르는 언어로 주목 받고 있음.
1990년대 후반 : Javascript 전성기
대부분의 웹 페이지에 마우스를 가져다 놓으면 문자열 점열, 상태 바에 문자열 흘러가
기, 페이지 전환 시 페이드 인 페이드 아웃 등의 효면전환(Transition) 효과 등의 용도
로 사용되기 시작함
2000년대 초반 : Javascript 후퇴기
모양새가 안 좋은 웹페이지 장식을 위한 언어, 프로그래밍 초보자나 사용하는 저속한
언어의 이미지, 크로스 브라우징 문제와 보안 취약점 문제로 인하여 나쁜 이미지가 정
착되는 요인이 됨
2000년대 중반: Javascript 도약기
RIA(Rich Internet Application) 을 작성할 수 있는 Ajax(Asynchronous
Javascript + XML)가 등장하고 Javascript 국제 표준화 단체인 ECMA 하에 표준화
가 진행되어 언어로서의 완성도가 높아짐
2010년대 초반 : Javascript 부흥기
2000년 후반 NodeJS 의 등장으로 서버부터 클라이언트까지 전 영역에 Javascript
가 활용가능 해짐. HTML5 등장으로 Javascript 와 함께 Desktop Applcation 수준
의 웹 어플리케이션 개발이 가능해 짐

5. HelloWorld
프로그래밍의 기초인 HelloWorld 를 작성해 보자. 화면에 표시하는 방법은 HTML 영
역에 표시해 주는 방법과, 디버깅을 위한 콘솔 창에 표시해 주는 방법이 있다.
Alert창 이용
작성한 Message 가 Popup 창 형태
로 확인할 수 있음. 매번 창을 닫아야
하므로 추천하지 않음
console.log 를 이용한 출력
브라우저 디버깅 모드에서 제공하는
console.log(출력할 내용) 명령을 이
용하여 데이터를 출력하는 방법
Document 에 출력
브라우저 디버깅 모드에서 제공하는
console.log(출력할 내용) 명령을 이
용하여 데이터를 출력하는 방법
Javascript 기초1

6. 변수
변수는 데이터를 넣어두는 ‘바구니’이다. 프로그램은 데이터를 주고받는 작업들의 연속
인데, 이러한 데이터를 주고 받기 위해서 데이터를 메모리에 일시적으로 보관하는 것이
변수의 목적이다.
변수 선언
var 변수명 [= 초기값]
사용하고자 하는 변수 명 앞에 var 로
지정하면 변수가 선언 된다.
여러 변수 선언
var 를 여러 번 이용하여 변수를 선언
하여 주거나, 하나의 var 에 여러 개의
변수를 선언할 수 있다.
초기 값 선언
선언 시에 초기 값을 지정해 줄 수 있
다. 여기서 사용하게 되는 연산자 = 은
우측의 값을 좌측의 이름에 대입하라
는 의미이다.
Javascript 기초1

7. 식별자 규칙 (1/2)
1. 첫 번째 문자는 영문자, _, $ 중 하나여야 한다 (타 특수기호, 숫자 불가)
2. 두 번째 문자 이후에는 첫 번째에서 사용할 수 있는 문자 혹은 숫자
3. 대소문자는 구분 되며, 예약어가 아니어야 함
break case catch continue default delete
do else finally for function if
in instanceof new return switch try
typeof var void while with
abstract boolean byte char class const
debugger double enum export extends final
float goto implements import Int interface
long native package private protected public
short static super synchronized throws transient
volatile
Javascript 기초1

8. 식별자 규칙 (2/2)
camelCase – 앞 단어 첫 문자는 소문자, 이후는 대문자 (ex myCase)
Pascal – 모든 단어의 첫 문자는 대문자 (ex MyCase)
Underscore – 모든 단어의 첫 문자는 소문자, 단어간 _ 연결 (ex my_case)
함수 명 – camelCase 기법 – myFunction
클래스(구조체) –Pascal 기법 – MyClass
변수 – underscore 기법 – my_variable
이름으로부터 데이터의 내용을 유추하기 쉽게 (ex name, title)
너무 길거나 또는 짧지 않게 (keyword)
보기에 혼동하지 쉽지 않게 (password, user)
첫 번재 문자의 underscore(_) 는 특별한 의미가 있으므로 가급적 사용하지 말 것 (_name)
미리 정해진 기술 방법으로 통일되게 기술할 것
기본적으로 영단어로 할 것
Javascript 기초1

9. 데이터 유형 (1/3)
데이터는 밸류 형(Value)과 참조 형(Reference)으로 구성된다.
일반적으로 Java 나 C에서는 이러한 데이터를 강하게 의식하나, Javascript 는 데이터
형에 관대하다.
분류 데이터 형 의미
밸류 형 number -1, -0.1, 0, 0.1, 1
string “, ‘ 로 감싸인 0 개 이상의 문자열
boolean true / false
null/undefined 값이 미 정의된 것을 나타냄
참조형 array 인덱스 번호로 접근 가능한 데이터의 집합
object 각 요소의 이름으로 접근 가능한 데이터의 집합
function 일련의 처리 절차의 집합
10
‘xyz’
숫자 형
문자 형
Value 형
300
500
객체 Object
배열 Array
Reference 형
메모리 주소 값
300 { a:1, b:2}
500 [100,200,300]
Javascript 기초1

10. 데이터 유형 (2/3)
숫자 표현은 10, 8, 16진수의 정수, 그리고 실수 표현이 가능하다.
문자열은 ‘ 혹은 “ 안에 문자를 넣어 주면 되고, 문자열 내에 ‘ 와 “를 쓰려면 서로 교차하
여 사용하거나, escape 문자를 이용하여 활용할 수 있다.
정수 선언
기본적인 형태는 10진수이나, 8진수
사용을 위해서 앞에 0, 16진수 사용을
위해서는 0x를 앞에 붙여주어야 함
실수 선언
기본적인 형태는 10진수이나, 8진수
사용을 위해서 앞에 0, 16진수 사용을
위해서는 0x를 앞에 붙여주어야 함
escape 문자
b 백 스페이스 마크
f 새로운 페이지 ’ 작은 따옴표
n 개행(Line Feed) ” 큰 따옴표
r 복귀(Carriage Return) xXX Latin-1 문자
t 탭 문자 uXXXX Unicode 문자
Javascript 기초1

11. 데이터 유형 (3/3)
배열은 데이터의 집합이다. 일반 변수가 하나의 그릇을 가졌다면, 배열은 하나의 변수
에 복수의 값을 보관할 수 있다. 객체는 키와 값 형태로 접근할 수 있는 형태이며, 함수
는 입력이 주어짐에 따라 정해진 처리를 하고 그 결과를 반환해 주는 구조이다.
Array
var 변수명 = [값1,값2, … ]
사용하고자 하는 변수 명 앞에 var 로
지정하면 변수가 선언 된다.
Object
var 를 여러 번 이용하여 변수를 선언
하여 주거나, 하나의 var 에 여러 개의
변수를 선언할 수 있다.
undefined
어떤 값이 정의되어 있지 않음을 나타
내는 값. 어떤 변수가 선언하였으나 값
을 부여 받지 못한 경우, 미 정의된 속
성을 참조하려고 할 때 나타남
Javascript 기초1

12. Expand your dimension!
Let’s Start!