seop's study seop's study

설명 1번 이미지 -> 2번 이미지 -> 3번 이미지 -> 4번 이미지 -> 5번 이미지 -> 1번 이미지가 출력됨과 동시에 2번~5번 이미지의 위치가 1번 이미지의 뒤로 옮겨집니다. 이번에는 setInterval()과 setTimeout()를 같이 사용해 보았습니다. setInterval()과 setTimeout()의 차이점 - setInterval : 실행중 다른 setInterval로 인해 함수가 호출되면 기존에 실행되던 함수는 종료됩니다. - setTimeout: 실행중 다른 setTimeout로 인해 함수가 호출되도 기존에 실행된 함수에 영향을 주지 않습니다. setTimeout() 이란? 설명 : 기존 동작이 한번 일어납니다. 사용 방법 var SETTIMEOUT_NAME = setTimeou..

설명 1번 사진 -> 2번 사진 -> 3번 사진 -> 4번 사진 -> 5번 사진 -> 다시 1번 사진 반복이 됩니다. setInterval() 설명 : 기본 동작이 일정한 시간과 간격으로 반복적으로 일어납니다. 사용 방법 var SETINTERVAL_NAME = setInterval(FUNCTION, TIME); 실행중인 루프 종료 방법 clearInterval(SETINTERVAL_NAME); //slider02 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역 const sliderInner = document.quer..

const cssProperty = [ {num: 1, name: "align-content", desc: "align-content 속성은 콘텐츠의 상하관계 정렬 상태를 정의합니다."}, {num: 2, name: "align-items", desc: "align-items 속성은 요소의 수직 방향 정렬 방식을 설정합니다."}, {num: 3, name: "align-self", desc: "align-self 속성은 콘텐츠의 정렬 상태를 정의합니다."}, {num: 4, name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {num: 5, name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위..

Slider Effect - setInterval()를 이용하여 이미지 슬라이드 만들기 setInterval()메서드란? 일정한 시간 간격으로 작업을 수행하기 위해서 사용합니다.clearInterval 함수를 사용하여 중지할 수 있습니다. 주의할 점은 일정한 시간 간격으로 실행되는 작업이 그 시간 간격보다 오래걸릴 경우 문제가 발생할 수 있습니다. Javascript //slider01 const sliderWrap = document.querySelector(".slider__wrap") const sliderImg = document.querySelector(".slider__img") const slider = document.querySelectorAll(".slider") let currentI..

01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자) 번호 기본값 속성 결괏값 { const arrNum = [100, 200, 300, 400, 500]; const arrNumLength = arrNum.length; document.querySelector(".sample01_R1").innerHTML = arrNumLength; const arrText = ['a', 'b', 'c', 'd', 'e']; const arrTextLength = arrText.length; document.querySelector(".sample01_R2").innerHTML = arrText.length; const arr = [1, 2, ['a', 'b']]; const arrLength = a..

01. if문 { //조건문 *중요함//true, false, 1, "1", 0, "0", null, undefined, [], {} if(true){ document.write("실행되었습니다.(true)"); } else { document.write("실행되었습니다.(false)"); } } 결과보기 실행되었습니다.(true) 02. if문 생략 { const num = 100; if( num == 100 ) document.write("실행되었습니다.(true)"); else document.write("실행되었습니다.(false)"); } 결과보기 실행되었습니다.(true) 03. 다중 if문 { const num = 100; if( num == 90 ){ document.write("실행되었습..

01. 선언적 함수(기본 문법) { function func(){ document.write("함수가 실행되었습니다."); } func(); } 결과보기 함수가 실행되었습니다. 02. 익명 함수 { const func = function(){ document.write("함수가 실행되었습니다."); } func(); } 결과보기 함수가 실행되었습니다. 03. 매개변수 함수 { function func (str){ //2번 document.write(str); //3번 } func("함수가 실행되었습니다."); //1번 } 결과보기 함수가 실행되었습니다. 04. 리턴값 함수(리액트, 뷰-필수) { function func (){ const str = "함수가 실행되었습니다."; return str; } d..

01. 변수 : 데이터 저장 { let x = 100, y = 200, z = "javascript"; document.write(x); document.write(y); document.write(z); } 결과보기 100 200 javascript 02. 상수 : 데이터 불러오기 { const x = 100, const y = 200, const z = "javascript"; document.write(x); document.write(y); document.write(z); } 결과보기 100 200 javascript 03. 배열 : 데이터 불러오기 { const arr = [100, 200, "javascript"]; document.write(arr[0]); document.write(arr..

01. 변수 : 데이터 저장 { var x = 100; //변수 x에 숫자 100을 저장 var y = 200; //변수 y에 숫자 200을 저장 var z = "Javascript"; //변수 z에 문자 Javascript를 저장 document.write("*** 01. 변수 ***"); document.write(x); document.write(y); document.write(z); } 결과보기 100 200 Javascipt 02. 변수 : 데이터 저장 + 데이터 변경 { let x = 100; let y = 200; let z = "Javascript"; x = 300; y = 400; z = "jquery"; document.write("*** 02. 변수 ***"); document.wr..

함수 란? 변수에는 데이터만 저장할 수 있고, 코드는 저장할 수 없습니다. 하지만 함수를 사용하면 코드를 메모리에 저장했다가 필요할 때마다 호출하여 사용할 수 있습니다. 함수 자바스크립트 코드를 저장합니다. function이라는 키워드를 이용하여 선언합니다. 출력문, 제어문 등의 코드를 저장하고 데이터를 반환합니다. 선언적 함수 기본 함수 정의문 함수를 사용하여 코드를 저장한 것을 '함수 정의문' 이라고 합니다. 변수를 선언할 때 var 키워드를 사용한 것처럼 함수에서는 function 키워드를 사용해 변수를 선언합니다. 기본형 function 함수명 (){ 자바스크립트 코드; } 함수 정의문({...}) 안에 작성된 코드는 즉시 실행되지 않습니다. 함수는 메모리에 할당되어 대기하고 있다가 함수가 호출되..