Programming Blog

Step2 24기 3주차 본문

한큐에 자바

Step2 24기 3주차

Go-ong 2019. 1. 21. 23:16

Step2 24기 week3 수업 정리


  • 외워야 할 것
    - onclick 속성 : onclick="pageSubmit(' ...')">

    - JavaScript 함수 사용법
    <scrpit>
            var pageSubmit = function(menu) {
                    alert(menu);    // == location.href = "main.do";
            }
      </script>

    - 데이터 처리 방식 (쿼리 스트링)
    1. get : 보낸 데이터가 주소창에 보이고, 보내는 데 한계가 있다.
    2. post : 보낸 데이터가 주소창에 보이지 않고, 보내는 데 한계가 없다.
    ? 뒤의 문자열을 쿼리 스트링이라고 하고, ? 뒤는 &로 이어주고,  키 = Value 방식으로 전달되며, HttpServletRequest requset는 쿼리스트링만 인자로 받는다.
    request.getParameter("...");  : 괄호 안에 키 이름이 들어간다. 그래서 키가 들어가고 value가 빠진다.

    - 외워야 할 제이쿼리 메서드 7가지

    1 $(타겟).click(function(){ })

    클릭 이벤트 리스너.

    타겟을 클릭하면 익명 함수를 실행한다.

     

    2 $(function(){ })

    도큐먼트레디.

    문서를 다 읽은 다음에 이 메소드 안에 있는 코드를 읽는다.

     

    3 $(타겟).removeClass("클래스명")

    해당 타겟의 클래스를 지워라.

     

    4 $(타겟).addClass("클래스명")

    해당 타겟의 클래스에 클래스명을 추가하라.

     

    5 $(타겟).attr("속성명", "속성의 값")

    해당 타겟의 태그 안에 속성과 속성의 값을 넣는다.

     

    6 $(타겟).val("값")

    해당 타겟의 value 속성에 값을 넣는다.    // 다음 수업에 li추가 후 값을 전달하기 위해서 사용함

     

    7 $(타겟).val()

    해당 타겟의 value속성에 들어있는 값을 가져온다.


    - c:out 작성법
    <c:out value='${param.pageName}' />;    //배열, forEach에서 많이 나오므로 꼭 숙지!

    - 하이라이트 처리 과정
    메뉴를 누르면 호출되는 함수를 만들고 호출 함수의 매개변수 값으로 클릭한 a태그의 부모인 li태그의 id를 전달하고,
    매개변수 값을 보내기 위해 처리하는 방식은 form태그 생성, input 태그 type=hidden 생성하고 내가 보내고 싶은 데이터를 굳이 
    사용자가 볼 필요 없기 떄문에 type을 hidden으로 처리하고,  input의 value에 매개변수로 받은 값을 넣기 위해
    $("#inputid").val(menu); 를 작성하여 input의 value에 값을 넣고 그 후 주소값을 넣기 위해 
    $("#frm").attr("action", "main.do"); 를 작성하여 form태그의 action속성에 main.do를 넣어주는 메서드를 작성한다.
    참고로 action 속성에는 논리적 주소를 넣어야 한다.
    그 다음 main.do 라는  논리적 주소를 가진 form태그를 submit하면 메뉴 클릭부터 값 넣기까지 모두 실행되고 컨트롤러로 가게된다.
    컨트롤러에서 리턴 하여 main.jsp로 리턴됐지만 도큐먼트 레디로 잡은 것을 pageName이라는 특정 변수에 c:out value='${param.pageName}' /> 시큐어 코딩(보안, 문자열)을 하여 넣어줬다.
    그리고 모든 li의 타겟을 잡아 removeClass를 하여 active 클래스를 다 지우고, 맨 처음 클릭한 a태그의 li의 id를 pageName으로 가져와서 
    그 li태그에만 active 클래스를 addClass 해주면 하이라이트 처리가 된다.

    - form태그 전송 방식
    li태그 추가 후 form태그와 input태그를 만들고 .val 제이쿼리 메서드를 이용하여
    val의 괄호 안에 input 태그의 value에 전달할 값 or 변수를 넣는다.


  • a href 속성은 #으로 주고 onclick 속성에는 미리 선언해둔 JavaScript 함수를 사용하면 해당 a태그를 클릭시 함수를 호출할 수 있게 된다.

  • 인라인 이벤트 속성, 인라인 이벤트 모델

  • 자바 스크립트에서 함수이름이 없는 함수는 익명 함수라 한다.

  • 변수에 함수를 대입한 경우 변수는 완벽히 함수로서 동작한다. 또한 선언한 변수명이 함수명으로 대입된다.

    function() { // <- 자바스크립트에서 함수스코프 }

  • 하이라이트 기능 : 어떤 메뉴가 클릭 되었는지 알려주는 기능

    • 크롬 개발자 도구를 이용해 하이라이트 되어진 엘리먼트의 클래스중 어느 클래스가 하이라이트 보여주는지 찾는다 .
    • 타겟 잡아서 하이라이트를 전부 지우고 해당하는 부분만 하이라이트 적용한다.

  • HTML 태그의 id는 1개의 문서에서 유니크한 값이여야 한다.

  • 문서란 <HTML>태그 시작 ~ 끝 부분을 말한다.

  • 1depth는 아래는 자식, 위는 부모 2depth는 아래는 자손,위는 조상

  • 데이터를 전송하는 2가지 방식이 있다.

    • get 방식 ?기준으로 오른쪽에 key, value쌍으로 보낸다. ?뒤를 쿼리스트링이라 부른다.
    • 쿼리스트링은 GET방식 전송시 논리적 주소/? 뒤에 선언된 변수명=값 구조의 문자열을 뜻한다. '?'로 논리적 주소와 쿼리스트링을 구분하며 쿼리스트링끼리는 '&'로 구분한다.
    • get방식
    • post방식

  • jquery객체의 click이라는 메서드는 익명함수를 인자로 받는다. target을 클릭하면 익명 함수를 실행해라.

    // 클릭이벤트리스너 $("#btn").click(function() { alert("클릭"); });

  • 이벤트리스너는 document.ready안에서만 선언 해야 한다.

    • 엘리먼트가 없는 로드가 안된 상태에서 타겟팅을 하면 undefined가 뜨기 때문이다.
    • document.ready안에 있는 함수 및 변수들은 HTML 요소가 완전히 로드되고 난 후 동작한다.

    $(function() { // 여기에 쓰여진 코드는 문서가 로드된후에 실행 됩니다! });

  • 한 문서내에 여러개의 document.Ready가 있을수 있고 여러개 있는 경우 타일즈 구성상 위에 부터 실행 되어진다.

  • <li></li> 타겟 잡는법

    • <li class="menu"><li> "menu" 클래스를 추가해서 잡는다 ⇒ $(".menu") // 현업에선 절대 사용하지 않는 방법

  • EL태그 ${}, ${param.키} 이전 화면에서 보낸 쿼리스트링의 키와 일치하는 value로 바뀌어서 화면에 전달된다.

  • 시큐어코딩 xss공격 방지, 악성코드 역시 스크립트 코드다.

  • EL을 쌍따옴표나 홑따옴표로 감싸고 JSTL의 <c:out value=' '/> 기능을 활용하여야 안전하다. 해당 JSTL을 사용하기 위해서는 jstl의 core 태그라이브러리를 선언해야 한다.

    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> //jstl을 c라는 접두어를 붙혀서 쓰겠다. <script> //value안에 넣어져있는 값은 무조건 문자열로 화면에 전송이 된다. var pageName = "<c:out value='${param.pageName}' />";

    </script>

  • form 태그는 어디에나 써도 상관없지만, id는 업무에서 보통 frm이라 쓴다.

  • method에 아무것도 안적을 경우 default로 Get으로 설정된다. action은 논리적 주소를 적는다.

  • input 태그의 name속성은 쿼리스트링의 key역할을 한다.

  • input 태그의 value속성은 쿼리스트링의 value역할을 한다.

  • HttpServeletRequest 는 쿼리스트링만 받을 수 있다.

  • 폼태그 안에 input태그는 값을 보내기 위해서쓴다.

  • 때문에 폼 태그 submit시 input 태그의 name속성 값을 컨트롤러로 전달하기 위해서는 해당 input태그를 form 태그 안에 넣어야 한다.

  • 값을 넘기기 위해 input 태그를 쓰는데 화면에 보여줄 필요가 없다면 type속성을 hidden으로 처리한다.

  • 타겟팅한 엘리먼트의 첫번째 인자는 속성, 2번째 인자를 value로 넣는다.

      // id가 frm인 element의 action이라는 속성에 main2.do라는 값을 넣겠다!
  $("#frm").attr("action", "main2.do");

  • $().val("인자") 는 해당 엘리먼트의 value속성에 인자로 들어온 값을 넣는 jquery 메서드다. 하지만 중요한 점은 인자가 있을때와 없을 때 다르게 동작한다.

      // id가 pageName인 element에 value를 main2라고 하겠다.
  $("#pageName").val("main2");
  
  // 하지만 인자가 없는 경우엔 해당 타겟의 value 값을 꺼내와라
  $("#hanqValue").val();

질문리스트

  • 하이라이트를 처리하기위해 어떤 데이터가 필요하고 어떤 작업이 필요할까요?
  • get 방식으로 한글을 보냈는데 이상한 문자가 출력됩니다. 원인은 무엇이고 해결 방법은 무엇인가요? (해결 방법은 여러가지지만 수업에 알려준 방법을 얘기하세요.)
  • 하이라이트 기능은 어떻게 만드는 거에요?
  • 하이라이트는 어떻게 되는 거에요? (시작 지점은 onclick 부터 설명하면 된다.)

표준코딩

  • JS에서는 같다는 표현 할 때 === 3개 써야 표준코딩이다.
    • == 와 ===의 차이는 ===는 타입까지 일치해야 true가 나온다. JS는 동적 타입 언어 인데 ==를 사용할 경우 자동으로 type을 바꾸어 비교하기 때문에 의도치 않게 동작 할 수 있어 위험하다.
  • HTML에선 대입연산자 사이에 한칸씩 띄어 주지 않는다.

숙제

  • onclick 안보고 치기, onclick에 어떠한 호출함수를 호출하고 거기에다가 파라미터를 던지고 그런다음에 스크립트 쪽에서 어떤 호출함수를 호출했던 간에 var를 써서 익명함수를 담은다음에 alert치는거 다 외우기!

  • else if 문도 다 외워 오기

  • HttpServletRequest 외우기

  • document.ready 외우기 ⇒ $(function() { })

      $(function() { 
  	// 여기에 쓰여진 코드를 쓰면 문서가 로드 된 후 실행 됩니다.
  });

  • 메트로킹에 하이라이트 기능 추가 단 2뎁스 하이라이트는 하지마라 1뎁스만 표준코딩 맞춰서 해오기! (하이라이트 처리 폼서브밋 방식으로 구현하기)

  • jquery 메서드 6개 .val() .attr() .submit() .click(), removeClass(), addClass() 외우기

  • 동영상 촬영 ( 주황색 대시보드 하이라이트 하는거 6분 컷)


'한큐에 자바' 카테고리의 다른 글

Step2 24기 2주차  (0) 2019.01.21
Step2 24기 1주차  (0) 2019.01.21
'한큐에 자바' Related Articles more
Comments