ioerror

개요 정규식을 이용한 이메일 주소 유효성 확인을 위한 Javascript의 기본 기능은 이메일 유효성 확인에서 소개를 했는데, jQuery의 플러그인을 만들어 보자. 먼저 이메일 주소를 입력창에 입력했을 때 바로 확인할 때와 폼 전송할 때 확인할 때 같이 사용하는 플러그인이다. 이메일 주소 확인 정규식 코드 이메일 주소를 입력하고 포커스를 이동하면 정규식을 통해 유효성 확인하고 오류이면 메시지를 출력한다. 정규식 패턴의 상세 내용은 "[JS] 이메일 주소 유효성 확인하기(feat. 정규식)"에서 확인 가능하다. $('#email').change(function() { let email = $(this).val(); let pattern_email = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)..

상황 "티스토리에 내용 목차 만들기"에서 만든 목차(TOC) 스크립트에 스크롤 이동으로 목차에 현재 위치를 표시하는 기능을 추가하고 싶어 졌다. scrollspy를 간단히 구현해서 적용하면 될 듯해서 스크립트와 스킨의 CSS 도 수정했다. 그리고 코드를 삽입했을 때 어떤 코드인지 코드 블록에 표시하는 것이 좋을 듯해서 스크립트를 추가했다. 스크롤 스파이 (scrollspy) 스크롤 위치를 감지해서 특정 기능을 수행하는 기능으로 bootstrap의 scrollspy를 사용하려 했으나 이 스킨에 부트스트랩을 적용하면 배보다 배꼽이 커질 거 같다. 일단 $(window).scroll 이벤트로 스크롤바의 위치를 확인하고 chapter.js 에서 생성된 태그의 위치를 확인, name에 해당하는 목차의 링크를 찾아..

들어가기전 내용 목차(TOC)란? Table Of Contents 👈🏻 이것 1. 상황 : 티스토리에서 내용의 목차(TOC) 만들기 기능이 없어서 아쉬움 개발자들의 블로그를 보면 간혹 내용 안에서의 목차가 사이드 메뉴로 표시되는 것들을 볼 수가 있다. 특히 velog.io 에는 기본 기능이 탑재되어 있는 듯한데, 이것 때문에 velog로 옮길까 했지만 아직 티스토리에 더 익숙해져서, 또 관리하는 다른 블로그 때문에 티스토리에 남아 있기로 했지만, 내용의 목차 기능이 참 아쉬웠다. 그래서 하나 만들어 보았다. 이것을 영어로 Table of Contents (TOC)라 한다. 2. 기능 설명 일단 내용에 문단이라 해야 하나? 챕터라 해야하나? 개발 관련 글이든 소개 글이든 문단이 있을 것이고, 문단의 제목을..

들어가며. jQuery 처음 생겨났을 때 DOM 선택자가 CSS의 선택 방식과 동일하여 많은 인기를 얻었었고 그만큼 DOM 노드에 쉽게 접근 할수 있다 선택자 규약(?)이 많은 편이지만 외울 필요는 없을 거 같다. 많은 것들 중에 자주 사용하는 것은 자동적으로 외워지고, 이런 게 필요한데 하고 찾아보면 있기 때문이다. 그리고 선택자, 필터 등을 조합하면 다 찾을 수 있다. 물론 그렇게 안되도록 간결한 html 문서를 작성해야 하겠지만 말이다. 공식 문서에 잘 되어 있지만, 지금까지 아무 생각 없이 사용하던 것을 정리하는 차원에서 기록 한다. jQuery API Documentation - Selectors 1. 기본 선택자 jQuery 의 DOM 노드(요소, 엘리먼트, Element)를 선택하는 것은 스..

jQuery를 이용한 것은 여기에서 정규식을 이용한 이메일 유효성 체크 플러그인 1. 요구 기능 입력된 이메일 주소의 유효성을 체크하고 유효하지 않으면 alert으로 경고를 띄우고 입력된 값은 지워준 후 포커싱 한다. 2. 주요 내용 1) 이메일 정규식과 이메일 입력 값의 비교 방법 2) VanillaJS에서의 change 이벤트 처리 방법 (onchange, event listener) 3. 이메일 정규식 자바스크립트에서 이메일 정규식은 2가지의 정규식이 있고, 정규식 표현방식도 2가지가 있으며, 입력값과 정규식 비교 방법도 2가지가 있으며 어느 것을 사용해도 상관없다. var pattern = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA..

꽤 오래전에 작성한 전화번호 검사 스크립트. /** * 전화번호 */ function SetTelFormat(obj) { val = obj.value; if(val.length < 8) { obj.value = ""; obj.focus(); alert("올바른 전화번호를 입력하세요."); return false; } str = ""; for(i=0; i

아... 옛날이여~ 자바스크립트 쿠키 굽는 함수를 2004년에 만들어 사용했다니... //쿠키저장 function setCookie(name, value,expire,path) { path = (!path)?"/":path; var todayDate = new Date(); unixtime = todayDate.getTime(); if (value==null) { expire = 0; } if (expire != null) { extime = unixtime+(expire*1000); todayDate.setTime(extime); expiretime = " expires=" + todayDate.toUTCString() +";"; }else{ expiretime = ""; } document.cooki..

왜 자바스크립트에는 trim이 없을까? 앞뒤 공백을 삭제하거나 아니면 문자열의 모든 공백을 삭제하거나 하는 상황이 얼마나 자주발생하는데. jQuery의 $.trim()도 있지만 jQuery를 사용못하는 상황이거나 사용하는 라이브러리에 문자열을 삭제하는 trim 함수가 없다면 직접 만들어서 사용해야 한다. 함수형 /** * trim('문자열',[compress|rtrim|ltrim]) */ function trim(str_val,optval) { if(optval == "compress") // 문자열의 모든 공백 제거 { return str_val.replace(/\s+/g, ""); } else if(optval == "rtrim") // 문자열의 오른쪽 공백만 제거 { return str_val.re..

어떤 문자열의 html 태그(tag)를 삭제 해야 한다면 javascript 에서는 정규식을 이용해야 한다. php 에서는 strip_tags 함수를 이용하여 html 태그를 제거할 수 있지만 javascript 에서는 정규표현식을 이용해야 한다. 기본 코드 htmlcode = "test"; var ptn = new RegExp("]*>","gi"); //혹은 아래 처럼 정규표현식 만듬 var ptn = /]*>/gi; htmlcode = htmlcode.replace(ptn,""); 함수 fuction stripTags(str_code){ var ptn = new RegExp("]*>","gi"); //혹은 아래 처럼 정규표현식 만듬 var ptn = /]*>/gi; return str_code.rep..