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

시스템 컨설턴트 그룹신입교육JavaScript 작성자 15기 황준성 소속팀 / 상위부서 SCG 작성년월일2014-02-17 E-maillouche490@scg.skku.ac.kr 이 문서는 나눔글꼴로 작성되었습니다. 설치하기

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

4 조건문, 반복문 1 JavaScript 란?? 1-1 설명 & 용도 1-2 Setting 4-1 조건문& 실습 4-2 반복문& 실습 2 JavaScript 연습 목차 5 DOM 7과제 6함수, 객체 2-1 HTML 파일 만들기 2-2 My First JavaScript!! 5-1 DOM이란? 5-2 JavaScript로? 7-1 게시판 글쓰기 7-2 회원가입 6-1 함수 6-2 객체 3 변수 3-1 var 3-2 var실습 시스템 컨설턴트 그룹 신입교육

Chapter 1 JavaScript 란?? 시스템 컨설턴트 그룹 신입교육

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

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

Chapter 2 JavaScript 연습 시스템 컨설턴트 그룹 신입교육

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

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

Chapter 3 변수 시스템 컨설턴트 그룹 신입교육

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

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

Chapter 4 조건문, 반복문 시스템 컨설턴트 그룹 신입교육

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

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

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

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

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

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

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

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

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

Chapter 6 함수, 객체 시스템 컨설턴트 그룹 신입교육

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

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

Chapter 7 과제 시스템 컨설턴트 그룹 신입교육

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

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

감사합니다. Q/A

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