본문 바로가기

JavaScript

티스토리 새 에디터 코드블럭에 하이라이트 적용하기 티스토리가 업데이트되면서 코드블럭 기능이 생겼습니다. 하지만 기대를 안고 코드블럭으로 글을 발행해보면 정말 블럭만 등장합니다. 에디터에서는 하이라이트가 되는데, 막상 미리보기/발행을 하면 하이라이트가 적용되지 않아용. 공지에 보면 커스터마이징을 위해 클래스 적용만 시켜줬다고 합니다. 코드 하이라이트(syntax highlight)를 적용해 봅시다. 아래는 제가 적용해놓은 코드블럭입니다. //티스토리에 하이라이트를 적용해봅시다 function $initHighlight(block, cls) { try { if (cls.search(/\bno\-highlight\b/) != -1) return process(block, true, 0x0F) + ` class="${cls}"`; } catch (e) { /*..
Grid 라이브러리-Datatables 사용법/예제 최근 사용하게 된 datatables 라이브러리에 대한 약간의 설명을 공유하고자 합니다.datatables는 데이터 그리드를 다루는 라이브러리로 '이 기능이 있었으면' 하는 부분은 거의 갖추고 있습니다. 한글로 된 자료는 거의 기본옵션에 대한 설명밖에 없어 고생했는데(ㅠㅠ), 실제 구현했던 기능들 위주로 설명할 예정입니다. Datatables 는 MIT 라이센스로 무료입니다. DEMO : https://saintsilver.github.io/datatables-ex/ 기본 사용음.. 이건 그냥 스크린샷으로 대체합니다.공식홈페이지에 들어가시면 메인페이지에 등장합니다. 윗 스크린샷에서 설명이 생략된 #myTable 은 아래와 같은 구조로 만드시면 되고, 서버사이드로 데이터를 처리하여 데이터테이블을 만들 시 ..
애드블록 탐지하기, detect adblock 애드블록 탐지하기, detect adblock내 블로그에도 애드센스를 달아놨고 최대한 글 읽는데는 방해하지 않는 수준에서 배치하려고 신경을 쓰고는 있지만 나도 여기 들어오면서 애드블록을 끄지 않는다. ㅋㅋㅋㅋ 그러나 나같은 쩌리 개인블로거와는 달리 사업자들에게 애드블록이 치명적인 타격이 되는 것임엔 확실하다. 유료서비스는 싫고 광고도 싫다는 이기적인 사용자들을 부드럽게 유인해내야 하는 것이다. 온라인 포토샵에디터인 pixlr 에서는 아래와 같은 경고창을 띄우기도 한다. 이게 매번 뜨니까 귀찮고 안쓰러워 화이트리스트에 추가하게 된다. 이 밖에도 애드블록이 켜져있으면 컨텐츠 자체가 보이지 않는다던가,dcinside처럼 애드블록 꺼주세요 라는 귀여운 멘트로 유혹하는 등여러 방식으로 애드블록 사용자들을 회유하곤..
[javascript] 클립보드에 복사하기 [javascript] 클립보드에 복사하기종종 쓸 일이 있어서 저장용.document.execCommand()아래 브라우저타겟에 맞는다면 이게 간편한 방법이다. 브라우저 호환익스 : IE 9 +크롬 : 42 +파폭 : 41 +오페라 : 29 +사파리 : 미지원아닌데.. IE8 이하도.. 그럼 아래와 같은 꼼수를 쓰자. 프롬프트를 이용해 수동으로 복사하게 하는 구식.
자바스크립트와 세미콜론 자바스크립트와 세미콜론자바스크립트 엔진은 일정 규칙에 따라 세미콜론을 자동으로 삽입해준다.(물론 세미콜론을 붙이는 것이 기본이다)가끔 오픈소스들을 둘러보다 보면 세미콜론을 삽입하지 않은 코드를 어렵지 않게 본다. 단지 가독성을 위해서만 세미콜론이 필요한가?예1아래와 같이 세미콜론이 생략된 코드가 있다.const a = 5const b = 10const c = a + b [1, 2, 3].forEach((e) => console.log(e))cs 코드만 봐도 어렵지 않게 아래와 같은 결과를 기대할 것이다. 123 그러나 직접 실행해보면 아래와 같은 에러를 뱉는다.[1, 2, 3].forEach((e) => console.log(e)) TypeError: Cannot read property 'forEach..
ExtJS : TreePanel / Tree Store Extjs : TreePanel / Tree Store 이해Preview 트리 패널(Tree panel)은 사진처럼 뎁스별로 어떠한 기능을 컴포넌트화/구현하는 데 사용된다.공식 docs의 설명:The TreePanel provides tree-structured UI representation of tree-structured data. A TreePanel must be bound to a Ext.data.TreeStore.TreePanels support multiple columns through the columns configuration.By default a TreePanel contains a single column which uses the text Field of the store's..
ExtJS : Form Field ExtJS : Form Field폼필드는 그냥 선언해서 갖다 쓰면 된다. 구구절절 써놓는 것보다 그냥 공식문서 보는게 더 좋다.기본적으로 선언만 해도 validation check가 이루어져서 편한 듯. ExtJS Docs : FormsExtJS Kitchen Sink 1234567891011121314151617181920212223242526272829303132333435363738394041424344Ext.onReady(function(){ Ext.create("Ext.panel.Panel",{ width:500, height:500, title:"폼필드", renderTo:Ext.getBody(), items:[{ xtype: 'textfield', allowBlank : false, empt..
ExtJS Window Component / Tap Panel ExtJS Window Component / Tap Panelwindow 컴포넌트는 응용프로그램 창으로 사용되기 위한 특수패널이다. 사이즈 조절과 최대/최소화 등이 가능하다.Windows can also be linked to a Ext.ZIndexManager or managed by the Ext.WindowManager to provide grouping, activation, to front, to back and other application-specific behavior.By default, Windows will be rendered to document.body. To constrain a Window to another element specify renderTo.선언Ext.windo..