학원/JavaScript_JQuery
-
JavaScript 정규표현식#2학원/JavaScript_JQuery 2022. 5. 6. 13:13
정방탐색 = 정규표현식으로 매칭한 결과 내용 중 지정한 글자를 제외한 나머지를 결과로 얻고자 할 때 -> 정규표현식 사용 후 (?= 제외하고 싶은 글자나 정규표현식) 을 추가로 작성 let a = 'http://www.naver.com' console.log('a.match(/.+:/g) :', a.match(/.+:/g)) // \n이 아닌 모든 글자가 1회이상 반복 + :로 끝남 console.log('a.match(/.+(?=:)/g) :',a.match(/.+(?=:)/g)) // : 을 결과에서 제외함 1. 긍정형 전방위 탐색 : (? 정규식 또는 글자와 매칭되는 패턴 검색 2. 부정형 전방위 탐색 : (?!=정규식 또는 글자) -> 정규식 또는 글자를 제외한 매칭 검색 전방위 탐색 : 검색하고..
-
JavaScript 정규표현식학원/JavaScript_JQuery 2022. 5. 4. 15:41
정규표현식 정규표현식은 문자 표현 공식, 문자 탐색 공식이라고 부르는 연산식과 같은 분류언어 문자 탐색과 스캔에 강력한 기능을 가지고 있어 여러 분야에 많이 사용된다. 자바스크립트 뿐만아니라 다른 언어에서도 정규표현식을 지원한다. (언어마다 문법이 다를 수 있음) 예시 let a = "while some may view this debt forgiveness ass a slap in the face to people who were resposible and paid off their student loans" a.match(/a/) // /와 / 사이에 찾고자 하는 글자를 추가 let b = a.match(/a/) //a변수 안에 string 내용 중 'a'를 검색 console.log(b) -> a ..
-
2022-01-03 JSTL, EL, 모델1 로그인 기능 구현학원/JavaScript_JQuery 2022. 1. 3. 15:51
JSTL 반복 실행문 : ForEach JSP 반복실행 EL과 JSTL을 이용한 반복 실행 ${movie} 각 배열의 인덱스와 갯수를 표시하기 indexcounttitle ${state.index}${state.count}${movie} vatStatus : 반복 실행의 상태 값을 갖고 있는 클래스 state : 현재 반복 순서 객체 변수 ${state.count} : 1부터 시작 ${state.index} : 0부터 시작 예제 pageContext에 저장된 movieList를 이용하여 반복 실행문을 제작. -> 영화제목으로 구성된 리스트 만들기 -> 조건문을 이용해 첫번째 목록은 빨간색, 나머지는 검은색으로 표시 ${ movie } ${ movie } ※${status.first} : 현재 루프가 처음..
-
21-12-10 jQuery effect, 롤링배너, 플러그인학원/JavaScript_JQuery 2021. 12. 10. 15:47
Effect show(), hide() .show() : 화면에 표시하는 함수 .hide() : 화면에 보이지 않게 감추는 함수 -> display 속성을 조절해 다른 태그를 밀어내며 표시되고, 빈공간 없이 제거된다. show나 hide와 함께 다른 동작을 추가하고싶다면 .show(function(){ }) : { }안에 동작을 추가한다. (hide도 똑같이 사용가능) 단, 익명함수를 넣으면 동작시간이 지연된다 동작 지연 시간 지정 : .show(밀리초) , .show(밀리초, function(){ }) (hide도 똑같이 적용) ※제이쿼리에서 if문, 조건문 사용 예시 $(function(){ $('button').click(function(){ let i = $(this).index(); if(i==..
-
21-12-09 jQuery와 DOM, 이벤트학원/JavaScript_JQuery 2021. 12. 9. 15:56
DOM은 자바스크립트보다 제이쿼리에서 훨씬 활용도가 높다 선택자 및 필터링으로서의 DOM 1.기본 필터링 메서드 -filter() 메서드 사용 두가지 형태 1) $(selector).filter(selector); Header-0 Header-1 Header-2 Header-3 Header-4 Header-5 2) $(selector).filter(function(index){}); Header-0 Header-1 Header-2 Header-3 Header-4 Header-5 2. 문서 객체 탐색 체이닝과 종료 문서 객체의 css 변경을 마친 경우 리턴되는 값이 다시 문서객체이므로 또 다른 탐색이나 css내용을 이어서 적용 시킬 수 있다. -> 아무거나 붙여쓰진 않고 선택자/필터링된 값과 연관이 있는 ..
-
21-12-08 자바스크립트 DOM#2, jQuery학원/JavaScript_JQuery 2021. 12. 8. 15:49
DOM 액션 이벤트가 발생하면 새로운 태그를 만들고 화면에 표시하는 함수 만들기 HEADER-1 HEADER-2 * textNode를 사용하지 않는 방법 ↓위 코드에서 추가되는 부분 문서 객체의 innerHTML을 이용하여 객체 생성하기 -클릭하면 리스트 ↓위 코드에서 추가되는 부분 문서 객체 가져오기 문서 객체 가져오기 2 -getElementsByTagName('tagName') : tagName과 일치하는 문서 객체를 배열로 가지고 온다 -getElementsByName('name') : 태그의 name 속성이 name과 일치하는 문서 객체를 배열로 가지고 온다 -getElementsByClassName('className') : 태그의 class 속성과 일치하는 문서 객체를 배열로 가지고 온다 ※..
-
21-12-07 자바스크립트로 이미지 다루기#2, DOM학원/JavaScript_JQuery 2021. 12. 7. 15:46
예제 오른쪽, 왼쪽 화살표를 누르면 각각 다음, 이전 이미지를 보여주는 배너 onclick 함수를 호출할때 매개변수를 가지게 하여 아래와 같이 하나의 함수만 정의해 사용할 수도 있다. function move(x) { if (x==1){ if(num==0) return; num--; } else { if(num==7) return; num++; } var dist = -600*num; document.getElementById("imgs").style.left = dist+"px"; } + 재생버튼과 멈춤 버튼으로 제어하는 롤링 배너 ▶ ■ + 버튼 하나로 제어하는 롤링 배너 : 처음 로드될 때 자동으로 실행되다가 ■버튼을 누르면 버튼 모양이 ▶로 바뀌고 배너 움직임은 정지됨 ※document.getEl..
-
21-12-06 BOM#2, 자바스크립트로 이미지 다루기학원/JavaScript_JQuery 2021. 12. 6. 15:53
BOM navigator 객체 -웹페이지를 실행하고 있는 브라우저에 대한 정보를 가짐 navigator가 제공하는 핵심 기능 : 접속하는 디바이스(운영체제)에 따라 페이지를 다르게(경로를 달리해서) 표시 if( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/ipod/i)) || (navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/Windows CE/i)) || (navigator.userAgent.match(/Symbian/i)) || (navigator.userAgent.match(/BlackBerry/i)) || (navigator.userAgent.ma..