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 위에 가벼운 데이터 레이어로 모바일 플랫폼에서 작동하도록 설계되었습니다. 그것의 창조부터 조는 또한 모바일 브라우저를위한 경량 프레임 워크, 새로운 데스크톱 브라우저, 그리고 심지어는 대시보드 위젯으로 성공적으로 테스트되었습니다.
Appspresso 를 설치하려고 몇 번의 노력끝에 도저히 안되서 KTH 에 문의 메일을 보냈다. 그랬더니, 답변은 [Open Perspective] - [Other]를 찾아보라는 답변.
혹시나해서 다른 PC에서 동일 파일로 테스트 하니 Perspective에 Appspresso 가 나오는것이 아닌가? 그래서, 혹시나 다시 문의 메일을 보냈다 . 64bit 컴퓨터를 쓰고 있는데, 그것때문인가 하고. 답변 메일이 왔다.
"안녕하세요?
앱스프레소에 관심 가져 주셔서 감사합니다. 앱스프레소 1.0 beta는 아직 64bit Windows를 지원하지 않습니다. 4월 8일 64bit를 지원하는 앱스프레소 1.0 beta2 all-in-one과 앱스프레소 plug-in URL이
공개될 예정입니다. 멋진 앱 만드시기를 응원합니다. 감사합니다. "
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
Html5Demos : http://html5demos.com/ Html5를 응용하는 데모들을 보여준다. Geolocation, CrossDomain, Canvas, Video, Drag&Drop 등이 있다.
HTML 5 Demos and Examples
HTML 5 experimentation and demos I've hacked
together. Click on the browser support icon or the technology tag to
filter the demos (the filter is an OR filter).
코드를 테스트하고 코드에 대한 테스트 케이스를 만드는 과정을 개인적으로는 코드를 "미리검증(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' );
Ext Core Cross - Browser Javascript Library Ext Core is a JavaScript Library for enhancing websites. Ext Core has great documentation and will always be free to use under the MIT Open Source License.
Browser Compatibility
Ext Core supports all major web browsers including:
네트워크 사용량을 줄이기 위해 코드압축기를 사용해 코드를 압축하는 일은 자바스크립트 라이브러리를 배포할때 중요하다. 압축은 코드를 알아볼수 없기 때문에 배포번에 사용해야 한다. 압축기는 세 종류가 있는데, 1. 코드와 관련없는 공백이나 주석을 모두 제거해 핵심코드만 남기는 압축기 2. 공백과 주석을 제거하고 모든 변수의 이름을 짧게 만드는 압축기 3. 위의 두가지를 만족하고, 변수이름뿐만 아니라 코드안에 있는 모든 단어의 길이를 최소화하는 압축기.
아래는 압축기 라이브러리 사이트이다. JSMin 은 코드를 제외한 공백이나 주석제거(1번) Packer는 모든 단어를 완전히 압축.(3번)
JSLint는 일련의 규칙을 가지고 문제를 일으킬만한 코드를 집어낸다. JSLint에서 사용하는 모든 규칙과 설정에 대한 정보는 http://jslint.com/
JSLint에서 내세우는 요구사항 중 하나는 모든 프로그램에서 변수를 사용하기 전에 반드시 선언해야 한다는 것이다.
// JSLint 에서 요구하는 변수 선언
// 잘못된 변수 선언
foo = 'bar';
// 올바른 변수선언
var foo;
foo = 'bar';
!=,== 보다는 !==, === 를 사용하라고 요구한다. !==, === 는 변수 안의 실제값을 들여다 보기 때문이다.
//!=, == 가 !==, === 와 어떻게 다른지를 보여주는 예들
// 둘 다 true
null == false
0 == undefined
// !== 과 === 를 대신 사용해야 한다.
null !== false
false === false
한 줄짜리 블록을 사용하지말라고 요구한다. 중괄호를 제거하면 코드에서 어떤 부분이 블록에 속하고 어떤 부분이 속하지 않는지 알기 어려울 수 있다.
//들여쓰기를 잘못한 단일 문장을 포함하는 코드 블록
// 적법한 일반적인 자바스크립트 코드다.
if ( dog == cat )
if ( cat == mouse )
mouse = "cheese";
// JSLint 는 이 코드를 다음과 같이 쓰라고 요구한다:
if ( dog == cat ) {
if ( cat == mouse ) {
mouse = "cheese";
}
}
한줄에 한문장만 쓸경우 문장 끝에 있는 세미콜론을 생략할 수 있지만, 압축 했을때 파일크기를 줄이기 위해 끝줄들을 제거한다거나 하면 문제가 생긴다. 항상 세미콜론을 입력해야 한다.
//세미콜론이 필요한 문장들
//자바스크립트 코드를 압축할 계획이라면 모든 문장 끝에 세미콜론을 입력해야 한다.
var foo = 'bar';
var bar = function(){
alert('hello');
};
bar();
(0) 
(0)
