10. 0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+ - * / % _ “ ‘ { } ( ) [ ] ~ ! | & = . ; ? < > ,
Javascript 에서 사용되는 문자들
11. break function return var case delete if else switch
catch do in this while const instanceof throw with
continue finally let try debugger for new typeof …
Javascript 언어에서!
미리 선점한 예약어
예약어들은 정해진 용도 이외의 다른!
용도로 사용할 수 없음
12. 1. 문과 문의 구분은 ; (세미콜론)으로 한다!
2. 대소문자를 구분한다!
3. 이름(식별자)는 영문자, _(언더바), $로만 시작될 수 있다!
4. 토근과 토큰 사이의 공백, 줄바꿈, 탭 문자는 무시한다
기본 규칙 1
13. 문과 문의 구분은 ; (세미콜론)으로 한다!
ㄴ 생략시 일정한 규칙에 의해 세미콜론을 자동으로 부여한다!
ㄴ 자동 부여 방식의 이해가 없다면 생략하지 않으면 된다
기본 규칙 1!
*예외
14. 코드가 나타나는 즉시 해석되고 실행됨. 특별한 시작 지점 없음
기본 규칙 2
console.log(‘run code 1’);!
console.log(‘run code 2’);!
console.log(‘run code 3’);!
console.log(‘run code 4’);!
console.log(‘run code 5’);
void sub() {!
printf(“run code 1”);!
printf(“run code 2”);!
}!
void main() {!
printf(“run code 1”);!
printf(“run code 2”);!
}
* Javascript * C
처음부터!
순서대로!
실행
main 으로!
시작점이!
정해져있음
15. 다루기 어려운 형식은 !
다루기 쉬운 형식으로 바꾼다
“
”
한 가지 기억해 두세요
16. 컴퓨터가 다루기 쉬운 형식을 말합니다!
자료구조라는 학문에서 배우지요!
“큐”, “스텍”, “트리”, “리스트” 등의!
외계어들이 존재합니다
다루기 쉬운 형식이란?
26. 문(文)의 구조를 알아봅시다
세미콜론을 기준으로 한 문장이
완성되며 문(文)이라 합니다.
여러 문을 포함하는 블럭을 구
문의 마지막은 세미콜론으로 끝
나지 않습니다.
27. 구문은 여러개의 토큰으로 이루
어집니다. 토큰은 의미를 가지
는 가장 작은 단위입니다.
var age = 0;
5개의 토큰으로!
구성된 문
문(文)의 구조를 알아봅시다
28. 공백(스페이스)의 역할
공백은 토큰의 의미를 명시하기
위해 사용합니다. 공백이 없어
도 의미가 명확하다면 생략이
가능합니다.
varage = 0;
*오류 : varage 이름의!
변수가 만들어짐
var age=0;
*정상 : 공백이 없어도 토큰!
분리가 가능함
29. 이 소스 코드는 순차적으로 실행됩니다
1, 2, 3 … 맨 앞에 숫자는 코드 에디터가 자
동 부여해 주는 라인 표시입니다. 프로그래
머가 작성한 부분이 아닙니다.
30. 나와, 남을 위해 코드를 설명하는 주석
/* 문자와 */ 문자 사이의 내용들은 모두 주석
으로 인식하여 실행되지 않습니다.
컬러가 회색으로 표시되는 이유는 에디터의
기능 중 일부이며 “이 부분은 주석이어서 실
행되지 않습니다”라는 의미입니다. 즉, 코드
에디터는 코드의 형태를 “인식”합니다.
31. 값을 저장하는 저장소 “변수”
var 는 변수를 만드는 지시
어입니다. var 다음에 프로
그래머가 명명한 변수를 작
성합니다.
32. 어떤 값을 담고 있는지 알 수 있도록!
의미있는 변수명을 사용하세요
a1 = 15;
!
!
temperature = 15;
나빠요!
좋아요!
33. “값”을 저장한다? 값을 유지한다? 저장소?
변수는 생성된 후 소멸될 때 까지 값을 유지하고 있는 공간.
변수의 값을 읽을 수 있으며 변수의 값은 변경할 수 있다.
생성
참조(읽기)
변경(대입)
34. “값” 과 그것을 저장하는!
저장소인 “변수”에 대해!
상세히 알아둘 필요가 있습니다
76. 고정된 크기로!
분할된 공간
크기가 다른!
여러개의 값
크기와 형태가 각기 다른 수 많은 데이타를 크기가 일정한
저장소에 “나누어” 담고 읽어야 하는 일의 동작 방식
형태!
가공
77. 값은 그 형태에 따라 메모리에 위치하는 방식과
크기가 다르다. 이것의 의미는 값을 읽고, 쓰고,
삭제하기 위한 처리 기준이 필요함을 의미한다.
그 처리 기준이 바로 값의 형(타입) 이다.
값의 형식
78. *값형식 지정 언어
값 형식을 명시적으로 지정함으로서 프로그램 실행시
주소 계산 과정을 빠르게 수행할 수 있다. 따라서 프로
그램 실행 속도가 빠르다.
변수가 저장할 수 있는 값의 형식을
명시한다는건 투명한 유리잔에 담긴
물과 같다. 변수를 사용하기전 이미
담겨져있는 내용이 “투명한 물”이라
는 정보를 알려주기 때문이다.
79. *값형식 미지정 언어
값 형식을 지정하지 않고 프로그래머는 값의 형식을 맞출
필요가 없으므로 변수를 보다 자유롭고 유연하게 운용할 수
있다. 그러나, 그 대가는 오류의 가능성, 매번 반복되는 형
검사 및 변환 등으로 인한 느린 속도다.
변수가 저장할 형식을 제한하지 않
는다는건 불투명한 컵과 같다. 뚜껑
을 열고 들여다 보기 전엔 내용이 무
엇인지 알 수 없다.(추측만 할 뿐)!
약속되지 않은 값 형식이 저장되어
있을 가능성이 항상 존재하며 이는
오류가 날 가능성을 의미한다.
132. 연산자의 결합 방식
모든 연산자는 우선순위가 있다. 곱셈은 덧셈, 뺄셈보
다 우선순위가 높다. 즉, 덧셈 뺄셈 보다 먼저 수행된다
모든 연산자는 결합 방향을 가진다. 대입 연산자는 오른
쪽에서 왼쪽으로, 뺄셈은 왼쪽에서 오른쪽으로, 증감 연
산자(++, --)는 결합 방향을(전치, 후치) 변경할 수 있다.
x 의 값은 -2이다.!
덧셈, 뺄셈의 우선순위는!
같기 때문에 좌측에서 우측으로 !
결합되며 수행된다.
y의 값은 7이다. 9라고 예상한다면 !
수식의 의도를 우선순위와 결합방향과 !
다르게 표현했기 때문이다.
x = 1 + 2 - 5;
y = 1 + 2 * 3;
133. 연산자의 결합 방식
y 값이 7이 되는 과정. 곱셈의 우선순위가 높기 때문에 먼저
수행된 후 그 결과를 다음 우선순위인 덧셈과 결합된다.
1
2
y 값이 9가 되는 “의도” 가 있다면 그 의도를 괄호로 표현
하라. 괄호는 결합 우선순위를 명시적으로 지정할 수 있다.
2
1
y = 1 + 2 * 3;
y = (1 + 2) * 3;
134. 문맥에 따라 기능이 달라지는 연산자
y 의 값은 각각 20, ‘1010’ 이다.!
어떻게 이런 결과가 나오는 것일까?
+연산자는 좌변과 우변이 모두 숫자 (or 숫자를 담고있는 변
수)인 경우 산술 연산을 수행하고 하나라도 문자인 경우 숫자
를 문자형으로 변환(Type Casting)한 후 “결합”된다
x = 10;
y = x + 10;
!
x = ’10’;
y = x + 10;
135. 명시적인 형변환 방법
y 의 값은 문자열 ‘1010’ 이다.!
값을 문자열로 변경하는 String() 함수를 이용하여!
x 값을 문자열로 변경한 후 + 로 우변과 결합한다.
y의 값은 20이다.!
문자 ’10’을 담고 있는 변수 x 에 !
+ (양수) 연산자를 이용하여 숫자로!
변환하는 형변환을 강제로 발생시킨 후!
우변과 사칙연산이 수행된다.
y의 값은 20이다.!
+x 방식과 동일하나 보다 명시적인 숫자 형변환 함수를 이용했다.
x = 10;
y = String(x) + 10;
!
x = ’10’;
y = +x + 10;
y = Number(x) + 10;
136. 대입 연산자의 확장
+ - * / %
=
+= -= *= /= %=
x = x + 1;
x += 1;
137. 첫번째 실습. 유효범위의 동작을!
눈으로 확인해 봅시다!
sample.js 에 아래 내용을 입력합니다
151. 조건문 작성시 주의사항
조건의 시작은 명확한 명제를!
도출해 내는 것입니다.
그러므로 잘못된 명제는 잘못된!
조건문을 만듭니다.
152. 모호함을 명확한 명제로 전환
기술자: “이 댐의 시스템은 비상 버튼을 누를 때 또는 위험 수위
를 넘을 때 사이렌이 울리게 되어있습니다.”!
질문자: “비상 버튼을 누르고 동시에 위험 수위를 넘었을 때에도!
사이렌이 울리나요?”!
기술자: “물론 사이렌은 울립니다.”!
참조) 프로그래머, 수학으로 생각하라. by 유키히로시- 프리렉
153. 조건에 따른 흐름 종류
1
2
3
C
Yes
1
32 C
4
5
Yes No
1
V
C1 C2 C3 CD
2
6
3 4 5
if if else switch
조건(C)이 맞으면 2를 수행 조건이 맞으면 2를 수행, 조건이 틀리면 3을 수행 조건이 C1이면 2를, C2면 3을, C3면 4를!
모두 아니면 5를 수행
154. 조건에 따른 흐름 반복
1
2
3
C
No
Yes
1
2
3
C
No
Yes
1
2
3
C
No
Yes
for while do while
조건(C)이 맞는 동안 2를 수행 조건이 맞는 동안 2를 수행 2를 수행한 후 조건이 맞으면 다시 2를 수행
155. 비가오고 있나요?
출근 준비 !
!
if (비가 오는가) {!
우산을 챙긴다!
}!
!
출근
1
2
3
C
Yes
156. 오늘 기온이 몇도인가요?
1
32 C
4
5
Yes No
출근 준비 !
!
if (오늘 기온) { !
두꺼운 옷 입기!
} else {!
앏은 옷 입기!
}!
!
출근
157. 내가 좋아하는 영화는?
switch (영화) {!
case ‘그래비티’:!
끝내줘!!
case ‘죽은시인의사회’:!
감동이야!!
case ‘반지의제왕’:!
말이 필요없지!!
default:!
싫어!!
}
1
V
C1 C2 C3 C4
2
6
3 4 5
164. 1부터 100까지 모든 정수의 합을 구하시오
반복문을 사용하여 1씩 증가시키며 !
모든 정수의 합을 구하는 프로그램
165. 1부터 100까지 모든 정수의 합을 구하시오
시작 값과 마지막 값을 변수로 !
분리하여 반복 구문에서 제외,!
코드의 가독성과 의도를 명확히 함
166. 1부터 100까지 모든 정수의 합을 구하시오
정수의 합을 구하는 코드를 함수로!
분리함으로서 필요할 때 마다 !
호출하여 사용할 수 있도록 함
167. 1부터 100까지 모든 정수의 합을 구하시오
반복문을 제거하는 수식을 통해!
마지막 정수의 수 만큼 반복하던!
방식에서 한번의 계산으로 값을!
얻을 수 있도록 개선 “가우스의 덧셈”
168. 프로그래머의 생각 흐름이 코드로 표현된 것.
그것을 “알고리즘”이라 한다. 빠른 속도,
작은 크기 등의 목표를 이루기위해 알고리즘
을 개선할 수 있으며 이를 위해 다양한 분야
의 지식이 필요합니다.
비효율적으로 작성된 코드를 정리하여!
반복된 코드를 줄이고 재사용성 높은!
코드를 작성하는 노력이 필요합니다
169. Javascript 프로그래밍이란?
1. Javascript 는 HTML을 다루기 위해 만들어진 언어!
2. 웹 UI를 다루는 작업이 주된 목적!
3. UI 는 HTML과 CSS로 이루어짐!
4. 데이타 처리를 위해 서버와 통신도 담당!
5. 현재는 다양한 분야로 영역을 확장 중
170. HTML은 무엇인가?
우리가 보는 모든 웹 페이지는 텍스트와 이미지와 같은 요소들로 이루
어져 있다. 각각의 요소는 디자이너들의 의도한 대로 표현된다.
171. HTML (Hyper Text Markup Language)은 정보, 의도, 표현 등
다양한 요구를 충족시키기 위해 개발된 언어이다.
HTML은 무엇인가?
173. 표현을 데이터와 분리하고 보다 유연하게 문서에 다양한 의도(디자인)
을 주입시키기 위해 개발된 것이 CSS라는 양식이다.
CSS는 무엇인가?
174. 표현을 데이터와 분리하고 보다 유연하게 문서에 다양한 의도(디자인)
을 주입시키기 위해 개발된 것이 CSS라는 양식이다.
CSS(Cascading Style Sheets)는 표현과 관련된 광범위한 요구사
항 달성을 위해 다음과 같은 형식을 지원한다.
컬러그라데이션
텍스트 스타일
트랜지션트랜스폼
레이아웃 폰트투명도
위치 미디어(출력장치)
애니메이션크기
CSS는 무엇인가?
175. 1. 사용자가 웹페이지를 마우스 클릭한다.!
2. 페이지의 배경색을 노란색으로 변경한다.
간단한 작업을 생각해 봅시다.
176. 1. 사용자가 웹페이지를 마우스 클릭한다.!
2. 페이지의 배경색을 노란색으로 변경한다.
간단한 작업을 생각해 봅시다.
177. 1. 사용자가 웹페이지를 마우스 클릭한다.!
2. 페이지의 배경색을 노란색으로 변경한다.
간단한 작업을 생각해 봅시다.
Javascript는 HTML과 CSS만으로 !
달성할 수 없는, 규정되어있지 않은 연출과 !
사용자와의 복잡한 상호작용 구현이 !
필요한 경우 사용된다.
178. 브라우저가 HTML을 다루는 방법!
잠깐! 브라우저가 뭔가요?!
조금 개발자스러운 답변을 원합니다.
브라우저란 HTML 문서를 읽고 해석한 후 !
해석한 결과를 바탕으로 스타일을 적용하고!
그 결과를 사용자에게 표시해주는 소프트웨어.!
*문서 해석과 스타일 적용은 문서의 내용이 변경될 때 마다!
반복적으로 일어나며 이 변경은 Javascript에 의해 !
빈번하게 발생할 수 있다.
179. 브라우저가 HTML을 다루는 방법!
읽기 결과 적용 표시
javascript
image
css
my.html DOM
1 2 3 4
DOM에 변화가 생기면 2~4 구간이 반복
읽고 분석한 결과를!
DOM 형태로 재구성
스타일 (CSS) 적용 화면에 최종 표시!
(랜더링)
변경
181. 브라우저가 HTML을 다루는 방법!
HTML 문서의 요소를 효과적으로!
다루기(찾기, 추가, 삭제, 수정)위하여 모든 요소를!
분리하고 상하관계를 설정한 후 배치한 구조
프로그래머들은 이런 구조를!
나무(Tree) 구조라 부른다.
DOM, 돔, Document Object Model 이란?
184. DOM을 조작하기 위해 제공되는 주요 기능들
document.getElementById
!
document.getElementsByName
!
document.getElementsByTagName
!
document.getElementsByClassName
!
document.querySelectorAll
지정한 ID를 가진 요소 찾기
지정한 이름을 가진 요소들 찾기
지정한 태그 이름을 가진 요소들 찾기
지정한 클래스 이름을 가진 요소들 찾기
지정한 CSS 셀렉터로 찾아지는 요소들 찾기
185. DOM을 다루기 위해 제공되는 기능 사용 예
html
head body
title
text
h1
text
p
text a
text
document
var eles = document.getElementsByTagName(‘h1’);
var eles = document.getElementsByTagName(‘a’);
*
186. CSS Selector 란?
CSS는 HTML의 요소에 스타일을 적용하기!
위한 목적으로 만들어 졌으며, CSS Selector는!
스타일이 적용될 대상을 결정하기 위해 제공된다.
CSS 선택자 (Selector)
선택된 대상들에 적용될 스타일
187. DOM vs. CSS Selector
html
head body
title
text
h1
text
p
text a
text
document
var eles = document.getElementsByTagName(‘h1’);
var eles = document.getElementsByTagName(‘a’);
*
h1 { … }
a { … }
188. DOM과 CSS Selector 모두 DOM 요소를!
탐색할 수 있으나 사용 목적은 완전히 다름!
!
DOM이 제공하는 기능은 요소의 검색, 생성,
수정, 삭제와 같은 광범위한 목적을 가지고 있다!
!
CSS Selector는 스타일을 적용할 대상을!
선택하기 위해서만 제공된다.
DOM vs. CSS Selector
