반응형 Javascript Javascript 2022. 7. 8. 초보 개발자에게 필수인 초강력 자바스크립트 한줄 함수 TOP 10 1, 홀수/짝수 확인하기 2로 나눈 나머지 값이 0인지 아닌지를 판별해서 불리언을 리턴합니다. const isEven = num => num % 2 === 0; console.log(isEven(124)); //true console.log(isEven(57)); //false 2. 숫자인지 확인하기 인자 값을 실수로 변환한 결과가 숫자이고 유한 수이면 true를 반환합니다. const isNumber = num => !isNaN(parseFloat(num)) && isFinite(num); isNumber(123); //true isNumber(123.45); //true isNumber("str"); //false 3. 평균값 구하기 배열을 축소하는 함수로 배열의 합을 구한 후 배열 길이로 나누어서 .. Javascript 2022. 2. 8. 최신 자바스크립트 문자열 바꾸기 메서드인 replaceAll() 사용하기 최근까지도 자바스크립트에는 다른 언어에서 지원되는 전역 문자열 바꾸기 기능이 없었습니다. 작년 그러니까 2021년이 되서야 ES2021(ES12) 표준 명세에 전역 문자열 바꾸기 메서드인 replaceAll() 이 추가되었습니다. 업데이트가 주기적으로 되는 대부분의 최신 웹 브라우저들은 이미 replaceAll() 메서드를 지원합니다. 개발자도구 콘솔에서 문자열에 replaceAll() 메서드를 적용해보면 지원하는지를 바로 확인할 수 있습니다. replaceAll() 메서드가 지원되지 않는 웹 브라우저에서는 다음과 같이 "is not a function", 또는 "지원하지 않는 속성이나 메서드" 이라는 에러 메시지를 표시합니다. replaceAll() 메서드가 없을 때도 replace() 와 정규표현식(.. Javascript 2022. 2. 3. 흐르는 주가 전광판 스타일의 무한 롤링 배너 만들기 고정된 크기를 가지는 이미지들을 전환하는 이미지 슬라이드 배너를 제외하고, 많은 웹사이트에서 가장 사용하는 배너 방식이 텍스트 롤링 배너입니다. 여러 개의 텍스트 내용 행, 또는 아이템을 가로나 세로 방향으로 무한 회전하면서 내용을 넘겨가면서 보여주는 배너입니다. 무한 롤링 배너를 만드는 방법은 CSS 키프레임 애니메이션으로 만드는 방법과, 자바스크립트로 만드는 방법으로 구분할 수 있습니다. 각각 장단점이 있기 때문에 어떤 방법이 더 낫다고 할 수는 없고, 용도에 맞춰 구현 방법을 선택하면 됩니다. 구현 난이도는 CSS 키프레임 애니메이션을 이용하는 방식이 훨씬 더 쉽습니다. 무한 롤링 배너 종류중 많은 아이템을 무한 회전시키는 주가 전광판 스타일의 배너를 제작해 보겠습니다. 내용 끝부분에 완성된 소스의.. Javascript 2022. 1. 22. 다크모드 토글 기능 구현과 다크모드 토글 디자인 구현 웹페이지, 또는 사이트에 적용하는 다크 모드는 구현하는 방법이 여러 가지 있습니다. CSS 속성을 기준으로 구분하면 사용된 배경색과 전경(글자) 색들을 바꾸기만 하는 간단한 구현이기 때문에 어떤 방법을 사용해도 무방합니다. CSS 클래스로 구현 다크모드 구현은 다크 모드용 컬러 CSS 클래스를 정의한 후 자바스크립트로 , 또는 태그에 다크 모드용 클래스를 추가하거나 삭제하는 방식으로 구현합니다. 다음 자바스크립트 코드는 'toggle" ID를 가진 요소를 클릭하면 '.dark-mode" 클래스를 태그에 추가하거나 삭제하는 간단한 이벤트 핸들러 입다. 구현하기에 따라서는 ".light-mode", ".dark-mode" 2개의 클래스로 적용하는 테마 컬러를 전환하는 클래스를 각각 구현할 수도 있습니다. d.. Javascript 2022. 1. 20. 서버 없이 자바스크립트로 파일 생성해서 셀프 다운로드 하기 자바스크립트를 이용하면 별도의 웹서버 기능 없이도 파일을 생성해서 다운로드할 수 있습니다. 텍스트 기반인 파일은 종류에 상관없이 생성할 수 있습니다. HTML5 표준을 지원하는 웹 브라우저에서는 모두 지원되는 표준 기능이며, 하이퍼링크 태그()의 "href" 속성을 활용해서 구현합니다. "href" 속성은 하이퍼링크 태그를 통해 이동하는 URI를 표시하는 속성입니다. 대상 링크는 다른 HTML 문서일 수도 있고, 이미지나 사운드와 같은 리소스 파일이거나 텍스트 파일일 수도 있습니다. 그리고 하이퍼링크 태그에는 새로운 HTML5 속성이 하나 더 있습니다. 하이퍼링크 태그에 "download" 속성을 표시하면 하이퍼링크로 가리키는 연결된 페이지, 또는 리소스 파일을 웹 브라우저에서 열지 않고 파일로 다운로드.. Javascript 2021. 10. 29. HTML 컨텐츠에서 태그를 제거하고 텍스트만 남기기 HTML 내용에서 태그를 제거하고 텍스트 내용만 재 가공해서 사용할 때 사용할 수 있는 함수입니다. 태그를 제거하면 중간에 줄바꿈과 공백, 탭과 같은 불필요한 문자들이 여러 개 겹쳐져 남게 됩니다. 이런 문자들까지 제거해야 텍스트 데이터를 사용할 수 있는 상태가 됩니다. 태그 제거 str.replace(/ Javascript 2021. 10. 20. HTML 요소의 위치와 크기 정보를 얻기 자바스크립트 메서드 중 element.getBoundingClientRect() 메서드는 요소의 왼쪽 위 모서리 좌표와 오른쪽 아래 모서리 좌표 값을 가져오는 메서드입니다. 얻은 좌표값은 웹브라우저의 뷰포트 왼쪽 위 꼭짓점을 시작점(0, 0)으로 해서 계산된 값입니다. 아래 그림을 보면 이해가 조금 더 쉽습니다. 뷰포트 기준점을 기준으로 하는 상대 위치가 되기 때문에 화면이 스크롤되면 얻는 좌표값도 변합니다. 좌표를 얻게을 때 왼쪽에 붙어 있는 요소가 0이 아닌 8px를 반환하기도 하는데 이것은 도큐먼트 루트(body 태그)의 기본 마진(margin)이 8px로 설정되어 있기 때문입니다. 도큐먼트 루트의 마진으로 인해 불필요한 8px가 더해지는 문제를 없애고 싶으면 다음처럼 body 태그의 마진 속성을 .. Javascript 2021. 10. 14. 스크린, 브라우저, 뷰포트 크기 값을 알아내는 방법 웹브라우저의 DOM(Document Object Model) 정보에는 웹 브라우저 안에 표시되는 컨텐츠에 대한 다양한 크기 정보 외에도 다양한 크기에 대한 환경정보가 들어있습니다. 정보들 중에는 웹브라우저 자신의 크기와 데스크탑 풀 스크린 화면에 대한 것들도 있습니다. 필요에 따라 풀스크린으로풀 스크린으로 동작해야 하는 웹앱과 같은 서비스는 풀 스크린으로 실행되기 위해서 필요한 각종 정보가 있습니다. 이런 경우를 위해 window 객체에는 데스크탑 풀 스크린 화면 크기, 웹브라우저 크기에 대한 정보를 담고 있습니다. 이 정보들은 자바스크립트를 통해 접근할 수 있으며, 표준 속성 값이기 때문에 웹브라우저별 호환성에 대한 걱정 없이 접근해서 사용할 수 있습니다. 다음 그림을 보면 쉽게 이해가 될 것입니다. .. 이전 1 2 3 4 ··· 19 다음 반응형
