1.Startup JavaScript - 프로그래밍 기초

Startup JavaScript1.프로그래밍 언어 & 변수,식별자,데이터

THINKER TO MAKER

x

Computer Language

THINKER TO MAKER

컴퓨터와 소통하는 언어

프로그래밍언어

소통을 위해 다양한 국가에서 다양한 언어를 가지고 있음

컴퓨터와 소통하기 위한 언어가 프로그래밍 언어임

프로그래밍의기원

한정된 자원을 통해 소통하는 방식

봉화와 같이, 컴퓨터는 기본적으로 켜고 끄는 (2진법) 방식으로 이해 함

최초의컴퓨터 ENIAC

2차 대전시 탄도 계산을 위해 진공관을 활용한 최초의 컴퓨터

DEBUG -> 오 동작 확인 중 진공관에 벌레가 타 죽은 것이 계기가 됨

Low Level Language

컴퓨터는 디지털로 기본적으로 0(on), 1(off) 의 신호만을 구분 함 -> 기계어

기계어를 사람이 이해하기 쉽게 구성한 언어가 어셈블리어임

High Level Language

복잡한 프로그램을 구성하기 어려운 기계어/어셈블리어를 보다 쉽게 개발하

기 위해 C, Java 등의 언어가 탄생함

Compile Language vs Interprete Language

고급언어는 컴파일 언어와 인터프리트 언어로 나뉨

컴파일 언어는 성능이 좋으나 인터프리트 언어에 비해 개발 효율은 떨어짐

Compile Language Interprete Language

• 소스 코드를 컴파일을 통해 실행파일을

생성하고, 사용자는 이를 실행함

• 코드 수정 시 매번 컴파일이 필요

• 코드 오류를 컴파일 과정에서 확인 및

수정 가능

• 최종적으로 기계어가 수행되므로 성능

이 우수함

• 소스 코드를 인터프리터를 이용하여 곧

바로 실행함

• 코드 수정 역시 곧바로 수행함

• 코드 오류를 인터프리터로 실행시점에

서 확인 가능

• 매번 번역 작업이 진행 후 실행되므로

성능이 상대적으로 떨어짐

코드 컴파일 실행파일 실행 코드 인터프리터 실행

JavaScript

웹 어플리케이션을 구동하기 위해 HTML5, CSS3 와 필수적으로 사용 됨

초기 브라우저인 Netscape 에서 LiveScript 라는 이름으로 시작 됨

JavaScript 변천

1990년 효과용으로 많이 사용되다가 과도한 사용으로 침체기에 빠짐

Ajax 기술의 등장과 Node.JS 의 등장으로 JavaScript 의 제2의 전성기 맞이

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

왜 JavaScript 인가?

가장 활발히 사용 됨 (Github, Stackoverflow, 해커톤 사용 1위 언어)

별도 프로그램 설치 필요 없이 모든 플랫폼의 브라우저에서 즉시 활용

Node.JS 의등장

JavaScript 는 본래, 웹 클라이언트 전용 프로그래밍 언어였음.

Node.JS 의 등장으로 서버 및 하드웨어 개발에 까지 사용될 수 있도록 확장됨

데스크 탑 모바일 웹 서버 임베디드 DB

Before C# Java JavaScript Java C/C++ SQL

After JavaScript

Hello World

THINKER TO MAKER

컴퓨터와 소통하는 언어

Hello JavaScript

웹 페이지 형태로 첫 프로그램을 작성해 봄

Alert 은 웹 페이지에서 경고 창으로 내용을 출력 함

<html><head>

<title>Hello World</title><style>

body {background-color : yellow;

}</style><script>

alert('Hello JavaScript!');</script>

</head><body>

Hello JavaScript!</body>

</html>

Hello JavaScript 2

HTML5 - 얼굴, CSS3- 화장, JAVASCRIPT – 소리/눈 동자

3가지 언어를 이용하여 첫 프로그램을 변형해 봄

<html><head>

<title>Hello World</title><link rel="stylesheet"

href="style.css"><script src='index.js'></script>

</head><body>

Hello JavaScript!</body>

</html>

alert('Hello JavaScript 2!');document.write('Hello JavaScript 2nd!');

body {background-color : yellow;

}

HTML5 JavaScript

CSS3

Variable - 변수

변수는 데이터를 보관하는 일종의 바구니

지속적으로 사용할 수 있도록 메모리에 일시적으로 저장하는 역할

// 변수 선언 후 사용var message;message = '좋은 날씨입니다.';document.write(message);

// 변수 초기화 수행var message2 = '나는 홍길동 입니다.';document.write(message2);

// 숫자 문자 구분 없이 사용 가능var count = 2;document.write(count);

식별자 1/2

이름을 뜻하는 식별자는 목적을 유추하기 쉽게 이름지어져야 함

camelCase, Pascal, Underscore 식의 방법으로 성격에 따라 지정 가능

함수 명 – camelCase 기법 – myFunction

클래스(구조체) –Pascal 기법 – MyClass

변수 – underscore 기법 – my_variable

이름으로부터 데이터의 내용을 유추하기 쉽게 (ex name, title)

너무 길거나 또는 짧지 않게 (keyword)

보기에 혼동하지 쉽지 않게 (password, user)

첫 번재 문자의 underscore(_) 는 특별한 의미가 있으므로 가급적 사용하지 말 것 (_name)

미리 정해진 기술 방법으로 통일되게 기술할 것

기본적으로 영단어로 할 것

식별자 2/2

첫 번째 문자는 영문자, _, $ 중 하나로 시작하며, 두 번쩨 부터는 숫자도 사용

대소문자는 구분되어야 하며, 예약어가 아니어야 함

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

데이터유형 1/4

데이터는 밸류 형(Value) 참조 형(Reference)로 구성됨.

C나 Java는 데이터 형이 정해져 있으나, 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]

데이터유형 2/4

숫자 표현은 10, 8, 16진수의 정수, 그리고 실수 표현이 가능하다.

문자열은 ‘ 혹은 “ 안에 문자를 넣어 주면 된다.

// -- number ---// 함수var num1 = 100; // 10진수var num2 = 0600; // 8진수 - 앞에 0을 붙여줌var num3 = 0xCC55FF; // 16진수 - 앞에 0x 를 붙여줌

// -- 부동소수 --var num4 = 1.5; // 소수var num5 = 3.14e5; //지수 - 3.14 x 105 대문자 E로도 가능

// -- String --var str1 = 'Hello world1'; // 큰 따옴표, 작은 따옴표 모두 표시 가능var str2 = 'Hello world2';var str3 = "He's here!"; // 문자열에 '을 쓰려면, 외부에는 "으로 감싼다var str4 = 'He\'s here!'; // escape 문자로도 표현 가능

데이터유형 3/4

배열은 데이터의 집합으로, 복수의 값을 보관할 수있다.

객체는 키와 값의 형태로 접근하며, 함수는 정해진 처리를 하고 반환한다.

// -- Array --var arr1 = ['banana','apple','orange'];console.log(arr[0]) // 배열 index 는 0 부터 시작함

var arr2 = ['banana',['tomato','blueberry'],'apple','orange'];console.log(arr[1][0]); // 배열안에 배열이 들어갈 수 있음

// -- Object --var obj1 = {a: 1 , b: 2, c: 3};console.log(obj1.a); // Result : 1console.log(obj1['a']); // Result : 1

var obj2 = {a: 1, b: 2, c: 3, d : {x : 1, y: 2}};console.log(obj2['d']['x']); // 객체 안에 객체가 들어갈 수 있음

데이터유형 4/4

JavaScript 에서는 함수도 일종의 데이터 유형 임.

명령을 수행하거나 계산 결과를 반환.

// -- Function --var func1 = function(){

console.log('my function 1');}func1(); // 함수 1 실행

// -- Function --var func2 = function(x){

return x + 5;}console.log(func2(20)); // 함수 2 실행

// -- 미 정의 값var x; // 아무것도 정의되지 않으면 기본으로 undefined 값이 부여 됨var y = {x : 1};console.log(x); // undefined 라는 값이 나옴console.log(y['y']); // 존재하지 않은 속성을 참조하려는 경우

W www.circul.us G group.circul.us

S social.circul.us C cafe.circul.us

CONTACT.US [email protected]

THINKER TO MAKER

ANY

QUESTION?

x

Technology

1.Startup JavaScript - 프로그래밍 기초