개발자의 끄적끄적

[JS/Calendar] 바닐라 자바스크립트로 달력 구현하기 [펌] 오늘은 바닐라 자바스크립트로 캘린더 구현하는 방법을 포스팅해보려고 한다. 캘린더 모양은 대충 이렇게 생겼고, 오늘 날짜는 노란색 동그라미로 표시된다. 그리고 특정 날짜를 클릭하면 해당 날짜가 다른 색깔로 표시되고 왼쪽 사각형에 있는 날짜와 요일이 클릭한 날짜로 바뀌어야 한다. 해당 기능을 구현한 코드는 위에 codepen으로 올렸고, 몇 가지 코드만 어떻게 구현했는지 적으려고 한다. const init = { monList: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December..

[Javascript] 날짜 및 시간 설정, 경과 시간 계산, 비교 [펌] Date 개체를 사용하여 날짜 비교 및 경과 시간 계산을 할 수 있다. 1. 날짜를 현재 날짜로 설정 - 날짜를 지정하지 않고 Date개체의 인스턴스를 만들면, 연도, 월, 일, 시, 분, 초 및 밀리초를 포함하는 현재 날짜와 시간을 나타내는 값을 반환한다. - 예제 코드 1 2 3 4 var dt = new Date(); document.write(dt); //Sun Aug 24 2014 15:33:59 GMT+0900 (대한민국 표준시) 2. 특정 날짜 설정 - 생성자에 날짜 문자열을 전달하여 특정 날짜를 설정할 수 있다. - 특정 날짜 생성하기 1 2 3 4 5 6 7 8 9 10 11 var dtA = new Date('8..

[자바스크립트] 리스트 검색 필터 이미 JSP단에 나열된 리스트가 있다고 하자. 그럴 때 특정 키워드를 입력해 해당 단어를 포함한 목록들을 추려내고자 한다면 contains 함수를 사용할 수 있을것이다. (본 게시글에서는 DB에서의 필터링을 다루지 않는다.) 검색: 나미야 잡화점의 기적(양장본) 창문 넘어 도망친 노인 코끼리의 무덤은 없다 꾸뻬씨의 행복여행(양장본) 앵무새 죽이기 출처: https://tozitizi.tistory.com/entry/자바스크립트-리스트-검색-필터 [TOZITIZI]

[javascript] location 객체 location location은 URL 정보를 가져오는 객체입니다. URL 전체 또는 일부의 정보를 가져올 수 있는데, 대표적인 것들은 다음과 같습니다. location location.host location.hostname location.href location.pathname location.protocol 예제 URL이 https://example.codingfactory.net/_lab/javascript.html 일 때, 각 객체 속성이 어떤 값을 가져오는지 알아보는 예제입니다. location location.host location.hostname location.href location.pathname location.protocol 출처 ..

[jquery] datepicker label explorer 오류 달력 이미지 보통 jquery datepicker를 사용할때 위처럼 input 박스와 그 옆에 달력이미지를 label로 감싸서 두가지다 클릭 반응이 일어날때 달력 선택 창이 그려지게 됩니다. 하지만, 달력 이미지 위처럼 코딩을하면 크롬에서는 정상동작하지만, explorer에서는 이미지 클릭시에는 아무반응이 없습니다. 정확한 원인은 모르겠지만... input 태그와 매칭을 해야하는 과정에서 id 와 name가 같은 이름이 쓰이는 동작을 안하는것을 확인했습니다!! 개발에 도움들 되시라고 올려봅니다!! 참고들 하세요!!

[javascript] instagram 파싱하기 javascript로 인스타그램 파싱할때 위처럼 ajax 로 파싱하면 가능합니다!!! 파싱하고자 하는 사이트 주소 맨 뒤에 /?__a=1 을 추가하시면 html 형태로 object가 가져와집니다!! 참고들하세용!

[javascript] alert library 유용한 alert 창 라이브러리 alert창에 url제거 [펌] javascript alert library 유용한 alert 창 라이브러리 alert창에 url제거 브라우져마다 제공하는 alert창의 UI는 다르죠. IE의 경우 크롬의 경우.. url 까지 뜨고.. 보기싫죠.. 결론적으로 말하면 우리가 자주 사용하는 브라우져의 alert창은 이쁘지 않습니다. 열씨미 googling을 해보면 많은 alert 라이브러리들이 존재하지만 그중에 좀 이쁘장한 걸 추천해 드릴려 합니다. 그 이름도 달콤한 SweetAlert 아래와 같이 훨~씬 이쁘장한 alert창을 간단하게 띄울 수 있습니다. 다운로드와 적용방법은 아래의 Link를 참고하세요~! Link : htt..

[ajax] 로그인 기능 Ajax 예제 Scenario: 로그인을 원래 쌩 jsp로 구성을 해보았엇는데 생각보다 많은게 필요하다. 만약 Jsp로 구성한다면 로그인 -> 로그인ok(로그인이 성공했는지 확인 page) -> 성공시 main (중간에 jsp 페이지를 안두고 구현 해볼려고했는데, 로그인 실패시 alert 창을 띄울수가 없었다.(엄청 고민해봤는데 결국 포기)) 이런식으로 중간에 jsp 페이지를 하나 더 거처야한다. 그러나 Ajax로 구현하면 동적으로 할 수있다. 그리고 페이지또한 로그인->성공시 main 실패시 그냥 alert 창 하나만 띄워주면 됐다. 아주 간편하다. Solutions: Ajax 구문 $('#btn_login').click(function() { var mid = $('#txt_..