240118 홈페이지 만들기

수업에 앞서 조사 및 기본적으로 알고 있으면 좋은 여러 가지

1. 프레임워크와 라이브러리의 차이점

2. 오버로딩과 오버라이딩의 차이점

3. 힙 영역의 사용법

4. 클래스와 인터페이스의 차이점

5. var, let, const, 호이스팅

 

서버와 클라이언트가 있으면

서버에서는 Java, JSTL, EL 등을 먼저 계산하여 JSP 에 넣어 줌

클라이언트에서 확인 가능한 사항은, HTML, CSS, JS 만 확인 가능

 

CDN : 서버에 없는 파일을 연결하여 사용할 수 있음, 서버에 필요한 파일이 없어도 CDN 을 연결하면 필요한 파일을 CDN 에서 제공할 수 있음

 

제이쿼리 문법 : $ 표시로 시작

$(document).ready(function() {} );

 

Button 속성에 submit 을 넣고 클릭 시 알림창 뜨는 함수 만들기

<form onsubmit="return check()">
function check() {
  // alert("제이쿼리가 동작합니다.");
  let id = $("#id").val();
  alert(id);
  return false;
}

 

제이쿼리 실습

<script type="text/javascript">
  function check() {
    // alert("제이쿼리가 동작합니다.");
    let id = $("#id").val();
    // Not a Number
    // alert(id + " : " + id.length + " / 숫자 검사 : " + isNaN(id));
    if (id.length < 3 || id == "") {
      alert("아이디는 3글자 이상이여야 함");
      $("#id").focus();
      return false;
    }
    let name = $("#name").val();
    if (name.length < 3) {
      alert("이름은 3글자 이상이여야 함");
      $("#name").focus();
      return false;
    }
    let pw1 = $("#pw1").val();
    let pw2 = $("#pw2").val();
    if (pw1.length < 8) {
      alert("비밀번호는 8자리 이상만 받습니다.");
      $("#pw1").focus();
      return false;
    }
    if (pw2.length < 8) {
      alert("비밀번호는 8자리 이상만 받습니다.");
      $("#pw2").focus();
      return false;
    }
    
    if (pw1 != pw2) {
      alert("비밀번호는 서로 같아야 합니다.");
      $("#pw1").val(""); // val 안의 값을 넣지만, 빈칸이면 값을 지우는 효과를 가짐
      $("#pw1").focus();
      return false;
    }
  }
</script>

 

$(document).ready 대신 사용할 수 있는 축약형과

$() 안에 쉼표로 여러개를 넣을 수 있음

  // $(document).ready(function() {});
  // 대신 사용할 수 있는 축약형
  $(function() {
    $(".id-alert, .name-alert, .pw-alert").hide();
    // $(".name-alert").hide();
    // $(".pw-alert").hide();
  })

 

다시 나타내고 싶을 떄에는 각 조건문에 show(); 를 사용하여 작성

if (id.length < 3 || id == "") {
  // alert("아이디는 3글자 이상이여야 함");
  $(".id-alert").show();
  $("#id").focus();
  return false;
}

 

이후 정상 입력 시 사라지게 만들기

if (id.length < 3 || id == "") {
  // alert("아이디는 3글자 이상이여야 함");
  $(".id-alert").show();
  $("#id").focus();
  return false;
} else {
  $(".id-alert").hide();
}

 

AJAX

비동기적 상호작용 언어

 

script 안에 .ajax 를 이용하여 필요한 사항들을 작성

-> 홈페이지 회원가입 중 ID 중복체크 하는 항목

  function idCheck() {
    // alert("ID 검사를 누름");
    let id = $("#id").val();
    if (id.length < 3) {
      $(".id-alert").show();
    } else {
      $(".id-alert").hide();
      // alert(id);
      $.ajax({
        url : './idCheck', // 어디로 보낼 지 정함
        type : 'post', // 보내는 타입 설정
        dataType : 'text', // 보내는 데이터의 타입 설정
        data : {'id' : id}, // 앞이 보낼 이름
        success : function(result){
          alert("통신성공~");
        },
        error : function(request, status, error){
          alert("통신실패~~");
        }
      });
    }
    return false;
  }

 

서블릿에서 처리하는 법

String id = request.getParameter("id");
    
System.out.println("검사요청 : " + id);
    
MemberDAO dao = new MemberDAO();
MemberDTO dto = new MemberDTO();
    
dto.setMid(id);
    
int result = dao.idCheck(dto);
    
if (result == 0) {
    System.out.println("중복 없음 : " + id);
} else {
    System.out.println("중복 있음 : " + id);
}
    
PrintWriter pw = response.getWriter();
pw.print(result);

 

PrintWriter 를 너무 오랜만에 사용..

pw.print 를 사용하여 괄호 안의 값을 페이지로 전송

 

중간의 DAO 에는

  public int idCheck(MemberDTO dto) {
    int result = 1;
    Connection conn = dbConn.getConn();
    PreparedStatement pstmt = null;
    ResultSet rs = null;
    String sql = "SELECT count(*) as count,mid FROM c23c_26.member WHERE mid=?";
    
    try {
      pstmt = conn.prepareStatement(sql);
      pstmt.setString(1, dto.getMid());
      rs = pstmt.executeQuery();
      
      if (rs.next()) {
        result = rs.getInt("count");
      }
      
    } catch (SQLException e) {
      System.out.println("MemberDAO - idCheck 실패");
      // e.printStackTrace();
    } finally {
      close(conn, pstmt, rs);
    }
    return result;
  }

 

마지막으로 제이쿼리 문장 안의

success : function(result){
  // alert("통신성공~");
  if (result == 1) {
    alert("이미 가입되어 있어요.");
  } else {
    alert("가입 가능해요.");
}

 

으로 마지막 처리 진행