본문 바로가기

분류 전체보기

 (157)
JavaScript localStorage 활용 예제 (2) LocalStorage 활용 예제) 다음과 같은 html이 있다. 저장 삭제 번호, 이름, 주소를 입력하고 저장 버튼을 누르면 localStorage에 저장하고 삭제 버튼을 누르면 localStorage 에 저장된 정보를 삭제하고 페이지 로딩 시점에 localStorage 에 저장된 번호, 이름, 주소가 있다면 위의 input 요소에 출력되도록 해 보시오. document.querySelector("#saveBtn").addEventListener("click", ()=>{ // 1. 입력한 내용을 읽어와서 const num = Number(document.querySelector("#inputNum").value); const name = document.querySelector("#inputName"..
JavaScript localStorage 활용 예제 LocalStorage 란? localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있습니다. 저장한 데이터는 새로고침 해도 유지됩니다. localStorage 객체 활용해보기 웹브라우저의 javascript 실행환경에서는 해당 웹브라우저가 실행되는 기기의 파일 시스템에 접근을 할수가 없다 (파일 업로드를 위해 파일을 선택하는 경우는 제외) 따라서 파일시스템에 어떤 정보를 영구 저장을 할수가 없다. 저장 삭제 localStorage 에 저장된 메세지 : html 영역에 button 저장, 삭제 버튼 두개와 input 필드를 하나 생성하였다. 저장버튼을 누를 경우 p 요소에 저장된 텍스트가 출력하게 되고 삭제 버튼을 누를 경우 저장된 메세지가 삭제되는 기능을 만들어..
JavaScript JSON 활용 예제 JavaScript JSON 활용 예제) DOCTYPE html> Step10_example2.html 목록보기 번호 이름 주소 // 원격지 서버로 부터 받아온 json 문자열이라고 가정 const data = `[ {"num":1, "name":"김구라", "addr":"노량진"}, {"num":2, "name":"해골", "addr":"행신동"}, {"num":3, "name":"원숭이", "addr":"상도동"} ]`; // 목록보기 버튼을 눌렀을때 회원 목록을 tbody에 출력해 보세요. document.querySelector("#showBtn").addEventListener("click", ()=>{ const arr = JSON.parse(data); for (let i=0; i{ cons..
[Eclipse] Java Dao (select) select 예제) DB에 접속하는 클래스를 미리 생성하여 사용한다. Connection 객체의 참조값을 얻어와서 DB 접속을 완료. sql 변수 안에 Orcle select 문을 작성한다. 미완성인 select 문을 완성시킨다. 반복문을 돌면서 ResultSet에 있는 row 에 있는 정보를 추출한다. 추출한 정보를 dto 객체에 담는다. 누적된 dto 객체의 참조값을 리턴시킨다. Scanner 클래스를 활용하여 입력한 num에 맞는 회원정보를 열어오는 기능을 만들었다. 1. Scanner 클래스를 new 한뒤 num 값에 scan으로 입력한 값을 저장한다. 2. MemberDto 객체를 생성하여 dto 에 select 기능을 실행할 메소드의 참조값을 넣는다. 3. if 문을 활용해 입력한 회원의 정보..
[Eclipse] Java Dao (select List) select List 예제) DB에 접속하는 클래스를 미리 생성하여 사용한다. Connection 객체의 참조값을 얻어와서 DB 접속을 완료. sql 변수 안에 Orcle select 문을 작성한다. 반복문을 돌면서 ResultSet 에 있는 row 에 있는 정보를 추출한뒤 list배열에 누적시킨다. 누적된 List 객체의 참조값을 리턴시킨다. select 메소드를 실행할 클래스를 생성하여 사용한다. 1. List 객체를 생성하여 list 에 참조값을 넣는다. 2. 이중 for문을 사용해 얻어온 정보를 console 창에 출력한다.
[Eclipse] Java Dao (delete) delete 예제) DB에 접속하는 클래스를 미리 생성하여 사용한다. Connection 객체의 참조값을 얻어와서 DB 접속을 완료. sql 변수 안에 Orcle delete 문을 작성한다. 미완성인 ? 안의 값 num 이므로 필요한 데이터에 맞게 dto 객체에서 필요한 값을 입력한다. delete 메소드를 실행할 클래스를 생성하여 사용한다. 1. 삭제할 테이블의 회원의 num 정보를 변수에 담고 2. 정의한 정보를 dao.delete 메소드에 사용하고 3. boolean 타입의 daoDelete에 삭제 작업을 실행할 메소드를 담고 if문에서 실행시킨다. 삭제가 성공하면 콘솔창에 "삭제 했습니다." 가 출력된다. 실행결과 orcle scott 계정 member table에 num 4번 테이블의 값이 삭제..
[Eclipse] Java Dao (update) update 예제) DB에 접속하는 클래스를 미리 생성하여 사용한다. Connection 객체의 참조값을 얻어와서 DB 접속을 완료한다. sql 변수 안에 Orcle Update문을 작성한다. 미완성인 ? 안의 값은 각 name, addr, num 이므로 필요한 데이터에 맞게 dto 객체에서 필요한 값을 입력한다. update 메소드를 실행할 클래스를 생성하여 사용한다. 1. 수정할 회원의 정보를 변수에 담고 2. 정의한 정보를 dto 객체에 담고 3. boolean 타입의 daoResult에 업데이트를 실행할 메소드를 담고 if문에서 실행시킨다. 업데이트가 성공하면 콘솔창에 "수정했습니다." 가 출력된다. 실행결과 orcle scott 계정 member table에 num 1번 테이블의 값이 name ..
[Eclipse] Java Dao (insert) Dao 란? Data Access Object 라고 하며 DB의 데이터에 접근하기 위한 객체를 말한다. DB에 접근하기 위한 로직을 분리하기 위해 사용되며 DB에 접근하여 insert, update, delete, select 조작하는 기능을 수행한다. insert 예제) DB에 접속하는 클래스를 미리 생성하여 사용한다. Connection 객체의 참조값을 얻어와서 DB 접속을 완료한다. 실행 할 작업은 insert 이므로 orcle의 insert 문을 입력한다. sql문이 미완성인 ? 가 존재하는 곳에 알맞는 값을 넣어준다. 다른 메인클래스에서 사용하는 코드이다. 1. 추가할 정보를 정의하고 2. 정의된 정보를 dto 객체에 담는다. 3. dto객체를 insert()메소드에 전달하면 DB에 추가되는 i..

티스토리툴바