자바스크립트 및 제이쿼리 정리

---

자바스크립트

---

---

html5+css3 : 화면구현(레이아웃)
javascript+jquery +ajax: UI구현

javascript>jquery >node.js
_______________________________________
ex01-
document= 바디와 같은위치
console.log(``) - 검사 부분에 서 확인 가능(프로그램 과정확인용)
alert-팝업창(확인버튼만)
confirm-팝업창(확인과 취소)
prompt-팝업창(입력받을수 있는 창)
location.href="주소"- a테그를 사용하지 않고 다른페이지로 이동



ex07-

let=> 블럭안에서만 사용하려는 변수 사용시
(블럭안에서는 var보다 더욱 효율적이나 많은 효과는 없지만 사용함)

in:for(let i in array)와 for(var i=0; i<5; i++)는 같은거임

``=>변수랑 글이랑 같으 사용하고싶을 때
$=>``안에서  변수 자체를 나타낼때

of:for(let item of array)는 자바의 개선된 포문과 똑같음


ex09-
무명함수 : var printMsg=function(msg){} 이런식으로 함수의 이름을 주지않고 바로 변수 에 집어넣고 사용할 수 있어 만약 return 값이 있을경우 바로 넣어 사용가능
 ex) parintMsg;

htmldom
-htmldom

Ex10- 아이디 패스워드창

form 
-action=> submit 눌럿을때 가는방향
-method= "get/post"
get : 아디 /비번 url에 뜸
post : 아디 /비번 url에 안뜸

-action : 이동 경로

window.onload: 화면 열려지자마자 를 나타내는거임

아이디 비번 쓰고 submit눌럿을때 아디 비번이 alert로 띄우기
----------------

(Ex11)- 할일 목록추가
innerHTML- 테그를 추가한느것

이벤트 방식
1.

<input type=button onclick=ff()>

2.aa.onclick=function(){
                }                   =>한 이벤트밖에 못건다

3.
function ff(){

}
aa.addEventListener('click',ff);
aa.addEventListener('focus',ff);       =>(on쓰지않고 뒤에 function이름씀)
  다양한 종류의 이벤트를 걸수있다

event.target=>현재 타켓의000
--------------------12.06-------------------------------------------
(ex12,13,14)-- 윈도우창 열기(팝업창, 주소검색창등등에 사용)window.open(경로,이름,
(Ex14,15,16)- 시간 메소드 
(14)- 3초후에 팝업창 닫히기속성 setTimeout (시간의 흐름을 사용)
(15)- setInterval메소드 (현재시간을 가져오는것)
(16)-clearTimeout:setInterval메소드 멈추기
(17)-location= 페이지 이동(assign=>뒤로가기 가능 / replace=>뒤로가기 불가능)
(ex18,19) - 객체만들어사용

 

---

제이쿼리

---

---

 

 

 

 

jquery -오픈소스를 기반으로한 자바스크립 라이브러리(<프레임워크)
(웹에서 동적인 효과 원하는것)

jquery.com- 라이브러리 다운(어떤 브라우저에서도 사용가능/css 모두됨)
->down(주황박스)->Download the map file for jQuery 3.3.1-다운

https://code.jquery.com/jquery-3.3.1.min.js (문서의 경로 쓰지않고) 이값(사이트에서 제공하는 경로) 연결해서 가져다쓰기(script src안에)
=> 이버전이 안맞으면 라이브러리 사용이안된다.

홈페이지 상단u눌러서 찾아서 사용

code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">지우고
홈페이지 위에 theme에서 다운받아서 경로 지정해서사용

--------

----------------day1-------------------------------
Ex1
$=>jquery의 약자임

$(선택자)

시작때 $(document).ready(function(){})를 $(function(){})라고 줄일수있다

EX3-addClass
EX4-$("[id]").css("background-color", "#f78fbe");...
Ex5- 

=> 이버전이 안맞으면 라이브러리 사용이안된다.

Ex6-[html]=> innerHTML과 비슷한것
Ex07-img src 속성 변경 => [attr]

Ex08-login 창  
input text=>autocomplete=off하면 전에 썼던 아이디가 안뜬다.
focus-포커스가 가있을때  / blur 포커스 빠질때

이벤트 사용시 =>
$(선택자).on("이벤트",function(){})=>이벤트를 켯다가 껏다가 할수 있음.
$(선택자).이벤트(function(){})=> 이벤트 심어주는것.

Test1=>
----------------day2------------------------
http://www.openex.co.kr
jquery오픈다운받기 쉬운곳(plugin 소스)

인덱스빼고 / 인덱스에서 회원가입넘어가는것 

메뉴랑 슬라이드 붙이기

github- 나중에 따로 설명해줌

home페이지 작업
----------------day3--------------------------------------------------------------
<jquery를 이용하여 모바일 페이지 만들기>
  네이트브앱 - android, ios
  웹앱 - html5, css3...
v 모바일웹 - jquerymobile(ajax),...
  하이브리드앱(모바일웹,네이티브앱 두개의 장점을 이용/휴대폰안에있는 하드웨어기능,   권한은 제한)

data-....=>
(Ex01)
-script 링크등은 jquerymobile에서 가져옴
-navbar-위에 네비/
-ul: data-inset="true"- 묶어줌 ,data-role="listview"-리스트형식으로 나타남
-data-theme="a" 테마형테 a~e
-data-role="page","header","content","footer"
-data-add-back-btn="true" 이전페이지
-data-position=fixed 고정

(Ex02)
내용 검색기능

li : data-role="listdivider"  마치 나눈것처럼
ul : data-filter=true 목록에 필터처리하는것

(ex03)
버튼
data-icon: 버튼에 아이콘넣기(allow-1/check/refresh/search/info/alert/grid)
모바일전용이미지는 png밖에 안됨
data-inline="true" : 버튼이 안에 있는 내용에 딱맞게

아코디언메뉴

 

역사

..생략

...
(test1)-내소개앱
(EX04)-다이얼로그창 data-rel="dialog"=> 다이얼로그처럼띄우기
(Ex05)-select 복수선택=>multiple="multiple" data-native-menu="false"
(EX06)- 여러가지 기능


tomcat.apache.org-tomcat8다운(32-bit/64-bit Windows Service Installer (pgp, sha512))