select box에 DB에 있는 값을 꺼내와 보여주고, 선택한 select box 의 값을 DB에 넣어 저장하기. 먼말인지 알쥬...? db 값을 select box 의 옵션으로 가져오기 왼쪽이 DB. DB값을 오른쪽의 셀렉트 박스로 가져오는 방법이다. Controller select box로 이동하는 컨트롤러에서, 가져올 DB값의 전체 검색 service를 실행한다. 나는 include 태그를 이용할거라 body에 담아줬다. @GetMapping("/join") public String joinForm(ModelMap map) { ArrayList list = classservice.getAll(); //전체검색 서비스 실행 map.addAttribute("list",list); map.addAttr..
doGet 방식 Index.jsp 페이지에서 "로그인" 버튼을 클릭하면 서블릿에서 doGet 으로 받아와 join.jsp 로 연결해준다. join.jsp 페이지에는 입력할 수 있는 폼 양식이 있다. 클라이언트가 폼 양식을 입력하고 제출하고 서블릿으로 연결하면 doPost에서 값들을 받아올 것이다. ⬇️ 폼 양식 보러가기 [HTML] HTML 기본 기능, 폼 양식 폼 사용자가 입력한 데이터를 서버 페이지에 제출 ➡️ 서버 페이지는 전달한 값들을 받아서 처리 폼 양식 폼의 id는 HTML에서 유일한 이름 지어주는 방법이기 때문에 중복되면 안 된다. 타입 submi skylarcoding.tistory.com RequestDispatcher 을 이용해 해당하는 jsp 페이지로 연결한다. protected vo..
방명록 만들기, 작성 기능을 구현해보자. 작성자, 글 비밀번호, 내용을 작성하고 작성 버튼을 누르면 새로운 영역에 글이 작성되는 기능이다. 방명록 작성자 글 비밀번호 내용 작성 바디에서 작성자, 비밀번호, 내용 의 값을 사용자에게 받아 "작성" 버튼을 이용해 함수 a() 를 불러낸다. (onclick = "a()") 에서 각 값의 이름으로 접근해 값을 받아 변수에 담는다. 값들을 파라메터에 담아 mkDiv 함수를 불러낸다 mkDiv 는 div 태그에 감싸서 내용을 프린트 하기 위해 만들었다. 새로운 div 태그를 만들어 영역을 추가한다. 새 div 태그에 id를 지정하고 비밀번호를 추가한다. 아이디가 겹치지 않도록 cnt 를 추가한다. 생성된 div 에 출력할 내용을 담은 변수 html 을 초기화해준다...
innerHTML 여는 태그와 닫는 태그 사이의 값이다. aaa 의 경우, 태그 사이의 aaa 의 값을 말한다. ⬇️ 예시는 아래 링크의 글들에서 확인할 수 있다. https://skylarcoding.tistory.com/search/innerHTML 코딩 학습 중 ... skylarcoding.tistory.com 요소 속성값 요소.attribute = 새값; 요소.setAttribute("속성명", "값"); 요소.getAttribute("속성명"); //속성값 반환
폼 양식 자바 스크립트 (JS) 로 불러내기 폼 양식을 자바 스크립트로 불러오는 문법이다. text, password, number 폼 받기 변수 html 에 위 문법을 사용해 값을 받고 html 변수를 출력하는 코드이다. 폼 양식 종류 id : pwd : phone :
이벤트 UI에 발생한 사건이다. 클릭, 드래그, 페이지 로드, 입력값 변경 등이 있다. 이벤트 핸들러 이벤트가 발생했을 때 자동으로 호출되는 함수이다. 핸들러 등록 속성 on이벤트명 이벤트 처리 click : 클릭 시 발생하는 이벤트이다. onclick load : 페이지 열리자마자 발생하는 이벤트이다. onload window.onload = 함수명; // 코드 결합 function 함수명(){ } //onload 속성에 함수 등록 window.onload=함수명; => window의 onload 속성으로 핸들러 등록. // 위 두개 코드 결합하면. // 해당 함수는 onload 이외에 다시 사용할 일이 없어서 결합하여 한 번 사용하는 익명의 함수를 생성. // 익명함수. 이름이 없는 함수, 이벤트 핸..
개발자 도구 자바 스크립트에서는 코드를 통해 오류를 찾는 것이 아닌, 크롬 등의 브라우저의 개발자 모드를 통해 오류를 찾는다. 크롬의 경우, F12 혹은 도구 더보기 - 개발자 도구를 통해 오류를 찾는다. 개발자 도구 사용법 1. 오류가 발생한다면 개발자 도구 상단에 X 표시가 뜨게 된다. 이를 눌러주면 하단에 나온 에러의 파일 명을 선택하면 이와 같은 페이지가 나오며 오류가 생긴 부분을 알려줍니다. 이를 보고 고치면 끝! 참 쉽쥬?
CSS 사용 용도 HTML을 더 편하게 꾸미는 코드. 요소 선택 태그명/id/class CSS 작성법 페이지 전체에 적용 : aaa bbb ccc ddd eee fff ggg hhh 이 모든 것들이 한 파일 안에 들어가 있으면 복잡하니, 코드를 CSS 파일로 저장해 필요할 때마다 import 하는 방법이 있다.
CSS 파일 링크 css 스타일을 파일로 만들어 적용한다. CSS 파일을 생성 mystyle.css 파일을 생성해준다. CSS 파일 생성하면된다. 복잡한 CSS 요소를 파일로 따로 저장해주고 HTML 에서 불러오는 것이다. @charset "UTF-8"; h1 { width: 150px; height: 100px; background-color: yellow; } body { color: blue; } /* id를 할당하고 그에 따라 디자인 채워넣기 */ /* 아이디가 h1_1인 요소 */ #h1_1 { color: red; } /* h1요소 중에서 아이디가 h2_2 인 요소 */ h1#h1_2 { color: green; } /* 태그 종류 상관없이 클래스가 c1인 요소 */ .c1 { backgrou..
