웹 개발자 & 디자이너 PJW48의 생각보관창고 블로그입니다.
이 포스트에서는 웹 사이트에서 내부 요소를 추가하는 jQuery 코드에 대해서 서술합니다. 요소를 추가하는 방법은 추가 위치에 따라 다음과 같이 4가지로 분류할 수 있습니다. 형제 요소를 지정해서 해당 요소의 다음에 추가 형제 요소를 지정해서 해당 요소의 앞에 추가 부모 요소를 지정해서 해당 요소의 끝부분에 자식 요소로 추가 부모 요소를 지정해서 해당 요소의 첫부분에 자식 요소로 추가 … 더 보기 “jQuery로 웹 사이트 내부 요소 추가하기”
이 포스트에서는 제이쿼리를 써서 코나미 커맨드(⬆⬆⬇⬇⬅➡⬅➡🅱🅰 상상하하좌우좌우BA)를 입력하면 이스터 에그가 발동되게 하는 코드를 설명합니다. 우선 아래와 같이 코딩해 봅시다. var kkeys = [], konami = “38,38,40,40,37,39,37,39,66,65”; $(document).keydown(function(e) { kkeys.push( e.keyCode ); if ( kkeys.toString().indexOf( konami ) >= 0 ){ kkeys = []; alert(‘Hello, world!’); } }); 1번 줄에서 키 입력을 저장할 배열 변수를 미리 선언해 … 더 보기 “jQuery로 코나미 커맨드 이스터에그 구현하기”
제이쿼리 웹앱과 XML 간의 AJAX 연동을 실험하여 보았습니다. 실험 대상은 예전에 제이쿼리 웹앱 디자인 예시로 사용한 걸그룹 여자친구 관련 웹앱입니다. (원본: https://pjw48.net/portfolio/jwa/) 연동할 XML 문서를 다음과 같이 만들었다고 가정합니다. <?xml version=”1.0″ encoding=”UTF-8″?> <gfriend> <mainpage> <image>images/gfriend_2015.jpg</image> <description>여자친구 공연 사진</description> </mainpage> <profile> <image>images/gfriend_2017_greeting.jpg</image> <description><![CDATA[ <p>여자친구(GFRIEND)는 2015년 1월 25일 데뷔한 걸그룹으로 소속사는 쏘스뮤직이며 멤버 수는 6명입니다.</p> <p>데뷔앨범은 미니앨범 … 더 보기 “jQueryUI – XML 연동 실험”
이 포스트에서는 자바스크립트로 JSON 파일을 만드는 방법을 소개합니다. PHP로 JSON 파일 만들기에서 코딩한 것처럼 생성하는 과정은 간단합니다. 다음과 같습니다. <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js”></script> <script type=”text/javascript”> $(document).ready(function(){ var obj = new Object(); obj.name = “여자친구” obj.members = [“소원”, “예린”, “은하”, “유주”, “신비”, “엄지”]; obj.albums = {“EP 1집”: “Season of Glass”, “EP … 더 보기 “자바스크립트로 JSON 파일 만들기”
이 포스트에서는 제이쿼리를 써서 JSON 데이터를 파싱하는 방법을 설명합니다. JSON 데이터 파싱 방법은 기본적으로는 XML 파싱할 때와 같지만, JavaScript Object Notation이라는 의미답게 XML 파싱에 비해 코드가 간결해진다는 특징이 있습니다. 우선 JSON 문서가 다음과 같이 있다고 가정합니다. (편의를 위해 데이터를 여러 줄에 걸쳐서 전개하였습니다.) { “name”: “여자친구”, “members”: [ “소원”, “예린”, “은하”, “유주”, “신비”, “엄지” ], … 더 보기 “자바스크립트로 JSON 파싱하기 (jQuery)”
이전의 자바스크립트로 XML 파싱하기에서는 제이쿼리(jQuery)를 사용하지 않고 순수 자바스크립트로만 AJAX를 사용하였습니다. 하지만 제이쿼리를 이용하면 코드를 더욱 간결하게 만들 수 있습니다. 제이쿼리를 사용하여 이전 포스트의 자바스크트 부분의 코드를 다시 작성할 경우, 다음과 같이 됩니다. <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js”></script> <script type=”text/javascript”> $(document).ready(function(){ $.ajax({ type: “GET”, url: “xml_sample.xml”, dataType: “xml”, success: function (xml) … 더 보기 “자바스크립트로 XML 파싱하기 (jQuery)”