본문 바로가기

수업내용91

20230608 수업내용🫡🫡🫡 오늘도 첫 시작은 javascript.. input type checkbox로 부터 값을 서버에 받아올 때는 request.getParameterValues();로 값을 받아와 준다.request.getParameterValues(); 은 String 배열을 리턴해준다. 개인정보 활용 동의 이메일 수신여부 광고성 문자 수신여부 name 속성과 value 속성이 어떻게 쓰이는지배웠다. 체크박스의 체크 상태를 바꾸려면 javascript가 필요하다. 위에는 하나의 버튼으로 두개의 버튼을 동시에 켜지도록 동작하는 함수이다. 강사님의 풀이👉👉 ajax요청을 통해서 처리할 jsp 페이지를 따로 만들어야 한다. json으로 전달 받을 때에는 로 변경해주어야한다. 파일 업로드 폼2 입니다. 제목 첨부파일 업로드 편한.. 2023. 6. 9.
20230607 수업내용2🤷‍♀️🤷‍♀️🤷‍♀️🤷‍♀️ 비밀번호를 수정하는 페이지를 만들어보는 시간이다. 먼저 비밀번호를 수정할 form을 만들어준 후에 비밀 번호 수정 페이지 기본 비밀전호 새 비밀번호 새 비밀번호 확인 수정하기 다시수정 javascript 부분에는 수정하기 button을 눌렀을 때 폼에 submit 이벤트가 일어났을 때 실행할 함수를 등록한다. .preventDefault는 실행이 되면 입력한 내용이 폼에 적용되지 않도록 막아준다. 이제 pwd_update.jsp를 만들어 session scope에서 수정할 회원의 아이디를 읽어오고 폼에 전송되는 구,새 비밀번호를 읽어온다. 그리고 현재 비밀번호도 읽어온다. //session scope 에서 수정할 회원의 아이디를 읽어온다. String id = (String)session.getAttri.. 2023. 6. 7.
20230607 수업내용🫡🫡🫡 정규 표현식 객체 만드는 방법 1. let reg = /표현식/; 2. let reg = new RegExp("표현식"); let isMatch = reg.test(검증할 문자열) bootstrap에 있는 기능중 form-floating을 활용해 효과를 넣어 주어보았다. 이 form-floating을 사용할 때에는 placeholder를 꼭 써주어야한다. 지난 시간에 board_file이라는 테이블을 만들어 자료실 목록을 구현하는 테이블을 만들어 보았다. 이번 시간에는 다운로드를 하는 페이지르 만들어 볼 것이다. 먼저 GET방식 파라미터로 전달되는 다운로드 시켜줄 파일의 번호를 읽어온다. int num = Integer.parseInt(request.getParameter("num")); 다운로드 시켜주.. 2023. 6. 7.
20230601 수업내용🫡🫡🫡 오늘도 수업의 시작은 비쥬얼 스튜디오.. Javascript정규식을 만드는 방법에 대해서 배워보겠다. 정규표현식은 .test()메소드와 .exec()라는 메소드를 많이 쓴다. 예를 들어 사용법은 이렇다. //정규표현식으로 검증할 문자열 const str = "abcabcabc"; 을 만들어주고 콘솔창에서 찍어보면 test메소드는 설정해둔 str에있는 문자가 있는지 true false로 반환한다. 찾아지면 true 없으면 false exec메소드는 매칭된 문자열을 찾아내는 것 이다. exec는 찾은 문자열을 추출하는 기능까지 있다. 앞에거 하나를 추출할 수도 있고 전체에서 찾아서 추출할 수도 있다. 정규표현식은 대소문자를 구별한다. 눈에 보이지 않는 space(띄어쓰기),tab, new line(개행기호).. 2023. 6. 1.
20230531 수업내용2🫡🫡🫡 이번 수업은 jsp는 마지막 수업으로 로그인/로그아웃/게시판 등등 기본적으로 다른 홈페이지에서 쓸수 있는 기능들을 구현해보는 수업이다. 여지껏 배운 것들을 모두 복습한다는 느낌으로.. 데이터베이스 연동을 위한 준비를 먼저 해주고 이번 프로젝트에서 사용할 index.jsp를 만들어 주었다. 인덱스 페이지 입니다. 회원가입 style bootstrap css/js도 연결해주고 회원 가입 폼 입니다. 아이디 영문자 소문자로 시작하고 5글자~10글자 이내로 입력하세요 사용 가능한 아이디 입니다. 사용할 수 없는 아이디 입니다. 비밀번호 특수 문자를 하나 이상 조합하세요. 비밀 번호를 확인 하세요 비밀번호 확인 이메일 이메일 형식에 맞게 입력하세요. 가입 기본적인 signup_form.jsp도 만들어 주었다. 위.. 2023. 5. 31.
20230531 수업내용🫡🫡🫡 회원가입폼 아이디 5 글자 이상 입력하세요! Looks good! 에 대한 코드 리뷰로 시작 document.querySelector("#id") = e.target.value와 비슷한 코드이다. 나중에는 db와 연동해서 만들려고 하는 계정이 이미 있는지 없는지(중복)을 배울것이다. javascript에서 const는 한번 선언되면 변치 않는다. 그러므로 코드의 신뢰성을 위해서는 const로 거의 선언하는 것이 옳다. if(isIdValid){ e.target.classList.add("is-valid"); e.target.classList.remove("is-invalid"); }else{ e.target.classList.add("is-invalid"); e.target.classList.remove.. 2023. 5. 31.
20230530 수업내용😢😢😢 비쥬얼스튜디오에서 다른 class를 하나더 만들었다. form 디자인 아이디 가입 form 디자인 아이디 비밀번호 가입 form 디자인 아이디 비밀번호 가입 반응형 ui에대해서 배우고있다. col-sm-6 같은 경우 폭을 좁게했을 때 창에대해서 100%를 유지하고있다. mx-auto라는 것은 마진의 x축을 auto로 잡아주겠다 라는 뜻이다. 부트스트랩 form에서 Validation이라는 것은 예를 들어 회원가입할때 필수로 입력해야할 것이 제대로 입력이 안되었을 때 오류를 경고해주는 것이다. 그런 디자인을 부트스트랩에서 css를 제공해주고있다. 밑에 이메일 형식에 맞게 입력해 주세요 가 보이려면 is-invalid가 class에 추가 되어야 한다. 회원가입폼 아이디 5 글자 이상 입력하세요! Looks .. 2023. 5. 30.
20230526 수업내용👉👉👉 css는 나중에 정의된 것이 적용된다. 하지만 이를 조건으로 걸어서 사용할 수 있는데 @media(min-width : 768px){} //mediaquery의 사용예제 위의 media query의 중괄호 안에 작성한 css는 조건부로 적용이된다. ( )안의 조건이 true 인 경우에만 적용이 된다. 따라서 device의 폭이 최소 768px이상이 되어야 적용된다. @media(min-width : 768px){ .bg-green{ background-color: green; } //768px이상인 경우에 배경색이 초록색이 된다. 반응형 페이지를 만드는 3가지 필수요건 1. media query 2. % 단위 3. viewport 설정 bootstrap-> rem은 html 최상위 요소의 글자 크기를 의.. 2023. 5. 26.
20230525 수업내용🤦‍♂️🤦‍♂️🤦‍♂️ 직접 방명록을 만들면서 500번, 404오류를 많이 경험했다. 500번 오류는 서버에서 Exception이 발생했을 때(코딩오류) 404번 오류는 요청오류 등이 많이 발생했다. jsp 페이지는 서버에서 해석되고 해석된 결과가 클라이언트에게 응답이 된다. jsp는 servlet에서 해석되어 응답된다. jsp 페이지에서 ${ }는 특별하게 해석해서 출력한다. 컨텍스트 경로는 손코딩을 하는 것 보다는 .request.contextPath 를 쓰는 것이 좋다. 나중에 컨텍스트 경로는 프로젝트후에 삭제 또는 수정될 예정이기에 ${pageContext.request.contextPath} 를 사용하는 것이 매우 바람직하다. 이것을 EL Expression Language라고 한다. 먼저 guest/list.jsp를.. 2023. 5. 25.