ݺߣ

ݺߣShare a Scribd company logo

Java script 신입교육

•Download as PPTX, PDF•
•
준성 황
준성 황
1 of 29
Downloaded 12 times
15기 황준성 SCG 2014-02-17 louche490@scg.skku.ac.kr 이 문서는 나눔글꼴로 작성되었습니다. 설치하기 시스템 컨설턴트 그룹 신입교육 JavaScript
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‚로!!
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 JavaScript Setting
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

More Related Content

Java script 신입교육

  • 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 객체
  • 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
  • 8. • 어디에 있든 상관 없다!! • 요즘대세는아래쪽에다해주는것. 1 기본 구성 2-1 HTML 파일 만들기 <실행 화면> F12 누르면 볼 수 있는 창 ‘Console’ 에서 오류 확인!!
  • 9. 1 기본 구성 2-1 My First JavaScript <Alert!> 경고창 명령어 • ‚Hello World!‛ • <script></script>
  • 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!
  • 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 이벤트를 추가핛 수 있다.
  • 24. 1 function 6-1 함수 • 자료형을 지정 안 해줘도 되기 때문에 function으로 시작. • 주로 이벤트에 덧붙여져서 시작됨. ( ~ onclick = ‚myFunction()‛ ~ 이런 식) 누르면 실행됨!!
  • 25. 1 Object 6-2 객체 • 자바스크립트의 거의 모든 것은 객체! • 객체는 Properties 와 Methods로 구성되어 있다! • 객체 지향 언어의 특성을 그대로 따른다! • 더 알고 싶다면, http://www.w3schools.com/js/js_objects.asp • 객체를 표현하는 ‘변 수’ • 객체가 하는 ‘행동’
  • 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() 설명!