본문 바로가기

JavaScript62

JavaScript - 콜백 함수 & 재귀함수 콜백함수 및 재귀함수 콜백함수 다른 함수가 실행을 끝낸 뒤 실행되는 callback되는 함수 를 말합니다. 그리고, 함수를 만들때, parameter 를 함수로 받아서 쓸 수 있는데 그 함수는 callback입니다. 재귀함수 함수가 자신을 다시 호출하는 구조로 만들어진 함수입니다. 재귀함수는 종료조건이 있어야 하며, 종료조건을 설정해주지 않으면 무한 반복을 하게됨니다. 재귀함수로 작성이 되는 코드는 반복문으로도 작성할 수 있습니다. 콜백함수 예제 function func() { console.log("콘솔이 실행되었습니다.1"); } function callback(str) { console.log("콘솔이 실행되었습니다.2"); str(); } callback(func); 결과 확인하기 콜백함수 반복문.. 2022. 9. 20.
JavaScript - 펼침연산자 펼침 연산자란 간단히 말해서, 배열에 포함된 항목을 목록으로 바꿔주는 연산자입니다. 마침표 세 개(...)로 표시한다. 펼침 연산자는 단독으로 쓰일 수 없음에 주의해야 합니다. 배열에 포함된 항목을 목록으로 바꿨다면 이를 배열이나 객체 등에 담아줘야 합니다. 변수에 담게 되면 에러가 발생합니다. 펼침 연산자의 가장 큰 장점은 조작(mutation)이나 부수 효과(side effect)로 인한 문제를 피할 수 있다는 점이 있습니다. 예시 const class1 = [1, 2, 3]; const a = ...class2; // X const a = [...class2]; // O 펼침연산자 복사 예제 //복사의 의미 const obj = { a: 100, b: 200, c: "javascript", }; c.. 2022. 9. 20.
이펙트 응용하기 | 페럴럭스 이펙트 첫 번째 페럴럭스 이펙트 offsettop 와 scrollTop을 이용하여 메뉴 선택창이 해당 메뉴에 진입되었을때 색이 바뀌는 효과를 만들어 보았습니다. 하지만 이런경우는 대부분 과부화를 일으키기 때문에 조심히 사용하는게 좋을것 같습니다. 원본 소스 보기 원본 사이트 보기 scroll관련 코드들 간단요약 먼저 scrollTop 에 조건을 걸어 모든 웹브라우저에 스크롤값을 구합니다. let scrollTop = document.documentElement.scrollTop || window.pageYOffset || window.scrollY; scroll.innerText = Math.round(scrollTop); 이제 각 section 에 있는 아이디값을 찾아 이전에 구한 scrollTop 와 세션에있는 of.. 2022. 9. 6.
퀴즈이펙트 다섯 번쨰 웹디자인 기능사 퀴즈 풀기 웹 디자인 기능사 필기 기출문제를 JS를 이용해서 간단한 퀴즈 프로그램을 만들었습니다. 퀴즈의 답을 입력하고 마지막에 정답 확인하기 버튼을 누르면 답이 나타나게 됩니다. 원본 소스 보기 원본 사이트 보기 1.js 코드 CSS는 앞서 마크업한 HTML 코드를 디자인및 js동작할때 태그에 추가할 class를 만듭니다. 코드 보기 //문제정보 const quizInfo = [ { answerType: "웹디자인기능사 기출문제 2016년 1회", answerNum: 1, answerAsk: "다음 중 디자인의 조건에 해당하지 않는 것은?", answerChoice: { 1: "대칭", 2: "점증", 3: "반복", 4: "강조" }, answerResult: "1", answerEx.. 2022. 8. 24.
match ( ) JAVASCRIPT match( ) match() 메서드란 문자열을 검색하고 배열로 반환한다. match() 사용법 "문자열".split(구분자); "문자열".split(정규식 표현); "문자열".split(구분자, 제한(갯수)); match() 예제 const str1 = "javascript reference"; const currentStr1 = str1.split(''); // (20) ['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't', ' ', 'r', 'e', 'f', 'e', 'r', 'e', 'n', 'c', 'e'] const currentStr2 = str1.split(' '); // (2) ['javascript', 'reference'] 한칸을.. 2022. 8. 22.
charAt() / charCodeAt() charAt() / charCodeAt() charAt() 메서드는 문자열에서 인덱스의 위치를 찾아 첫 문자만 반환합니다. charCodeAt() 메서드는 지정한 숫자의 유니코드 값을 반환 합니다. 사용법 "문자열".charAt(숫자); "문자열".charCodeAt(숫자); 예제 const str1 = "javascript reference" const currentStr1 = str1.charAt(); //j const currentStr2 = str1.charAt("0"); //j const currentStr3 = str1.charAt("1"); //a const currentStr4 = str1.charAt("2"); //v const currentStr5 = str1.charCodeAt(); .. 2022. 8. 22.
728x90
반응형
자바스크립트 사진

JavaScript

자세히보기
HTML 사진

HTML

자세히보기
CSS 사진

CSS

자세히보기

티스토리툴바