Engineering/Database

[JDBC] Ajax (Asynchronous JavaScript and XML)

🍁AjaxAjax는 비동기 방식으로 자바스크립트를 사용해서 서버와 데이터를 통신하는 기술을 의미하며, XML 형식으로 데이터를 주고받는다.화면 깜박임 없이 데이터를 주고받을 수 있는 기술이다. 서버 통신 요구사항 구현프로젝트 생성Dynamic Web Project: AjaxTestContextr oot: ajaxGenerate web.xml deployment descriptor 체크 com.test.ajax 패키지 생성1. com.test.ajax.controller 패키지DBUtil.javaEx01.javaEx01Data.java2. com.test.ajax.repository 패키지AjaxDAO.java3. com.test.ajax.model 패키지 WEB-INF 폴더1. WEB-INF > vie..

Engineering/Frontend

[jQuery] Traversing (Axis)

🍁Traversing기본 코드 Axis 할아버지 큰아버지 사촌 아버지 큰형 작은형 나 자식 손자 자식 자식 동생 막내동생 작은아버지 사촌 [JavaScript] Axis: 축을 기준으로 검색🍁Axis ..

Engineering/Frontend

[jQuery] CSS 속성 조작: Box Model, Manipulation

🍁CSS 적용CSS 읽기 쓰기읽기: CSS(속성)쓰기: CSS(속성, 값) CSS 읽기//alert(getComputedStyle(document.getElementById('box')).getPropertyValue('color'));alert($('#box').css('color'));jQuery에는 내부적으로 이 작업이 되어 있다는 것을 알 수 있다. CSS 쓰기 (메서드 체인)//$('#box').css('color', 'blue');$('#box').css('color', 'blue').css('background-color', 'gold').css('font-size', '3rem');jQuery는 연쇄적으로 작업할 수 있다는 점에서 편리하다.css(속성명, 값)이 반복하여 쓰이고 있다. 이..

Engineering/Frontend

[jQuery] Effect Function: 전용 / 범용 이벤트 함수

🍁전용 함수와 범용 함수전용 이벤트 함수객체.이벤트함수(콜백함수)$('#btn1').click(function() { alert();});위 코드는 클릭 이벤트만을 처리하는 함수이다.이렇게 하나의 이벤트만을 처리하는 함수를 전용 이벤트 함수라고 한다. 범용 이벤트 함수객체.on(이벤트명, 콜백함수)$('#btn2').on('click', function() { alert();})on은 범용 함수로, 이벤트명을 입력해야 한다.이벤트명에 따라서 다양한 이벤트를 처리하는 함수를 범용 이벤트 함수라고 한다.반대로 객체의 이벤트를 해제할 때에는 off 함수를 사용한다. 🍁Effect Function1. hide(time), show(time), toggle(time)2. fadeOut(time), ..

Engineering/Frontend

[jQuery] jQuery() 함수

🍁jQuery() 함수jQuery() 함수는 CSS 선택자 또는 다른 표현을 사용해서 태그를 검색한다. 기본 코드 jQuery() 함수 상자1 상자2 상자3 상자4 상자5 Array.from()//forEach > new Array()에서 동작//list.forEach(box => box.style.color = 'yellow'); //HTMLCollection (유사 배열)Array.from(list).forEach(box => box.style.color = 'tomato');자바스크립트는 구조상 진짜 배열이 없다고 했다. 하지만 new Array()로 만들어진 것을 진짜 배열로 취급한다.위에서 선언한 list는 배열이 아닌 HTMLCol..

Engineering/Frontend

[jQuery] jQuery의 시작: JavaScript와 jQuery 연결

🍁 jQueryjQuery란?jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.jQuery는 경량화된 JavaSc..