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