1. 15기 황준성
SCG
2014-02-17
louche490@scg.skku.ac.kr
이 문서는 나눔글꼴로 작성되었습니다. 설치하기
시스템 컨설턴트 그룹
신입교육
JavaScript

2. 1 그는 누구인가?
• 1991년 6월 10일생.
• 현재 경기도 안양시 거주.
• 성균관대학교 정보통싞대학 컴퓨터공학과 10학번.
• System Consultant Group 15기.
• SCG에서 장난 담당.
2 Contact
Profile
황준성
• 010-6604-5610
• 공적인일은louche490@scg.skku.ac.kr
• 사적인일은louche490@gmail.com혹은카카오ID ‚louche49‚로!!

3. 1-1 설명 & 용도
1-2 Setting
1 JavaScript 란??
2 JavaScript 연습
2-1 HTML 파일 만들기
2-2 My First JavaScript!!
3 변수
3-1 var
3-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 객체

4. JavaScript 란??

5. 1 무엇인가?
• 웹 브라우저에서 많이 사용하는 프로그래밍 언어.
• 웹 프로그래밍에서의 기능 담당.
2 어디에 쓰이나?
1-1
JavaScript?
지도 API 활용
안드로이드
프로그래밍
TV 앱 개발
예외 처리!!!

6. 1 Sublime Text 2
• http://www.sublimetext.com/2
• 종합적 텍스트 에디터, 컴파일 X
2 Screen Shots
1-2
JavaScript
Setting

7. JavaScript 연습

8. • 어디에 있든 상관 없다!!
• 요즘대세는아래쪽에다해주는것.
1 기본 구성
2-1
HTML 파일 만들기
<실행 화면>
F12 누르면
볼 수 있는 창
‘Console’ 에서
오류 확인!!

9. 1 기본 구성
2-1
My First JavaScript
<Alert!>
경고창 명령어
• ‚Hello World!‛
• <script></script>

10. 변수

11. 1 var?
3-1
var
• 자바스크립트에서 정보를 담는 Data Type.
• 자바스크립트의 모든 변수는 var로 표현 가능.
• 변수는 컵과 같다!!
2 Data Type
• 숫자, 문자열, bool 등.
• String(),Number(),parseInt(),parseFloat()함수를이용하여형변환가능하다.
• 다른 언어와의 가장 큰 차이점은 var만 써도 된다는 것!

12. 1 따라해보세요!
3-2
var 실습
• 문자열은 작은 따옴표, 큰 따옴표 구분 X.
• 아무것도 안 써주면 undefined!

13. 조건문, 반복문

14. 1 조건문 if, else if, else
4-1
조건문 & 실습
• 기본적인 사용법은 C와 같다!

15. 여기서 잠깐!
4-1
조건문 & 실습
document??
• 문서 객체
• 오른쪽과 같이 html 문서 안의 내용을 바꿀 수 있다.
• 더 알고 싶다
면, http://www.w3schools.com/js/js_htmldom_
document.asp

16. 2 조건문 swtich
4-1
조건문 & 실습
• 기본적인 사용법은 C와 같다!
Sublime text 2 부분

17. 1 for 문
4-2
반복문 & 실습
• 기본 형태

18. 1 for in 문
4-2
반복문 & 실습
• for in 으로도 쓸 수 있습니다!

19. 2 while문
4-2
반복문 & 실습
• 다른 언어와 같다!

20. DOM

21. 1 정의
5-1
DOM이란?
• 문서의 구성, 구조, 스타일에 동적으로 접근, 수정하도록 해주는 platform.
• 웹 페이지가 로딩될 때, 브라우저가 그 페이지의 DOM을 생성핚다.
• Document Object Model의 약자.
• HTML DOM은 객체의 tree로 구성되어 있다.
• 더 자세핚 설명은, http://www.w3schools.com/js/js_htmldom.asp

22. 2 JavaScript로 해줄 수 있는 것
5-2
JavaScript로?
• 웹 페이지의 HTML 요소(elements)를 바꿀 수 있다.
• 웹 페이지의 HTML 특성(attributes)을 바꿀 수 있다.
• 웹 페이지의 CSS 스타일을 바꿀 수 있다.
• 웹 페이지의 HTML 요소와 특성을 새롭게 추가하거나 제거핛 수 있다.
• 웹 페이지의 모든 HTML 이벤트에 반응핛 수 있다.
• 웹 페이지의 HTML 이벤트를 추가핛 수 있다.

23. 함수, 객체

24. 1 function
6-1
함수
• 자료형을 지정 안 해줘도 되기 때문에 function으로 시작.
• 주로 이벤트에 덧붙여져서 시작됨. ( ~ onclick = ‚myFunction()‛ ~ 이런 식)
누르면 실행됨!!

25. 1 Object
6-2
객체
• 자바스크립트의 거의 모든 것은 객체!
• 객체는 Properties 와 Methods로 구성되어 있다!
• 객체 지향 언어의 특성을 그대로 따른다!
• 더 알고 싶다면, http://www.w3schools.com/js/js_objects.asp
• 객체를 표현하는 ‘변
수’
• 객체가 하는 ‘행동’

26. 과제

27. 7-1
게시판 글쓰기 1 설명
• 더블체크 : ‚게시글을 등록하시겠습니까?‛ 라고 핚번 더 묻는 창 띄우기.
• 엠티체크 : 게시글 제목이 빈칸일 때 ‚제목을 입력해 주세요!‛라고 띄우기.
• 비밀번호 : 숫자 4~6글자만 되게 하기!
• isNaN() : 숫자 판별 boolean 함수!!
 자세핚 설명은, http://www.w3schools.com/jsref/jsref_isnan.asp
Confirm() 설명!
isNaN() 설명!

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

29. 감사합니다.
Q/A