작성자 15 기 황준성

소속팀 / 상위부서 SCG작성년월일 2014-02-17E-mail louche490@scg.skku.ac.kr

이 문서는 나눔글꼴로 작성되었습니다 . 설치하기

시스템 컨설턴트 그룹신입교육JavaScript

1 그는 누구인가 ?

• 1991 년 6 월 10 일생 .• 현재 경기도 안양시 거주 .• 성균관대학교 정보통신대학 컴퓨터공학과 10 학번 .• System Consultant Group 15 기 .• SCG 에서 장난 담당 .

2 Contact

Profile

2

황준성• 010-6604-5610• 공적인 일은 louche490@scg.skku.ac.kr• 사적인 일은 louche490@gmail.com 혹은 카카오 ID “ louche49 “ 로 !!

1-1 설명 & 용도

1-2 Setting

1 JavaScript 란 ??

2 JavaScript 연습

2-1 HTML 파일 만들기

2-2 My First JavaScript!!

3 변수

3-1 var3-2 var 실습

4 조건문 , 반복문

4-1 조건문 & 실습

4-2 반복문 & 실습

5 DOM

5-1 DOM 이란 ?5-2 JavaScript 로 ?

시스템 컨설턴트 그룹 신입교육

목차

7 과제

7-1 게시판 글쓰기

7-2 회원가입

6 함수 , 객체

6-1 함수

6-2 객체

Chapter 1

시스템 컨설턴트 그룹 신입교육

JavaScript 란 ??

1 무엇인가 ?

• 웹 브라우저에서 많이 사용하는 프로그래밍 언어 .• 웹 프로그래밍에서의 기능 담당 .

2 어디에 쓰이나 ?

1-1

5

JavaScript?

지도 API 활용

안드로이드 프로그래밍

TV 앱 개발

예외 처리 !!!

1 Sublime Text 2

• http://www.sublimetext.com/2• 종합적 텍스트 에디터 , 컴파일 X

2 Screen Shots

1-2

6

JavaScriptSetting

Chapter 2

시스템 컨설턴트 그룹 신입교육

JavaScript 연습

• 어디에 있든 상관 없다 !!• 요즘 대세는 아래 쪽에다 해주는 것 .

1 기본 구성

2-1

8

HTML 파일 만들기

< 실행 화면 >

F12 누르면볼 수 있는 창

‘Console’ 에서 오류 확인 !!

1 기본 구성

2-1

9

My First JavaScript

<Alert!>

경고창 명령어

• “Hello World!”• <script></script>

Chapter 3

시스템 컨설턴트 그룹 신입교육

변수

1 var?

3-1

11

var• 자바스크립트에서 정보를 담는 Data Type.• 자바스크립트의 모든 변수는 var 로 표현 가능 .• 변수는 컵과 같다 !!

2 Data Type

• 숫자 , 문자열 , bool 등 .• String(), Number(), parseInt(), parseFloat() 함수를 이용하여 형 변환 가능하다 .• 다른 언어와의 가장 큰 차이점은 var 만 써도 된다는 것 !

1 따라해보세요 !

3-2

12

var 실습

• 문자열은 작은 따옴표 , 큰 따옴표 구분 X.• 아무것도 안 써주면 undefined!

Chapter 4

시스템 컨설턴트 그룹 신입교육

조건문 , 반복문

1 조건문 if, else if, else

4-1

14

조건문 & 실습• 기본적인 사용법은 C 와 같다 !

여기서 잠깐 !

4-1

15

조건문 & 실습

document??• 문서 객체

• 오른쪽과 같이 html 문서 안의 내용을 바꿀 수

있다 .• 더 알고 싶다면 , http://www.w3schools.com/js/js_htmldom_document.asp

2 조건문 swtich

4-1

16

조건문 & 실습• 기본적인 사용법은 C 와 같다 !

Sublime text 2 부분

1 for 문

4-2

17

반복문 & 실습• 기본 형태

1 for in 문

4-2

18

반복문 & 실습• for in 으로도 쓸 수 있습니다 !

2 while 문

4-2

19

반복문 & 실습• 다른 언어와 같다 !

Chapter 5

시스템 컨설턴트 그룹 신입교육

DOM

1 정의

5-1

21

DOM 이란 ?• 문서의 구성 , 구조 , 스타일에 동적으로 접근 , 수정하도록 해주는

platform.• 웹 페이지가 로딩될 때 , 브라우저가 그 페이지의 DOM 을 생성한다 .• Document Object Model 의 약자 .• HTML DOM 은 객체의 tree 로 구성되어 있다 .

• 더 자세한 설명은 , http://www.w3schools.com/js/js_htmldom.asp

2 JavaScript 로 해줄 수 있는 것

5-2

22

JavaScript 로 ?

• 웹 페이지의 HTML 요소 (elements) 를 바꿀 수 있다 .• 웹 페이지의 HTML 특성 (attributes) 을 바꿀 수 있다 .• 웹 페이지의 CSS 스타일을 바꿀 수 있다 .• 웹 페이지의 HTML 요소와 특성을 새롭게 추가하거나 제거할 수

있다 .• 웹 페이지의 모든 HTML 이벤트에 반응할 수 있다 .• 웹 페이지의 HTML 이벤트를 추가할 수 있다 .

Chapter 6

시스템 컨설턴트 그룹 신입교육

함수 , 객체

1 function

6-1

24

함수• 자료형을 지정 안 해줘도 되기 때문에 function 으로 시작 .• 주로 이벤트에 덧붙여져서 시작됨 . ( ~ onclick = “myFunction()” ~ 이런 식 )

누르면 실행됨 !!

1 Object

6-2

25

객체• 자바스크립트의 거의 모든 것은 객체 !• 객체는 Properties 와 Methods 로 구성되어 있다 !• 객체 지향 언어의 특성을 그대로 따른다 !• 더 알고 싶다면 , http://www.w3schools.com/js/js_objects.asp

• 객체를 표현하는 ‘

변수’

• 객체가 하는 ‘행동’

Chapter 7

시스템 컨설턴트 그룹 신입교육

과제

7-1

27

게시판 글쓰기 1 설명

• 더블체크 : “ 게시글을 등록하시겠습니까 ?” 라고 한번 더 묻는 창

띄우기 .• 엠티체크 : 게시글 제목이 빈칸일 때 “제목을 입력해 주세요 !” 라고

띄우기 .• 비밀번호 : 숫자 4~6 글자만 되게 하기 !• isNaN() : 숫자 판별 boolean 함수 !! 자세한 설명은 , http://www.w3schools.com/jsref/jsref_isnan.asp

Confirm() 설명 !isNaN() 설명 !

1 설명

7-2

28

회원가입

• 더블체크 , 엠티체크는 필수 !!• 아이디는 영문 , 영문 + 숫자는 됨 , 숫자만 있는 것은 안됨 !!• 비밀번호는 반드시 영문 + 숫자 조합으로 !!• 비밀번호 , 비밀번호 확인은 같아야 됨 !• 핸드폰 번호는 숫자만 !! ( 중간에 – 는 없는 걸로 !!)• 모든 조건이 완벽하면 “회원 가입이 완료 되었습니다 !” 창 띄우기 .• 만족하지 못한 조건이 있으면 그 조건에 해당하는 메시지 띄우기 ! ex) “ 비밀번호가 바른 형태가 아닙니다 .” or “ 빈칸이 있습니다 !” 등등

isAlpha() 설명 !

감사합니다 .

Q/A