Upload
nia
View
151
Download
0
Embed Size (px)
DESCRIPTION
시스템 컨설턴트 그룹 신입교육 JavaScript. 작성자 15 기 황준성 소속팀 / 상위부서 SCG 작성년월일 2014-02-17 E-mail [email protected]. 이 문서는 나눔글꼴로 작성되었습니다 . 설치하기. Profile. 1 그는 누구인가 ?. 1991 년 6 월 10 일생 . 현재 경기도 안양시 거주 . 성균관대학교 정보통신대학 컴퓨터공학과 10 학번 . System Consultant Group 15 기 . SCG 에서 장난 담당. 황준성. - PowerPoint PPT Presentation
Citation preview
작성자 15 기 황준성
소속팀 / 상위부서 SCG작성년월일 2014-02-17E-mail [email protected]
이 문서는 나눔글꼴로 작성되었습니다 . 설치하기
시스템 컨설턴트 그룹신입교육JavaScript
1 그는 누구인가 ?
• 1991 년 6 월 10 일생 .• 현재 경기도 안양시 거주 .• 성균관대학교 정보통신대학 컴퓨터공학과 10 학번 .• System Consultant Group 15 기 .• SCG 에서 장난 담당 .
2 Contact
Profile
2
황준성• 010-6604-5610• 공적인 일은 [email protected]• 사적인 일은 [email protected] 혹은 카카오 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