* bootstrap
http://getbootstrap.com 에서 받을 수 있는 라이브러리. (프레임워크)
http://www.w3schools.com 에서 references 확인 가능
※★
data-toggle: bootstrap이 뭘 해야하는지 알려줌. (link의 a 태그 같은 역할)
(data-toggle="collapse" : collapse의 데이터를 가져오란 뜻)
data-target: bootstrap에 어떤 요소가 오픈될 건지 알려줌. (href 같은 역할)
(data-target="#demo" : id=demo의 요소를 출력한단 뜻) --- 대체로 toggle에 함께 있는 id를 가져옴
08. modal (팝업창)
: header(타이틀)-body(내용)-footer(닫기) 구성
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
//header
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div> --우측 상단 닫기 버튼 (X) -- × = 곱하기 표시 (X)
//footer
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div> --팝업 하단 닫기 버튼 (close)
+) ★ data-dismiss="modal" : 버튼 클릭 시 모달을 닫게 하는 기능 (js)
09. tooltip (hover 시 말풍선 생기는 이벤트)
10. toast (클릭 시 일정 시간 말풍선이 생겼다 사라지는 이벤트)
11. scrollspy (스크롤하며 섹션을 바꾸면 네비게이션이 반응하는 이벤트 +)네비게이션 누르면 섹션 넘어가기도 함)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
+) data-spy="scroll" : 스크롤로 특정 섹션에 도달 시, 그 섹션에 대한 네비게이션이 active(활성화)되는 기능 (js)
12. 필터 (jquery 필요)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
--input이 여러개일 때 구분을 위해 id 사용
<ul class="list-group" id="myList">
<li></li> (대충 이런게 여러개 있다고 치고)
</ul>
<script>
$(document).ready(function(){ --대기 상태
$("#myInput").on("keyup", function() {
--keyup: 키보드 눌렀다(down) 떼었을 때(up) 발생하는 이벤트 --- 즉 입력을 받을 때마다 그 값을 넘겨주게 됨
var value = $(this).val().toLowerCase(); --넘겨받은 값을 대소문자 구분없이 검색할 수 있게 toLowerCase 적용 후 value에 넣음
$("#myList li").filter(function() { --id=myList의 li태그에 대해 filter를 적용(검색 ㄱ)
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) value와 toLowerCase한 li태그 값이 일치하는 동안 값을 반환 (>-1인 이유)
});
});
});
</script>
13. 탭
<ul class="nav nav-tabs"> --네비게이션 탭
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li> --창 열었을 때 디폴트로 활성화되어있는 탭 (home)
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
</li>
</ul>
--data-toggle="tab" : 클릭 시 클릭한 탭은 active 다른 탭은 hidden되는 이벤트 실행 js
<div class="tab-content"> --컨텐츠 창
<div id="home" class="container tab-pane active"><br> --창 열었을 때 디폴트로 열릴 창 (active)
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div id="menu1" class="container tab-pane fade"><br> --디폴트로 닫혀있는 창 (fade)
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam</p>
</div>
</div>
position:absolute; bottom:15px;
*** 홈페이지 만들어보기
- dynamic web project 생성
- webcontent에 index.jsp 파일 생성 (필수! 프로젝트 실행 시 디폴트로 실행되는 파일임!) (주의! meta-inf, web-inf에 저장하는거 아님)
- (always use this~ 체크해서 계속 tomcat 서버 사용할 수 있게 하기)
-어떤 버튼을 누르든 nav, footer부분을 고정시킬 것
------------> index 페이지에서 공통적으로 사용되는 부분을 빼서 분리해놓고 파일마다 넣어만 주는거지
------------> header.jsp index.jsp footer.jsp 세 개로 분리해벌임
--- 분리할 때 굳이 <head> <body> 살려놓고 쇼 할 필요 없이 뚝뚝 잘라서 따로 저장해놓고 필요하다면 필요한 위치에 <%@ include file="header.jsp" %> 넣으면 하나처럼 연결되어 실행됨
--여기서 footer 페이지 가장 아래에 고정시키는 방법.. 그리고 양 사이드바도 그 자리에 고정시키는 방법 함 알아보자..
-다 만들었고 이제 이걸 배포하고 싶다면
프로젝트 누르고 export-war file +)아래 체크박스 두개 다 체크
- 누가 배포한걸 가져오고 싶으면
project explorer 뷰에서 오른쪽 누르고 import-war file 파일 고르고 끗
---서버에서 실행해보고 싶다면
E:\Apache Software Foundation\Tomcat 9.0\webapps\ROOT 여기에 index.jsp 포함.. war 내부 파일을 다 가져옴
***Javascript
: 이벤트, 팝업, 유효성 검사 --- 웹 개발환경에서 사용
* 사용 형식
1. <SCRIPT>....</SCRIPT> --자바스크립트 사용할 거라고 선언하는 거지...
2. <script type="text/javascript">....</script>
3. <script language="javascript">....</script>
* 주석
1. 단일행 주석 : //
2. 다중행 주석 : /* */ 단축키: 블록 잡은 후 ctrl+shift+/
* 텍스트 출력
- document.write("it's the first javascript i made") ; -- document : 현재 문서 / .write() : 출력 메소드
---> ; 안 찍어도, ' '로 써도 실행 잘 됨.. 문법이 느슨한 편
---> 줄바꿈 기능 없으니까 <br> 같은 걸로 갈라줘야 하는데, 문장(따옴표) 안에 써야 함
---> document.write("it's the first javascript i made <br>") ;
- document.write("it's the first javascript i made2 <br>",' last my javascript'+"<br>") ;
---> " " + " " , ' ' 이런 식으로 문장끼리 붙일 수 있고, 따옴표 혼용도 가능
---> 단, 내장 객체, 메소드는 소문자로만 표기 (대문자면 다른 객체 취급하니까 반드시 제대로 작성!)
* 내장 객체
window (최상위 객체- 생략 가능) 이하 5대천왕
document location history screen navigator
forms images etc. <-document 따까리들 (객체 불러올 때 document.form () 이런 식으로 사용)
+)
button, submit, reset, radio, checkbox, select, text, password, textarea, hiddenq
※ 원칙적으로 window.~~.~~ 이렇게.. window를 처음에 써줘야 하지만 최상위 객체라... 생략 가능하니 안 써두 댐
* 출력
- 일반 출력 : document.write(" "); --브라우저에 출력
- 콘솔창 출력 : consol.log(' '); --콘솔창에 출력
- 팝업창 : alert(" "); --메시지 박스에 출력
- 확인창 : confirm(" "); --중요한 결정을 정말 승인할건지 팝업으로 물어봄 -> 확인 시 true, 취소 시 false 반환
* 변수
: 메모리 상에 데이터를 저장하는 기억공간 (stack)
: 선언 시 데이터에 따라 자료형을 구분해 표기-선언-정의해주지 않아도 됨. 그냥 변수라고만 표기함
var 변수명=값(데이터); <--자료형 없이 변수라고 뭉뚱그려 정의
- 숫자 데이터
var num=10; <-- 정수형 변수
var pi=3.14; <-- 실수형 변수
document.write('num='+num+"<br>pi="+pi+'<br>'); <--변수엔 따옴표 안 씀... 기본임
document.write(typeof(pi)); <-- number 반환
- 문자 데이터
var str1='java';
var str2="script"; <--따옴표 아무거나 아무튼 문자형 변수
document.write(typeof(str1)); <--string 반환
- 논리 데이터
var b1=true;
var b2=false;
document.write(typeof(str1)); <-- boolean 반환
- null 데이터
var str=null;
document.write(typeof(str)); <-- object 반환
* 메소드
- typeof() : 데이터의 자료형을 반환하는 함수
- prompt() : 사용자에게 문자열을 입력받는 메시지 박스 <--반환받는 변수는 string형
ex. prompt("1. 텍스트 박스 상단에 위치할 문장", "2. 텍스트 박스 안에 자동 저장되는 서식");
+) string형으로 저장되지만 숫자일 경우엔 연산자로 비교가 가능함! --> 변수형 정의를 안 하니까 이렇게도 되네요
* 연산자
- 산술 연산자 : +-*/%
var re1=30; <--number
var re2=20; <--number
var re3=re1+re2; <--number
document.write(re3); <-- [ 50 ] 출력
+) re3=re1/re2;
document.write(re3); <-- [ 1.5 ] 출력 (실수형/정수형 나뉘어있지 않아서 그냥 연산 결과 그대로 출력됨)
+) re3=re1%re2;
document.write(re3); <-- [ 10 ] 출력
- 문자열 연결 연산자 : +
var re1=30; <--number
var re2="명"; <--string
var re3=re1+re2; <--string
document.write(re3); <-- [ 30명 ] 출력
- 확장 대입 연산자 : += -= *= /= %=
var num1=10;
var num2=3;
num1+=num2 <-- num1=num1+num2
document.write(num1+"<br>") <-- 13 출력
- 증감 연산자 : ++ --
var num1=10;
후행연산: document.write(num1++); <-- 먼저 10이 출력되고, 그 후 +1 증가함
var num2=10;
선행연산: document.write(--num2); <-- 먼저 -1 감소하고, 그 후 9가 출력됨
- 비교 연산자 : >= <= > < == !=
: 문자열 순서도 비교 가능!
document.write('나비'<'호랑이') <-- true 반환 (ㄴ이 ㅎ보다 앞에 오니까 ㄴ<ㅎ)
document.write('나비'<'나방') <-- false 반환 (ㅏ이 ㅣ보다 앞에 오니까 ㅏ<ㅣ)
document.write(20=='20') <-- true 반환 (데이터형 다른건 신경 안 씀)
- 논리 연산자 : ! && ||
'수업 > 정리' 카테고리의 다른 글
| 220217 javascript 배열, string, Math, 이벤트 (0) | 2022.02.17 |
|---|---|
| 220216 javascript event, function, date (0) | 2022.02.16 |
| 220214 CSS_레이아웃, 배치 , 반응형 웹 , bootstrap (0) | 2022.02.14 |
| 220211 html_입력, 구조화 css_구조,선택자,속성 (0) | 2022.02.11 |
| 220210 HTML5 입력양식 태그 (0) | 2022.02.10 |