JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene...

97
Alle Rechte liegen bei Peter Hecker.Vervielfältigung ist nicht erlaubt. Herzlich Willkommen bei der GFU! Treffpunkt Semicolon, 26.03.2013 Dienstag, 9. April 13

Transcript of JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene...

Page 1: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t. Herzlich Willkommenbei der GFU!

Treffpunkt Semicolon, 26.03.2013

Dienstag, 9. April 13

Page 2: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t. JavaScript nicht nur für Programmierer

„Einblicke in die weltweit am meisten missverstandene Programmiersprache“

Dienstag, 9. April 13

Page 3: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Themen

• Ein Blick zurück - Wie alles begann

• Der aktuelle Stand - JavaScript heute

• Browser und JavaScript-Engines

• JavaScript nicht nur im Browser

• JavaScript-Bibliotheken, -Frameworks und -Tools

• JavaScript-Alternativen

• Ausblick und Fazit

Dienstag, 9. April 13

Page 4: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t. JavaScript:The World's Most Misunderstood Programming Language

Douglas Crockfordwww.crockford.com

JavaScript, aka Mocha, aka LiveScript, aka JScript, aka ECMAScript, is one of the world's most popular programming languages.Virtually every personal computer in the world has at least one JavaScript interpreter installed on it and in active use. JavaScript'spopularity is due entirely to its role as the scripting language of the WWW.

Despite its popularity, few know that JavaScript is a very nice dynamic object-oriented general-purpose programming language. Howcan this be a secret? Why is this language so misunderstood?

The NameThe Java- prefix suggests that JavaScript is somehow related to Java, that it is a subset or less capable version of Java. It seems thatthe name was intentionally selected to create confusion, and from confusion comes misunderstanding. JavaScript is not interpretedJava. Java is interpreted Java. JavaScript is a different language.

JavaScript has a syntactic similarity to Java, much as Java has to C. But it is no more a subset of Java than Java is a subset of C. It isbetter than Java in the applications that Java (fka Oak) was originally intended for.

JavaScript was not developed at Sun Microsystems, the home of Java. JavaScript was developed at Netscape. It was originally calledLiveScript, but that name wasn't confusing enough.

The -Script suffix suggests that it is not a real programming language, that a scripting language is less than a programming language.But it is really a matter of specialization. Compared to C, JavaScript trades performance for expressive power and dynamism.

Lisp in C's ClothingJavaScript's C-like syntax, including curly braces and the clunky for statement, makes it appear to be an ordinary procedurallanguage. This is misleading because JavaScript has more in common with functional languages like Lisp or Scheme than with C orJava. It has arrays instead of lists and objects instead of property lists. Functions are first class. It has closures. You get lambdaswithout having to balance all those parens.

Quelle: www.crockford.com

Dienstag, 9. April 13

Page 5: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Douglas Crockford

• Yahoo JavaScript Architekt

• Erfinder des JSON-Standard

• Entwickler der Tools JSLint und JSMin

Dienstag, 9. April 13

Page 6: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Ein Blick zurück - Wie alles begann

Dienstag, 9. April 13

Page 7: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Der Unternehmer

• Marc Andreessen

ist Mit-Entwickler des grafischen Browsers Mosaic und gründet 04/1994 mit anderen die Firma Netscape.

Dienstag, 9. April 13

Page 8: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Der Erfinder

• Brendan Elch

kommt im April 1995 zu Netscape und entwickelt in nur zehn Tagen eine Script-Sprache für den Netscape Navigator Web Browser.

Quelle: http://www.w3.org/community/webed/wiki/A_Short_History_of_JavaScript

Dienstag, 9. April 13

Page 9: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Der erste JS-Browser

• Netscape Navigator 2

wird 03/1996 verfügbar und enthält „LiveScript“.

Aus Marketinggründen erfolgt später eine Umbenennung in JavaScript.

Quelle: https://developer.mozilla.org/en-US/docs/JavaScript/A_re-introduction_to_JavaScript

Dienstag, 9. April 13

Page 10: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Die MS-Antwort

• Internet Explorer 3.0

erscheint 08/1996 und enthält „JScript“.

„[Microsoft] did not want to deal with Sun about the trademark issue, and so they called their implementation JScript. A lot of people think that JScript and JavaScript are different but similar languages. That's not the case. They are just different names for the same language, and the reason the names are different was to get around trademark issues.“ (Douglas Crockford)

Dienstag, 9. April 13

Page 11: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

What is Ecma

History

Presentation

Organigram(Technical Committees)

Members

Join

Printer Friendly Version

Back

TC39 - ECMAScript (formerly TC39-TG1)

Scope - Programme of work - Activities

Scope:

Standardization of the general purpose, cross platform, vendor-neutralprogramming language ECMAScript. This includes the language syntax, semantics,and libraries and complementary technologies that support the language.

Programme of work:

1. To maintain and update the standard for the ECMAScript programminglanguage.

2. To identify, develop and maintain standards for libraries that extend thecapabilities of ECMAScript.

3. To develop test suites that may be used to verify correct implementation ofthese standards.

4. To contribute selected standards to ISO/IEC JTC 1.5. To evaluate and consider proposals for complementary or additional

technologies.

ChairmanMr. J. Neumann (Microsoft/Yahoo/Mozilla)

Vice-Chairman

Quelle: http://www.ecma-international.org/memento/TC39.htm

Der Standard

• ECMAScript

wird in 06/1997 in der Version 1.0 vorgestellt.

1999 - ES32009 - ES52011 - ES5.120xx - „Harmony“

Dienstag, 9. April 13

Page 12: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Die JS-Renaissance

• Jesse James Garret

schreibt 02/2005 den Artikel:

„Ajax: A New Approach to Web Applications“.

Das Zeitalter der „Rich Internet Applications (RIA)“ beginnt.

Dienstag, 9. April 13

Page 13: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Der aktuelle Stand - JavaScript heute

Dienstag, 9. April 13

Page 14: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

„ECMAScript is the preferred programming language

for the World Wide Web.“

Quelle: ECMAScript - Engineering Excellence For 15 Years, 1996 - 2011 (John Neumann)

Dienstag, 9. April 13

Page 15: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

„ECMAScript is the language that people use without

bothering to learn it first.“

Quelle: „The Future of JavaScript I mean ECMAScript - Douglas Crockford“

Dienstag, 9. April 13

Page 16: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Vorurteile

• „JavaScript ist keine Sprache“

• „JavaScript ist voller Fehler“

• „JavaScript ist nicht schnell genug“

• „JavaScript-Programmierung im Browser ist einfach schrecklich“

Dienstag, 9. April 13

Page 17: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Einflüsse• Self

• Prototypen

• Dynamische Objekte

• Java

• Syntax

• Konventionen

• Scheme

• Lambda

• Lose Typisierung

• Perl

• Reguläre Ausdrücke

Dienstag, 9. April 13

Page 18: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

JS-Konzepte

• Objektorientiert

• Keine Klassen

• Prototypen

• Funktional

Dienstag, 9. April 13

Page 19: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

JS-Probleme

• Irreführender Name

• Grundsätzliche Designfehler

• Schlechte Implementierungen

• Schlechte Bücher

Dienstag, 9. April 13

Page 20: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Your Account

Search

Popular Topics: Programming JavaScript iPhone Android Python Head First HTML5 & CSS Microsoft Java Perl Linux Data

PrintSubscribe to Newsletters

ShareThis

JavaScript > Excerpts >

This excerpt is from JavaScript: The Good Parts . This authoritative book scrapes away these bad features toreveal a subset of JavaScript that's more reliable, readable, and maintainable than the language as a whole-asubset you can use to create truly extensible and efficient code.

Bad Parts: Appendix B - JavaScript: The Good Partsby Douglas Crockford

And, I pray thee now, tell me for which of my bad parts didst thou first fall in love with me?

--William Shakespeare, Much Ado About Nothing

In this appendix, I present some of the problematic features of JavaScript that are easily avoided. By simply avoiding these features,you make JavaScript a better language, and yourself a better programmer.

==JavaScript has two sets of equality operators: === and !==, and their evil twins == and !=. The good ones work the way you wouldexpect. If the two operands are of the same type and have the same value, then === produces true and !== produces false. The eviltwins do the right thing when the operands are of the same type, but if they are of different types, they attempt to coerce the values.The rules by which they do that are complicated and unmemorable. These are some of the interesting cases:

'' == '0' // false0 == '' // true0 == '0' // true

false == 'false' // falsefalse == '0' // true

false == undefined // falsefalse == null // falsenull == undefined // true

' \t\r\n ' == 0 // true

The lack of transitivity is alarming. My advice is to never use the evil twins. Instead, always use === and !==. All of the comparisonsjust shown produce false with the === operator.

with StatementJavaScript has a with statement that was intended to provide a shorthand when accessing the properties of an object. Unfortunately,its results can sometimes be unpredictable, so it should be avoided.

The statement:

with (obj) { a = b;}

does the same thing as:

if (obj.a === undefined) { a = obj.b === undefined ? b : obj.b;} else { obj.a = obj.b === undefined ? b : obj.b;}

So, it is the same as one of these statements:

a = b;a = obj.b;obj.a = b;obj.a = obj.b;

It is not possible to tell from reading the program which of those statements you will get. It can vary from one running of the programto the next. It can even vary while the program is running. If you can't read a program and understand what it is going to do, it isimpossible to have confidence that it will correctly do what you want.

Simply by being in the language, the with statement significantly slows down JavaScript processors because it frustrates the lexicalbinding of variable names. It was well intentioned, but the language would be better if it didn't have it.

evalThe eval function passes a string to the JavaScript compiler and executes the result. It is the single most misused feature ofJavaScript. It is most commonly used by people who have an incomplete understanding of the language. For example, if you knowabout the dot notation, but are ignorant of the subscript notation, you might write:

eval("myValue = myObject." + myKey + ";");

instead of:

myvalue = myObject[myKey];

The eval form is much harder to read. This form will be significantly slower because it needs to run the compiler just to execute atrivial assignment statement. It also frustrates JSLint (see Appendix�C, JSLint), so the tool's ability to detect problems is significantlyreduced.

The eval function also compromises the security of your application because it grants too much authority to the eval'd text. And itcompromises the performance of the language as a whole in the same way that the with statement does.

The Function constructor is another form of eval, and should similarly be avoided.

The browser provides setTimeout and setInterval functions that can take string arguments or function arguments. When givenstring arguments, setTimeout and setInterval act as eval. The string argument form also should be avoided.

continue StatementThe continue statement jumps to the top of the loop. I have never seen a piece of code that was not improved by refactoring it toremove the continue statement.

switch Fall ThroughThe switch statement was modeled after the FORTRAN IV computed go to statement. Each case falls through into the next caseunless you explicitly disrupt the flow.

Someone wrote to me once suggesting that JSLint should give a warning when a case falls through into another case. He pointed outthat this is a very common source of errors, and it is a difficult error to see in the code. I answered that that was all true, but that thebenefit of compactness obtained by falling through more than compensated for the chance of error.

The next day, he reported that there was an error in JSLint. It was misidentifying an error. I investigated, and it turned out that I hada case that was falling through. In that moment, I achieved enlightenment. I no longer use intentional fall throughs. That disciplinemakes it much easier to find the unintentional fall throughs.

The worst features of a language aren't the features that are obviously dangerous or useless. Those are easily avoided. The worstfeatures are the attractive nuisances, the features that are both useful and dangerous.

Block-less StatementsAn if or while or do or for statement can take a block or a single statement. The single statement form is another attractivenuisance. It offers the advantage of saving two characters, a dubious advantage. It obscures the program's structure so thatsubsequent manipulators of the code can easily insert bugs. For example:

if (ok) t = true;

can become:

if (ok) t = true; advance( );

which looks like:

if (ok) { t = true; advance( );}

but which actually means:

if (ok) { t = true;}advance( );

Programs that appear to do one thing but actually do another are much harder to get right. A disciplined and consistent use of blocksmakes it easier to get it right.

++ −−The increment and decrement operators make it possible to write in an extremely terse style. In languages such as C, they made itpossible to write one-liners that could do string copies:

for (p = src, q = dest; !*p; p++, q++) *q = *p;

They also encourage a programming style that, as it turns out, is reckless. Most of the buffer overrun bugs that created terriblesecurity vulnerabilities were due to code like this.

In my own practice, I observed that when I used ++ and --, my code tended to be too tight, too tricky, too cryptic. So, as a matter ofdiscipline, I don't use them any more. I think that as a result, my coding style has become cleaner.

Bitwise OperatorsJavaScript has the same set of bitwise operators as Java:

& and| or^ xor˜ not>> signed right shift>>> unsigned right shift<< left shift

In Java, the bitwise operators work with integers. JavaScript doesn't have integers. It only has double precision floating-pointnumbers. So, the bitwise operators convert their number operands into integers, do their business, and then convert them back. Inmost languages, these operators are very close to the hardware and very fast. In JavaScript, they are very far from the hardware andvery slow. JavaScript is rarely used for doing bit manipulation.

As a result, in JavaScript programs, it is more likely that & is a mistyped && operator. The presence of the bitwise operators reducessome of the language's redundancy, making it easier for bugs to hide.

The function Statement Versus the function ExpressionJavaScript has a function statement as well as a function expression. This is confusing because they can look exactly the same. Afunction statement is shorthand for a var statement with a function value.

The statement:

function foo( ) {}

means about the same thing as:

var foo = function foo( ) {};

Throughout this book, I have been using the second form because it makes it clear that foo is a variable containing a function value.To use the language well, it is important to understand that functions are values.

function statements are subject to hoisting. This means that regardless of where a function is placed, it is moved to the top of thescope in which it is defined. This relaxes the requirement that functions should be declared before used, which I think leads tosloppiness. It also prohibits the use of function statements in if statements. It turns out that most browsers allow functionstatements in if statements, but they vary in how that should be interpreted. That creates portability problems.

The first thing in a statement cannot be a function expression because the official grammar assumes that a statement that startswith the word function is a function statement. The workaround is to wrap the function expression in parentheses:

(function ( ) { var hidden_variable;

// This function can have some impact on // the environment, but introduces no new // global variables.})( );

Typed WrappersJavaScript has a set of typed wrappers. For example:

new Boolean(false)

produces an object that has a valueOf method that returns the wrapped value. This turns out to be completely unnecessary andoccasionally confusing. Don't use new Boolean or new Number or new String.

Also avoid new Object and new Array. Use {} and [] instead.

newJavaScript's new operator creates a new object that inherits from the operand's prototype member, and then calls the operand,binding the new object to this. This gives the operand (which had better be a constructor function) a chance to customize the newobject before it is returned to the requestor.

If you forget to use the new operator, you instead get an ordinary function call, and this is bound to the global object instead of to anew object. That means that your function will be clobbering global variables when it attempts to initialize the new members. That is avery bad thing. There is no compile-time warning. There is no runtime warning.

By convention, functions that are intended to be used with new should be given names with initial capital letters, and names withinitial capital letters should be used only with constructor functions that take the new prefix. This convention gives us a visual cue thatcan help spot expensive mistakes that the language itself is keen to overlook.

An even better coping strategy is to not use new at all.

voidIn many languages, void is a type that has no values. In JavaScript, void is an operator that takes an operand and returnsundefined. This is not useful, and it is very confusing. Avoid void.

If you enjoyed this excerpt, buy a copy of JavaScript: The Good Parts .

View All RSS Feeds >

© 2013, O’Reilly Media, Inc.(707) 827-7019 (800) 889-8969

All trademarks and registered trademarksappearing on oreilly.com are the property oftheir respective owners.

Sign up today to receive special discounts,product alerts, and news from O'Reilly. Enter Email Privacy Policy >

View Sample Newsletter >

Shopping Cart

Home Shop News & Commentary Answers Safari Books Online Conferences School of Technology Community

Recommended for You

Python CookbookEbook: $39.99

Interactive DataVisualization for the Web

Ebook: $23.99

HTML5 and JavaScriptWeb Apps

Print: $24.99Ebook: $19.99

About O'ReillyAcademic SolutionsJobsContactsCorporate InformationPress RoomPrivacy PolicyTerms of ServiceWriting for O'Reilly

CommunityAuthorsCommunity & Featured UsersForumsMembershipNewslettersO'Reilly AnswersRSS FeedsUser GroupsO'Reilly Chimera (beta)

Partner Sitesmakezine.commakerfaire.comcraftzine.comigniteshow.comPayPal Developer ZoneO'Reilly Insights on Forbes.com

Shop O'ReillyCustomer ServiceContact UsShipping InformationOrdering & PaymentThe O'Reilly Guarantee

Your Account

Search

Popular Topics: Programming JavaScript iPhone Android Python Head First HTML5 & CSS Microsoft Java Perl Linux Data

PrintSubscribe to Newsletters

ShareThis

JavaScript > Excerpts >

This excerpt is from JavaScript: The Good Parts . This authoritative book scrapes away these bad features toreveal a subset of JavaScript that's more reliable, readable, and maintainable than the language as a whole-asubset you can use to create truly extensible and efficient code.

Bad Parts: Appendix B - JavaScript: The Good Partsby Douglas Crockford

And, I pray thee now, tell me for which of my bad parts didst thou first fall in love with me?

--William Shakespeare, Much Ado About Nothing

In this appendix, I present some of the problematic features of JavaScript that are easily avoided. By simply avoiding these features,you make JavaScript a better language, and yourself a better programmer.

==JavaScript has two sets of equality operators: === and !==, and their evil twins == and !=. The good ones work the way you wouldexpect. If the two operands are of the same type and have the same value, then === produces true and !== produces false. The eviltwins do the right thing when the operands are of the same type, but if they are of different types, they attempt to coerce the values.The rules by which they do that are complicated and unmemorable. These are some of the interesting cases:

'' == '0' // false0 == '' // true0 == '0' // true

false == 'false' // falsefalse == '0' // true

false == undefined // falsefalse == null // falsenull == undefined // true

' \t\r\n ' == 0 // true

The lack of transitivity is alarming. My advice is to never use the evil twins. Instead, always use === and !==. All of the comparisonsjust shown produce false with the === operator.

with StatementJavaScript has a with statement that was intended to provide a shorthand when accessing the properties of an object. Unfortunately,its results can sometimes be unpredictable, so it should be avoided.

The statement:

with (obj) { a = b;}

does the same thing as:

if (obj.a === undefined) { a = obj.b === undefined ? b : obj.b;} else { obj.a = obj.b === undefined ? b : obj.b;}

So, it is the same as one of these statements:

a = b;a = obj.b;obj.a = b;obj.a = obj.b;

It is not possible to tell from reading the program which of those statements you will get. It can vary from one running of the programto the next. It can even vary while the program is running. If you can't read a program and understand what it is going to do, it isimpossible to have confidence that it will correctly do what you want.

Simply by being in the language, the with statement significantly slows down JavaScript processors because it frustrates the lexicalbinding of variable names. It was well intentioned, but the language would be better if it didn't have it.

evalThe eval function passes a string to the JavaScript compiler and executes the result. It is the single most misused feature ofJavaScript. It is most commonly used by people who have an incomplete understanding of the language. For example, if you knowabout the dot notation, but are ignorant of the subscript notation, you might write:

eval("myValue = myObject." + myKey + ";");

instead of:

myvalue = myObject[myKey];

The eval form is much harder to read. This form will be significantly slower because it needs to run the compiler just to execute atrivial assignment statement. It also frustrates JSLint (see Appendix�C, JSLint), so the tool's ability to detect problems is significantlyreduced.

The eval function also compromises the security of your application because it grants too much authority to the eval'd text. And itcompromises the performance of the language as a whole in the same way that the with statement does.

The Function constructor is another form of eval, and should similarly be avoided.

The browser provides setTimeout and setInterval functions that can take string arguments or function arguments. When givenstring arguments, setTimeout and setInterval act as eval. The string argument form also should be avoided.

continue StatementThe continue statement jumps to the top of the loop. I have never seen a piece of code that was not improved by refactoring it toremove the continue statement.

switch Fall ThroughThe switch statement was modeled after the FORTRAN IV computed go to statement. Each case falls through into the next caseunless you explicitly disrupt the flow.

Someone wrote to me once suggesting that JSLint should give a warning when a case falls through into another case. He pointed outthat this is a very common source of errors, and it is a difficult error to see in the code. I answered that that was all true, but that thebenefit of compactness obtained by falling through more than compensated for the chance of error.

The next day, he reported that there was an error in JSLint. It was misidentifying an error. I investigated, and it turned out that I hada case that was falling through. In that moment, I achieved enlightenment. I no longer use intentional fall throughs. That disciplinemakes it much easier to find the unintentional fall throughs.

The worst features of a language aren't the features that are obviously dangerous or useless. Those are easily avoided. The worstfeatures are the attractive nuisances, the features that are both useful and dangerous.

Block-less StatementsAn if or while or do or for statement can take a block or a single statement. The single statement form is another attractivenuisance. It offers the advantage of saving two characters, a dubious advantage. It obscures the program's structure so thatsubsequent manipulators of the code can easily insert bugs. For example:

if (ok) t = true;

can become:

if (ok) t = true; advance( );

which looks like:

if (ok) { t = true; advance( );}

but which actually means:

if (ok) { t = true;}advance( );

Programs that appear to do one thing but actually do another are much harder to get right. A disciplined and consistent use of blocksmakes it easier to get it right.

++ −−The increment and decrement operators make it possible to write in an extremely terse style. In languages such as C, they made itpossible to write one-liners that could do string copies:

for (p = src, q = dest; !*p; p++, q++) *q = *p;

They also encourage a programming style that, as it turns out, is reckless. Most of the buffer overrun bugs that created terriblesecurity vulnerabilities were due to code like this.

In my own practice, I observed that when I used ++ and --, my code tended to be too tight, too tricky, too cryptic. So, as a matter ofdiscipline, I don't use them any more. I think that as a result, my coding style has become cleaner.

Bitwise OperatorsJavaScript has the same set of bitwise operators as Java:

& and| or^ xor˜ not>> signed right shift>>> unsigned right shift<< left shift

In Java, the bitwise operators work with integers. JavaScript doesn't have integers. It only has double precision floating-pointnumbers. So, the bitwise operators convert their number operands into integers, do their business, and then convert them back. Inmost languages, these operators are very close to the hardware and very fast. In JavaScript, they are very far from the hardware andvery slow. JavaScript is rarely used for doing bit manipulation.

As a result, in JavaScript programs, it is more likely that & is a mistyped && operator. The presence of the bitwise operators reducessome of the language's redundancy, making it easier for bugs to hide.

The function Statement Versus the function ExpressionJavaScript has a function statement as well as a function expression. This is confusing because they can look exactly the same. Afunction statement is shorthand for a var statement with a function value.

The statement:

function foo( ) {}

means about the same thing as:

var foo = function foo( ) {};

Throughout this book, I have been using the second form because it makes it clear that foo is a variable containing a function value.To use the language well, it is important to understand that functions are values.

function statements are subject to hoisting. This means that regardless of where a function is placed, it is moved to the top of thescope in which it is defined. This relaxes the requirement that functions should be declared before used, which I think leads tosloppiness. It also prohibits the use of function statements in if statements. It turns out that most browsers allow functionstatements in if statements, but they vary in how that should be interpreted. That creates portability problems.

The first thing in a statement cannot be a function expression because the official grammar assumes that a statement that startswith the word function is a function statement. The workaround is to wrap the function expression in parentheses:

(function ( ) { var hidden_variable;

// This function can have some impact on // the environment, but introduces no new // global variables.})( );

Typed WrappersJavaScript has a set of typed wrappers. For example:

new Boolean(false)

produces an object that has a valueOf method that returns the wrapped value. This turns out to be completely unnecessary andoccasionally confusing. Don't use new Boolean or new Number or new String.

Also avoid new Object and new Array. Use {} and [] instead.

newJavaScript's new operator creates a new object that inherits from the operand's prototype member, and then calls the operand,binding the new object to this. This gives the operand (which had better be a constructor function) a chance to customize the newobject before it is returned to the requestor.

If you forget to use the new operator, you instead get an ordinary function call, and this is bound to the global object instead of to anew object. That means that your function will be clobbering global variables when it attempts to initialize the new members. That is avery bad thing. There is no compile-time warning. There is no runtime warning.

By convention, functions that are intended to be used with new should be given names with initial capital letters, and names withinitial capital letters should be used only with constructor functions that take the new prefix. This convention gives us a visual cue thatcan help spot expensive mistakes that the language itself is keen to overlook.

An even better coping strategy is to not use new at all.

voidIn many languages, void is a type that has no values. In JavaScript, void is an operator that takes an operand and returnsundefined. This is not useful, and it is very confusing. Avoid void.

If you enjoyed this excerpt, buy a copy of JavaScript: The Good Parts .

View All RSS Feeds >

© 2013, O’Reilly Media, Inc.(707) 827-7019 (800) 889-8969

All trademarks and registered trademarksappearing on oreilly.com are the property oftheir respective owners.

Sign up today to receive special discounts,product alerts, and news from O'Reilly. Enter Email Privacy Policy >

View Sample Newsletter >

Shopping Cart

Home Shop News & Commentary Answers Safari Books Online Conferences School of Technology Community

Recommended for You

Python CookbookEbook: $39.99

Interactive DataVisualization for the Web

Ebook: $23.99

HTML5 and JavaScriptWeb Apps

Print: $24.99Ebook: $19.99

About O'ReillyAcademic SolutionsJobsContactsCorporate InformationPress RoomPrivacy PolicyTerms of ServiceWriting for O'Reilly

CommunityAuthorsCommunity & Featured UsersForumsMembershipNewslettersO'Reilly AnswersRSS FeedsUser GroupsO'Reilly Chimera (beta)

Partner Sitesmakezine.commakerfaire.comcraftzine.comigniteshow.comPayPal Developer ZoneO'Reilly Insights on Forbes.com

Shop O'ReillyCustomer ServiceContact UsShipping InformationOrdering & PaymentThe O'Reilly Guarantee

Your Account

Search

Popular Topics: Programming JavaScript iPhone Android Python Head First HTML5 & CSS Microsoft Java Perl Linux Data

PrintSubscribe to Newsletters

ShareThis

JavaScript > Excerpts >

This excerpt is from JavaScript: The Good Parts . This authoritative book scrapes away these bad features toreveal a subset of JavaScript that's more reliable, readable, and maintainable than the language as a whole-asubset you can use to create truly extensible and efficient code.

Bad Parts: Appendix B - JavaScript: The Good Partsby Douglas Crockford

And, I pray thee now, tell me for which of my bad parts didst thou first fall in love with me?

--William Shakespeare, Much Ado About Nothing

In this appendix, I present some of the problematic features of JavaScript that are easily avoided. By simply avoiding these features,you make JavaScript a better language, and yourself a better programmer.

==JavaScript has two sets of equality operators: === and !==, and their evil twins == and !=. The good ones work the way you wouldexpect. If the two operands are of the same type and have the same value, then === produces true and !== produces false. The eviltwins do the right thing when the operands are of the same type, but if they are of different types, they attempt to coerce the values.The rules by which they do that are complicated and unmemorable. These are some of the interesting cases:

'' == '0' // false0 == '' // true0 == '0' // true

false == 'false' // falsefalse == '0' // true

false == undefined // falsefalse == null // falsenull == undefined // true

' \t\r\n ' == 0 // true

The lack of transitivity is alarming. My advice is to never use the evil twins. Instead, always use === and !==. All of the comparisonsjust shown produce false with the === operator.

with StatementJavaScript has a with statement that was intended to provide a shorthand when accessing the properties of an object. Unfortunately,its results can sometimes be unpredictable, so it should be avoided.

The statement:

with (obj) { a = b;}

does the same thing as:

if (obj.a === undefined) { a = obj.b === undefined ? b : obj.b;} else { obj.a = obj.b === undefined ? b : obj.b;}

So, it is the same as one of these statements:

a = b;a = obj.b;obj.a = b;obj.a = obj.b;

It is not possible to tell from reading the program which of those statements you will get. It can vary from one running of the programto the next. It can even vary while the program is running. If you can't read a program and understand what it is going to do, it isimpossible to have confidence that it will correctly do what you want.

Simply by being in the language, the with statement significantly slows down JavaScript processors because it frustrates the lexicalbinding of variable names. It was well intentioned, but the language would be better if it didn't have it.

evalThe eval function passes a string to the JavaScript compiler and executes the result. It is the single most misused feature ofJavaScript. It is most commonly used by people who have an incomplete understanding of the language. For example, if you knowabout the dot notation, but are ignorant of the subscript notation, you might write:

eval("myValue = myObject." + myKey + ";");

instead of:

myvalue = myObject[myKey];

The eval form is much harder to read. This form will be significantly slower because it needs to run the compiler just to execute atrivial assignment statement. It also frustrates JSLint (see Appendix�C, JSLint), so the tool's ability to detect problems is significantlyreduced.

The eval function also compromises the security of your application because it grants too much authority to the eval'd text. And itcompromises the performance of the language as a whole in the same way that the with statement does.

The Function constructor is another form of eval, and should similarly be avoided.

The browser provides setTimeout and setInterval functions that can take string arguments or function arguments. When givenstring arguments, setTimeout and setInterval act as eval. The string argument form also should be avoided.

continue StatementThe continue statement jumps to the top of the loop. I have never seen a piece of code that was not improved by refactoring it toremove the continue statement.

switch Fall ThroughThe switch statement was modeled after the FORTRAN IV computed go to statement. Each case falls through into the next caseunless you explicitly disrupt the flow.

Someone wrote to me once suggesting that JSLint should give a warning when a case falls through into another case. He pointed outthat this is a very common source of errors, and it is a difficult error to see in the code. I answered that that was all true, but that thebenefit of compactness obtained by falling through more than compensated for the chance of error.

The next day, he reported that there was an error in JSLint. It was misidentifying an error. I investigated, and it turned out that I hada case that was falling through. In that moment, I achieved enlightenment. I no longer use intentional fall throughs. That disciplinemakes it much easier to find the unintentional fall throughs.

The worst features of a language aren't the features that are obviously dangerous or useless. Those are easily avoided. The worstfeatures are the attractive nuisances, the features that are both useful and dangerous.

Block-less StatementsAn if or while or do or for statement can take a block or a single statement. The single statement form is another attractivenuisance. It offers the advantage of saving two characters, a dubious advantage. It obscures the program's structure so thatsubsequent manipulators of the code can easily insert bugs. For example:

if (ok) t = true;

can become:

if (ok) t = true; advance( );

which looks like:

if (ok) { t = true; advance( );}

but which actually means:

if (ok) { t = true;}advance( );

Programs that appear to do one thing but actually do another are much harder to get right. A disciplined and consistent use of blocksmakes it easier to get it right.

++ −−The increment and decrement operators make it possible to write in an extremely terse style. In languages such as C, they made itpossible to write one-liners that could do string copies:

for (p = src, q = dest; !*p; p++, q++) *q = *p;

They also encourage a programming style that, as it turns out, is reckless. Most of the buffer overrun bugs that created terriblesecurity vulnerabilities were due to code like this.

In my own practice, I observed that when I used ++ and --, my code tended to be too tight, too tricky, too cryptic. So, as a matter ofdiscipline, I don't use them any more. I think that as a result, my coding style has become cleaner.

Bitwise OperatorsJavaScript has the same set of bitwise operators as Java:

& and| or^ xor˜ not>> signed right shift>>> unsigned right shift<< left shift

In Java, the bitwise operators work with integers. JavaScript doesn't have integers. It only has double precision floating-pointnumbers. So, the bitwise operators convert their number operands into integers, do their business, and then convert them back. Inmost languages, these operators are very close to the hardware and very fast. In JavaScript, they are very far from the hardware andvery slow. JavaScript is rarely used for doing bit manipulation.

As a result, in JavaScript programs, it is more likely that & is a mistyped && operator. The presence of the bitwise operators reducessome of the language's redundancy, making it easier for bugs to hide.

The function Statement Versus the function ExpressionJavaScript has a function statement as well as a function expression. This is confusing because they can look exactly the same. Afunction statement is shorthand for a var statement with a function value.

The statement:

function foo( ) {}

means about the same thing as:

var foo = function foo( ) {};

Throughout this book, I have been using the second form because it makes it clear that foo is a variable containing a function value.To use the language well, it is important to understand that functions are values.

function statements are subject to hoisting. This means that regardless of where a function is placed, it is moved to the top of thescope in which it is defined. This relaxes the requirement that functions should be declared before used, which I think leads tosloppiness. It also prohibits the use of function statements in if statements. It turns out that most browsers allow functionstatements in if statements, but they vary in how that should be interpreted. That creates portability problems.

The first thing in a statement cannot be a function expression because the official grammar assumes that a statement that startswith the word function is a function statement. The workaround is to wrap the function expression in parentheses:

(function ( ) { var hidden_variable;

// This function can have some impact on // the environment, but introduces no new // global variables.})( );

Typed WrappersJavaScript has a set of typed wrappers. For example:

new Boolean(false)

produces an object that has a valueOf method that returns the wrapped value. This turns out to be completely unnecessary andoccasionally confusing. Don't use new Boolean or new Number or new String.

Also avoid new Object and new Array. Use {} and [] instead.

newJavaScript's new operator creates a new object that inherits from the operand's prototype member, and then calls the operand,binding the new object to this. This gives the operand (which had better be a constructor function) a chance to customize the newobject before it is returned to the requestor.

If you forget to use the new operator, you instead get an ordinary function call, and this is bound to the global object instead of to anew object. That means that your function will be clobbering global variables when it attempts to initialize the new members. That is avery bad thing. There is no compile-time warning. There is no runtime warning.

By convention, functions that are intended to be used with new should be given names with initial capital letters, and names withinitial capital letters should be used only with constructor functions that take the new prefix. This convention gives us a visual cue thatcan help spot expensive mistakes that the language itself is keen to overlook.

An even better coping strategy is to not use new at all.

voidIn many languages, void is a type that has no values. In JavaScript, void is an operator that takes an operand and returnsundefined. This is not useful, and it is very confusing. Avoid void.

If you enjoyed this excerpt, buy a copy of JavaScript: The Good Parts .

View All RSS Feeds >

© 2013, O’Reilly Media, Inc.(707) 827-7019 (800) 889-8969

All trademarks and registered trademarksappearing on oreilly.com are the property oftheir respective owners.

Sign up today to receive special discounts,product alerts, and news from O'Reilly. Enter Email Privacy Policy >

View Sample Newsletter >

Shopping Cart

Home Shop News & Commentary Answers Safari Books Online Conferences School of Technology Community

Recommended for You

Python CookbookEbook: $39.99

Interactive DataVisualization for the Web

Ebook: $23.99

HTML5 and JavaScriptWeb Apps

Print: $24.99Ebook: $19.99

About O'ReillyAcademic SolutionsJobsContactsCorporate InformationPress RoomPrivacy PolicyTerms of ServiceWriting for O'Reilly

CommunityAuthorsCommunity & Featured UsersForumsMembershipNewslettersO'Reilly AnswersRSS FeedsUser GroupsO'Reilly Chimera (beta)

Partner Sitesmakezine.commakerfaire.comcraftzine.comigniteshow.comPayPal Developer ZoneO'Reilly Insights on Forbes.com

Shop O'ReillyCustomer ServiceContact UsShipping InformationOrdering & PaymentThe O'Reilly Guarantee

DON‘T USE THE BAD PARTS!

„By simply avoiding these features, you make JavaScript a better language, and yourself a better programmer.“

Dienstag, 9. April 13

Page 21: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Browser und JavaScript-Engines

Dienstag, 9. April 13

Page 22: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Browser Layout-Engine JS-Engine

Internet Explorer Trident Chakra

Opera Presto Carakan

Firefox Gecko IonMonkey

Safari Webkit Nitro

Chrome Webkit V8

02/2013: Opera setzt auf Webkit!Dienstag, 9. April 13

Page 23: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Welcome to the website for the WebKit Open Source Project!WebKit is an open source web browser engine. WebKit is also the name of the Mac OS X systemframework version of the engine that's used by Safari, Dashboard, Mail, and many other OS Xapplications. WebKit's HTML and JavaScript code began as a branch of the KHTML and KJS libraries fromKDE.

Getting involvedThere are many ways to get involved. You can:

download the latest nightly buildinstall developer tools and then check out and build the sourcecode

Once you have either of these, you can help by:reporting bugs you find in the softwareproviding reductions to bugssubmitting patches for review

More infoMore information about WebKit can be found on its wiki. You can help here too, by adding informationthat can help others learn about WebKit. If you have more questions, contact us.

ProjectsThere are many exciting (new) projects that you can contribute to:

help us improve Website compatibilitywrite documentationSVGMathMLCSSDOM

The WebKit Open Source Project

HomeSurfin’ Safari BlogPlanet WebKitProject GoalsKeeping in TouchTracContributors Meeting

Working with the CodeInstalling Developer ToolsGetting the CodeBuilding WebKitRunning WebKitDebugging WebKitContributing CodeCommit and Review PolicyAdding FeaturesSecurity Policy

DocumentationWikiProjectsCode Style GuidelinesTechnical ArticlesWeb InspectorWeb Developer ResourcesDemos

TestingRegression TestingLeak HuntingWriting New TestsGetting a Crash Log

BugsReporting Bugs http://www.webkit.org/

Dienstag, 9. April 13

Page 24: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Start Produkte Konferenzen Schaufenster Live Gruppen

What is V8?

V8 is Google's open source high-performance JavaScript engine, written in C++ and used inGoogle Chrome, the open source browser from Google. It implements ECMAScript as specifiedin ECMA-262, 3rd edition, and runs on Windows XP and Vista, Mac OS X 10.5+, and Linuxsystems that use IA-32, ARM or MIPS processors. V8 can run standalone, or can be embeddedinto any C++ application.

How do I start?

Missing Plug-in

Sign inChrome V8 X Search

Chrome V8 346

Introduction

Getting Started

Documentation▸

Resources▸

Terms of Service

Run the Web.

The JavaScript Engine that powers your Web Applications.

https://developers.google.com/v8/Dienstag, 9. April 13

Page 25: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Home Products Conferences Showcase Live Groups

The Web has evolved. So should JavaScript benchmarks.

Octane is a modern benchmark that measures a JavaScript engine’s performance by running a suite of tests representative of today’s complex and demanding webapplications. Octane‘s goal is to measure the performance of JavaScript code found in large, real-world web applications.

You can read more about our set of tests, check the FAQ or run the benchmark yourself.

Sign inOctane X Search

Octane 267

Home

The Benchmark

Compatibility

FAQ

History

Resources▸

Measure Your Engine Performance.

The JavaScript Benchmark Suite for the Modern Web.

https://developers.google.com/octane/Dienstag, 9. April 13

Page 26: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

https://github.com/kripken/emscripten/wikiDienstag, 9. April 13

Page 27: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

JavaScript nicht nur im Browser

Dienstag, 9. April 13

Page 28: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Node.js is the execution core of

Manhattan. Allowing developers

to build one code base using one

language – that is the nirvana for

developers.

Renaud Waldura

Sr. Product Manager, Cocktail

Node puts the magic in the right

places. We write our application,

and node delivers JSON over

HTTP.

Matt Ranney

CTO

Node lets us easily build

efficient, high-throughput

systems that scale. It's a

beautiful solution that renders a

whole class of problems

"formerly hard".

Seth Purcell

VP, Engineering

On the server side, our entire

mobile software stack is

completely built in Node. One

reason was scale. The second is

Node showed us huge

performance gains.

Kiran Prasad

Director of Engineering, Mobile

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable networkapplications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and

efficient, perfect for data-intensive real-time applications that run across distributed devices.

Current Version: v0.10.1

INSTALL

DOWNLOADS API DOCS

NODE.JS IN THE INDUSTRY

Dienstag, 9. April 13

Page 29: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

HOME

DOWNLOAD

ABOUT

NPM REGISTRY

DOCS

BLOG

COMMUNITY

LOGOS

JOBS

@nodejs

Node's goal is to provide an easy way to buildscalable network programs

In the "hello world" web server example below, many client connections

can be handled concurrently. Node tells the operating system (through

epoll, kqueue, /dev/poll, or select) that it should be notified when a new

connection is made, and then it goes to sleep. If someone new connects,

then it executes the callback. Each connection is only a small heap

allocation.

var http = require('http');

http.createServer(function (req, res) {

res.writeHead(200, {'Content-Type': 'text/plain'});

res.end('Hello World\n');

}).listen(1337, "127.0.0.1");

console.log('Server running at http://127.0.0.1:1337/');

This is in contrast to today's more common concurrency model where OS threads areemployed. Thread-based networking is relatively inefficient and very difficult to use.See: this and this . Node will show much better memory efficiency under high-loadsthan systems which allocate 2mb thread stacks for each connection. Furthermore, usersof Node are free from worries of dead-locking the process—there are no locks. Almost

Dienstag, 9. April 13

Page 30: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Architektur

• Single Threaded

• Event Loop

• Non-Blocking I/O

Quelle: http://blog.zenika.com/index.php?post/2011/04/10/NodeJS

Dienstag, 9. April 13

Page 31: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Quelle: http://blog.cloudfoundry.com/2012/06/27/future-proofing-your-apps-cloud-foundry-and-node-js/

Dienstag, 9. April 13

Page 32: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Quelle: http://blog.cloudfoundry.com/2012/06/27/future-proofing-your-apps-cloud-foundry-and-node-js/

Dienstag, 9. April 13

Page 33: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Server 100C 300C 900 2500C

Apache 5,409s 5,725 ??? ???

nginx 5,569 5,756 5,866 6,209

nodejs 5,647 5,819 5,881 6,193

Dieser Test ist NICHT repräsentativ!Dienstag, 9. April 13

Page 34: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Search PackagesNODE.JS HOME

DOWNLOAD

ABOUT

NPM REGISTRY

DOCS

BLOG

COMMUNITY

LOGOS

JOBS

Node Packaged ModulesTotal Packages: 25 995

1 430 247 downloads in the last day8 597 868 downloads in the last week

29 045 793 downloads in the last month

Patches welcome!

Any package can be installed by using npm install.

Add your programs to this index by using npm publish.

Recently Updated

1m grunt-closurecompiler9m slimple14m mongojs16m grunt-csso18m slidify21m bianca34m d846m symfio-contrib-assets49m se7ensky-restify-resource54m wintersmith-browserifyMore...

Most Depended Upon

2545 underscore1708 async1568 request1221 coffee-script1206 express1184 optimist1024 commander843 colors599 uglify-js544 mkdirpMore...

Create Account | Login

Dienstag, 9. April 13

Page 35: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Dienstag, 9. April 13

Page 36: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

SOURCE CODE DOCUMENTATION API EXAMPLES FAQ

Full web stackFull web stackNo browser requiredNo browser required

PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast andnative support for various web standards: DOM handling, CSS selector, JSON, Canvas,and SVG.

Download Download v1.9v1.9 Get started

Simple Javascript example

console.log('Loading a web page');

var page = require('webpage').create();

var url = 'http://www.phantomjs.org/';

page.open(url, function (status) {

//Page is loaded!

phantom.exit();

});

HEADLESS WEBSITE TESTINGRun functional tests withframeworks such as Jasmine,QUnit, Mocha, Capybara,WebDriver, and many others.Learn more

SCREEN CAPTUREProgrammatically capture webcontents, including SVG andCanvas. Create web sitescreenshots with thumbnailpreview. Learn more

PAGE AUTOMATIONAccess and manipulate webpageswith the standard DOM API, orwith usual libraries like jQuery. Learn more

NETWORK MONITORINGMonitor page loading and exportas standard HAR files. Automateperformance analysis using YSlowand Jenkins. Learn more

PhantomJS is used in the test workflow of various open-source projects:

Community: Read the release notes Join the mailing list Report bugs

PhantomJS is an optimal solution for

Dienstag, 9. April 13

Page 37: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Apache CouchDB™ is a databasethat uses JSON for documents,JavaScript for MapReduce queries,and regular HTTP for an API

DOWNLOADVersion 1.2.1

A Database for the Web

CouchDB is a database that completely embraces the web. Store your data with JSON documents. Access

your documents with your web browser, via HTTP. Query, combine, and transform your documents with

About Contribute Mailing List Download Quick Links

Dienstag, 9. April 13

Page 38: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

JavaScript-Bibliotheken, -Frameworks und -Tools

Dienstag, 9. April 13

Page 39: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t. • DOM

• Ajax

• Utility

• UI/UX

• Graphics

• Templating

• Application

JS-Aufgaben

Dienstag, 9. April 13

Page 40: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.Blog Catalog Add Library Sign In Find a Javascript library

Essentials

Application Frameworks (40)

Mobile Frameworks (17)

MVC Frameworks (34)

Realtime Frameworks (4)

Desktop GUI (3)

ServerSide Libraries (10)

Testing Frameworks (57)

Templating Engines (22)

Loaders (33)

UI

UI Frameworks (25)

Windows, Modals, Popups (20)

Keyboard Wrappers (26)

Form Widgets (55)

UI Components (26)

Sliders & Galleries (39)

Notifications (14)

WYSIWYG Editors (31)

Touch (52)

Multimedia

Game Engines (81)

Physics Libraries (12)

Animation Libraries (16)

Audio Libraries (19)

Presentation Libraries (19)

Video Players (10)

Graphics

Canvas Wrappers (18)

WebGL (17)

Image Manipulation (16)

Visualization Libraries (42)

Color Libraries (9)

Mapping Libraries (10)

Data Development Utilities Applications

Jster is a catalog with 1057 javascript libraries1057 javascript libraries and tools for web development.

JavaScript Libraries CatalogDid we miss something? You are free to add any useful JavaScript library or tool. Log in with GitHub account and click Add Library

Quelle: http://jster.net/catalog

Dienstag, 9. April 13

Page 41: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Share |

Request an extensivemarket report of

specific JavaScriptlibraries.

Learn more

Home Technologies Reports Sites Quality Users Blog Forum FAQ Search

Technologies

Content ManagementServer-side LanguagesClient-side Languages

JavaScript LibrariesMarkup Languages

Character EncodingsImage File Formats

Site ElementsSSL Certificate Authorities

Social WidgetsWeb Servers

Operating SystemsContent Delivery

Traffic Analysis ToolsAdvertising Networks

Top Level DomainsContent Languages

Trends

Usage TrendMarket Share Trend

Market

Top Site UsageMarket Position

Breakdown

RankingMultiple Technology Usage

Content ManagementServer-side LanguagesClient-side Languages

Markup LanguagesCharacter EncodingsImage File Formats

Site ElementsSSL Certificate Authorities

Social WidgetsWeb Servers

Operating SystemsContent Delivery

Traffic Analysis ToolsAdvertising Networks

Top Level DomainsContent Languages

see FAQ for explanationson advanced reports

Technologies > JavaScript Libraries

Usage of JavaScript libraries for websites

This diagram shows the percentages of websites using variousJavaScript libraries. See technologies overview for explanations onthe methodologies used in the surveys. Our reports are updateddaily.

How to read the diagram:38.1% of the websites use none of the JavaScript libraries that wemonitor.JQuery is used by 56.4% of all the websites, that is a JavaScript library market share of 91.1%.

None 38.1%

JQuery56.4%

91.1%

MooTools4.8%7.7%

Prototype3.5%5.7%

ASP.NET Ajax3.2%5.2%

Script.aculo.us2.7%4.3%

YUI Library1.5%2.5%

Spry0.6%1.0%

Dojo0.2%0.3%

Ext JS0.1%0.1%

Knockoutless than 0.1%0.1%

W3Techs.com, 24 March 2013

absolute usage percentage market share

Percentages of websites using various JavaScript librariesNote: a website may use more than one JavaScript library

The following JavaScript libraries have a market share of less than 0.1%

DHTMLXAngularJSMochiKitDOMAssistantUIZEGoogle Closure LibraryGlowSproutCoreMidoriJavaScriptMVC

Is there a technology missing?

Registered users can make a proposal to add a technology.

Do you want to stay informed about this survey?

Use our monthly technology survey RSS Feed.Registered users can also subscribe to a monthly technology survey email.

Share this page

TweetTweet 103

Gefällt mir 32 Personen gefällt das. Registriere dich, um sehen zu können,was deinen Freunden gefällt.

10

W3Techs on

Technology Brief

JavaScript Libraries

JavaScript libraries provide a basisfor building cross-browser webapplications based on JavaScript.

Advertise Here

Latest related posting read all

Web technology fact of the day29 January 2013

Usage of the Knockout JavaScriptlibrary was growing by 460% in thelast 10 months.» more

Latest related forumentry read all

Technology proposal:Backbone.js5 May 2012» more

Our Book Recommendation

Node.js & Co: Skalierbare,hochperformante und

echtzeitfähige Webanwendungenprofessionell in JavaScript

entwickelnGolo Roden

Preis: EUR 32,90

Mehr JavaScript Bücher

About Us Disclaimer Terms of Use Privacy Policy Publishing Partners Advertising Feedback

Copyright © 2009-2013 Q-Success

provided byQ-Success

Ads by Google

► JavaScript► Network Usage► Ajax Framework

More ShareShareShareShareShareShareShareShareShareShare

Visual PHP App Builderwww.lianja.comBuild Desktop,Web and MobileApps. Free DownloadWindows/OS X/Linux

Urlaub Westaustralienwww.WesternAustralia.com/deEin perfekter Australienurlaub.Touren, Karten, Videos, Infos.

Pure CSS3 Dropdown MenuCSS3Menu.comBeautiful CSS3 Drop DownMenus and Buttons! NoJavascript. No Images.

Quelle: http://w3techs.com/technologies/overview/javascript_library/all

Dienstag, 9. April 13

Page 42: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

DownloadDownload API DocumentationAPI Documentation BlogBlog PluginsPlugins Browser SupportBrowser Support

Plugins Contribute Events Support jQuery Foundation

Search jQuery

DownloadjQuery

v1.9.1

View Source on GitHub →How jQuery Works →

LightweightFootprint

Only 32kB minified andgzipped. Can also beincluded as an AMD

module

CSS3 CompliantSupports CSS3 selectorsto find elements as well as

in style propertymanipulation

Cross-BrowserIE, Firefox, Safari, Opera,

Chrome, and more

What is jQuery?What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTMLdocument traversal and manipulation, event handling, animation, and Ajax much simplerwith an easy-to-use API that works across a multitude of browsers. With a combination ofversatility and extensibility, jQuery has changed the way that millions of people writeJavaScript.

Who's Using jQueryWho's Using jQuery

ResourcesResources

jQuery Core APIjQuery Core APIDocumentationDocumentation

jQuery Learning CenterjQuery Learning Center

jQuery BlogjQuery Blog

Contribute to jQueryContribute to jQuery

About the jQuery FoundationAbout the jQuery Foundation

Browse or Submit jQueryBrowse or Submit jQueryBugsBugs

Dienstag, 9. April 13

Page 43: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Naming Your PluginNaming Your Plugin Publishing Your PluginPublishing Your Plugin Package ManifestPackage Manifest

Plugins Contribute Events Support jQuery Foundation

Search jQuery Plugin Registry

The jQuery Plugin Registry

Search jQuery Plugin Registry

Popular Tags

ui (215)

form (88)

animation (87)

input (75)

jquery (66)

image (51)

effect (50)

ajax (44)

html5 (42)

scroll (37)

New Plugins

Version 0.1.2

Released 8 hours ago

0WATCHERS

1FORKS

infinitus – jQuery InfiniteScroll PluginA super tiny jQuery plugin toimplement infinite scrolling.

Version 0.1.0

Released 9 hours ago

0WATCHERS

0FORKS

ETFormValidation (withoptional Bootstrap-Support!)Easy to use jQuery pluginfor validating forms.

Recent Updates

infinitus – jQueryInfinite Scroll Plugin(version 0.1.2)

ETFormValidation(with optionalBootstrap-Support!)(version 0.1.0)

jQuery Typewriter(version 0.0.4)

jQuery Typer(version 0.0.4)

jQRangeSliderDienstag, 9. April 13

Page 44: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

DemosDemos DownloadDownload API DocumentationAPI Documentation ThemesThemes DevelopmentDevelopment SupportSupport BlogBlog

AboutAbout

Plugins Contribute Events Support jQuery Foundation

Search jQuery UI

jQuery UI is a curated set of userinterface interactions, effects,widgets, and themes built on topof the jQuery JavaScript Library.Whether you're building highlyinteractive web applications oryou just need to add a date pickerto a form control, jQuery UI is theperfect choice.

Stable

v1.10.2jQuery 1.6+

Legacy

v1.9.2jQuery 1.6+

Download jQuery UI

1.10.2

Custom Download

QuickDownloads:

Developer Links

Source Code (GitHub)jQuery UI Git (WIPBuild)

Theme (WIP Build)Bug Tracker

Submit a New Bug

What's New in jQuery UI 1.10?jQuery UI 1.10 includes dozens of bug fixes and improvedaccessibility. In addition, the dialog and progressbar widgets haveundergone API redesigns, making them easier to use and creatingmore consistency across plugins.

Interested in the full details of what changed? Check out the 1.10

InteractionsInteractions

DraggableDraggable

DroppableDroppable

ResizableResizable

SelectableSelectable

SortableSortable

WidgetsWidgets

AccordionAccordion

AutocompleteAutocomplete

ButtonButton

DatepickerDatepicker

DialogDialog

MenuMenu

ProgressbarProgressbar

SliderSliderDienstag, 9. April 13

Page 45: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Home

HomeHome Intro to Unit TestingIntro to Unit Testing API DocumentationAPI Documentation CookbookCookbook PluginsPlugins

Plugins Contribute Events Support jQuery Foundation

Search QUnit

QUnit: A JavaScript Unit Testing framework.

What is QUnit?QUnit is a powerful, easy-to-use JavaScript unit testingframework. It's used by the jQuery, jQuery UI and jQueryMobile projects and is capable of testing any genericJavaScript code, including itself!

Getting StartedA minimal QUnit test setup:

1234567891011121314

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>QUnit Example</title> <link rel="stylesheet" href="/resources/qunit.css"</head><body> <div id="qunit"></div> <div id="qunit-fixture"></div> <script src="/resources/qunit.js"></script <script src="/resources/tests.js"></script</body></html>

DownloadQUnit is available from the jQuery CDN hosted by MediaTemple.

Current Release - v1.11.0

qunit-1.11.0.js

qunit-1.11.0.css

Changelog

via npm

To test the latest features and bug fixes to QUnit, a versionautomatically generated from the latest commit to theQUnit Git repository is also available for use.

qunit-git.js

qunit-git.css

Get InvolvedDienstag, 9. April 13

Page 46: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Quelle: http://vanilla-js.com/

Dienstag, 9. April 13

Page 47: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Quelle: http://vanilla-js.com/

Dienstag, 9. April 13

Page 48: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Quelle: http://vanilla-js.com/

Dienstag, 9. April 13

Page 49: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Dienstag, 9. April 13

Page 50: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.≣

Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If youuse jQuery, you already know how to use Zepto.

While 100% jQuery coverage is not a design goal, the APIs provided match their jQuery counterparts. Thegoal is to have a ~5-10k modular library that downloads and executes fast, with a familiar and versatileAPI, so you can concentrate on getting stuff done.

Zepto is open source software and is released under the developer and business-friendly MIT license.

TweetTweet 2,034

Zepto.js (1.0)

▹ Download▹ Target Platforms▹ Change Log▹ Acknowledgements

Core

▹ $()▹ $.camelCase▹ $.contains▹ $.each▹ $.extend▹ $.fn▹ $.grep▹ $.inArray▹ $.isArray▹ $.isFunction▹ $.isPlainObject▹ $.isWindow▹ $.map▹ $.parseJSON▹ $.trim▹ $.type▹ add▹ addClass▹ after▹ append▹ appendTo▹ attr▹ before▹ children▹ clone▹ closest▹ concat▹ contents▹ css▹ data▹ each▹ empty▹ eq▹ filter

Dienstag, 9. April 13

Page 51: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

MV*-Frameworks

M

C

V

Request

Response

Dienstag, 9. April 13

Page 52: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Dienstag, 9. April 13

Page 53: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

https://github.com/addyosmani/todomvc

Dienstag, 9. April 13

Page 54: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Backbone.js gives structure to web applications by providing models with key-valuebinding and custom events, collections with a rich API of enumerable functions, viewswith declarative event handling, and connects it all to your existing API over a RESTfulJSON interface.

The project is hosted on GitHub, and the annotated source code is available, as well asan online test suite, an example application, a list of tutorials and a long list of real-world projects that use Backbone. Backbone is available for use under the MITsoftware license.

You can report bugs and discuss features on the GitHub issues page, on Freenode IRCin the #documentcloud channel, post questions to the Google Group, add pages to thewiki or send tweets to @documentcloud.

Backbone is an open-source component of DocumentCloud.

Downloads & Dependencies (Right-click, and use "Save As")

Development Version (1.0.0) 58kb, Full source, tons of comments

Production Version (1.0.0) 6.3kb, Packed and gzipped(Source Map)

Edge Version (master) Unreleased, use at your own risk

Backbone.js (1.0.0)

» GitHub Repository» Annotated Source

Introduction

Upgrading

Events

– on– off– trigger– once– listenTo– stopListening– listenToOnce- Catalog of Built-in Events

Model

– extend– constructor / initialize– get– set– escape– has– unset– clear– id– idAttribute– cid– attributes– changed– defaults– toJSON– sync– fetch– save– destroy– Underscore Methods (6)– validate– validationError– isValid

Dienstag, 9. April 13

Page 55: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Quelle: https://github.com/addyosmani/todomvc/tree/gh-pages/architecture-examples/backbone

Backbone.js

Dienstag, 9. April 13

Page 56: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Write dramatically less code withEmber's Handlebars integrated

templates that updateautomatically when the underlying

data changes.Download Handlebars

Don't waste time making trivialchoices. Ember.js incorporates

common idioms so you can focuson what makes your app special,

not reinventing the wheel.

Ember.js is built for productivity.Designed with developer

ergonomics in mind, its friendlyAPIs help you get your job done—

fast.

MORE PRODUCTIVE OUT OF THE BOX.

DOWNLOAD EMBER 1.0.0-RC.1DOWNLOAD EMBER 1.0.0-RC.1

49k min+gzip | minified | Starter Kit

ABOUTABOUT GUIDESGUIDES APIAPI COMMUNITYCOMMUNITY BLOGBLOG

FORK US!FORK US!

Dienstag, 9. April 13

Page 57: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Ember.js

Quelle: https://github.com/addyosmani/todomvc/tree/gh-pages/architecture-examples/emberjs

Dienstag, 9. April 13

Page 58: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Dienstag, 9. April 13

Page 59: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

AngularJS

Quelle: https://github.com/addyosmani/todomvc/tree/gh-pages/architecture-examples/angularjs

Dienstag, 9. April 13

Page 60: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Meteor PREVIEW 0.5.9 FollowFollowHome Examples Documentation FAQ Blog Get Involved

A better wayto build apps.Meteor is an open-source platform forbuilding top-quality web apps in afraction of the time, whether you're anexpert developer or just getting started.

001 Pure JavaScript.Write your entire app in pure JavaScript. All the same APIs areavailable on the client and the server — including database APIs! —so the same code can easily run in either environment.

002 Live page updates.Just write your templates. They automatically update when data inthe database changes. No more boilerplate redraw code to write.Supports any templating language.

003 Clean, powerful data synchronization. Garry Tan

Also see the sequel

Watch the screencastWatch the screencast

This is the webframework I alwayswanted.

Dienstag, 9. April 13

Page 61: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Mobile Frameworks

• jQuery Mobile

• Sencha Touch

• Wink Toolkit

• Dojo Mobile

Dienstag, 9. April 13

Page 62: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

DocsDocs DownloadDownload PlatformsPlatforms ThemesThemes ResourcesResources ForumForum BlogBlog

jQuery UI Mobile Plugins Meetups Forum Events About Donate

Seriously cross-platform with HTML5

jQuery mobile framework takes the "write less, do more" mantra to thenext level: Instead of writing unique apps for each mobile device or OS,the jQuery mobile framework allows you to design a single highly-branded web site or application that will work on all popularsmartphone, tablet, and desktop platforms. Device support

jQuery Mobile: Touch-Optimized WebjQuery Mobile: Touch-Optimized WebFramework for Smartphones & TabletsFramework for Smartphones & Tablets

A unified, HTML5-based user interface system for allA unified, HTML5-based user interface system for allpopular mobile device platforms, built on the rock-solidpopular mobile device platforms, built on the rock-solidjQuery and jQuery UI foundation. Its lightweight code isjQuery and jQuery UI foundation. Its lightweight code isbuilt with progressive enhancement, and has a flexible,built with progressive enhancement, and has a flexible,easily themeable design.easily themeable design.

Latest stable version - 1.3.0Latest stable version - 1.3.0Legacy versions: Legacy versions: 1.2.11.2.1 - - 1.1.21.1.2 - - 1.0.11.0.1

JQUERY MOBILE 1.3.0 FINAL RELEASED!JQUERY MOBILE 1.3.0 FINAL RELEASED!

http://jquerymobile.com/Dienstag, 9. April 13

Page 63: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Home / Products

Sencha Touch Build Mobile Web Apps with HTML5 Buy SupportBuy Support DownloadDownload

HTML5 Mobile App DevelopmentBuild universal, mobile web apps for any device and platform.

With over 50 built-in components, statemanagement, and a built-in MVC system,Sencha Touch provides everything you need tocreate universal mobile web apps.

Watch Video

View Examples

What is Sencha Touch?Sencha Touch, a high-performance HTML5 mobile applicationframework, is the cornerstone of the Sencha HTML5 platform.Built for enabling world-class user experiences, Sencha Touch isthe only framework that enables developers to build fast andimpressive apps that work on iOS, Android, BlackBerry, KindleFire, and more.

Find out why more and more companies are investing in theirfuture by developing with HTML5. View Apps and Customers

What’s New?Sencha Touch 2.1 is the latest version of the market leadingmobile app framework. This release focuses on improvingperformance and adding features to make developers moreproductive. The updated list component now supports infinitescrolling, enabling apps to show an unlimited amount of data.

An all-new, ultra high performance version of Charts is included asa part of Touch (available as GPLv3 or as a part of SenchaComplete). Charts now adds retina display support, new financialcharts, and improvements to the Draw and Chart packages forexpanded flexibility. Finally, Sencha Touch 2.1 provides enhanced

Overview Features Demos Who’s Using? Licensing Resources

Products Support Training Company Blog Contact Store

Log in / Register Forum App Gallery Learn Documentation Cart 00

http://www.sencha.com/products/touch/Dienstag, 9. April 13

Page 64: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

"the mobile web differently"

for business...

build great mobile webapps

Wink currently supports iOS (iPod, iPhone, iPad), Android,

Wink Toolkit is a lightweight JavaScript toolkit which will

help you build great mobile web apps. It is designed and

developed to meet the specific constraints of the mobile

environment.

The toolkit's core offers all the basic functionalities a

mobile developer would need from touch event handling

to DOM manipulation objects or CSS transforms utilities.

Additionally, it offers a wide range of UI components to

help you improve the look and feel of a web app, or

simply to experiment with new user interactions.

... for fun ...

wink 1.4.3 released! discussionblogtutorialspluginsdownloadspreviewsdocumentationhome

http://www.winktoolkit.org/Dienstag, 9. April 13

Page 65: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

DownloadDownload Features DocumentationDocumentation CommunityCommunity BlogBlog

NanoNano DesktopDesktop Graphics & ChartingGraphics & Charting ToolsTools IntegrationsIntegrationsMobileMobile

Port your skill set, not your apps.Dojo Mobile is a world class HTML5 mobile JavaScript framework that enablesrapid development of mobile web applications with a native look and feel onmodern webkit-enabled mobile devices such as iPhone, iPod Touch, iPad, Androidand RIM smartphones and tablets.

Ready-for-BusinessReady-for-BusinessForms & DataForms & DataDojo includes a new set of componentsDojo includes a new set of componentsdesigned from scratch with mobile indesigned from scratch with mobile inmind, including forms and databinding.mind, including forms and databinding.Switches, Sliders, Lists, Actions etc.Switches, Sliders, Lists, Actions etc.

MVC - DataBinding & App ControllerMVC - DataBinding & App ControllerDojo Mobile is now integrated with theDojo Mobile is now integrated with thenew MVC and Application Controllernew MVC and Application Controllerpackages.packages.

DocumentationDocumentation

Mobile Gallery ShowcaseMobile Gallery Showcase

API DocsAPI Docs

Reference GuideReference Guide

http://dojotoolkit.org/features/mobile

Dienstag, 9. April 13

Page 66: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Tools

• Style Guides

• Code Format

• Code Analyse

• Packer

Dienstag, 9. April 13

Page 67: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Style Guides

Dienstag, 9. April 13

Page 68: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Google JavaScript Style GuideRevision 2.72

Aaron WhyteBob Jervis

Dan PupiusErik Arvidsson

Fritz SchneiderRobby Walker

Each style point has a summary for which additional information is available by toggling theaccompanying arrow button that looks this way: ▶ . You may toggle all summaries with thebig arrow button:

▶ Toggle all summaries

Table of Contents

JavaScriptLanguageRules

var Constants Semicolons Nested functions Function Declarations Within Blocks ExceptionsCustom exceptions Standards features Wrapper objects for primitive types Multi-level prototype hierarchiesMethod and property definitions delete Closures eval() with() {} this for-in loop Associative ArraysMultiline string literals Array and Object literals Modifying prototypes of builtin objectsInternet Explorer's Conditional Comments

JavaScriptStyleRules

Naming Custom toString() methods Deferred initialization Explicit scope Code formatting ParenthesesStrings Visibility (private and protected fields) JavaScript Types CommentsProviding Dependencies With goog.provide Compiling Tips and Tricks

Important Note

Displaying Hidden Details in this Guide

This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on yourleft. Click it now. You should see "Hooray" appear below.

Background

JavaScript is the main client-side scripting language used by many of Google's open-source projects. This style guide is a list of dos and don'tsfor JavaScript programs.

http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml

Dienstag, 9. April 13

Page 69: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

CLACLA

JS Style Guide

JS Style GuideJS Style Guide HTML Style GuideHTML Style Guide Markup ConventionsMarkup Conventions

Commits & Pull RequestsCommits & Pull Requests

Plugins Contribute Events Support jQuery Foundation

Search Contribute to jQuery

JavaScript Style Guide

1. LintingGrunt provides a JSHint task to verify some basic, practical soundness of the codebase. Theoptions are preset.

2. Spacing

Indentation with tabs.

No end of line whitespace.

No blank line whitespace.

Liberal spacing in code.

if / else / for / while / try always have braces and always go on multiple lines.

Bad Examples

1234567

// Badif(condition) doSomething(); // Badwhile(condition) iterating++; // Bad

Contributing to …Contributing to …

Bug TriageBug Triage

CodeCode

CommunityCommunity

DocumentationDocumentation

Open SourceOpen Source

SupportSupport

Web SitesWeb Sites

http://contribute.jquery.org/style-guide/js/Dienstag, 9. April 13

Page 70: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Code Conventions for the JavaScript Programming LanguageThis is a set of coding conventions and rules for use in JavaScript programming. It is inspired by the Sun document Code Conventionsfor the Java Programming Language. It is heavily modified of course because JavaScript is not Java.

The long-term value of software to an organization is in direct proportion to the quality of the codebase. Over its lifetime, a programwill be handled by many pairs of hands and eyes. If a program is able to clearly communicate its structure and characteristics, it is lesslikely that it will break when modified in the never-too-distant future.

Code conventions can help in reducing the brittleness of programs.

All of our JavaScript code is sent directly to the public. It should always be of publication quality.

Neatness counts.

JavaScript FilesJavaScript programs should be stored in and delivered as .js files.

JavaScript code should not be embedded in HTML files unless the code is specific to a single session. Code in HTML addssignificantly to pageweight with no opportunity for mitigation by caching and compression.

<script src=filename.js> tags should be placed as late in the body as possible. This reduces the effects of delays imposed by scriptloading on other page components. There is no need to use the language or type attributes. It is the server, not the script tag, thatdetermines the MIME type.

IndentationThe unit of indentation is four spaces. Use of tabs should be avoided because (as of this writing in the 21st Century) there still is not astandard for the placement of tabstops. The use of spaces can produce a larger filesize, but the size is not significant over localnetworks, and the difference is eliminated by minification.

Line LengthAvoid lines longer than 80 characters. When a statement will not fit on a single line, it may be necessary to break it. Place the breakafter an operator, ideally after a comma. A break after an operator decreases the likelihood that a copy-paste error will be masked by

http://javascript.crockford.com/code.htmlDienstag, 9. April 13

Page 71: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Code Formatting

Dienstag, 9. April 13

Page 72: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

indent with 4 spaces

Do not wrap lines

Braces with control statement

HTML <style>, <script> formatting:Add one indent level

Preserve empty lines? Detect packers and obfuscators? Keep array indentation? Break lines on chained methods? Space before conditional: "if(x)" / "if (x)" Unescape printable chars encoded as \xNN or \uNNNN?

Use a simple textarea for code input?

Beautify, unpack or deobfuscate JavaScript and HTML, make JSON/JSONP readable, etc.All of the source code is completely free and open, available on thegithub under MIT licence, and we have a command-line version, python library and anode package as well.

Beautify JavaScript or HTML (ctrl-enter)

Browser extensions and other uses:

A bookmarklet (drag it to your bookmarks) by Ichiro Hiroshi to see all scripts used on the page,

Chrome: jsbeautify-for-chrome by Tom Rix,Chrome: Pretty Beautiful JavaScript by Will McSweeney,Chrome: Quick source viewer by Tomi Mickelsson (github, blog),

Firefox: Javascript deminifier by Ben Murphy, to be used together with the firebug (github),

Safari: Safari extension by Sandro Padin,

// This is just a sample script. Paste your real code (javascript or HTML) here. if ('this_is'==/an_example/){of_beautifer();}else{var a=b?(c%d):e[f];}

http://jsbeautifier.org/Dienstag, 9. April 13

Page 73: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Code Analyse

Dienstag, 9. April 13

Page 74: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

http://www.jslint.com/Dienstag, 9. April 13

Page 75: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

About Docs Install Hack Blog

JSHint is a tool to detect errors and potential problems in JavaScriptcode and can be used to enforce coding conventions.

LintLint

// Your code goes here.1

http://www.jshint.com/Dienstag, 9. April 13

Page 76: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Packer

Dienstag, 9. April 13

Page 77: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

http://www.crockford.com/javascript/jsmin.htmlDienstag, 9. April 13

Page 78: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Home Products Conferences Showcase Live Groups

The Closure Tools project is an effort by Google engineers to open source the tools used in many of Google's sites and webapplications for use by the wider Web development community.

Web applications have evolved from simple HTML pages into rich, interactive applications that provide a great user experience.Today's web apps pose a challenge for developers, however: how do you create and maintain efficient JavaScript code thatdownloads quickly and works across different browsers?

The Closure tools help developers to build rich web applications with web development tools that are both powerful and efficient.The Closure tools include:

A JavaScript optimizerThe Closure Compiler compiles JavaScript into compact, high-performance code. The compiler removes dead code and rewritesand minimizes what's left so that it downloads and runs quickly. It also checks syntax, variable references, and types, and warnsabout common JavaScript pitfalls. These checks and optimizations help you write apps that are less buggy and easier to maintain.

A comprehensive JavaScript libraryThe Closure Library is a broad, well-tested, modular, and cross-browser JavaScript library. You can pull just what you need from alarge set of reusable UI widgets and controls, and from lower-level utilities for DOM manipulation, server communication, animation,data structures, unit testing, rich-text editing, and more.

The Closure Library is server-agnostic, and is intended for use with the Closure Compiler.

An easy templating system for both Java & JavaScript

Sign inClosure Tools X Search

Closure Tools 1.3k

Closure Tools

Compiler▸

Library▸

Templates▸

Linter▸

FAQ

Blog

https://developers.google.com/closure/Dienstag, 9. April 13

Page 79: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

YUI Compressor

According to Yahoo!'s Exceptional Performance Team, 40% to 60% of Yahoo!'s users have an empty cache experience andabout 20% of all page views are done with an empty cache (see this article by Tenni Theurer on the YUIBlog for moreinformation on browser cache usage). This fact outlines the importance of keeping web pages as lightweight as possible.Improving the engineering design of a page or a web application usually yields the biggest savings and that should always be aprimary strategy. With the right design in place, there are many secondary strategies for improving performance such asminification of the code, HTTP compression, using CSS sprites, etc.

In terms of code minification, the most widely used tools to minify JavaScript code are Douglas Crockford's JSMIN, the Dojocompressor and Dean Edwards' Packer. Each of these tools, however, has drawbacks. JSMIN, for example, does not yieldoptimal savings (due to its simple algorithm, it must leave many line feed characters in the code in order not to introduce anynew bugs).

The goal of JavaScript and CSS minification is always to preserve the operational qualities of the code while reducing itsoverall byte footprint (both in raw terms and after gzipping, as most JavaScript and CSS served from production web servers isgzipped as part of the HTTP protocol). The YUI Compressor is JavaScript minifier designed to be 100% safe and yield a highercompression ratio than most other tools. Tests on the YUI Library have shown savings of over 20% compared to JSMin(becoming 10% after HTTP compression). The YUI Compressor is also able to compress CSS files by using a port of IsaacSchlueter's regular-expression-based CSS minifier.

Quick Links

Documentation: Detailed description of the YUI Compressor and how to use it.Release Notes: Detailed change log for the YUI Compressor.CSS minification: Description of the CSS minification performed by the compressor.License: All code specific to YUI Compressor is issued under a BSD license. YUI Compressor extends and implementscode from Mozilla's Rhino project. Rhino is issued under the Mozilla Public License (MPL), and MPL applies to theRhino source and binaries that are distributed with YUI Compressor, including Rhino modifications made by YUICompressor. YUI Compressor also makes use of and distributes a binary of JArgs; the JArgs BSD license applies to thisbinary.Download: Download the YUI Compressor.

Video: Yahoo engineer Julien Lecomte introduces the YUI Compressor

Missing Plug-in

Table of Contents

Quick LinksVideo: Yahoo engineer JulienLecomte introduces the YUICompressorHow does the YUI Compressor work?Using the YUI Compressor from thecommand line

Additional notesSupport & CommunityFiling Bugs & Feature Requests

More Reading about JavaScript/CSSminification and the YUI Compressor

http://yui.github.com/yuicompressor/Dienstag, 9. April 13

Page 80: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

JavaScript-Alternativen

Dienstag, 9. April 13

Page 81: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

CoffeeScript is a little language that compiles into JavaScript. Underneath that awkward Java-esque patina, JavaScript has always had a gorgeous heart. CoffeeScript is an attempt to exposethe good parts of JavaScript in a simple way.

The golden rule of CoffeeScript is: "It's just JavaScript". The code compiles one-to-one into theequivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript libraryseamlessly from CoffeeScript (and vice-versa). The compiled output is readable and pretty-printed,passes through JavaScript Lint without warnings, will work in every JavaScript runtime, and tendsto run as fast or faster than the equivalent handwritten JavaScript.

Latest Version: 1.6.2

sudo npm install -g coffee-script

Overview

CoffeeScript on the left, compiled JavaScript output on the right.

# Assignment:number = 42opposite = true

# Conditions:number = -42 if opposite

# Functions:square = (x) -> x * x

# Arrays:list = [1, 2, 3, 4, 5]

# Objects:math = root: Math.sqrt

var cubes, list, math, num, number, opposite, race, square, __slice = [].slice;

number = 42;

opposite = true;

if (opposite) { number = -42;}

square = function(x) { return x * x;};

list = [1, 2, 3, 4, 5];

TABLE OF CONTENTS TRY COFFEESCRIPT ANNOTATED SOURCE

Dienstag, 9. April 13

Page 82: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t. Dart brings structure to web app engineering with

a new language, libraries, and tools. Learn Dart

with our tutorials!

Download now Download now

Circle +Dart Circle +Dart

Subscribe Subscribe Follow Follow @dart_lang@dart_lang

FAMILIAR

Dart is a class-based, object-oriented

language with lexical scoping, closures, and

optional static typing. Dart helps you build

structured modern web apps and is easy to

learn for a wide range of developers. Learn

more

import 'dart:html';

PRODUCTIVE

Dart Editor and the SDK provide an

integrated development and debugging

experience. The editor supports refactoring,

breakpoints, code completion, code

navigation, and more. The SDK contains the

stand-alone virtual machine, a package

manager, and Chromium with an embedded

Dart VM. Learn more

UBIQUITOUS

Dart can be compiled to JavaScript, so you

can use it for web apps in all modern

desktop and mobile browsers. Our

JavaScript compiler generates minimal code

thanks to tree-shaking. Dart apps can also

run on the server, in a stand-alone Dart VM.

NewsNews TweetTweetSearch Docs Docs Tools Tools Resources Resources Development Development

Dienstag, 9. April 13

Page 83: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Dart brings structure to web app engineering with

a new language, libraries, and tools. Learn Dart

with our tutorials!

Download now Download now

Circle +Dart Circle +Dart

Subscribe Subscribe Follow Follow @dart_lang@dart_lang

FAMILIAR

Dart is a class-based, object-oriented

language with lexical scoping, closures, and

optional static typing. Dart helps you build

structured modern web apps and is easy to

learn for a wide range of developers. Learn

more

import 'dart:html';

main() {

var msg = query('#msg');

var btn = new ButtonElement();

btn.text = 'Click me!';

btn.onClick.listen((e) => msg.text =

'Dart!');

document.body.children.add(btn);

}

PRODUCTIVE

Dart Editor and the SDK provide an

integrated development and debugging

experience. The editor supports refactoring,

breakpoints, code completion, code

navigation, and more. The SDK contains the

stand-alone virtual machine, a package

manager, and Chromium with an embedded

Dart VM. Learn more

UBIQUITOUS

Dart can be compiled to JavaScript, so you

can use it for web apps in all modern

desktop and mobile browsers. Our

JavaScript compiler generates minimal code

thanks to tree-shaking. Dart apps can also

run on the server, in a stand-alone Dart VM.

START

Follow the Dart tutorials

Get the editor and SDK

Read the technical overview

Tour the samples

Watch an intro video

LEARN

Take the language tour

Take the library tour

See equivalents to JavaScript

Read a free eBook

Practice a codelab

PARTICIPATE

Send feedback to the mailing list

Follow on G+ and Twitter

Get answers at Stack Overflow

File feature requests and bugs

Submit a patch

Classes Lexical closures Libraries Optional static types Named parameters Isolates More

import 'dart:math';

class Point {

final num x, y;

Point(this.x, this.y);

Point.zero() : x = 0, y = 0; // Named constructor

// with an initializer list.

num distanceTo(Point other) {

var dx = x - other.x;

var dy = y - other.y;

return sqrt(dx * dx + dy * dy);

}

}

Classes

Dart supports classes as a fundamental structural building block for

libraries and apps. Classes define the structure of an object, and

you can extend them to create more specialized definitions. New

features such as implicit interfaces and named constructors make it

easier to say more while typing less. Learn more about classes in

Dart.

Dart addresses issues with traditional web development languages while remaining easy to learn. Thanks to optional static types, Dart

scales from simple scripts to large apps. Learn more with the language tour, or read the language spec.

Code completion

Explore the methods and fields available to the object you're

working on.

Refactoring

Change your code structure without changing the behavior.

Outline view

List the classes, methods, and functions in a simple tree

display.

Debugger

Set breakpoints, inspect variables, and step over, into, and out

of code.

Static analysis

See warnings when inconsistencies and potential problems are

detected.

Find callers

Quickly find all callers for a method, and easily jump to those

locations.

Dart Docs

Technical Overview

Dart Book

Language Tour

Language Spec

Library Tour

API Reference

Articles and Tutorials

FAQ

Dart Tools

Editor

Chromium + Dart VM

SDK

Pub Package Manager

Dart2js

Dart VM

Dart Resources

API Reference

Code Samples

Translations from JavaScript

Presentations

Dart Tips Videos

Books

Dartisans Videos and Podcast

Community

Performance

Dart Development

Bugs and Feature Requests

Mailing List

Source Code

Submitting Patches

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0

License, and code samples are licensed under the BSD License.

Terms of Service — Privacy Policy

OVERVIEW

A STRUCTURED LANGUAGE THAT'S FLEXIBLE AND FAMILIAR

PRODUCTIVE AND INTEGRATED TOOLS FOR FASTER DEVELOPMENT

Gone are the days of building web apps with plain text editors. Dart Editor, its static analysis engine, and direct integration with

Chromium+DartVM helps you develop, debug, and maintain your apps.

Dart also ships a stand-alone Dart SDK that contains the dart2js compiler, the Dart VM for running command-line apps, and the pub

package manager.

GET STARTED NOW

Follow the Dart tutorials Follow the Dart tutorials Download Dart Editor Download Dart Editor Join the mailing list Join the mailing list

NewsNews TweetTweetSearch Docs Docs Tools Tools Resources Resources Development Development

Dienstag, 9. April 13

Page 84: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Dart brings structure to web app engineering with

a new language, libraries, and tools. Learn Dart

with our tutorials!

Download now Download now

Circle +Dart Circle +Dart

Subscribe Subscribe Follow Follow @dart_lang@dart_lang

FAMILIAR

Dart is a class-based, object-oriented

language with lexical scoping, closures, and

optional static typing. Dart helps you build

structured modern web apps and is easy to

learn for a wide range of developers. Learn

more

import 'dart:html';

main() {

var msg = query('#msg');

var btn = new ButtonElement();

btn.text = 'Click me!';

btn.onClick.listen((e) => msg.text =

'Dart!');

document.body.children.add(btn);

}

PRODUCTIVE

Dart Editor and the SDK provide an

integrated development and debugging

experience. The editor supports refactoring,

breakpoints, code completion, code

navigation, and more. The SDK contains the

stand-alone virtual machine, a package

manager, and Chromium with an embedded

Dart VM. Learn more

UBIQUITOUS

Dart can be compiled to JavaScript, so you

can use it for web apps in all modern

desktop and mobile browsers. Our

JavaScript compiler generates minimal code

thanks to tree-shaking. Dart apps can also

run on the server, in a stand-alone Dart VM.

START

Follow the Dart tutorials

Get the editor and SDK

Read the technical overview

Tour the samples

Watch an intro video

LEARN

Take the language tour

Take the library tour

See equivalents to JavaScript

Read a free eBook

Practice a codelab

PARTICIPATE

Send feedback to the mailing list

Follow on G+ and Twitter

Get answers at Stack Overflow

File feature requests and bugs

Submit a patch

Classes Lexical closures Libraries Optional static types Named parameters Isolates More

import 'dart:math';

class Point {

final num x, y;

Point(this.x, this.y);

Point.zero() : x = 0, y = 0; // Named constructor

// with an initializer list.

num distanceTo(Point other) {

var dx = x - other.x;

var dy = y - other.y;

return sqrt(dx * dx + dy * dy);

}

}

Classes

Dart supports classes as a fundamental structural building block for

libraries and apps. Classes define the structure of an object, and

you can extend them to create more specialized definitions. New

features such as implicit interfaces and named constructors make it

easier to say more while typing less. Learn more about classes in

Dart.

Dart addresses issues with traditional web development languages while remaining easy to learn. Thanks to optional static types, Dart

scales from simple scripts to large apps. Learn more with the language tour, or read the language spec.

Code completion

Explore the methods and fields available to the object you're

working on.

Refactoring

Change your code structure without changing the behavior.

Outline view

List the classes, methods, and functions in a simple tree

display.

Debugger

Set breakpoints, inspect variables, and step over, into, and out

of code.

Static analysis

See warnings when inconsistencies and potential problems are

detected.

Find callers

Quickly find all callers for a method, and easily jump to those

locations.

Dart Docs

Technical Overview

Dart Book

Language Tour

Language Spec

Library Tour

API Reference

Articles and Tutorials

FAQ

Dart Tools

Editor

Chromium + Dart VM

SDK

Pub Package Manager

Dart2js

Dart VM

Dart Resources

API Reference

Code Samples

Translations from JavaScript

Presentations

Dart Tips Videos

Books

Dartisans Videos and Podcast

Community

Performance

Dart Development

Bugs and Feature Requests

Mailing List

Source Code

Submitting Patches

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0

License, and code samples are licensed under the BSD License.

Terms of Service — Privacy Policy

OVERVIEW

A STRUCTURED LANGUAGE THAT'S FLEXIBLE AND FAMILIAR

PRODUCTIVE AND INTEGRATED TOOLS FOR FASTER DEVELOPMENT

Gone are the days of building web apps with plain text editors. Dart Editor, its static analysis engine, and direct integration with

Chromium+DartVM helps you develop, debug, and maintain your apps.

Dart also ships a stand-alone Dart SDK that contains the dart2js compiler, the Dart VM for running command-line apps, and the pub

package manager.

GET STARTED NOW

Follow the Dart tutorials Follow the Dart tutorials Download Dart Editor Download Dart Editor Join the mailing list Join the mailing list

NewsNews TweetTweetSearch Docs Docs Tools Tools Resources Resources Development Development

Dienstag, 9. April 13

Page 85: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Get TypeScript Now

TypeScript is a language for application-scale JavaScript development.TypeScript is a typed superset of JavaScript that compiles to plainJavaScript.Any browser. Any host. Any OS. Open Source.

ScalableTypeScript offers classes, modules, and interfaces to help you build robust components.

These features are available at development time for high-confidence application development,but are compiled into simple JavaScript.

TypeScript types let you define interfaces between software components and to gain insight intothe behavior of existing JavaScript libraries.

learn play get it run it join in

Dienstag, 9. April 13

Page 86: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Dienstag, 9. April 13

Page 87: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Dienstag, 9. April 13

Page 88: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.Login »

HOMEHOME DOWNLOAD DOCUMENTATION COMMUNITY FORUM IRC API

One language , eve rywhere .

index

IF YOU COULD ONLY LEARN ONE PROGRAMMING LANGUAGE, HAXE WOULD BE IT.IT'S UNIVERSAL. IT'S POWERFUL. IT'S EASY-TO-USE.http://haxe.org/

Dienstag, 9. April 13

Page 89: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.Licensing | Forum | Blog | Docs | Roadmap

The data-drivenThe data-drivenJavaScript development stackJavaScript development stack

for business appsfor business apps

What's new in Wakanda 4?What's new in Wakanda 4?(Released 2013-03-19)

Play with 1,000,000 database records from your browser

Manipulate data with pure server-side JavaScript codeNo SQL, no ORM - on a live Wakanda application

See for yourself how fast and easy it is to use Wakanda

Run on Wakanda

Home Overview Features Videos Learning Center Downloads

Dienstag, 9. April 13

Page 90: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Ausblick und Fazit

Dienstag, 9. April 13

Page 91: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

C/C++

Python

Java

Perl

ActionScript

Tamarin

ActionMonkey

JavaScript:: Spidermonkey

JScriptJScript

.NET Framework

Engine

GWT

Hook/Convertor

Ruby

python- spidermonkey

Internet Explorer

Applications

futhark

Konqueror

KJS

JScript.NETQtScript

iCab

InScript

iCabDMDScript

DMD

ExtendScript

Opera

Flash on C++

Implementation Language

AIR

Android

Safari

Flash

PDF

Tomcat

mod_gcj

mod_perl

Helma

mod_jk

IronRubyNarcissus

SpidermonkeyCamino

linear_b

RubyJS

Haskell Haxe (OCaml)

JSCore

CouchDB

HD DVD

Scheme2JS

Phobos

JavaScript

C/C++

JavaScript

Python

Java

Perl

ActionScript

Tamarin

ActionMonkey

JavaScript:: Spidermonkey

JScriptJScript

.NET Framework

Engine

Language

GWT

Hook/Convertor

Ruby

python- spidermonkey

Internet Explorer

Applications

futhark

Konqueror

KJS

JScript.NET

Qt Toolkit

QtScript

iCab

InScript

iCabDMDScript

DMD

ruby-spidermonkey

ExtendScript

Opera

Microsoft

Apple

Adobe

Mozilla

OperaCompany

Google

The World of ECMAScript

Flash on C++

By John Resig (ejohn.org)Updated November 15, 2007Released under the GPL v2

Implementation Language

AIR

Android

Safari

Photoshop

Flash

PDF

Tomcat

Apache

mod_gcjmod_js

mod_perl

Helma

mod_jk

Silverlight

Firefox

IronRuby

IronPython

Narcissus

SpidermonkeyCamino

Flex

linear_b

RubyJS

ParenScript (Lisp)

Haskell Haxe (OCaml) Scheme

YHC/JavaScript

JSCore

Rhino

CouchDB

HD DVD

Scheme2JS

Phobos

JavaScript

Dienstag, 9. April 13

Page 92: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Dienstag, 9. April 13

Page 93: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

http://heise.de/-1828268Dienstag, 9. April 13

Page 94: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

http://www.w3.org/standards/techs/js

Das W3C arbeitet zur Zeit an rund 75 JavaScript-API.

Dienstag, 9. April 13

Page 95: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

„JavaScript is the virtual machine of the

Internet.“

Quelle: „The Future of JavaScript I mean ECMAScript - Douglas Crockford“

Dienstag, 9. April 13

Page 96: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Das war‘s:

Dienstag, 9. April 13

Page 97: JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Vielen Dank!Peter Hecker

E-Mail: [email protected]

Dienstag, 9. April 13