jquery7 사이드 프로젝트 : "유튜브 배경 영어학습" PHP + Jquery 사이드 프로젝트 공개!현충일과 지난 주말에 개발하긴 했는데 이제야 공개합니다 :)3일 가량 소요된것 같네요.예전에 웹사이트 배경으로 커다란 동영상이 나오는 사이트를 보았던 적이 있는데요.유튜브 배경으로 영상이 나오면서 영어퀴즈를 풀 수 있는 사이트가 있으면 좋을것 같아 만들어 보았습니다.URL 주소 : http://dreamplan7.cafe24.com/english/처음 사이트에 접속하면, Rain 이라는 타이틀과 'Click Any Place' 문구가 뜰텐데요.그 때부터 간단한 문제 풀이가 시작됩니다.특징을 말씀드리면 페이지 전환시 새로 고침이 어보기에 동영상의 재생이 끊기지 않는 다는 점이고,페이지 전환시 FadeIn, FadeOut 효과가 합성되어 화면이 오버레이 된다는 점입니다.이 후 추가한 기.. 2024. 6. 11. jQuery 프로미스 - await 처리 최근 자바스크립트 문법에 발맞추어 jquery Ajax 도 프로미스(Promise) 방식의 코딩 패턴을 지원하는 사실을 알게 되었는데요. 몇 버전부터 지원되는지는 알 수 없으나, 3.6.0 버전에서는 확실히 지원되는 것으로 확인됩니다. 우선 결과소스를 먼저 확인시켜드리겠습니다. json 결과를 반환해줄 node.js 서버 소스를 아래와 같이 구성하고, const express=require('express'); const bodyParser = require('body-parser'); const app=express(); app.use(express.static('public')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended.. 2021. 9. 26. node.js express | 템플릿 쪽지함#3. 쪽지 작성편(1) 뭐니뭐니해도 웹사이트의 사용자 방문율을 높이려면 웹사이트를 사용하는 사용자와 "소통"할 수 있는 수단이 있어야 할텐데요. 지난 스토리에 이어 사용자가 쪽지를 작성하는 부분에 대해 살펴보겠습니다. https://itadventure.tistory.com/439 node.js express | 템플릿 쪽지함#2. 배열의 템플릿 전달 이번 스토리에서는 지난 스토리에 이어서 배열 변수를 템플릿에 전달하여 출력하는 부분에 대해 설명드리도록 하겠습니다. https://itadventure.tistory.com/438 node.js express | 템플릿 쪽지함#1. 구경 지난. itadventure.tistory.com main.js 에서 쪽지를 추가하는 코드는 아래와 같은데요. memo.push(new Arra.. 2021. 8. 31. 코드이그나이터4, 검색어 자동 추천 ! [ jQuery Ajax ] 1. 오토셋 APM 인스톨러 ( apache + php7.2 + mariadb ) 설치 | https://itadventure.tistory.com/93 2. 코드이그나이터 4 ( codeigniter 4 ) 설치 | https://itadventure.tistory.com/95 3. 비주얼 스튜디오 코드 에디터 설치 & 한글 설정 | https://itadventure.tistory.com/96 4. 폴더열기 / 웹페이지 편집(1) | https://itadventure.tistory.com/97 5. 웹페이지 편집(2) | https://itadventure.tistory.com/101 6. 코드이그나이터4의 URL 규칙 | https://itadventure.tistory.com/105 7. php.. 2020. 7. 15. jQuery 함수 ( prototype ) 추가 자바스크립트에 프로토 타입이 있듯이 jQuery 에도 프로토 타입이 있습니다. 바로 $.fn 사용자 정의 프로토타입 기능인데요. 간단히 말해 jQuery 함수를 직접 추가할 수 있다는 의미입니다. jQuery 프로토타입은 보통 다음과 같이 선언이 가능합니다. $.fn.메소드명 = function(파라미터){ $(this).each(function(){ : // 처리할코드 }); }; 그러면 다음과 같이 사용할 수가 있지요. $('css셀렉터').메소드명(파라미터); 한번 예제를 볼까요? 아래 예제는 3개의 div 의 class 이름이 모두 CrayTest 입니다. 하나 둘 셋 그리고 3개의버튼이 마련되어 있지요. 빨강 버튼을 클릭해볼까요? 엇, div 요소 3개 모두 경계선 색상이 빨강 색으로 바뀌었.. 2019. 8. 25. 제이쿼리 ( jQuery ) 의 세련된 다이얼로그 지난번 "자바스크립트 vs jQuery"편이 호응이 좋아서 jQuery 를 응용한 기능을 하나 소개하고자 합니다 :) https://itadventure.tistory.com/78 자바스크립트 vs 제이쿼리 ( JQuery ) 웹에서는 필수불가결 기술인 자바스크립트와 jQuery, 과연 어느것이 더 뛰어날까요? 오늘은 잠깐 시간 내어 관련 부분을 논해 봅니다. 자바스크립트는 웹브라우저에서 작동하는 스크립트입니다. 서버 사이드가.. itadventure.tistory.com 바로 jQuery UI 중 다이얼로그창 기능 인데요. 보통 표준 웹에서 다이얼로그하면 아래와 같은 창을 말합니다. 아주 전통적인 alert 창이지요. Confirm 이란 기능도 있긴 한데 버튼이 2개인거 빼고는 별 다를건 없습니.. 2019. 8. 7. 자바스크립트 vs 제이쿼리 ( JQuery ) 웹에서는 필수불가결 기술인 자바스크립트와 jQuery, 과연 어느것이 더 뛰어날까요? 오늘은 잠깐 시간 내어 관련 부분을 논해 봅니다. 자바스크립트는 웹브라우저에서 작동하는 스크립트입니다. 서버 사이드가 아닌 클라이언트 기술이지요. 오래전부터 널리 사용되어 왔고 지금도 지속적으로 사용되고 있으며, 기능성 홈페이지 99% 이상이 이 기술을 사용하고 있다고 해도 과언이 아닐 겁니다. 그렇다면 jQuery 는 무슨 기술일까요? jQuery 역시 자바스크립트입니다. 다만 자바스크립트로 빈번하게 사용되는 기능들을 약간 다른 형식으로 사용하게 만든 라이브러리입니다. 프로그램 언어에서 '라이브러리'란 '도서관'의 의미보다는 '기능덩어리'라고 이해하시면 됩니다. 아래 샘플 웹페이지를 잠깐 보실까요? 이 웹페.. 2019. 8. 5. 이전 1 다음
