수업내용91 20230703 jQeury button을 눌렀을 때 노란색 box가 숨겨지거나 보이게 되도록 해보겠다. 숨기기 보이기 위 코드 말고 이런 동작을 해주는 메서드가 따로 있다. 숨기기 보이기 토글 .hide(); .show(); .toggle(); //스위치 처럼 껐다 켰다를 할 수 있다. 이를 이용해 함수를 만들수도 있다. 아래에 있는 .show()와 .toggle()에도 똑같이 적용된다. 숨기기 보이기 토글 위의 코드는 #hideBtn은 1초 후에 알림창으로 "호엥"출력 #showBtn은 2초 후에 알림창으로 "호에에엥"출력 #toggleBtn은 꺼졌다 켜졌다 하는 동작을 해준다. css3에서는 트랜지션, 애니메이션 동작으로 쉽게 구현할 수 있다. 숨기기 보이기 토글 움직이기 움직이기2 움직이기3 2023. 7. 3. 20230629 jQeury 빨간색 영역은 페이지 로딩 시점에 함수가 등록이 되고 파란색 영역은 실제 버튼을 눌렀을 때 실행의 흐름이 들어오고 요청 파라미터까지 주황색 영역은 요청 파라미터까지 들어오면 success 함수가 실행이된다. 바닐라js에서 fech()보다 간단해서 좋은 것 같다. jQuery를이용해서 페이지 로딩없이 페이지 번호를 만드는 Class를 만들어보겠다. 1.페이지의 내용 요청하기 .appendTo에 들어갈 요소는 미리 만들어져 있어야 하며 요소를 id로 만들어서 사용가능하다. ajax 요청을 통해서 받아온 데이터 사용하기 페이지 전환없이 서버에 요청하는것을 ajax 라고 생각하면 된다. 번호 작성자 제목 와 은 비어있지만 2023. 6. 29. 20230628 수업내용 Up/DouwnloadFile🤣🤣🤣 FileServiceImpl Class에 있는 File을 저장해주는 메서드 파일명과, 파일 사이즈를 저장해주며 dto에 업로드된 파일의 정보를 담아준다. @Override public void saveFile(FileDto dto, ModelAndView mView, HttpServletRequest request) { //업로드된 파일의 정보를 가지고 있는 MultipartFile 객체의 참조값 얻어오기 MultipartFile myFile=dto.getMyFile(); //원본 파일명 String orgFileName=myFile.getOriginalFilename(); //파일의 크기 long fileSize=myFile.getSize(); // webapp/resources/upload 폴더 까지.. 2023. 6. 28. 20230628 수업내용🫡🫡🫡 jQuery에 대한 복습! $(선택자).동작함수1().동작함수2() 달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자이다. - 선택자를 이용하여 원하는 HTML 요소를 선택하고, - 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정한다. /test_jquery/Step02_ajax.jsp $는 함수이면서 object로도 사용이 가능하다. Oracle DB에서 연결 연산잦는 + 가 아니고 || 파이프문자 2개이다 'kim' + 'gura' = X 'kim || 'gura' = O File(자료실)게시판을 만들 dao/daoImpl package com.gura.spring04.file.dao; import java.util.List; import com.gura.spri.. 2023. 6. 28. 20230627 수업내용🤣🤣🤣 오늘 첫 수업은 이클립스로 jquery배우기 jquery로 이벤트 리스너 함수 등록이다. 마우스를 올렸을때 일어날 함수를 등록하는 예제 2교시 부터는 스프링수업 session영역에 저장되어있는 id값을 삭제해서 logout을 하는 메소드 @RequestMapping("/users/logout") public String logout(HttpSession session) { //세션에서 id라는 키값으로 저장된 값 삭제 session.removeAttribute("id"); return "users/logout"; } 검색기능만들기 Mapper에 FileMapper 를 만들어준다. WHERE title LIKE xxx OR orgFileName LIKE xxx => 제목과 파일명 검색 WHERE title.. 2023. 6. 27. 20230626 수업내용🤦♂️🤦♂️🤦♂️ 웹브라우저에서 F12 소스보기를 누르면 어떠한 것들이 사용되고있는지 볼수 있다. 웹브라우저는 위 코드를 javascript로 불러들여 해석해서 해당 페이지에서 해석하여 함수로써 사용한다. jquery는 jquery만의 메소드를 가진 배열을 return 해준다. 5개의 참조값을 return해주는 $("div").text("hi");는 let divs = document.querySelectorAll("div"); for(let i=0; i session.insert("users.insert",dto); ->UsersMapper.xml에서 DB insert구문 완성 configuration.xml에서 typeAliases로 파라미터 데이터타입 별칭 만들어주기 UsersMapper.xml에서 insert문 완.. 2023. 6. 26. 20230623 수업내용😶🌫️😶🌫️😶🌫️ 오늘은 Vue2를 기본적으로알아보는 수업을 끝내고 jQery(이하 제이쿼리)에 대해서 배우겠다. 제이쿼리는 웹 개발에서 오랫동안 사용되어온 자바스크립트 라이브러리로, HTML문서 탐색, 문서 조작, 이벤트 처리, 애니메이션 등을 단순화하고 개발자들에게 편의성을 제공한다. 그러나 최근 몇 년간 웹 개발의 추세가 변하면서 제이쿼리의 인기와 사용 빈도가 점차 감소하고 있다. 그 이유로는 주요한 이유 중 하나로 자바스크립트 언어 자체의 발전이다. 최근 웹 브라우저들은 웹 표준을 준수하고 웹 API를 널리 지원하며, 웹 개발에 필요한 많은 기능들이 내장되어 있습니다. 이로 인해 웹 개발자들은 제이쿼리를 사용하지 않고도 순수한 자바스크립트로 웹 애플리케이션을 개발할 수 있게 되었다. 또 다른 이유는 프론트엔드 개발.. 2023. 6. 23. 20230622 수업내용🤦♂️🤦♂️🤦♂️ 첫 수업시작은 vue 여지껏 서버에서는 서버사이드랜더링을 많이했지만 vue나 react를 통해 클라이언트사이드 랜더링을 배워보겠다. 기본적으로 출력할 데이터는 서버에있는데 페이지 전환없이 데이터를 출력하는 방법중 하나로 fetch를 배워보겠다. xml형식이나 json형식으로 주는 방법도 있는데 이중에 json을 활용해 보겠다. JSONWriter.valueToString을 사용하여 list에 데이터를 담아주고 json 참조값에 담아준다. Vue의 created메소드를 사용해서 웹브라우저에 페이지 전환없이 출력 2교시는 Spring시간 위에는 모두 다 Bean이다. SqlSession 은 DB와 연동되어있는 bean이다./SqlSession 은 mapper를 로딩해준다. Service는 Controller.. 2023. 6. 23. 20230620 수업내용😢😢😢 오늘의 첫 수업은 vue2 ajax 요청을 통해서 받아온 데이터사용하기 페이지 전환없이 서버에 요청하는 것을 ajax라고 생각하면 된다. vue2의 반복문 문법 라이브러리를 다운받으려는데 maven이나 gradle이 아닌경우에는 직접 jar파일을 다운받아서 써줘야한다. 다운받은 라이브러리에 들어있는 json관련 Class들 이렇게 작성하면 아래와 같은 결과물이나온다. created(){}👉Vue가 준비 되었을때 (root componen가 준비 되었을 때) 최초 한번 호출된다. created(){ //Vue가 준비 되었을때 (root componen가 준비 되었을 때) 최초 한번 호출된다. //fetch를 이용해서 서버에 데이터를 요청한다. fetch("/Step05Final/cafe/json_list... 2023. 6. 20. 이전 1 2 3 4 5 6 7 8 ··· 11 다음
