IT 지식 데이터베이스

아래 내용을 참고해보자.

http://earthcode.com/blog/2006/01/css_floats_programmatically.html

요약하면,

IE에서는 styleFloat, 나머지 cssFloat 를 설정해야 한다.

float로 쓸 수 없는 이유는 예약어와 겹치기 때문이다.

Programmatically setting the "float" CSS property in Javascript

IE and Firefox have different ways of doing this, and neither one is what you would expect.

In IE, it's myDiv.style.styleFloat="left";

In Firefox, it's myDiv.style.cssFloat="left";

Here's a full code block, with primitive browser detection included. This will work in both IE and Firefox:

if (document.all) { // very basic browser detection

var sFloat="styleFloat"; //ie

} else {

var sFloat="cssFloat"; //firefox

}

var oMyDiv=document.getElementById("myId");oMyDiv.style[sFloat]="left";

http://www.emailonacid.com/blog/details/C13/12_fixes_for_the_image_spacing_in_html_emails

CoffeeScript는 자바스크립트를 변환 컴파일하는 프로그래밍 언어이다. Ruby, Python, Haskell에서 영감을 얻은 짧으면서도 가독성이 높은 syntactic sugar와 의미 매칭과 같은 정교한 기능이 추가되어 있다. CoffeeScript는 런타임 성능에 영향없이 약 1/3보다 적은 코드의 작성으로 자바스크립트로 컴파일 된다. 2011년 3원 16일 부터 CoffeeScript는 GitHub에서 가장 많이 주목된 프로젝트가 되었으며 현재까지도 GitHub에서 가장 많이 개발되고 있다.

http://jashkenas.github.io/coffee-script/

CoffeeScript is a programming language that transcompiles to JavaScript. The language adds syntactic sugar inspired by Ruby, Python and Haskell to enhance JavaScript's brevity and readability, adding sophisticated features like list comprehension and pattern matching. CoffeeScript compiles predictably to JavaScript and programs can be written with less code, typically 1/3 fewer lines, with no effect on runtime performance. Since March 16, 2011, CoffeeScript has been on GitHub's list of most-watched projects, and as of today is the eleventh most popular language on GitHub.

Sample 보기: http://coffeescript.org/

encodeURI() / decodeURI()

최소한의 문자만 인코딩합니다.

; / ? : @ & = + $ , - _ . ! ~ * ' ( ) #

이런 문자는 인코딩하지 않습니다.

http:// ... 등은 그대로 나옵니다.

encodeURIComponent() / decodeURIComponent()

알파벳과 숫자 Alphanumeric Characters 외의, 대부분의 문자를 모두 인코딩합니다.

http:// ... 가 http%3A%2F%2F 로 됩니다.

escape() / unescape()

예전부터 있던 오래된 함수입니다. encodeURI() 와 encodeURIComponent() 의 중간 정도의 범위로 문자를 인코딩합니다.

http://mwultong.blogspot.com/2006/10/encodeuri-encodeuricomponent-escape.html

또 업무 때문에 찾았다.

폰트 설치 여부를 판단하고 폰트가 없으면 설치하게 하기위하여 였다.

jquery.font.js 가 필요하다.

jquery.font.js

를 적절한 위치에 놓는다.

jsp 화면단에서 스크립트를 참조하는 경로를 적어 놓았다.

<script src="/js/jquery.font.js"></script>

출력용 OCR 폰트 였다.

한글을 설치하면 OCR폰트가 기본적으로 있다 하지만 내게 필요한건 OCR-B-10 폰트 였으므로.

설치..

사용법은 간단하다.

$.font.test('OCR-B-10 BT') 의 결과값 true / false 로 설치 여부를 알 수 있다.

그게 다다.

확인후 없으면 설치파일 경로를 링크해서 다운로드 받도록 하면 된다.

OCR폰트는 저작권이 있는 폰트로 알아서 찾아내시길 바란다.

event.stopPropagation()

DOM 트리로 이벤트가 버블링되는것을 차단한다. 다른 부모 헨들러가 이벤트를 받지 못하다록 한다. (Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.)

event.preventDefault()

이게 호출되면 기본 이벤트가 발생하지 않는다. (If this method is called, the default action of the event will not be triggered.)

즉, stopPropagation과 preventDefault를 호출하므로써 이벤터 재정의 또는 기본 이벤트 동작을 차단할 수 있다.

http://api.jquery.com/event.stopPropagation/

최근에 jQuery가 릴리즈 되었다. 1.9의 마이너 버전 1.9.1까지 2월 4일에 릴리즈 된 것 같다. 미리 주시하지 못해 정확한 날짜에 확인하지 못했다. (ㅜㅜ) 아무튼 지금이라도 봐서 다행이다. 릴리즈 블로그 내용은 다음 링크에서 확인할 수 있다. 1.9에서 상당히 많은 부분이 변경되었기에 확인이 필요하다. 1.9는 1월 15일에 릴리즈 되었다. 앞으로 더 관심 가져야겠다.

1.9 Release

http://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/

1.9.1 Release

http://blog.jquery.com/2013/02/04/jquery-1-9-1-released/

1.9.1 버전의 script 포함 내용은 아래와 같이 하면 된다. 기존 파일명에서 버전명만 바꾸면 된다.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>

google cdn이나 MS cdn 호스팅에도 추가된 것을 볼 수 있었다. (MS에서는 example에서는 확인 안되지만 파일에 버전 명을 바꾸면 사용은 가능하다.)

https://developers.google.com/speed/libraries/devguide#jquery

http://www.asp.net/ajaxlibrary/cdn.ashx#Using_jQuery_from_the_CDN_18

1.9에서 변경된 점 중에 눈에 띄는 점은

• css에서 multi getter 지원
  var dims = $("#box").css([ "width", "height", "backgroundColor" ]);
  // { width: "10px", height: "20px", backgroundColor: "#D00DAD" }

• CSS3의 지원이 추가
• 그리고 충격적인 live, die 메소드가 삭제되었다는 점 이 눈에 띈다.
  자세한 리스트는 아래 목록을 참고하자.

http://jquery.com/upgrade-guide/1.9/

Changes of Note in jQuery 1.9

• .toggle(function, function, ... ) removed
• jQuery.browser() removed
• .live() removed
• .die() removed
• jQuery.sub() removed
• .add()
• .addBack( selector ) replaces .andSelf()
• .after(), .before(), and .replaceWith() with disconnected nodes
• .appendTo, .insertBefore, .insertAfter, and .replaceAll
• AJAX events should be attached to document
• Checkbox/radio state in a .trigger()ed "click" event
• Order of triggered "focus" events
• jQuery(htmlString) versus jQuery(selectorString)
• Events not fired by the .data() method; names with periods
• Ordering of disconnected nodes within a jQuery set
• Loading and running scripts inside HTML content
• .attr() versus .prop()
• $("input").attr("type", newValue) in oldIE
• "hover" pseudo-event
• .selector property on jQuery objects
• jQuery.attr()
• jQuery.ajax returning a JSON result of an empty string
• jQuery.proxy() context
• .data("events")
• Removed properties of the Event object
• Undocumented arguments of API methods
• Other undocumented properties and methods

학습 목표

본 실습에서는 Windows Internet Explorer 9의 새로운 사이트 고정(Pinned Site) 기능에 대해 알아보고, 기존 웹 사이트를 보강하는 몇 가지 기본 단계를 살펴보기로 합니다. 본 실습의 학습 목표는 다음과 같습니다.

·         프로그램적으로 시작 메뉴에 웹 사이트 추가하기

·         점프리스트 작업 정의하기

·         점프리스트 카테고리를 정의하고 항목 추가하기

·         오버레이 아이콘 표시하기

·         비디오 미리보기에서 미리보기 표시줄 버튼 표시하기

개요

Internet Explorer 9은 웹 개발자에게 웹 사이트와 Windows 7 데스크톱을 손쉽게 통합할 수 있는 방법을 제공합니다. 사이트 고정(Pinned Site)이라 일컫는 이 기능은 최종 사용자가 Windows 7 작업 표시줄, 데스크톱 또는 시작 메뉴에 웹 사이트를 고정할 수 있는 메커니즘을 제공합니다. 이 기능을 통해 사용자는 Windows 응용프로그램을 이용할 때와 비슷한 방식으로 자신이 즐겨 찾는 웹 사이트로 바로 이동할 수 있습니다.

이 기능은 기존 컨텐츠를 수정하지 않고도 모든 웹 사이트에서 이용할 수 있게 해줍니다. 사이트 고정 기능을 실행하면 해당 사이트의 즐겨찾기 아이콘을 이용해 웹 사이트에 브랜딩된 Internet Explorer의 격리 인스턴스(isolated instance)가 자동적으로 시작됩니다. 따라서 사용자는 이 사이트에서 확장된 모든 탭과 창을 하나의 그룹으로 관리할 수 있습니다.

웹 사이트 개발자는 새로운 마크업 및 API를 이용해 사이트 고정 경험을 더욱 향상시킬 수 있습니다. 개발자는 작업, 점프리스트 및 아이콘 기반 알림 기능을 제공함으로써 웹사이트에서 Windows 응용프로그램에 제공되는 것과 유사한 Windows 통합 기능을 활용할 수 있도록 지원합니다.

필수 구성 요소

본 실습을 위해서는 다음 구성 요소가 필요합니다.

·         웹 개발 방식에 대한 실무 지식

·         정상적으로 작동하는 웹 서버(ASP는 필요 없음)

매뉴얼 관련 정보

매뉴얼 버전: 1.0
마지막 업데이트 날짜: 10/13/2010
테스트 제품: Internet Explorer 9 베타

자세한 정보

다음 사이트를 방문하시면 본 매뉴얼에서 다루고 있는 다양한 주제에 관해 자세히 알아보실 수 있습니다.

개발자 가이드:
http://msdn.microsoft.com/en-us/ie/ff468705.aspx

릴리스 정보:
http://ie.microsoft.com/testdrive/info/ReleaseNotes/Default.html

시나리오

본 실습에서는 사이트와 Windows 데스크톱 통합 시 사용자 경험을 향상시키도록 기존 웹 사이트를 수정해 보게 됩니다.

본 실습의 예상 소요 시간

60분

유용한 힌트:

Internet Explorer 9에는 F12 개발자 도구가 내장되어 있으며 디버깅, 중단점(break point) 등 다양한 기능을 지원합니다. 따라서 문제가 발생하는 경우, 이러한 유용한 도구를 이용해 문제의 원인을 파악할 수 있습니다.

HOL_Lighting_up_Windows_with_Internet_Explorer9-kor_0201-1.docx

input 테그 에서 아래와 같이 쓰면 됨

 onKeyDown="javascript:if (event.keyCode == 13) { login(document.form); }"

http://rumkin.com/tools/compression/compress_huff.php

바이너리 데이터를 새로 인코딩하므로 압축(33% 용량 증가)에서 오는 효율과는 달리 비효율적인 측면이 있다. 자바스크립트는 느려서 쓰기에는 적합하지 않다. (하지만 최근에는 엔진 성능의 향상으로 많이 좋아졌다 있다.)

http://compressorrater.thruhere.net/

JavaScript 압축 알고리즘 별로 성능을 비교할 수 있다. (JSMin, Dojo, ShrinkSafe, YUI Compressor, Packer, gzip 지원)

먼저 코드를 간단하게 구현하기 위해 jQuery를 injection한다.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

그후 다음과 같은 코드로 간단히 도메인 등록 여부를 확인할 수 있다. (간단한 예제를 보여주기 위해 코드상에 문제가 있긴 하지만 무시했다.)

$.ajax({

url: 'http://www.whoisxmlapi.com/whoisserver/WhoisService',

dataType: 'jsonp',

data: {

domainName: 'yourdomain.com',

outputFormat: 'json'

},

success: function(data) {

    if(!data.WhoisRecord) {

        alert("도메인 형식 오류");

    }else if(data.WhoisRecord.dataError &&

        data.WhoisRecord.dataError == "MISSING_WHOIS_DATA") {

        alert("등록안됨");

    }else {

        alert("등록됨");

    }

}

});

http://www.featureblend.com/javascript-flash-detection-library.html

위 라이브러리를 이용하면 현재 브라우저에 플래시가 설치되어 있는지를 쉽게 확인할 수 있다. 지원하는 Property와 Method는 다음과 같다.

Properties:

FlashDetect.installed: true

FlashDetect.raw: Shockwave Flash 11.5 r31

FlashDetect.major: 11

FlashDetect.minor: 5

FlashDetect.revision: 31

FlashDetect.revisionStr: r31

FlashDetect.JS_RELEASE: 1.0.4

Method(s):

FlashDetect.versionAtLeast(9): true

FlashDetect.versionAtLeast(9, 0): true

FlashDetect.versionAtLeast(9, 0, 124): true

FlashDetect.majorAtLeast(9): true

FlashDetect.minorAtLeast(0): true

FlashDetect.revisionAtLeast(124): false

예제코드는 다음과 같다.

<script type="text/javascript">

if(!FlashDetect.installed){

    alert("Flash is required to enjoy this site.");     

}else{

    alert("Flash is insalled on your Web browser.");

}

</script>