- 책 정보아무리 디자인을 잘해도 자바스크립트를 제대로 활용하지 못한다면 표현하고자 하는 웹사이트를 만들기 어렵다. 사용자와 전하고자 하는 콘텐츠에 따라 그에 맞는 디자인과 기능을 더해야 하는데 이때 필요한 것이 바로 자바스크립트이기 때문이다. 하지만 자바스크립트를 이론부터 배우기 시작하면 어렵고 막막할 수 있다. 프로그래밍을 하다 보면 어떤 기능을 어떻게 구현해야 하는지 잘 떠오르지 않기도 하다.이 책에서는 이미 완성된 웹사이트를 기반으로 자바스크립트의 중요한 개념과 기능을 차근차근 설명한다. 따라서 어떤 기능이 어떻게 활용되는지 쉽게 익히고 오늘 당장 나만의 웹사이트를 만드는 데 활용할 수도 있다. 자바스크립트를 처음 배운다면, 배우다가 포기했다면 이 책으로 시작해보자.- 도서 리뷰'완성된 웹사이트로..

- HTML에서 엔터 키 입력 시 특정 함수 실행하기HTML에서 키보드 이벤트를 처리하고자 할 때, 일반적으로 JavaScript를 사용하여 이벤트를 처리하며 onkeyup 이벤트 핸들러를 사용하여 엔터 키가 눌렸을 때 동작하도록 할 수 있다.아래는 해당 기능을 구현한 예시다. - 테스트 코드 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스

- 긴 문자열을 6자리 해시로 변환하기 JavaScript에서 긴 문자열을 6자리 해시로 변환하는 방법 중 하나는 SHA-256 등의 안전한 해시 알고리즘을 사용하고 그 결과를 base64 또는 다른 방법으로 인코딩하는 것이다. 하지만 SHA-256은 256비트의 해시 값을 생성하기 때문에 6자리 해시를 얻기 위해서는 이를 잘라야 하고, 이는 보안에 취약할 수 있다. 이번 글에서는 CRC32라는 테이블을 만들어 긴 문자열을 6자리 해시로 줄여볼 것이다. 그러나 이는 충돌 가능성이 있으며 보안적으로 안전하진 않아 간단한 문자열 체크섬 또는 일부 문자열 검증 용도로 사용하면 좋다. // CRC32 테이블 생성 const crcTable = new Uint32Array(256); for (let i = 0; ..

- 자바스크립트로 복사하기 버튼 만들기 아래 코드는 버튼을 클릭하면 입력된 텍스트를 클립보드에 복사하는 예제이다. 이 코드를 사용하면 'textToCopy'라는 ID를 가진 요소 안에 있는 텍스트를 복사한다. 클립보드에 복사된 후에는 경고 창으로 "Text copied to clipboard"와 함께 복사된 텍스트가 표시된다. - index.html Copy Text - copyButton.js // 버튼 요소 가져오기 const copyButton = document.getElementById('copyButton'); // 버튼에 클릭 이벤트 리스너 추가 copyButton.addEventListener('click', function() { // 복사할 텍스트를 가져오기 const textToCop..

- JavaScript에서 URL 마지막 슬래시 제거하기 문자열이 슬래시('/')로 끝나는지 확인하고 만약 그렇다면 슬래시를 제거한 새로운 문자열을 반환, 그렇지 않은 경우에는 원래 문자열을 그대로 반환하는 함수를 만들어 볼 것이다. function removeTrailingSlash(str) { if (str.endsWith('/')) { return str.slice(0, -1); } return str; } - 사용 예시 var url = 'https://test.com/'; var trimmedUrl = removeTrailingSlash(url); console.log(trimmedUrl); // 'https://test.com'