A = 65 B = 66 C = 67 D = 68 E = 69 F = 70 G = 71 H = 72 I = 73 J = 74 K = 75 L = 76 M = 77 N = 78 O = 79 P = 80 Q = 81 R = 82 S = 83 T = 84 U = 85 V = 86 W = 87 X = 88 Y = 89 Z = 90
HTML5 offers two new objects for storing data on the client: * localStorage - stores data with no time limit * sessionStorage - stores data for one session
Client-Side 데이터 기억장치 : 초기에 웹 애플리켕이션에서는 데이터저장을 서버측 데이터베이스나 브라우저 쿠키가 담당했지만, HTML5의 등장으로 웹 개발자들은 더 많은 선택의 여지가 생겼는데 그것은 localStorage, sessionStorage, client-side databases.
localstorage와 sessionStorage는 다수의 페이지들을 검색할 때 name/value 쌍을 설정하기 위해 javascript를 사용한다는 점에서 쿠키와 매우 유사하다. 하지만, 쿠키와 달리 부라우저이 요청이 있을 때 데이터를 와이어를 통해 전송하지 않는데, 데이터는 오직 클라이언트에만 존재한다. 그러므로 쿠키보다 더 많은 데이터를 저장하는 것이 가능하다.
이 둘은 기능적으로는 같지만, 지속성과 범위 측면에서만 다르다.
localStorage - 윈도우가 닫힌 후에도 데이터가 저장된다. 데이터는 같은 소스(도메인네임,프로토콜, 포트가 같아야 한다.)로부터 로드된 모든 윈도우에서 사용 가능하다. 이는 애플리케이션 환경설정 같은 것에 유용하다. sessionStorage - 데이터는 윈도우객체와 함께 저장된다. 다른 윈도우(or Tab)들은 데이터 값을 알지 못하고 윈도우가 닫힐때 사라진다. 활성화된 탭을 강조하는 것과 같은 윈도우의 특정 상태만을 저장할 때나 테이블 정렬 순서를 저장할 때 유용하다.
value 설정 : localStorage.setItem('age', 35); 저장된 value 호출 : var age = localStorage.getItem('age'); 특정한 key/value 삭제하기 : localStorage.removeItem(age); 모든 key/value 삭제하기 : localStorage.clear();
ex) kilo.js var db; var jQT = $.jQTouch({ icon: 'kilo.png', statusBar: 'black' });
//shortName : 디스크에 있는 database를 호출하기 위해 몇 개의 var을 정의하고 있다. var shortName = 'Kilo'; // version : Database 스키마를 바꿀 필요가 있을 경우, // 업그레이드와 이전 버전과의 호환을 처리하기 위해 사용한다. var version = '1.0'; // displayName : 사용자 인터페이스에 보이는 문자열 // 예를 들어 아이폰에 있는 Setting 애플레케이션에서 // Setting > Safari > Database panel 에 displayName이 보인다. var displayName = 'Kilo'; //Database 가 가지는 최대 크기를 킬로바이트 단위로 지정한다. var maxSize = 65536; //위 설정된 파라미터를 가지고 openDatabase 함수를 호출하고 연결을 db변수에 저장한다. // 만약 Open 하고자 하는 database가 존재하지 않으면 새로 생성한다. db = openDatabase(shortName, version, displayName, maxSize); // transaction 메서드를 호출. db.transaction( //익명 함수를 사용하여 파라미터로 트랜잭션을 전달한다. function(transaction) { // 함수 내부에서 표준 CREATE TABLE 쿼리를 실행하기 위해 // 트랜잭션 객체의 excuteSql메서드를 호출한다. transaction.executeSql( 'CREATE TABLE IF NOT EXISTS entries ' + ' (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' + ' date DATE NOT NULL, food TEXT NOT NULL, ' + ' calories INTEGER NOT NULL );' ); } ); });
function loadSettings() { $('#age').val(localStorage.age); $('#budget').val(localStorage.budget); $('#weight').val(localStorage.weight); }
function refreshEntries() { var currentDate = sessionStorage.currentDate; $('#date h1').text(currentDate); $('#date ul li:gt(0)').remove(); db.transaction( function(transaction) { transaction.executeSql( 'SELECT * FROM entries WHERE date = ? ORDER BY food;', [currentDate], function (transaction, result) { for (var i=0; i < result.rows.length; i++) { var row = result.rows.item(i); var newEntryRow = $('#entryTemplate').clone(); newEntryRow.removeAttr('id'); newEntryRow.removeAttr('style'); newEntryRow.data('entryId', row.id); newEntryRow.appendTo('#date ul'); newEntryRow.find('.label').text(row.food); newEntryRow.find('.calories').text(row.calories); newEntryRow.find('.delete').click(function(){ var clickedEntry = $(this).parent(); var clickedEntryId = clickedEntry.data('entryId'); deleteEntryById(clickedEntryId); clickedEntry.slideUp(); }); } }, errorHandler ); } ); } function createEntry() { // SQL에 사용할 변수를 설정한다. var date = sessionStorage.currentDate; var calories = $('#calories').val(); var food = $('#food').val(); db.transaction( function(transaction) { transaction.executeSql( // ?는 플래이스 홀더(자리표시)이다. 'INSERT INTO entries (date, calories, food) VALUES (?, ?, ?);', // Database에 전송될 값들의 배열. // place holder에 대응되는 값이다. [date, calories, food], // 이 익명함수는 SQL쿼리가 성공하면 실행된다. function(){ refreshEntries(); jQT.goBack(); }, // SQL 쿼리가 실패하면 실행될 함수 이름이다. errorHandler ); } ); return false; }
// Entry 삽입이 실패하면 실행. // 에러 핸들러는 두개의 파라미터가 전송된다. 트랜잭션 객체와 에러 객체이다. // error 핸들러는 true 나 false 를 반환한다. // 에러핸들러가 true를 반환할 때는 실행이 멈추고 전체 트랜잭션이 RollBack 한다. // " false를 반환할 때는 계속 실행. // ERROR Code // Constant Code Situation // UNKNOWN_ERR 0 트랜잭션실패.Database자체와는 무관하고, 다른 오류코드에 포함되지 않는다. // DATABASE_ERR 1 Statement 실패 // VERSION_ERR 2 Operation 실패. 버전이 다르다. // TOO_LARGE_ERR 3 Statement 실패. DB에서 리턴된 데이터가 너무 크다.SQL LIMIT modifier권유 // QUOTA_ERR 4 Statement 실패. 남아있는 공간이 충분하지 않거나 저장공간 할당량 초과. // SYNTAX_ERR 5 Statement 실패. Syntax 에러,파라미터의 수가 맞지 않거나, 허용되지 않는 문자열 시도 // CONSTRAINT_ERR 6 Constraint 실패로 인해 insert, update, replace statement 실패 // TIMEOUT_ERR 7 Transaction을 위한 lock이 주어진 시간을 초과하였다. function errorHandler(transaction, error) { alert('Oops. Error was '+error.message+' (Code '+error.code+')'); return true; }
function deleteEntryById(id) { db.transaction( function (transaction) { transaction.executeSql('DELETE FROM entries WHERE id=?;', [id], null, errorHandler); } ); }
The idea for the site came about following an HTML5 meetup after 2009′s Future of Web Design
conference in London. We realized there wasn’t a resource for people
who wanted to learn more about the hows and whys of implementing HTML5, so we decided to build one!
Originally, there were five of us (Rich, Bruce, Jack, Mike, and Tom).
Shortly before launch, Remy came on board too. Then in early 2010, Oli
made us an offer we couldn’t refuse, and we became seven.
We’d also like to offer a massive thank you to Brandan Lennox,
who has been copy editing our posts for some time now. Brandan does a
superb job of editing our articles and making them easy to read.
Our Aims
We will publish articles relating to HTML5, its semantics, and how to use it right now. We also invite questions via Ask the Doctor. We’ll post answers in future articles so that everyone can benefit.
We acknowledge that we may sometimes get things wrong and that people may disagree with our interpretation of the HTML5 specification.
But that’s another of the reasons that this site exists: the spec has
yet to be formalised, and we can all do our bit to make it what we want.
A “specification for the people” if you will.
Get involved
We invite you to freely comment, question, congratulate, argue, and
suggest in the articles’ comments sections, and we’ll do our best to
answer in a considered and reasoned manner. As we said above, the HTML5 specification has yet to be finalised, so we can all have a say, and we invite you to do so here on our site.
We hope you find HTML5 Doctor a useful resource. If you have any questions relating to HTML5 and how to implement it, just ask the doctor!
JoJavaScript Framework for HTML5 http://joapp.com/ Document : http://joapp.com/docs/index.html Download : https://github.com/davebalmer/jo/downloads Jo is a JavaScript framework for HTML5 capable browsers and devices. It was
originally designed to work on mobile platforms as a GUI and light data layer
on top of PhoneGap. Since its creation, Jo has also been tested successfully
as a lightweight framework for mobile browsers, newer desktop browsers, and
even Dashboard widgets.
Jo는 HTML5를 지원하는 브라우저와 장치를 위한 자바 스크립트 프레임 워크입니다. 그것은 원래의 GUI와 PhoneGap 위에 가벼운 데이터 레이어로 모바일 플랫폼에서 작동하도록 설계되었습니다. 그것의 창조부터 조는 또한 모바일 브라우저를위한 경량 프레임 워크, 새로운 데스크톱 브라우저, 그리고 심지어는 대시보드 위젯으로 성공적으로 테스트되었습니다.
Instead of a selector, a DOM Element, or a list of nodes can be passed in.
The $ function takes an optional context argument, which can be a DOM
Element or a Zepto object:
$('span', $('p')) // -> find all <span> elements in <p> elements
$('p').bind('click', function(){
$('span', this).css('color:red'); // affects "span" children/grandchildren
});
Context and .find calls are equivalent:
$('span', $('p')) // same
$('p').find('span') // same
Want to build iPhone apps with HTML, CSS, and
JavaScript? When you purchase this product, you'll get access to the
videos and other files associated with the Learn to Build iPhone Apps
with HTML, CSS, and Javascript tutorial, including slide presentations
and code examples. The sessions were presented live during January and
early February 2010.
In this four-session video course, you'll quickly learn how to create
simple web apps with features that take advantage of the device's
remarkable functionality. You'll also learn to use Apple's tools to
create native Cocoa-based iPhone apps. Each video session offers an
easy-to-follow, hands-on lesson. It's the perfect way to get started
with iPhone app design.
Presented by CreativeTechs in partnership with O'Reilly, each session
offers easy-to-follow, hands-on lessons. You'll begin the course by
building iPhone apps with standard web tools, then you'll learn how to
create native Cocoa-based iPhone apps using Apple's tools. It's the
perfect way to get started with iPhone app design, and all you need to
know in advance is HTML, CSS, and JavaScript basics.
Build working web apps for the iPhone, using HTML and CSS web standards
Learn what a mobile web app is and how it differs from a native iPhone app
Create gestures and animation using JavaScript and the iUI and jQTouch libraries
Integrate your web app with several iPhone features
Build simple native iPhone apps using the TapLynx library -- without programming!
Learn how to build on your new-found iPhone web app development skills
코드를 테스트하고 코드에 대한 테스트 케이스를 만드는 과정을 개인적으로는 코드를 "미리검증(future-proofing)"하는 일이라고 본다. 작성된 코드와 라이브러리에 대한 테스트 케이스를 만들어놓으면 이상한 버그를 잡으면서, 게다가 자기도 모르는 사이에 코드에 새로운 버그를 집어넣으면서 디버깅하느라 보낼 지도 모르는 수많은 시간을 절약할 수 있다.
JSUnit : http://www.jsunit.net/ 자바스크립트 단위 테스트 라이브러리이다. JSUnit에는 세 가지 기본 컴포넌트가 존재한다. 테스트 러너(test runner) : 테스트 묶음에서 테스트 러너 부분은 현재 테스트 과정이 얼마나 진행되었는지 알기 쉬운 그림으로 보여준다. 테스트 묶음을 로드하고 그 내용을 실행하고 결과를 기록하는 기능을 제공한다. 테스트 묶음(test suite) : 테스트 케이스들의 묶음을 말한다.(가끔 여러 웹 페이지에 나뉘어 있기도 하다.) 테스트 케이스(test case) : 참/거짓을 나타내는 간단한 표현식이다. 코드가 제대로 작동하고 있는지 확인할 수 있는 수치화한 결과를 돌려준다. 테스트 케이스만으로는 완벽하지 않으며, 테스트 러너와 함께 사용하면 인터렉티브한 테스트 환경을 제공한다.
ex) test suite
<html> <head> <title>JsUnit Test Suite</title> <script src="../app/jsUnitCore.js"></script> <script> function suite() { var newsuite = new top.jsUnitTestSuite(); newsuite.addTestPage("jsUnitTests.html"); return newsuite; } </script> </head> <body></body> </html>
ex) test case
<html> <head> <title>JsUnit Assertion Tests</title> <script src="../app/jsUnitCore.js"></script> <script> // Test that an expression is true function testAssertTrue() { assertTrue("true should be true", true); assertTrue(true); }
// Test that an expression is false function testAssertFalse() { assertFalse("false should be false", false); assertFalse(false); }
// Tests to see if two arguments are equal to each other function testAssertEquals() { assertEquals("1 should equal 1", 1, 1); assertEquals(1, 1); }
// Tests to see if they're not equal to each other function testAssertNotEquals() { assertNotEquals("1 should not equal 2", 1, 2); assertNotEquals(1, 2); } // Tests to see if the argument is equal to null function testAssertNull() { assertNull("null should be null", null); assertNull(null); }
// Of is not equal to null function testAssertNotNull() { assertNotNull("1 should not be null", 1); assertNotNull(1); }
// plus many many more </script> </head> <body></body> </html>
<html> <head> <title>Sample Test</title> <script src="js/unittest.js" type="text/javascript"></script> <script src="js/suiterunner.js" type="text/javascript"></script> </head> <body> <p id="title">Sample Test</p> <script type="text/javascript"> new Test.Unit.Runner({ // Test hiding and showing an element testToggle: function() {with(this) { var title = document.getElementById("title"); title.style.display = 'none'; assertNotVisible(title, "title should be invisible"); element.style.display = 'block'; assertVisible(title, "title should be visible"); }},
// Test appending an element to another testAppend: function() {with(this) { var title = document.getElementById("title"); var p = document.createElement("p"); title.appendChild( p );
ex) 테스트를 위해 Test.Simple과 Test.More을 사용하는 예 // Test 모듈을 로드한다.(테스트 자체도 함께!) new JSAN('../lib').use('Test.More');
// 여섯 가지 테스트를 실행한다고 알린다. (언제, 무엇이 잘못되었는지 알기 위해) plan({tests: 6});
// 세 가지 간단한 경우를 테스트 한다. ok( 2 == 2, 'two is two is two is two' ); is( "foo", "foo", 'foo is foo' ); isnt( "foo", "bar", 'foo isnt bar');
// 정규 표현식을 사용해 테스트한다. like("fooble", /^foo/, 'foo is like fooble'); like("FooBle", /foo/i, 'foo is like FooBle'); like("/usr/local/", '^\/usr\/local', 'regexes with slashes in like' );
네트워크 사용량을 줄이기 위해 코드압축기를 사용해 코드를 압축하는 일은 자바스크립트 라이브러리를 배포할때 중요하다. 압축은 코드를 알아볼수 없기 때문에 배포번에 사용해야 한다. 압축기는 세 종류가 있는데, 1. 코드와 관련없는 공백이나 주석을 모두 제거해 핵심코드만 남기는 압축기 2. 공백과 주석을 제거하고 모든 변수의 이름을 짧게 만드는 압축기 3. 위의 두가지를 만족하고, 변수이름뿐만 아니라 코드안에 있는 모든 단어의 길이를 최소화하는 압축기.
아래는 압축기 라이브러리 사이트이다. JSMin 은 코드를 제외한 공백이나 주석제거(1번) Packer는 모든 단어를 완전히 압축.(3번)
The YUI Library is a set of utilities and controls, written with
JavaScript and CSS, for building richly interactive web applications
using techniques such as DOM scripting, DHTML and AJAX. YUI is
available under a BSD license and is free for all uses.
(0) 
(0)
