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

Startup JavaScript
1.프로그래밍 언어 & 변수,식별자,데이터
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]

숫자 표현은 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 문자로도 표현 가능

배열은 데이터의 집합으로, 복수의 값을 보관할 수 있다.
객체는 키와 값의 형태로 접근하며, 함수는 정해진 처리를 하고 반환한다.
// -- 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 : 1
console.log(obj1['a']); // Result : 1
var obj2 = {a: 1, b: 2, c: 3, d : {x : 1, y: 2}};
console.log(obj2['d']['x']); // 객체 안에 객체가 들어갈 수 있음

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 circulus@circul.us
THINKER TO MAKER
ANY
QUESTION?
x

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

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to 1.Startup JavaScript - 프로그래밍 기초 (20)

More from Circulus (17)

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