초보개발자

앞서 highlight.js에 대해 설명했다. 이것을 이용하여 json을 prettify하여 표현하려고 한다. 정적인 경우, 태그나 태그에 class를 입력하면 되지만, 지금 설명하려는 작업은 ajax 등 이미 html이 loading 된 이후 추가하려는 경우이다. ajax를 통해 json 형식의 데이터를 가지고 왔을 때 가독성이 떨어지는 단점이 있다.그래서 이 데이터를 가공하여 html에 추가해야한다. 우선 json 형식의 데이터를 stringify한다. 이 때 마지막에 들어가는 value(integer)는 tab 길이이다. 주로, 4나 8을 이용한다. stringify한 데이터를 highlightAuto에 넣고, 마지막으로 fixMarkUp하면 json이 이쁘게 출력되는 것을 볼 수 있다. var s..

highlight.js 는 java, c++ 등의 코드나 json 등의 데이터 형태를 웹에 가독성 좋게 표현하는 javascript이다. 단순히 내가 이해하는 바를 쓰는 것이다. 아래에서 다운받을 수 있다.https://highlightjs.org/ 링크를 사용해서 하는 경우와 custom package를 받아서 사용하는 경우가 있다.custom package의 경우 필요한 데이터만 다운받아 사용할 수 있다. 또한, 테마도 지정할 수 있다. 현재 내 블로그에서 사용하는 것은 highlight.js가 아닌것으로 보인다.하지만 다음과 같은 기능을 한다. 태그와 태그를 찾아서 자동으로 인식해서 class를 넣는데, 수동으로 할 수도 있다. void main() { cout

내가 이해한 바로는 ajax는 홈페이지를 이동하지 않고, 동적으로 데이터 통신을 한다. 무한 스크롤을 구현하는 과정에서 데이터베이스에서 더 가지고 올 것이 있어서 찾아보게 되었다. 아직 제대로 이용하는 것이 아니기 때문에 기본 형식만 적어두려고 한다. $.ajax({ type: 'POST', dataType: 'json', data: { "id":id }, url: 'data.php', success:function(){ alert("성공!"); }, error:function(){ alert("실패!"); } }); 우선 간단히 설명을 하면 아래와 같다.type - 전달 방식을 의미한다. GET/POST가 있다.dataType - 전달받는 인자의 형식.data - 데이터 처리를 할 페이지에게 전달할 정..

메뉴 hover를 하다가 찾은 함수들을 정리한다. jQuery에는 class 관련 함수들이 있다.찾은 세가지 함수들만 설명하겠다.toggleClass(), addClass(), removeClass() 모든 함수들은 $(selector)으로 실행된다.css에 굉장히 도움이 되는 것 같다. $(selector).toggleClass(ClassName)이 함수는 해당 ClassName을 했을 때 그 class를 가지고 있으면 없어지고, 없는 상태에서 실행하면 class를 가지게 된다. $(selector).addClass(ClassName)이 함수는 주어진 class를 가지게 된다. $(selector).removeClass(ClassName)이 함수는 주어진 class를 지우게 된다. css에서 설정한 것..

필요에 의해 F5 혹은 새로고침을 했을 때 url 수정을 하고 싶었다.예를 들면 검색을 하고 난 후 url에 써져있는 정보를 F5를 눌렀을 때 없애고 싶어서 수정하게 되었다. F5 버튼이 눌린것을 catch해서 url를 수정해주는 작업이었다. document.onkeydown = fkey; document.onkeypress = fkey; document.onkeyup = fkey; var wasPressed = false; function fkey(e){ e = e || window.event; if(wasPressed) return; if(e.keyCode == 116){ location.href = "이동할 주소"; } } 참고: https://stackoverflow.com/questions/14..

iframe을 사용할 때 부모클래스에 접근하는 것은window.parent.$('selector')라고 사용하면 된다.$('selector') 이후로는 jQuery 문법 그대로 써도 되는 것 같다.

마우스 오버(hover)할 때 gif 파일을 보여주고 싶은 경우 jQuery를 이용해서 해당 태그(혹은 id나 class)의 attr 함수로 src를 수정해준다. 예시는 다음과 같다.

사파리의 경우 jquery의 $(document).ready()가 사용되지 않는 듯하다.그래서 $(window).load()로 했더니 문제가 해결되었다. 물론 다른 브라우저들도 문제가 나지 않았다.

예를 들어 어떤 테이블이 있다고 하자. .html 추가 메뉴 가격 메뉴 설명 그 모양은 아래와 같을 것이다. 메뉴 가격 메뉴 설명 우리는 이것을 능동적으로 늘리고 싶다. 이때 jQuery를 이용해서 할 수 있다. 우선 이벤트를 가질 버튼을 추가한다. 첫 포스트인만큼 설명을 하면 jQuery는 안에 작성해야 한다. 태그를 이용해 이라고 하고 다음과 같이 태그 위에 추가한다. 참고로 어디든 추가해도 상관없다. .html 추가 이것을 실행하면 아래와 같은 모양이 출력된다. 추가 메뉴 가격 메뉴 설명 자 이제 jQuery를 추가할 것이다. 여기서 사용할 함수는 click이라는 event 함수와 after 함수를 이용할 것이다. after 함수는 넣고 싶은 문자열을 특정 위치 뒤에 넣는 함수이다. $(select..