Welcome to

Javascript 1. 자바스크립트 기초

1. Javascript 소개

2. Javascript 역사

2. HelloWorld!

3. 변수

4. 식별자 규칙

5. 데이터 유형

Javascript 기초 1

선수 추천 과정 HTML5 CSS3

Javascript 소개 Javascript 기초1

Javascript 는 인터넷 초기에 인기를 끈 Netscape 에 탑재된 브라우저 전용의 스크립트 언어이다. 초기에는 LiveScript 라는 이름으로 불렸으나, 당시 주목 받던 Java 언어

로 인하여 Javascript 라는 이름으로 개명 되었다.

스크립트 언어 간편한 코딩을 목적으로 만들어졌으며, 처음인 사람도 쉽게 배울 수 있다. 객체지향적인 구조를 가지고 있어서 재사용성 및 유지보수성이 용이하다.

인터프리터 언어 프로그램을 해석해서 컴퓨터가 이해할 수 있는 형식으로 번역하면서 실행한다. 이른다 컴파일 언어에 비해 동작이 느리지만, 컴파일과 같은 별도의 절차가 필요 없으므로 작성하여 바로 손쉽게 실행할 수 있다.

OS와 무관한 다양한 브라우저에서 지원 일부 컴파일 언어가 특정 플랫폼에 종속적이지만, 브라우저가 설치되어 있거나 Node.JS 같은 서비스가 실행되는 다양한 환경에서 이용 가능한 언어이다.

Core, 브라우저 제어, Ajax 영역으로 나뉨 일반적인 언어 부분인 Core, 브라우저 DOM(Document Object Model) 을 제어하는 부분, Ajax 를 위한 XMLHttpRequest 부분 등으로 구성되어 있다.

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 수준의 웹 어플리케이션 개발이 가능해 짐

HelloWorld

프로그래밍의 기초인 HelloWorld 를 작성해 보자. 화면에 표시하는 방법은 HTML 영역에 표시해 주는 방법과, 디버깅을 위한 콘솔 창에 표시해 주는 방법이 있다.

Alert창 이용 작성한 Message 가 Popup 창 형태로 확인할 수 있음. 매번 창을 닫아야 하므로 추천하지 않음

console.log 를 이용한 출력 브라우저 디버깅 모드에서 제공하는 console.log(출력할 내용) 명령을 이용하여 데이터를 출력하는 방법

Document 에 출력 브라우저 디버깅 모드에서 제공하는 console.log(출력할 내용) 명령을 이용하여 데이터를 출력하는 방법

Javascript 기초1

변수

변수는 데이터를 넣어두는 ‘바구니’이다. 프로그램은 데이터를 주고받는 작업들의 연속인데, 이러한 데이터를 주고 받기 위해서 데이터를 메모리에 일시적으로 보관하는 것이 변수의 목적이다.

변수 선언 var 변수명 [= 초기값] 사용하고자 하는 변수 명 앞에 var 로 지정하면 변수가 선언 된다.

여러 변수 선언 var 를 여러 번 이용하여 변수를 선언하여 주거나, 하나의 var 에 여러 개의 변수를 선언할 수 있다.

초기 값 선언 선언 시에 초기 값을 지정해 줄 수 있다. 여기서 사용하게 되는 연산자 = 은 우측의 값을 좌측의 이름에 대입하라는 의미이다.

Javascript 기초1

식별자 규칙 (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

식별자 규칙 (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

데이터 유형 (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

데이터 유형 (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

데이터 유형 (3/3)

배열은 데이터의 집합이다. 일반 변수가 하나의 그릇을 가졌다면, 배열은 하나의 변수에 복수의 값을 보관할 수 있다. 객체는 키와 값 형태로 접근할 수 있는 형태이며, 함수는 입력이 주어짐에 따라 정해진 처리를 하고 그 결과를 반환해 주는 구조이다.

Array var 변수명 = [값1,값2, … ] 사용하고자 하는 변수 명 앞에 var 로 지정하면 변수가 선언 된다.

Object var 를 여러 번 이용하여 변수를 선언하여 주거나, 하나의 var 에 여러 개의 변수를 선언할 수 있다.

undefined 어떤 값이 정의되어 있지 않음을 나타내는 값. 어떤 변수가 선언하였으나 값을 부여 받지 못한 경우, 미 정의된 속성을 참조하려고 할 때 나타남

Javascript 기초1

Expand your dimension!

Let’s Start!