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