Dev/JavaScript12 자바스크립트 File input 동적 추가, 삭제하기(이벤트 위임) 서론 💭 전에 진행했던 프로젝트에서 j쿼리를 이용해 작성한 코드를 자바스크립트로 바꾸는 과정을 진행하고 있는데 약간의 애를 먹었던 동적으로 input file 태그를 추가해주는 작업! 파일 추가 버튼을 누르면 input이 추가 되고 추가된 삭제 버튼을 누르면 해당 input이 삭제되는 기능이다. input 태그는 잘 늘어나는데 삭제가 뒤죽박죽으로 됨, 삭제는 되는데 파일 선택이 안 됨, 걍 삭제가 안 됨 등 다양했는데 어쨌는 해내었다 ㅎ JSP 일부 HTML 삽입 미리보기할 수 없는 소스 메인이미지는 이미지 한 장만 업로드 할 수 있도록 구현했기 때문에 상세이미지에만 기능을 적용했다. input 태그의 name 값으로 각각의 input을 구분하도록 했고 동적으로 input 태그가 추가될 곳은 div 태그.. 2023. 4. 29. 자바스크립트 프로토타입? 자바스크립트는 프로토타입 Prototype이라는 공간을 가지고 있다. 프로토타입은 생성자 함수를 사용해 생성된 객체가 공통으로 가지는 공간을 의미한다. //생성자 함수 만들기 function Student(name, korean, math, english) { this.이름 = name; this.국어 = korean; this.수학 = math; this.영어 = english; //메서드 this.getSum = function() { return this.국어 + this.수학 + this.영어; }; this.getAverage = function() { return this.getSum() / 3; }; this.toString = function() { return this.이름 + '\t' .. 2023. 4. 10. JavaScript 자바스크립트 시계 만들기 타이머 관련 예제를 보다가 급 티켓팅할 때 애용했던 네이비즘 서버시간 사이트가 떠올라 간단하게 시계를 만들었다 ㅋㅋㅋ HTML 삽입 미리보기할 수 없는 소스 코드 전문 Date의 getDate() 메서드는 요일을 0~6의 숫자로 표현해준다. 따라서 요일을 담는 배열을 생성해 가져다 쓸 수 있도록 작성 getFullYear() 메서드부터 getSeconds() 메서드를 이용, 문자열을 조합하여 시간을 표현해줌 처음에 setInterval 메서드에 Date 객체 뽑아오는걸 바로 작성 했었는데 그러면 시계가 바로 나오지 않고 1초 뒤에 나오게 된다. 그래서 함수를 따로 만들어 빼주고 그 함수를 호출 해준 뒤 setInterval()이 돌아가게 하면 끝! 재밌다 ㅎ 화면 디자인 완전히 따라 만들진 않았고 이렇게.. 2023. 4. 9. DOM(Document Object Model) 문서 객체 모델 문서 객체 모델(DOM: Document Object Model)은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식이고, 좁은 의미로는 document 객체와 관련된 객체의 집합이다. DOM을 사용하면 HTML 페이지에 태그를 추가, 수정, 제거할 수 있다. vellalog 위 코드는 아래와 같은 트리 모양으로 나타낼 수 있다. 위 그림 속의 각 요소들을 '노드'라고 부른다. 노드는 요소 노드(Element Node)와 텍스트 노드(Text Node)로 구분할 수 있다. 요소 노드는 html 태그를 의미하고 텍스트 노드는 요소 노드 안에 들어있는 글자를 의미한다. 1. 문서 객체 만들기 1-1. 동적으로 문서객체 만들기 💭 웹 페이지가 처음 HTML 페이지에 적혀 있는 태그들을 읽으며 생성하는.. 2023. 4. 8. 카카오맵 api 좌표와 마커 이동(수정)하기 https://tavi.tistory.com/110 다음 우편번호 api와 카카오 맵 api 사용기 프로젝트를 마무리 하고 쫌쫌따리 추가구현 중인 것들이 있는데 그중 하나인 카카오 map api '모임'이 주제인 프로젝트인만큼 모임 장소를 지도로 표시해주는게 좋을 것 같아 시작하게 되었다. 모 tavi.tistory.com 저번 글의 카카오 맵 api를 사용한 후 수정폼에서 다음 우편번호 api를 이용해서 주소 검색 시 검색 된 주소로 지도의 좌표와 마커가 이동되도록 구현 했다. 이동은 아니고 새로 map을 만들어서 새로 좌표를 찍어주고 새로 마커를 찍어준 거긴 하다 ㅎ.. 1. DB에 저장 시킨 주소 지도 띄우기 HTML 삽입 미리보기할 수 없는 소스 다음 우편번호 api를 이용해 검색 완료된 주소와 .. 2023. 3. 22. 다음 우편번호 api와 카카오 맵 api 사용기 프로젝트를 마무리 하고 쫌쫌따리 추가구현 중인 것들이 있는데 그중 하나인 카카오 map api '모임'이 주제인 프로젝트인만큼 모임 장소를 지도로 표시해주는게 좋을 것 같아 시작하게 되었다. 모임을 개설하는 방장이 다음 우편번호 api를 통해 주소를 검색하면 카카오 맵으로 해당 장소를 띄워줄 계획이다. 💭 시작하기 전.. 지도에 대한 정보를 담는 테이블을 따로 생성해서 위도, 경도, 검색한 주소, 상세주소, 모임 번호, 주소 번호 시퀀스를 받는 6개의 컬럼을 만들어뒀다. 디테일 페이지에서 주소에 해당하는 위도, 경도를 가지고 있기 위해 쿼리를 추가로 작성하여 DAO 클래스의 디테일 처리 메소드에 추가해두었다. 지도 테이블에 insert 해주는 쿼리문을 따로 작성해 모임 개설(=게시글 등록) 시 쿼리가 돌.. 2023. 3. 7. 이전 1 2 다음
