Script/jQuery 22

[jQuery] return문, break문, continue문 알아보기

강의 듣다가 break와 retrun 중 어떤것을 사용해야 하는지 의문점이 생겼다. break문 하나의 반복문을 탈출해서 다음에 있어야 할 기능을 실행한다. break문 종료 후 반복문을 벗어나 '이름찾기 종료'라는 콘솔이 찍힌다. return문 하나의 함수에서 탈출해서 종료시킨다. 함수 밖으로 빠져나갔기 때문에 '이름찾기 종료'라는 콘솔이 찍히지 않음 continue문 반복문 내에서 작업을 건너뛸 때 사용 10까지 반복하되 짝수에 해당하는 if문은 건너뛴다.

Script/jQuery 2022.03.11

[jQuery] 함수 활용해서 기능 만들기

See the Pen 모달창 by limhaneul2244 (@limhaneul2244) on CodePen. 함수를 활용해 동일한 기능을 빼보도록 하자. //방법1 : 개별 class지정해서 함수를 별도로 뺀다. $('.footerTop .first').on('click', function () { popUp('#popUpPrivate'); }); $('.footerTop .last').on('click', function () { popUp('#popUpEmail'); }); //방법2 : 클릭한 값을 받아 if문으로 조건에 따라 달리함 $('.footerTop a').on('click', function () { let val = $(this).attr('class'); if( val === 'fi..

Script/jQuery 2022.03.10

[jQuery] 연습문제

#1. input에 값을 넣고 정답이면 "정답", 3번째의 값이 틀렸을 경우 "오타"라고 알림창 띄우기 See the Pen 0223_jQuery 공부01 by limhaneul2244 (@limhaneul2244) on CodePen. var count = 0 을 담아준다. 이때 주의할 것은 var count = 0을 $('.send-answer')함수스코프안에 넣게 되면 안된다.😐 기본적으로 0 상태에서 클릭누적수를 확인해야 하며, function()안에는 count++ 을 넣어 count값을 넣어준다. 사용자가 3번째 오타났을 때는 멍청이가 떠야 하므로, count >= 3 의 조건식을 걸어준다. 📎중요 1회 증가 count++ 1회 가감 count-- 2회 이상 증가 count+= 2회 이상 가감..

Script/jQuery 2022.02.23

[jQuery] 369게임 (feat, if/else문)

1. 3의 배수에 콘솔창에 '박수'띄우기, 그 외에는 '패스' 띄우기 function testGame (num) { if( num % 3 === 0 ) { console.log('박수'); } else { console.log('패스'); } }; 나머지(%)연산자 보러가기 값이 소수가 되기 전까지 계산하며, 나머지 값이 나누는 수보다 작아졌을때까지 계산한다. 2. 3의 배수에 콘솔창에 '박수', 9의 배수는 '박수X2', 그 외에는 '패스' 띄우기 testGame(); function testGame (num) { if( num % 9 === 0 ) { console.log('박수X2'); } else if ( num % 3 === 0 ) { console.log('박수'); } else { conso..

Script/jQuery 2022.02.16

[jQuery] 이벤트 메서드의 종류

1. 기본 형식 1번: 이벤트 대상 2번: 이벤트 등록 메서드 3번: 이벤트 핸들러 이벤트: 사이트에서 방문자가 취하는 행동 이벤트 핸들러: 이벤트가 발생했을 때 실행되는 일련의 실행 코드 이벤트 등록 메서드를 사용하게 되면? 방문자가 지정한 요소에서 어떤 특정 동작 발생시 저장된 실행문을 실행시킬 수 있다. 이벤트 등록 메서드에는 단독 이벤트 등록 메서드와 그룹 이벤트 등록 메서드가 있다. 단독 이벤트 등록 메서드: 하나의 동작에 대한 이벤트 등록 시 사용 그룹 이벤트 등록 메서드: 하나 이상의 이벤트 등록시 사용 메서드 등록 방식 1. $("이벤트 대상 선택").on("이벤트 종류1 이벤트종류2....이벤트 종류n", function(){ 자바스크립트 코드; }); 2. $("이벤트 대상 선택").o..

Script/jQuery 2021.12.13

[jQuery] animate에서 stop() 의 중요성

hover, mouseleave() 사용시에는 앞부분에 stop()을 꼭 넣어주어야 한다. 그 이유는?? 사용자가 마우스를 꼭 한번만 가져갔다가 뗀다는 법은 없기때문에 예를들어 탭을 hover했을 때 하위 tab이 slideDown된다고 하면 stop을 걸지 않았을 경우 slideDown이 여러번에 걸쳐 보여지게 될 수 있다. 이런 현상을 막기 위해서 stop()함수를 걸어 진행중인 animate를 pass하고 다음 것을 진행하게 만드는 것이다. 그럼 여러번 hover해도 마지막에 실행한 hover만 진행하게 된다.

Script/jQuery 2021.12.13

[jQuery] video 태그 control 하기

button을 통해 클릭 한 뒤 동영상이 재생되게 해야 했는데 HTML구조 CSS .subVideoInner {position: relative;} .subVideoInner > video {display: block; width: 100%;} .subVideoInner > .videoBtn {position: absolute; bottom:3%; right: 3%; display: block; cursor: pointer;} Script $(document).ready(function(){ $('#videoBtn00').on('click', function(){ $('#videoBtn00').hide(); $('#video00')[0].play(); }); $('#videoBtn01').on('clic..

Script/jQuery 2021.12.06

[jQuery] filter()함수란

연관글 : sort() 함수에 대해 알아보기 filter()의 기본 문법 let 변수명 = [2, 6, 8, 50, 100, 33, 74]; let 새로담을변수명 = 변수명.filter(function(a){ return 조건식 }); a의 파라미터에는 변수안에 들어있는 숫자 또는 무언가가 차례로 담기게 된다. let array = [2, 6, 8, 50, 100, 33, 74]; let filteringArray = array.filter(function(a){ return a > 10; }); // [50, 100, 33, 74] 배열에서 원하는 자료만 뽑아내고 싶을때 조건식에 조건을 달아서 뽑을 수 있다. ** filter()함수는 신문법(?)이라 새로운 변수에 담아서 사용해야 한다. filter ..

Script/jQuery 2021.11.25

[jQuery] form 태그와 관련된 이벤트리스너

1. input 값이 변경될때마다 실행됨 (타이핑하는 도중에도 실행됨) $('input tag').on('input', function(){ //do something }); 2. change 폼 컨트롤 값이 변경되었을때 발생 (값을 입력하고 외부에 커서를 찍어야 발동됨) 적용대상: input(text, radio, checkbox), textarea, select $('input tag').on('change', function(){ //do something }); 3. submit 폼의 정보를 서버로 전송하는 명령인 submit시에 발생 적용대상: form 태그 $('input tag').on('submit', function(){ //do something });

Script/jQuery 2021.11.02
반응형
SMALL