웹 개발 스터디 02 - javascript, bootstrap
- 1. Web Study 02 JavaScript, Bootstrap Copyright© 2015 by YoWu. All rights reserved. http://luckyyowu.tistory.com ([email protected])
- 2. JavaScript ? • Client-side Script Language • HTML, CSS와 함께 클라이언트 웹을 구성하는 요소 • Java랑은 연관 없음 (햄이랑 햄스터랑 다르고 인도랑 인도네시아랑 다르잖아?)
- 3. JavaScript DataType DataType Ex 정수형 1, 123, -1284798 실수형 3.14, 0.23434E+2 논리형 True or False 문자형 "Hello World" 특수문자 n, t, , ', " NULL NULL
- 4. JavaScript 표기법 • JavaScript에서 변수나 메서드는 주로 카멜 표기법을 따름 • getElementByName, showMeTheMoney • 그 외 다른 표기법 • 스네이크 표기법 (단어 + "_" + 단어) • background_color, type_name, c_study • 헝가리안 표기법 (prefix + name) • nNum (Number + name), iNum(int +), bCol (bool +) • 파스칼 표기법 (단어조합) • GameEngine, BaseData, ShowMeTheMoney
- 5. JavaScript 변수 • 변수를 미리 선언할 필요 없음 • 굳이 명시한다면 var 예약어 사용 • var myName = "Yongwoo" • var stdNum = 201021395
- 6. JavaScript 연산자 • 산술 연산자 : +, -, *, /, % • 관계 연산자 : ==, !=, >, >=, <, <= • 논리 연산자 : !, &&, || • 증감 연산자 : ++, -- • 대입 연산자 : =, +=, -=, /=, *=
- 7. JavaScript 예제 - 1 (write) ~/public_html/에 생성
- 8. JavaScript 예제 - 2 (alert) ~/public_html/에 생성
- 9. JavaScript 함수 function name(argv1, argv2, argv3) { ….. }
- 10. JavaScript 예제 - 3 (Event)
- 11. JavaScript Event Event Description onClick 클릭 하였을 때 Onfocus 입력양식 필드를 선택 하였을 때 Onmouseover 마우스를 해당 객체에 올려 놨을 때 Onload 문서가 모두 로딩 되었을 때 onsubmit 폼을 전송할 때 Onkeydown 키를 입력하였을 때 Onblur 포커스가 다른 곳으로 이동 했을 때
- 13. JavaScript 예제 - 4
- 14. JavaScript 제어문(switch) switch(수식) { case val1: …..; break; case val2: …..; break; default: …..; }
- 15. JavaScript 실습 - 1 • 예제 - 4 를 switch 문으로 치환
- 17. JavaScript 상호작용
- 18. JavaScript 분리 JavaScript 파일은 *.js 확장자를 가짐 myAlert.js
- 19. JavaScript 실습 - 2 • input 태그를 사용해 사용자로부터 정수 값(num)을 입력받아 2단~num단까지의 구구단을 출력 • 3의 배수단은 출력하지 않음 • js, html 분리
- 20. Bootstrap ? • Twitter에서 만든 HTML5, CSS3, JS 기반의 웹 디자인 프레임워크 • 크로스 브라우징 지원 (2.x IE 7이상, 3.x IE 8 이상) • 멀티 디바이스 해상도 최적화 : 반응형 → 추가 모바일 페이지 제작 없이 모바일 환경 지원 가능
- 21. Bootstrap
- 22. Bootstrap 3.x 설치 • http://bootstrapk.com • http://jquery.com
- 23. Bootstrap 예제 - 1 • ~/public_html/boot/index.html
- 24. Bootstrap Grid Class container row col col row container col col row
- 25. Bootstrap Grid Class - 1 • 가로 분할(한 줄) : row • 세로 분할(한 칸) • col-xs- : 매우 작은 화면 ( < 768px / 모바일) • col-sm- : 그냥 작은 화면 ( >= 768px / 태블릿) • col-md- : 일반적인 화면 ( >= 992px / 데스크탑) • col-lg- : 큰 화면 ( >= 1200px / 데스크탑) • co l
- 26. Bootstrap Grid Class - 2 • col 클래스와 혼합, 혹은 독립적으로 사용하여 특정 해상도에서 내용을 숨길 수 있다. • co l
- 27. Bootstrap Table Class • 기본 클래스(table tag) : table • 선있는 테이블 : table-bordered • 행 hover 효과 : table-hover • 행 색상 효과(tr tag) : active, success, warning, danger • 작은 기기에서 스크롤 주기(div) : table class 상위에 table-responsive • co l
- 28. Bootstrap Form Class • 기본 상위 클래스(div tag) : form-group • 기본 클래스(input tag) : form-control • 폼 클래스는 종류와 적용법이 복잡함 : http://bootstrapk.com/BS3/css#forms
- 29. Bootstrap Button Class • 기본 클래스(input, button tag) : btn, btn-default • 색상 강조 : btn-primary, btn-success, btn-danger 등 • 버튼 크기 : btn-lg, btn-sm, btn-xs • width 100% : btn-block
- 30. Bootstrap Image Class • 기본 반응형 클래스(img tag) : img-responsive • 모양 효과 : img-rounded, img-circle, img-thumbnail
- 31. Bootstrap Alert Class • 기본 클래스(div) : alert • 색상 효과(div) : alert-info, alert-success, alert-warning, alert-danger
- 32. Bootstrap Panel Class • 기본 클래스(div) : panel panel-default • 제목 주기(panel 하위) : panel-heading • 본문(panel 하위) : panel-body • 하단 주기(panel 하위, panel-body 밑) : panel-footer • 색상 주기(panel-default 대체) : panel-primary, panel-info 등
- 33. Bootstrap Etc Class • http://bootstrapk.com 레퍼런스 참고
- 34. 과제 • 앞의 실습 문제 • 사칙연산 기능을 가지는 사용자 정의 함수를 만들어 계산기 자바스크립트 작성
- 35. 과제 • 저번 과제의 회원가입 페이지를 Bootstrap을 사용하여 꾸미기 • 약관, 약관동의 유/무(radio), 아이디, 비밀번호, 비밀번호 확인, 최소 1개의 select 태그, 최소 1개의 textarea 태그가 포함되어야함 • 데스크탑, 모바일 해상도 모두 지원해야됨 • ex) http://uyu423.iptime.org:8080/book/register.jsp • 그렇다고 위에꺼 똑같이 베끼면 죽는다.
- 36. 과제 • 다음과 같은 화면구성을 가지는 페이지를 Bootstrap을 활용해 작성 • 좌)데스크탑 화면 우)모바일 화면 • 사진 첨부의 미리보기 기능은 구현 하지 않아도 됨.