Transcript 1 - 성균관대학교 정보통신대학 시스템 컨설턴트 그룹

시스템 컨설턴트 그룹
신입교육
JavaScript
15기 황준성
SCG
2014-02-17
[email protected]
이 문서는 나눔글꼴로 작성되었습니다. 설치하기
Profile
1 그는 누구인가?
• 1991년 6월 10일생.
• 현재 경기도 안양시 거주.
• 성균관대학교 정보통신대학 컴퓨터공학과 10학번.
• System Consultant Group 15기.
• SCG에서 장난 담당.
황준성
2 Contact
• 010-6604-5610
• 공적인일은[email protected]
• 사적인일은[email protected]혹은카카오ID “ louche49 “ 로!!
목차
1 JavaScript 란??
4 조건문, 반복문
1-1 설명 & 용도
4-1 조건문 & 실습
1-2 Setting
4-2 반복문 & 실습
2 JavaScript 연습
5 DOM
2-1 HTML 파일 만들기
5-1 DOM이란?
2-2 My First JavaScript!!
5-2 JavaScript로?
3 변수
6 함수, 객체
3-1 var
6-1 함수
3-2 var 실습
6-2 객체
7 과제
7-1 게시판 글쓰기
7-2 회원가입
JavaScript 란??
1-1
JavaScript?
1 무엇인가?
• 웹 브라우저에서 많이 사용하는 프로그래밍 언어.
• 웹 프로그래밍에서의 기능 담당.
2 어디에 쓰이나?
지도 API 활용
안드로이드
프로그래밍
TV 앱 개발
예외 처리!!!
1-2
JavaScript
Setting
1 Sublime Text 2
• http://www.sublimetext.com/2
• 종합적 텍스트 에디터, 컴파일 X
2 Screen Shots
JavaScript 연습
2-1
HTML 파일 만들기
1 기본 구성
‘Console’ 에서
오류 확인!!
• 어디에 있든 상관 없다!!
• 요즘대세는아래쪽에다해주는것.
F12 누르면
볼 수 있는 창
<실행 화면>
2-1
My First JavaScript
1 기본 구성
• “Hello World!”
• <script></script>
경고창 명령어
<Alert!>
변수
3-1
var
1 var?
• 자바스크립트에서 정보를 담는 Data Type.
• 자바스크립트의 모든 변수는 var로 표현 가능.
• 변수는 컵과 같다!!
2 Data Type
• 숫자, 문자열, bool 등.
• String(), Number(), parseInt(), parseFloat() 함수를이용하여형변환가능하다.
• 다른 언어와의 가장 큰 차이점은 var만 써도 된다는 것!
3-2
var 실습
1 따라해보세요!
• 문자열은 작은 따옴표, 큰 따옴표 구분 X.
• 아무것도 안 써주면 undefined!
조건문, 반복문
4-1
조건문 & 실습
1 조건문 if, else if, else
• 기본적인 사용법은 C와 같다!
4-1
조건문 & 실습
여기서 잠깐!
document??
• 문서 객체
• 오른쪽과 같이 html 문서 안의 내용을 바꿀 수 있다.
• 더 알고 싶다면,
http://www.w3schools.com/js/js_htmldom_doc
ument.asp
4-1
조건문 & 실습
2 조건문 swtich
• 기본적인 사용법은 C와 같다!
Sublime text 2 부분
4-2
반복문 & 실습
1 for 문
• 기본 형태
4-2
반복문 & 실습
1 for in 문
• for in 으로도 쓸 수 있습니다!
4-2
반복문 & 실습
2 while문
• 다른 언어와 같다!
DOM
5-1
DOM이란?
1 정의
• 문서의 구성, 구조, 스타일에 동적으로 접근, 수정하도록 해주는 platform.
• 웹 페이지가 로딩될 때, 브라우저가 그 페이지의 DOM을 생성한다.
• Document Object Model의 약자.
• HTML DOM은 객체의 tree로 구성되어 있다.
• 더 자세한 설명은, http://www.w3schools.com/js/js_htmldom.asp
5-2
JavaScript로?
2 JavaScript로 해줄 수 있는 것
• 웹 페이지의 HTML 요소(elements)를 바꿀 수 있다.
• 웹 페이지의 HTML 특성(attributes)을 바꿀 수 있다.
• 웹 페이지의 CSS 스타일을 바꿀 수 있다.
• 웹 페이지의 HTML 요소와 특성을 새롭게 추가하거나 제거할 수 있다.
• 웹 페이지의 모든 HTML 이벤트에 반응할 수 있다.
• 웹 페이지의 HTML 이벤트를 추가할 수 있다.
함수, 객체
6-1
함수
1 function
• 자료형을 지정 안 해줘도 되기 때문에 function으로 시작.
• 주로 이벤트에 덧붙여져서 시작됨. ( ~ onclick = “myFunction()” ~ 이런 식)
누르면 실행됨!!
6-2
객체
1 Object
• 자바스크립트의 거의 모든 것은 객체!
• 객체는 Properties 와 Methods로 구성되어 있다!
• 객체 지향 언어의 특성을 그대로 따른다!
• 더 알고 싶다면, http://www.w3schools.com/js/js_objects.asp
• 객체를 표현하는 ‘변
수’
• 객체가 하는 ‘행동’
과제
7-1
게시판 글쓰기
1 설명
Confirm() 설명!
isNaN() 설명!
• 더블체크 : “게시글을 등록하시겠습니까?” 라고 한번 더 묻는 창 띄우기.
• 엠티체크 : 게시글 제목이 빈칸일 때 “제목을 입력해 주세요!”라고 띄우기.
• 비밀번호 : 숫자 4~6글자만 되게 하기!
• isNaN() : 숫자 판별 boolean 함수!!
 자세한 설명은, http://www.w3schools.com/jsref/jsref_isnan.asp
7-2
회원가입
1 설명
• 더블체크, 엠티체크는 필수!!
• 아이디는 영문, 영문+숫자는 됨, 숫자만 있는 것은 안됨!!
• 비밀번호는 반드시 영문+숫자 조합으로!!
• 비밀번호, 비밀번호 확인은 같아야 됨!
• 핸드폰 번호는 숫자만!! ( 중간에 – 는 없는 걸로!!)
• 모든 조건이 완벽하면 “회원 가입이 완료 되었습니다!” 창 띄우기.
• 만족하지 못한 조건이 있으면 그 조건에 해당하는 메시지 띄우기!
 ex) “비밀번호가 바른 형태가 아닙니다.” or “빈칸이 있습니다!” 등등
isAlpha() 설명!
감사합니다.
Q/A