자바스크립트15 [자바스크립트 응용하기]페럴렉스효과05_ 이질감이 드는 효과...😶 페럴렉스 효과 05 이번에는 이질감이 느껴지는 효과를 구현해보겠습니다. 이 효과를 뭐라고 설명해야할지 모르겠네요?＼（〇_ｏ）／ 그냥 이질감 효과라고 합시다 원본 소스 보기 원본 사이트 JS 소스 function scroll(){ let scrollTop = window.pageYOffset || document.documentElement.scrollTop; document.querySelector("#parallax__info span").innerText = Math.ceil(scrollTop); document.querySelectorAll(".content__item").forEach(item => { const target1 = item.querySelector(".content__item__i.. 2022. 9. 20. includes() 메서드 includes() 이 메서드는 여태까지의 검색 메서드와는 다르게 반환을 불린값으로 해준다는 특징이 있습니다. ■ 문법 문자열 포함 여부를 검색해서 불린(true/false)로 반환합니다. "문자열".includes(검색값) "문자열".includes(검색값, 시작값) ■ 특징 ▶ 검색값은 필수요소이며, 대소문자를 구분합니다. ▶ 시작값이 없으면 전체 문자열을 대상으로 합니다. ■ 예시 이해를 돕기 위해 예시를 들어봅시다. 주석으로 결과값을 작성하였습니다. const str1 ="javascript reference"; const currentStr1 = str1.includes("javascript"); //true const currentStr2 = str1.includes("j"); //true c.. 2022. 8. 17. padStart() / padEnd() 메서드 padStart()/padEnd() 이 메서드들은 주어진 길이에 맞게 앞/뒤 문자열을 채우고 이렇게 채운 새로운 문자열을 반환하는 메서드입니다. padStart() ■ 문법 길이에 맞게 앞의 문자열을 채웁니다. "문자열".padStart(길이) "문자열".padStart(길이, 문자열) ■ 특징 ▶ 문자열을 적지않고 본래길이보다 길게 길이를 요청하면 비어있는 자리는 공백처리가 됩니다. ■ 예시 이해를 돕기 위해 예시를 들어봅시다. 주석으로 결과값을 작성하였습니다. const str1 = "456"; const currentStr1 = str1.padStart(1, "0"); //456 const currentStr2 = str1.padStart(2, "0"); //456 const currentStr3 .. 2022. 8. 17. repeat()메서드 repeat() 이 메서드는 문자열을 복사해서, 복사한 새로운 문자열을 반환합니다. IE는 Edge부터 지원합니다. ■ 문법 이 메서드는 문자열을 복사하여, 복사한 새로운 문자열을 반환합니다. string.repeat( count ) ■ 특징 ▶ 반복문을 사용하여 반환도 가능합니다. ▶ 반복횟수인 count는 양의 정수여야 하며 무한대보다 적고, 최대 문자열 크기를 넘어서는 안됩니다. ■ 예시 이해를 돕기 위해 예시를 들어봅시다. 주석으로 결과값을 작성하였습니다. const str1 = "javascript"; const currentStr1 = str1.repeat(0); //'' const currentStr2 = str1.repeat(1); //javascript const currentStr3 =.. 2022. 8. 17. concat() 메서드 concat() 자바스크립트에서 문자열을 이어붙이는 방법은 세가지가 있습니다. 1. "+" 연산자를 사용하기 2. concat()함수를 사용하기 3. join()함수를 사용해서 배열을 문자열로 합치기 이 중에서 저번에 1번에 대해 학습했었는데요, 이번에는 2번의 내용 concat()메서드에 대해 학습하겠습니다. ■ 문법 이 메서드는 두개 이상의 문자열을 결합해서 새로운 문자열을 반환해줍니다. "문자열".concat(문자열) "문자열".concat(문자열, 문자열, ...) ■ 특징 ▶ 기존배열을 변경하지 않습니다. ▶ 추가된 새로운 배열을 반환합니다. ■ 예시 이해를 돕기 위해 예시를 들어봅시다. 주석으로 결과값을 작성하였습니다. const str1 = "javascript"; const currentS.. 2022. 8. 17. replace() / replaceAll() 메서드 replace() / replaceAll() 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다. 그 패턴은 문자열이나 정규식(RegExp)이 될 수 있으며, 교체 문자열은 문자열이나 모든 매치에 대해서 호출된 함수일 수 있습니다. ■ 문법 원문은 'String.prototype.replace()'이나 String.prototype은 생략이 가능합니다. replaceAll의 문법또한 repalce와 같습니다. "문자열".replace("찾을 문자열", "변경할 문자열") "문자열".replace(정규식) "문자열".replace(정규식, 변경할 문자열) ■ 특징 ▶ 기존 replace()메서드는 중복된 문자의 경우 중복문자 중 첫번째 문자만 바꾸어준다는 특징이 있었습니다. 이러.. 2022. 8. 17. split() 메서드 split() 이 메서드는 문자열내에서 원하는 값을 찾아 배열형태로 반환해줍니다. ■ 문법 "문자열".split(구분자); "문자열".split(정규식 표현); ."문자열".split(구분자, 갯수); ■ 예시 이해를 돕기 위해 예시를 들어봅시다. 주석으로 결과값을 작성하였습니다. const str1 = "javascript reference"; const currentStr1 = str1.split(''); //['j', 'a', 'v', 'a', 's', ...배열로 출력] const currentStr2 = str1.split(' '); //['javascript', 'reference'] const currentStr3 = str1.split('',1); //['j'] const currentSt.. 2022. 8. 17. 소/대문자메서드, 공백제거 메서드 공백제거 메서드 와 대/소문자 메서드 자바스크립트에서는 문자열의 공백을 제거해주는 메서드도 있습니다. tirm(), trimStart(), trimEnd() 이렇게 세가지로 구성되어 있습니다. 또, 대/소문자를 변환해주는 메서드도 있는데요. 이 메서드들은 toUpperCase(), toLowerCase()가 있습니다. 같이 알아봅시다 공백제거 메서드 trim() 이 메서드는 앞과 뒤의 공백을 제거한 후 문자열의 복사본을 반환합니다. 예제와 결과를 통해 바로 알아보시죠 특징 ▶ 문자열 내부의 공백은 제거하지 않습니다 예시 const str2 = ' javascript '; const currentStr2 = str2.trimStart(); consolo.log(currentStr2) 결과보기 javascr.. 2022. 8. 17. 문자열 결합 / 템플릿 문자열 문자열 결합 / 템플릿 문자열 자바스크립트에서 문자열을 이어붙이는 방법은 세가지가 있습니다. 1. "+" 연산자를 사용하기 2. concat()함수를 사용하기 3. join()함수를 사용해서 배열을 문자열로 합치기 이 중 저희는 1번의 내용에 대해 학습하겠습니다. 내장된 표현식을 허용하는 문자열 리터럴({}같은것)입니다. 따옴표 대신 ``(백틱)문자로 문자열을 감싸서 만들고 ${}안에 표현식을 넣습니다. ■ 예시1 const str1 = "자바스크립트"; const str2 = "제이쿼리"; console.log(str1 + str2); 결과보기 자바스크립트제이쿼리 ■ 예시2 const num1 = 100; const num2 = 200; console.log(num1 + num2); 결과보기 300 ■.. 2022. 8. 17. 서치 이펙트02 검색 효과 저번시간에 이어서 또 검색 사이트를 만들어보겠습니다. 저번 시간에는 indexOF()를 사용했었죠? 이번엔 includes()를 이용해서 만들어보겠습니다. 원본 소스 보기 원본 사이트 ▶ 이 사이트에 사용된 includes()의 특징에 대해 간단하게만 알아보고 가겠습니다. includes()는 문자열 포함 여부를 검색해서 불린(true/false)을 반환합니다. const str1 ="javascript reference"; const currentStr1 = str1.includes("javascript"); //true const currentStr2 = str1.includes("j"); //true const currentStr3 = str1.includes("b"); //false 크.. 2022. 8. 17. 문자열 검색 메서드(indexOF/lastIndexOf) indexOF() 문자열 검색 메서드 중 indexOf()라는 친구에 대해서 알아보겠습니다. indexOf()란 문자열에서 특정 문자의 위치를 찾아서 문자열이 '첫번째'로 나타나는 위치를 숫자값(index값)으로 반환해주는 자바스크립트 메서드 입니다. 문법 기본 문법은 다음과 같습니다. "문자열".indexOf(검색값); "문자열".indexOf(검색값, 위치값); 특징 ▶ 찾는 문자열이 없으면 -1을 반환합니다. ▶ 문자열을 찾을 때 대소문자를 구분합니다. 예시 이해를 돕기 위해 예시를 들어봅시다. 주석으로 결과값을 작성하였습니다. const str = "javascript reference"; const currentStr1 = str.indexOf("javascript") //0 const curr.. 2022. 8. 16. 문자열변경메서드(slice/substring/substr) 문자열 변경 메서드 문자열 변경 메서드란 이름 그대로 문자열의 특정위치를 바꾸기도 하고, 공백을 제거하기도 하고, 마음대로 변경할 수 있게 도와주는 메서드 인데요. 오늘은 그 중에서도 특정 값을 찾아 변경하기전 값을 추출해줄 수 있게 도와주는 메서드에 대해서 알아보도록 하겠습니다. 이런 특정 문자열 값 추출 메서드에는 slice(), substring(), substr() 등이 있습니다. 01_ Slice() 문자열에서 원하는 값을 찾아서 추출해내고 그 추출한 값의 문자열을 반환하는 메서드 입니다. slice는 시작위치 값이 끝나는 위치값보다 클 경우 출력이 되지 않으므로 주의를 요합니다. -기본문법 "문자열".slcie(시작위치) "문자열".slcie(시작위치, 끝나는위치) [시작위치 값 < 끝나는위치.. 2022. 8. 16. 내장 함수 내장함수 내장 함수란 자바스크립트에 기본적으로 내장이 되어있는 함수들을 말합니다. 자바스크립트가 기본적으로 우리에게 제공하는 함수라고 할 수 있습니다. 01_ 인코딩, 디코딩 함수 자바스크립트는 기본적으로 '%'뒤에 사용할 수 없는 문자의 문자 코드를 16진수로 변환해서 연결합니다. 그래서 "http://abc.com/search?query=자바스크립트"처럼 URL주소에 쿼리 정보를 전송해서 데이터를 처리해야 하는 프로그램의 경우 한글과 같은 유니코드문자가 포함되어 있다면 오류가 발생할 수 있습니다. 그렇다면 이런 오류를 어떻게 해야 해결할 수 있을까요? 인코딩 함수를 사용해서 문자를 부호화 한뒤, 부호화 된 문자를 다시 디코딩 함수를 이용해서 원래 문자로 되돌릴 수 있습니다. 인코딩은 데이터를 다른 형.. 2022. 8. 12. 배열 메서드(join/push/pop) 배열 메서드 배열은 다양한 메서드를 제공합니다. 그 중에서 오늘은 기본적인 배열의 길이를 구하는 .length와 요소들을 연결해서 하나의 문자열로 만들 수 있는 join()과 배열 끝의 데이터를 조정할 수 있는 push()/pop()에 대해서 공부하겠습니다. 01_ length length 속성은 배열의 코드 유닛 수를 구해서 숫자로 반환합니다. 빈 문자열일 경우에는 0을 반환합니다. //01 const arrNum = [100, 200, 300, 400, 500]; //02 const arrTxt = ['a', 'b', 'c', 'd', 'f']; //03 const arr = [1, 2, ['a', 'b']]; 리턴값(결과)는 마우스를 갖다대면 보여요! 번호 기본값 메서드 리턴값 1 [100, 200.. 2022. 8. 11. 웹사이트 만들기/CardType 01 사이트 만들기 _ 카드 유형01 사이트 만들기 첫번째 시간입니다. 사이의 구성 유형은 메뉴 유형, 배너 유형, 이미지 유형 기타 등등 많은 유형이 있습니다. 그 중 카드 유형에 대해 공부해보겠습니다. 카드 유형 중 기본이 되는 유형입니다. 아래 피그마를 참조하여 똑같이 만들고 웹표준 기준도 준수해봅시다. 보통 wrap의 width 값을 1200px으로 부여했지만, 이번 사이트-카드유형은 양쪽에 살짝식 여백이 있으므로 1160px로 작업합니다. 레이아웃 배치 속성은 'display:flex'를 사용하여 작업하겠습니다. aria-hidden="true" 웹표준을 준수하기 위해 aria-hidden="true"을 사용하였습니다. 청각장애인들이 사이트를 이용할때는 스크린리더를 통해 사이트를 이용하는데요. 위 사.. 2022. 8. 8. 이전 1 다음 반응형
