IT Study/JQuery7 JavaScript - OOP(Object Oriented Programming) 1. OOP(Object Oriented Programming) 객체지향프로그램 프로그래밍의 한 종류 객체들을 컨셉으로 프로그래밍 하는 방식 *객체란 관련된 데이터와 함수 등을 묶는 것 장점 문제가 생긴다면 관련된 객체만 수정할 수 있다. 어떠한 객체가 여러번 사용되는 곳이 있다면 재사용에 용이 새로운 기능이 필요하다고 하면 새로운 객체 만들면 된다. 객체지향의 원칙 1. 캡슐화가 잘 되어있어야한다. 2. 추상성이 좋아야 한다. 3. 상속을 통해 코드의 재사용성을 높여야 한다. 4. 다양한 형태로 변할 수 있는 다형성을 높여야 한다. 절차지향 프로그래밍 만들어진 함수를 절차에 따라 순서대로 실행하는 프로그래밍 방법 1. Practice 2. Practice 3. Practice .. 2023. 1. 5. JQuery - Ajax/json 데이터 활용 | Ajax(Asynchronous JavaScript and XML) JQuery에서 비동기처리를 담당하는 메서드 Json 데이터와 함께 활용 특징 페이지 새로고침 없이 서버에 요청 서버로부터 데이터를 받고 작업을 수행 Ajax의 장점 1. 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다. 2. 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있다. 3. 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있다. 4. 백그라운드 영역에서 서버로 데이터를 보낼 수 있다. Ajax 메서드 기본 형태 $.ajax({ type: "GET", url: "data.json", dataType: "json", success: function (data) { //성.. 2023. 1. 1. [실습] JQuery - animation, random으로 사진 변경/확대/축소 HTML 변경하기 확대/축소 CSS * {box-sizing: border-box;} div {width: 30%;border: 1px solid black;display: none;} #imgbox {background-repeat: no-repeat;width: 100%;} JS $(document).ready(function () { $("#change").on("click", function () { var ran = Math.floor(Math.random() * 10 + 1); $("#imgbox").attr("src", "./img/" + ran + ".jpg"); //attr : 속성바꾸는 메서드 }); $("#dd").on("click", function () { $("div").togg.. 2023. 1. 1. JQuery - animation 이벤트(toggleClass(), trigger()) | 마우스 이벤트 HTML 액션1 액션2 액션3 CSS * { margin: 1px; } body { overflow: hidden; } #box1 { height: 100px; background-color: coral; transform: translateX(-97%); transition: all 1s; } #box2 { height: 100px; background-color: lightblue; transform: translateX(97%); transition: all 1s; } #box1.on, #box2.on { transform: translateX(0); /*버튼 클릭 시 클래스on실행*/ } JS $(document).ready(function () { $("button:eq(0)".. 2023. 1. 1. JQuery - 마우스이벤트(mouseover(), mouseenter()) | 마우스 이벤트 HTML 마우스오버 마우스엔터 CSS div { margin: 20px; padding: 40px; background-color: lightgray; } JS $("요소").mouseover() : 요소위에 마우스가 올라갔을 때 $("요소").mouseenter() : 요소 영역안에 마우스가 올라갔을 때 $("요소1").append("요소2") : 요소1안에 요소2 삽입 결과 영상 확인 : https://blog.naver.com/jun950617/222832236294 2023. 1. 1. JQuery - 배너 이벤트(insertAfter(), insertBefore()) | 배너 이벤트 HTML / 다음 CSS * { margin: 0px; padding: 0px; } #content { width: 200px; margin: 20px; } #content .page { text-align: right; margin: 5px; } #content .page button { background-color: lightblue; color: white; width: 20px; height: 20px; overflow: hidden; border: none; line-height: 1.5; } #content .pic { width: 363px; height: 496px; border-image-outset: 3px solid blue; overflow: hidden;.. 2023. 1. 1. JQuery - 라이브러리 사용하기 | JQuery 제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있다. 또한, Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할 수 있다. https://jquery.com/download/ Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compress.. 2023. 1. 1. 이전 1 다음
