$(function(){스크립트 코딩}) 스크립트안에 적는 코딩

이제는 body부내에 자바스크립트를 작성할 예정이다. 

• HTML DOM객체가 준비되면 즉시 코딩된 스크립트가 실행된다. 
• (HTML DOM이 화면에 렌더링 되기 전에 미리 스크립트 작업이 완료된다. 
• 즉, 엘리먼트에 이벤트 핸들러 함수를 등록하는 것, 특정엘리먼트를 감추는 것, 서버와 통신해서 초기화면에 필요한 데이터를 획득하는 작업 등 다양한 작업을 HTML DOM이 화면에 렌더링 되기전에 수행할 수 있다.
• 함수안에서 선언한 모든 변수, 함수, 객체들은 그 함수의 범위를 벗어나지 않는다. 즉, 브라우져 전역객체(Window객체)를 오염시키지 않는다.
• 사용자가 정의한 변수나 함수가 이미 다른 사용자가 정의한 변수나 함수를 덮어쓸 가능성을 없애준다.
•  단점은 html태그에서 function안에 선언된 함수를 이용할 수 없다. 
  • * <button onclick="test();">테스트</button>
      $(function(){
      function test() {
      alert("테스트 실행");
      }
     
       //이렇게 사용할 수 없다. 
  • <button onclick="test();">테스트</button>
      $(function(){
      $('#btn-test').click(function(){
      alert("테스트 실행");
      })
      //가져다 붙이는 것이 좋고, 아래처럼 작성하는 것이 좋다. 아래의 코드는 정상동작한다. 가져다가 붙여서 실행하는 것이 좋다.
      })
  • 사용방법
    • </div>
      
      <script type="text/javascript">
      //$(function(){스크립트 코딩})은 HTML DOM객체가 준비되면 즉시 코딩된 스크립트가 실행된다. 
      //(HTML DOM이 화면에 렌더링 되기 전에 미리 스크립트 작업이 완료된다. 
      //즉, 엘리먼트에 이벤트 핸들러 함수를 등록하는 것, 특정엘리먼트를 감추는 것, 서버와 통신해서 초기화면에 필요한 데이터를 획득하는 작업 등 
      //다양한 작업을 HTML DOM이 화면에 렌더링 되기전에 수행할 수 있다. 
      // 함수안에서 선언한 모든 변수, 함수, 객체들은 그 함수의 범위를 벗어나지 않는다. 즉, 브라우져 전역객체(Window객체)를 오염시키지 않는다. 
      // 사용자가 정의한 변수나 함수가 이미 다른 사용자가 정의한 변수나 함수를 덮어쓸 가능성을 없애준다. 
      // 단점은 html태그에서 function안에 선언된 함수를 이용할 수 없다. 
      /*
       * <button onclick="test();">테스트</button>
        $(function(){
        function test() {
        alert("테스트 실행");
        }
       
        }) //이렇게 사용할 수 없다. 
        <button onclick="test();">테스트</button>
        $(function(){
        $('#btn-test').click(function(){
        alert("테스트 실행");
        })
        //가져다 붙이는 것이 좋고, 아래처럼 작성하는 것이 좋다. 아래의 코드는 정상동작한다. 가져다가 붙여서 실행하는 것이 좋다.
        })
       */
      $(function(){
      //지정된 모달을 생성한다. 
      var bookInfoModal = new bootstrap.Modal(document.getElementById('modal-info-book'), {
            keyboard: false
         });
      //장바구니 테이블안에 있는 a태그를 선택한 경우 실행된 이벤트 핸들러함수를 등록한다.
      $("#table-cart-items a").click(function(){
      event.preventDefault();//a태그에서 클릭이벤트가 발생하면 링크된 페이지로 이동하는 기본동작이 일어나지 않게 한다.
      //지금 이벤트가 발생한 그 엘리먼트의 data-book-no 속성값을 조회한다.
      var bookNo = $(this).attr("data-book-no");
      //JSON을 획득하기 위한 메소드를 사용하고, no를 전달한다. 
      //아래의 요청은 "http://localhost/rest/book/detail.do?no=100"와 같은 형태의 요청을 서버로 보낸다.
      //서버로부터 성공적인 응답이 오면 function(응답데이터){...} 함수가 실행된다.
      //jQuery는 서버로부터 성공적인 응답이 오면 응답컨텐츠(json형식의 텍스트)를 자바스크립트 객체나 배열로 변환한 다음, 함수를 실행할 때 전달한다.
      $.getJSON('/rest/book/detail.do',{no:bookNo},function(book){ //아이디가 길면 충돌이 덜 일어난다. 
      //응답으로 받은 책정보를 모달창 테이블의 각 칸에 표시한다.
      $("#span-book-created-date").text(book.createdDate);
      $("#span-book-updated-date").text(book.updatedDate || '');//null이면 뒤의 값이 표시된다.
      $("#span-book-title").text(book.title);
      $("#span-book-author").text(book.author);
      $("#span-book-publisher").text(book.publisher);
      $("#span-book-price").text(book.price.toLocaleString());
      $("#span-book-discountPrice").text(book.discountPrice.toLocaleString());
      $("#span-book-pub-date").text(book.pubDate);
      $("#span-book-stock").text(book.stock.toLocaleString());
      //모달을 화면에 표시한다. 
      bookInfoModal.show();
      })
      
      });
      });
      
      </script>
      </body>