이번에는 Jquery 의 달력을 알아보겠습니다. datePicker 를 이용할 예정 입니다. datePicker 검색 엔진에 "datepicker" 라고 검색을 해줍니다. 해당 웹사이트에 들어가서, 나와 있는 예제를 가져다가 사용하면 되는데요 "view source" 를 눌러서 필요한 내용을 가져다가 사용하면 됩니다. 이를 사용하기 위해서는 먼저, 아래의 링크를 복사해서 붙여넣기 해주어야 합니다. 그리고, 예제에 있는 내용 중에서 필요한 코드를 가져다가 사용 해주시면 됩니다. 사이트의 우측에 있는 Examples 를 잘 보고 사용 해주시면 되겠습니다.

이번에는 Jquery 의 비동기통신 방법인 ajax 에 대해서 알아 봅시다 ajax 비동기 통신은 페이지의 이동없이 서버와 데이터를 주고 받는 것을 의미 합니다. 예를 들면, 실시간 으로 되는 것들이 있겠네요 java script 에서는 fetch 라는 걸 썻었는데, Jquery 에서는 ajax 라는 걸 사용하면 됩니다. 이번에는 어제 배운 REST API 를 이용해서, 비동기 서버를 만들고, 만든 비동기 서버에 접속해서 데이터를 가져와 볼겁니다. 실습하는데 필요한 건, 이클립스 , 서버(Tomcat) , visual studio code 가 되겠습니다. 서로 다른 툴을 사용하는 이유는, 서버를 다르게 하기 위해서 입니다. 현재 이클립스는 8181 포트, vs code 는 5501 포트 를 실행하게 되어..

드디어 Jquery 의 이벤트 에 대해서 알아 봅시다 이벤트 이벤트는 어떤 입력 예를 들면, 클릭, 키 업 등등 에 따라서 실행되도록 하는 방법 입니다. Jquery 에서는 on 을 빼고 적어주면 됩니다. 이벤트 위임 java script 에서의 이벤트 위임은 부모가 되는 태그에 이벤트를 걸어서 버블링을 이용한 자식 태그들의 이벤트 실행 방법 이었습니다. 아래 처럼요 jquery 에서는 on 함수를 사용 합니다. ※ jquery 에서의 this 는 현재 태그(요소)를 의미 합니다. on 함수에는 ( 이벤트 , 위임할 요소, 기능 ) 을 넣어주면 됩니다. on 함수의 장점은, 부모 요소에 이벤트가 걸리지 않는다는 것과 아래처럼 순서에 상관없이 작동한다는 것 입니다. 즉, on 함수를 쓸 때는 에 태그가 없..

이번에는 window.onload vs document.ready 에 대해서 알아 봅시다. window.onload window.onload 는 페이지 당 1번만 사용이 가능 합니다. window.onload 는 페이지가 전부 로드 된 다음 실행하는 함수 입니다. 예를 들어서, 태그가 특정 엘리먼트 보다 위에 있을 때, 특정 엘리먼트를 찾지 못하는데, onload 를 사용하면 아래서 사용한 엘리먼트를 찾을 수가 있습니다. 그런데, 위에서도 언급되었지만 페이지 당 1번만 사용할 수가 있어서, 필요한 상황에는 코드를 한 곳에 몰아서 쓸 수 밖에 없는 현실을 가지고 있습니다. 이를 보완하기 위해 나온것이 Jquery 의 document.ready 입니다. document.ready document.ready ..

이번에는 innerHTML, 클래스 제어 에 대해서 알아 봅시다. innerHTML java script 에서 innerHTML 은 태그 사이에 있는 값 이죠? Jquery 는 어떻게 태그 사이에 있는 값을 접근 할까요? 바로 html 함수를 사용해주면 됩니다. 데이터를 변경하고 싶다면, () 안에 데이터를 넣어주면 됩니다 그리고, jquery 에서는 순수 문자열로 데이터를 넣을 수도 있습니다. 이렇게, 태그가 생기지 않고, 순수 문자열로 삽입 됩니다. 클래스 제어 클래스 제어는 , class 속성에 있는 값을 추가 , 삭제 하는 방법 입니다. java script 와 비교하면서 알아 봅시다. 클래스 추가 -java script- -jquery- 클래스 제거 -java script- -jquery- 토글..

이번에는 엘리먼트 속성 및 css 속성을 변경하는 방법을 알아 봅시다. 엘리먼트 속성 변경 엘리먼트는 다른 말로 태그 라고도 할 수 있겠습니다. 위와 같이 태그가 있을 때, 하위 속성(id, readonly 등등)을 얻어오려면 어떻게 해야 할까요? 바로 attr 함수를 사용하면 됩니다. 이 attr 함수는 두번째 매개변수로 값을 주면, 첫번째로 준 속성이 두번째로 준 값으로 변경 됩니다. 또한, 여러 속성들을 한번에 변경할 수도 있습니다. 아래처럼요 {} 를 이용하면 됩니다 ! css 속성 변경 기존에 java script 에서는 css에 접근하려면 .style 을 써서 접근을 했었습니다. 제이쿼리 에서는 css 함수를 사용합니다. css 함수도 위의 attr 함수처럼, 첫번째 매개변수만 전달하면, 해당..