개발관련/javascript&jquery7

• 

  Counter.js 를 써서 티스토리 블로그 방문자 수 애니메이션 효과 넣기 안녕하세요 곰이에요:) 오늘은 Counter.js를 활용하여 티스토리 블로그 방문자수에 활용하여 멋지게 꾸며줄 예정입니다. counter.js는 정해진 숫자까지 증가하는 애니메이션 효과를 넣을 수 있는데요. 예시를 사진으로 보여 드리겠습니다. 이런 식으로 말이에요 ㅎㅎ 무슨 느낌인지 감이 오시죠?? 현재 저는 티스토리 블로그 방문자 수에 활용 중인데요 이걸 한다고 해서 방문자수가 오르고 그러진 않습니다. 그냥 자기만족 및 보는 재미 정도? 저는 작업에 앞서 오픈 소스 GitHub를 참고하였습니다. https://github.com/bfintal/Counter-Up GitHub - bfintal/Counter-Up: Counter-Up is a lightweight jQuery plugin that cou.. 개발관련/javascript&jquery 2022. 8. 19.

• 

  [Jquery/Javascript] 핸드폰번호 정규식 및 숫자만 입력되게 하는법 안녕하세요 개발쉽게하자곰 입니다. 날씨가 많이 우중충하네요 어제는 번개까지 치던데... 후 너무 찝찝한 하루에요 ㅠㅠ 회원가입이나 따로 핸드폰 번호를 입력받아야 할 때 많이 사용되는 방법에 대해 공유드리고자 합니다. 핸드폰 번호 검증과 정규식 우선 010/1234/5678 관련해서 각각 따로 입력받아 하나로 합치는 건데요 ㅎㅎ 이렇게요 ㅎㅎ 출력 이렇게 하나씩 출력하면서 셀렉터를 잡아줍니다. 출력 필수 값 체크도 해줬습니다. 그런데 전화번호 같은 경우엔 - (하이픈) 이 붙어야 한다면. 출력 이런 식으로 해주면 됩니다. 저는 여기서 input box에 숫자만 입력받게끔 하겠습니다. 이 방법도 좋지만 복붙에 취약합니다. 가볍게 보여드리자면 이렇게 onkeyup이기에 키업을 안 한 상태로 입력하게 되면 받게.. 개발관련/javascript&jquery 2022. 8. 2.

• 

  [Jquery/Javascript] 체크박스 전체 선택과 전체 해제 구현하기 안녕하세요 개발쉽게하자곰 입니다. 오랜만에 개발 관련 포스팅 써보네요! 오늘은 jquery로 체크박스 전체 선택 관련해서 써볼까 합니다. 우선 셀렉터를 input에 name으로 잡았을 때에 처리하는 방법입니다. 함수를 이용한 방법 prop 방식 오늘의 점심 전체선택 국밥 햄버거 칼국수 중식 초밥 파스타 피자 HTML 삽입 미리보기할 수 없는 소스 전체 선택 시 이렇게 전체적으로 선택되는 모습입니다. attr 방식 오늘의 점심 전체선택 국밥 햄버거 칼국수 중식 초밥 파스타 피자 HTML 삽입 미리보기할 수 없는 소스 prop 말고도 이렇게 attr로도 전체 선택을 구현할 수 있습니다. on(), click() 함수를 이용한 방법. click() 함수 이용 오늘의 점심 전체선택 국밥 햄버거 칼국수 중식 초밥.. 개발관련/javascript&jquery 2022. 8. 2.

• 

  [html/css/javascript/jquery] 셀렉터(Selector) 활용법! 안녕하세요! 개발쉽게하자곰 입니다. 오늘은 셀렉터에 대해서 조금 알아볼까 해요 ㅎㅎ 저도 html 페이지 개발할떄 거의 셀렉터를 쓴다고해도 과언이 아닐정도로 실무에서도 유용하게 쓰고있습니다. 셀렉터란? 말그대로 선택자 역할을 하는데요. 우리가 평소에 자주볼수있는걸로 예시를 들자면 결과 값 우리가 평소에 흔히볼수있는 document.getelementByid('아이디명').value 같은경우 또는 Byname 이렇게 자주 접할수있는데. 셀렉터를 쓰면 훨씬 간결하고 원하는 값을 찾아오기가 수월하다랄까??? 셀렉터를 활욯해서 input의 value값을 알아보겠습니다. 셀렉터를 썼구요. 훨신 간결해졌죠?? 결과출력 결과 값은 똑같아요. 보다 간결하게 DOM안에서 해당하는 태그 값이나 속성을 바꾸거나 주거나 할수.. 개발관련/javascript&jquery 2020. 11. 25.

• 

  Javascript & Jquery / "onblur" 속성으로 1000단위 콤마찍기! 안녕하세요 개발쉽게하자곰 입니다. 아까 올렸던 버튼을 이용한 콤마찍기 보여드렸죠~~ㅎㅎㅎ 그냥 생각나서 이번엔 onblur 속성을 활용하여 숫자 입력 후 onblur 상태가 되었을때 콤마를 찍어주도록 하겠습니다. 최종 코드 입니다. 최종코드는 접어두고 onblur 속성을 살펴보자면 input 태그에 입력할때에 커서는 input 창에 있습니다. 그 커서가 빠져나올때라고 보시면 될것같습니다. 해당 커서가 빠져나올때 실행한다 이런식으로 알고계시면 좋을것같아요. 직접해보실수있게 추가해놓을게요 ㅎㅎ HTML 삽입 미리보기할 수 없는 소스 더 유익한 정보로 찾아뵐게요~ 궁금하신 점 댓글 남겨주시구 구독도 눌러주시면 감사하겠습니다~ 개발관련/javascript&jquery 2020. 11. 24.

• 

  [Javascript/Jquery] 제이쿼리로 천 단위 콤마 (1,000) 세자리마다 콤마찍기! 음~ 개발하다보면 가격?이나 1000단위 이상 수에 콤마를 넣어 가독성이 좋게 한다던지 그런작업을 하실진 모르겠지만.. PHP에는 number_format이라는 함수가있지만 PHP말고 javascript를 사용했을때 html안에서 해결 할 수 있을까?? 해서 만들어본 함수입니다. 최종 코드 콤마찍기 직접해보시길바랍니다. HTML 삽입 미리보기할 수 없는 소스 영상으로 보여드리겠습니다. 보시다시피 이렇게 1000단위로 콤마가 찍히는 걸 확인하실수 있습니다. onblur 사용하여 버튼을 누르지않아도 콤마가 찍히게 해볼게요 직접해보시면 어떤건지 감이 확 오실겁니다 ㅎㅎ HTML 삽입 미리보기할 수 없는 소스 +추가 음..이게 계속 숫자 늘려서 쓰면 콤마가 이상하게 들어가네요 ㅎㅎ 최종수정본 HTML 삽입 미리.. 개발관련/javascript&jquery 2020. 11. 24.

• 

  javascript/jquery 활용해서 간편 계산기 만들기! 최종 코드 개발쉽게하자곰 C / 7 8 9 + 4 5 6 - 1 2 3 * 0 = 오늘의 주제는 계산기인데요 제이쿼리로도 계산기 간편하게 만들수있어요! 시간이 나서 잠깐 만들어보려고 해요 우선 기본 틀 부터 만들어야해요. 저는 에디트 플러스라는 툴을 써요! www.editplus.com/kr/download.html 에디트플러스 문서 편집기 - 평가판 무료 다운로드 평가판 무료 다운로드 에디트플러스는 쉐어웨어로 배포되므로 다운로드해서 30일 동안 사용해 볼 수 있습니다. 만일 프로그램이 유용하다고 판단되어 30일 평가 기간 이후에도 계속 사용하고자 www.editplus.com 여기서 다운받을수있어요 필요하신분은 다운받아서 쓰시면 되겠습니다~! 자 그런다음 우리는 jquery 제이쿼리를 쓰려면 스크립트를.. 개발관련/javascript&jquery 2020. 11. 24.