Local Storage

Local Storage ===J.O.B===/HTML 2012. 3. 22. 16:24
 http://dev.w3.org/html5/webstorage/ 
 http://en.wikipedia.org/wiki/Web_Storage 

================================================================================================================================ 

================================================================================================================================ 

localStorage.setItem("name", "Hello World!"); //saves to the database, key/value
document.write(localStorage.getItem("name")); //Hello World!
localStorage.removeItem("name"); //deletes the matching item from the database

================================================================================================================================ 

if (typeof(localStorage) == 'undefined' ) {
alert('Your browser does not support HTML5 localStorage. Try upgrading.');
} else {
try {
localStorage.setItem("name", "Hello World!"); //saves to the database, "key", "value"
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert('Quota exceeded!'); //data wasn't successfully saved due to quota exceed so throw an error
}
}
 
document.write(localStorage.getItem("name")); //Hello World!
localStorage.removeItem("name"); //deletes the matching item from the database
}

==================================================================================================================

var car = {};
car.wheels = 4;
car.doors = 2;
car.sound = 'vroom';
car.name = 'Lightning McQueen';
console.log( car );
localStorage.setItem( 'car', JSON.stringify(car) ); 
console.log( JSON.parse( localStorage.getItem( 'car' ) ) ); 

'===J.O.B=== > HTML' 카테고리의 다른 글

Eclipse IDE 에서 Zen-Coding 소개  (1) 2010.05.31
HTML5 강좌 관련 사이트  (0) 2010.05.20
HTML5 데모와 예제 목록을 공유  (0) 2010.05.17
Posted by 샤가No01

HTML5와 관련해서 꼭 알아야하는 특징, 팁, 기술 25가지(퍼옴)

HTML5와 관련해서 꼭 알아야하는 특징, 팁, 기술 25가지(퍼옴) ===J.O.B===/FT.DEV 2010. 9. 13. 19:08

'===J.O.B=== > FT.DEV' 카테고리의 다른 글

아이폰 구분 스크립트  (0) 2010.02.21
참고사이트  (0) 2010.02.21
Posted by 샤가No01

HTML5 모바일 웹 어플리케이션 프레임웍 Sencha Touch

HTML5 모바일 웹 어플리케이션 프레임웍 Sencha Touch ===J.O.B===/JAVASCRIPT 2010. 6. 21. 19:51
자바스크립트 프레임웍으로 유명한 extJS가 모바엘 웹 어플리케이션 프레임웍 Sencha Touch로 탈바꿈했다.

http://www.sencha.com/ 로 들어가보면 이렇게 아래와 같이 소개를 해놨는데..

Sencha Touch allows your web apps to look and feel like native apps. Beautiful user interface components and rich data management, all powered by the latest HTML5 and CSS3 web standards and ready for Android and Apple iOS devices. Keep them web-based or wrap them for distribution on mobile app stores

대충 보자면 html5와 css3를 기반으로 뭐 안드로이드, 애플 iOS등의 모바일 기반에서 네이티브 어플리케이션처럼 개발 할 수 있다는 내용 같은데~.. 영어가 짧아서.. 일단 데모영상을 보자면 아이폰 기본 어플리케이션과 아주 유사하게 동작한다는것을 알 수 있다.

아래는 데모 동영상이다.


Sencha Touch Introduction from Sencha on Vimeo.

'===J.O.B=== > JAVASCRIPT' 카테고리의 다른 글

window.onunload를 이용한 브라우저 상태캐치  (0) 2010.03.24
Posted by 샤가No01

Eclipse IDE 에서 Zen-Coding 소개

Eclipse IDE 에서 Zen-Coding 소개 ===J.O.B===/HTML 2010. 5. 31. 12:47


FT개발을 하면서 일일이 HTML을 열고 닫고 하기는 여간 귀찮은일이 아니죠. 지금 소개시켜드릴 Zen-Coding은 CSS셀렉터 문법으로 작성된 문장을 HTML코드로 확장시켜주는 일종의 매크로입니다.
예제는 다음과 같습니다.

div#page>div.logo+ul#navigation>li*5>a


이렇게 입력후 Scripts 메뉴에서 Zen Coding>Expand Abbreviation을 클릭해주면 아래와 같이 펼쳐집니다.


<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>


지원하는 에디터는 다음과 같습니다:

  • Aptana/Eclipse (cross plat form)
  • Text Mate (Mac)
  • Coda (Mac)
  • Espresso (Mac)
  • Komodo Edit/IDE (crossplatform)
  • Notepad++ (Win dows)
  • PSPad (Win dows)
  • textarea (browser-based)
  • editArea (browser-based)


Eclipse 에서 설치하는 것을 예로 들자면:

Eclipse 최상단 메뉴에서 ‘Scripts’ 메뉴가 없으면 http://download.eclipse.org/technology/dash/update 를 통해 EclipseMonkey를 다운받습니다.
Zen.Coding-Aptana.v0.6.0.1.zip를 다운받아 압축 해제합니다.
Aptana에서 프로젝트 이름을 ‘zencoding’ 으로 하여 General Project를 만듭니다.
프로젝트에 ‘scripts‘ 라는 이름의 빈폴더를 만듭니다. (주의: 반드시 scripts 라는 이름이어야합니다!)
압축해제한 파일을 모두 scripts 아래로 복사합니다
Eclipse Reboot ing~!
부팅후, ‘Scripts’ 메뉴아래에 ‘Zen Coding’이 나오면 제대로 설치된 것입니다
임의의 프로젝트에서 .html 파일을 열거나 만들어서 예제를 실행해봅니다.
* 키변경은 scripts 아래로 복사한 Zen-Coding library의 소스에서 Key: 항목에 직접 지정합니다.


출처 : http://ajaxian.kr/archives/938





에디트플러스에서 하는방법

명령 : WScript.exe "D:\zencoding\zencoding.wsf"
인수 : $(CurLine)||$(CurSel)
디렉토리 : $(FileDir)
텍스트필터로실행 체크 후 "바꾸기" 선택

참고사이트 : http://www.emacswiki.org/emacs/ZenCoding

'===J.O.B=== > HTML' 카테고리의 다른 글

Local Storage  (0) 2012.03.22
HTML5 강좌 관련 사이트  (0) 2010.05.20
HTML5 데모와 예제 목록을 공유  (0) 2010.05.17
Posted by 샤가No01

CSS3 Click Chart by Impressive Webs

CSS3 Click Chart by Impressive Webs ===J.O.B===/CSS 2010. 5. 28. 15:00


css3에 대한 다양한 예제를 볼 수 있는곳이다.

해당 사이트는 Chrome 4+, Safari 4+, or Firefox 3.6+ 이상에서 제대로 볼수 있다.

http://www.impressivewebs.com/css3-click-chart/

'===J.O.B=== > CSS' 카테고리의 다른 글

CSS3의 기본적인 사용방법  (0) 2010.03.11
Posted by 샤가No01

HTML5 강좌 관련 사이트

HTML5 강좌 관련 사이트 ===J.O.B===/HTML 2010. 5. 20. 17:39
HTML5란놈이 나왔다..

공부해야지.. 더 뒤쳐지면 안돼지 하면서 관련 사이트를 찾아보았다.

참 다행으로 강좌가 올라오는 사이트를 찾았다.

근데... HTML5를 실제 사용하려면 얼마나 기다려야 할까.. ;;

한국 HTML5 사용자 그룹

'===J.O.B=== > HTML' 카테고리의 다른 글

Local Storage  (0) 2012.03.22
Eclipse IDE 에서 Zen-Coding 소개  (1) 2010.05.31
HTML5 데모와 예제 목록을 공유  (0) 2010.05.17
Posted by 샤가No01

HTML5 데모와 예제 목록을 공유

HTML5 데모와 예제 목록을 공유 ===J.O.B===/HTML 2010. 5. 17. 18:52

Remy라는 분은 HTML5데모와 예제목록을 공유하는 사이트를 오픈했습니다.

HTML5에서 구현 가능한 기능들과, 브라우저별로 한눈에 보기 쉽게 구성되어 있습니다.

각 항목별로 필터링이 가능합니다.

해당 사이트는 CSS3으로 구성되어 있으므로 CSS3데모가 가능한 브라우저에서는 CSS3가 적용됩니다. IE8이하 브라우저는 안됩니다. 하하하하하하



사이트  : http://html5demos.com/

'===J.O.B=== > HTML' 카테고리의 다른 글

Local Storage  (0) 2012.03.22
Eclipse IDE 에서 Zen-Coding 소개  (1) 2010.05.31
HTML5 강좌 관련 사이트  (0) 2010.05.20
Posted by 샤가No01

window.onunload를 이용한 브라우저 상태캐치

window.onunload를 이용한 브라우저 상태캐치 ===J.O.B===/JAVASCRIPT 2010. 3. 24. 19:39
<script type="text/javascript">
function windowExit() {
        if (self.screenTop > 9000) {
                alert('닫힘');
        } else {
                if(document.readyState == "complete") {
                        // 새로고침 이벤트 발생시
                        alert('새로고침');
                }
        }
}
</script>

readyState 값으로는
uninitialized - 문서의 로드가 시작되지 않는다.

loading - 문서가 로드 중이다.

interactive - 문서가 어느정도 로드되어 사용자와 커뮤니케이션이 가능하다.

complete - 문서가 모두 로드되었다.
이렇게 있는데 FF에서는 loading을 못잡는지 좀처럼 alert을 찍을때 안찍히고. 대부분 complete나 interactive가 찍힌다..


Posted by 샤가No01

CSS3의 기본적인 사용방법

CSS3의 기본적인 사용방법 ===J.O.B===/CSS 2010. 3. 11. 00:58

내가 많은 정보를 얻고 있는 파이어준(http://firejune.com)님의 블로그에서 얻은 정보이다~ 아직 자세히 읽어보진 않았지만.. 그래도 css3에 대해서 공부해야하는 나로서는 너무 좋은 정보다.

RGBA(Red,Green,Blue,Alpha)

rgb컬러값과 투명도를 설정할 수 있다. alpha는 %인데 0은 투명, 1은 불투명


font, border, background, show등 rgb컬러값을 설정할수 있는곳에서 쓸수 있다.

Text Shadow

텍스트에 그림자 주는 방법.. 정말 빨리 CSS3가 보급되었으면 좋겠다.. ㅜㅜ



text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;
이렇게 하면 아래와 같은 효과가 나타난다.

Border Radius

둥근 박싱처리. 이제 투명한 gif와 png의 시대는 가라!! 

각각의 모서리에다가 값을 줄수도 있고.. 

Box Shadow

text shadow와 마찬가지로 box에도 그림자를 줄수 있는 방법이다.


박스 하나에 여러개의 그림자를 선언 할 수도 있다.

-moz-box-shadow:
-2px -2px 0 #fff,
2px 2px 0 #bb9595,
2px 4px 15px rgba(0, 0, 0, .3);




파이어준님 블로그 : http://firejune.com/1562 

'===J.O.B=== > CSS' 카테고리의 다른 글

CSS3 Click Chart by Impressive Webs  (0) 2010.05.28
Posted by 샤가No01

flex에서 외부로부터 파라미터 받기

flex에서 외부로부터 파라미터 받기 ===J.O.B===/FLEX 2010. 2. 21. 02:19

공식문서


http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001004.html


한글화 문서


http://flexdocs.kr/docs/flex2/docs/00001004.html#619641



FLEX에서 해줘야 할 일

var test:String = Application.application.parameters.파라메터명


문서에서 해줘야 할 일

<object ..>

...
<param name='flashvars' value='파라메터명=값'>

<embed flashvars="파라메터명=값" ...>

</embed>

</object>

Posted by 샤가No01
1 2 
하단 사이드바 열기

BLOG main image