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

AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Herzlich Willkommen
bei der GFU!
Treffpunkt Semicolon, 26.03.2013
Dienstag, 9. April 13

JavaScript nicht nur für
Programmierer
„Einblicke in die weltweit am meisten
missverstandene Programmiersprache“

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

JavaScript:
The World's Most Misunderstood Programming Language
Douglas Crockford
www.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's
popularity 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. How
can this be a secret? Why is this language so misunderstood?
The Name
The Java- prefix suggests that JavaScript is somehow related to Java, that it is a subset or less capable version of Java. It seems that
the name was intentionally selected to create confusion, and from confusion comes misunderstanding. JavaScript is not interpreted
Java. 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 is
better 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 called
LiveScript, 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.
Quelle: www.crockford.com

Douglas Crockford
• Yahoo JavaScript
Architekt
• Erﬁnder des JSON-
Standard
• Entwickler der Tools
JSLint und JSMin

Ein Blick zurück -
Wie alles begann

Der Unternehmer
• Marc Andreessen
ist Mit-Entwickler des
graﬁschen Browsers
Mosaic und gründet
04/1994 mit anderen die
Firma Netscape.

Der Erﬁnder
• 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

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

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)

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-neutral
programming 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 programming
language.
2. To identify, develop and maintain standards for libraries that extend the
capabilities of ECMAScript.
3. To develop test suites that may be used to verify correct implementation of
these standards.
4. To contribute selected standards to ISO/IEC JTC 1.
5. To evaluate and consider proposals for complementary or additional
technologies.
Chairman
Mr. 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 - ES3
2009 - ES5
2011 - ES5.1
20xx - „Harmony“

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.

Der aktuelle Stand -
JavaScript heute

„ECMAScript is the preferred
programming language
for the World Wide Web.“
Quelle: ECMAScript - Engineering Excellence For 15Years, 1996 - 2011 (John Neumann)

„ECMAScript is the language
that people use without
bothering to learn it ﬁrst.“
Quelle: „The Future of JavaScript I mean ECMAScript - Douglas Crockford“

Vorurteile
• „JavaScript ist keine Sprache“
• „JavaScript ist voller Fehler“
• „JavaScript ist nicht schnell genug“
• „JavaScript-Programmierung im Browser ist
einfach schrecklich“

Einﬂüsse
• Self
• Prototypen
• Dynamische Objekte
• Java
• Syntax
• Konventionen
• Scheme
• Lambda
• Lose Typisierung
• Perl
• Reguläre Ausdrücke

JS-Konzepte
• Objektorientiert
• Keine Klassen
• Prototypen
• Funktional

JS-Probleme
• Irreführender Name
• Grundsätzliche Designfehler
• Schlechte Implementierungen
• Schlechte Bücher

Your Account
Search
Popular Topics: Programming JavaScript iPhone Android Python Head First HTML5 & CSS Microsoft Java Perl Linux Data
Print
Subscribe to Newsletters
ShareThis
JavaScript > Excerpts >
This excerpt is from JavaScript: The Good Parts . This authoritative book scrapes away these bad features to
reveal a subset of JavaScript that's more reliable, readable, and maintainable than the language as a whole-a
subset you can use to create truly extensible and efficient code.
Bad Parts: Appendix B - JavaScript: The Good Parts
by 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 would
expect. If the two operands are of the same type and have the same value, then === produces true and !== produces false. The evil
twins 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' // false
0 == '' // true
0 == '0' // true
false == 'false' // false
false == '0' // true
false == undefined // false
false == null // false
null == undefined // true
' trn ' == 0 // true
The lack of transitivity is alarming. My advice is to never use the evil twins. Instead, always use === and !==. All of the comparisons
just shown produce false with the === operator.
with Statement
JavaScript 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 program
to 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 is
impossible to have confidence that it will correctly do what you want.
Shopping Cart
Home Shop News & Commentary Answers Safari Books Online Conferences School of Technology Community
Recommended for You
Python Cookbook
Ebook: $39.99
Interactive Data
Visualization for the Web
Ebook: $23.99
HTML5 and JavaScript
Web Apps
Print: $24.99
Ebook: $19.99
Simply by being in the language, the with statement significantly slows down JavaScript processors because it frustrates the lexical
binding of variable names. It was well intentioned, but the language would be better if it didn't have it.
eval
The eval function passes a string to the JavaScript compiler and executes the result. It is the single most misused feature of
JavaScript. It is most commonly used by people who have an incomplete understanding of the language. For example, if you know
about 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 a
trivial assignment statement. It also frustrates JSLint (see Appendix�C, JSLint), so the tool's ability to detect problems is significantly
reduced.
The eval function also compromises the security of your application because it grants too much authority to the eval'd text. And it
compromises 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 given
string arguments, setTimeout and setInterval act as eval. The string argument form also should be avoided.
continue Statement
The continue statement jumps to the top of the loop. I have never seen a piece of code that was not improved by refactoring it to
remove the continue statement.
switch Fall Through
The switch statement was modeled after the FORTRAN IV computed go to statement. Each case falls through into the next case
unless 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 out
that 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 the
benefit 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 had
a case that was falling through. In that moment, I achieved enlightenment. I no longer use intentional fall throughs. That discipline
makes 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 worst
features are the attractive nuisances, the features that are both useful and dangerous.
Block-less Statements
An if or while or do or for statement can take a block or a single statement. The single statement form is another attractive
nuisance. It offers the advantage of saving two characters, a dubious advantage. It obscures the program's structure so that
subsequent 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 blocks
makes 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 it
possible 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 terrible
security 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 of
discipline, I don't use them any more. I think that as a result, my coding style has become cleaner.
Bitwise Operators
discipline, I don't use them any more. I think that as a result, my coding st
Bitwise Operators
JavaScript 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 in
numbers. So, the bitwise operators convert their number operands into inte
most languages, these operators are very close to the hardware and very fa
very slow. JavaScript is rarely used for doing bit manipulation.
As a result, in JavaScript programs, it is more likely that & is a mistyped &&
some of the language's redundancy, making it easier for bugs to hide.
The function Statement Versus the function
JavaScript has a function statement as well as a function expression. Thi
function 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
To use the language well, it is important to understand that functions are va
function statements are subject to hoisting. This means that regardless of
scope in which it is defined. This relaxes the requirement that functions sho
sloppiness. It also prohibits the use of function statements in if statemen
statements in if statements, but they vary in how that should be interprete
The first thing in a statement cannot be a function expression because the
with the word function is a function statement. The workaround is to wra
(function ( ) {
var hidden_variable;
// This function can have some impact on
// the environment, but introduces no new
// global variables.
})( );
Typed Wrappers
JavaScript has a set of typed wrappers. For example:
new Boolean(false)
produces an object that has a valueOf method that returns the wrapped va
occasionally confusing. Don't use new Boolean or new Number or new Strin
Also avoid new Object and new Array. Use {} and [] instead.
new
JavaScript's new operator creates a new object that inherits from the operan
binding the new object to this. This gives the operand (which had better b
object before it is returned to the requestor.
If you forget to use the new operator, you instead get an ordinary function c
new object. That means that your function will be clobbering global variable
very bad thing. There is no compile-time warning. There is no runtime warn
By convention, functions that are intended to be used with new should be gi
initial capital letters should be used only with constructor functions that tak
can help spot expensive mistakes that the language itself is keen to overloo
An even better coping strategy is to not use new at all.
void
In many languages, void is a type that has no values. In JavaScript, void i
undefined. This is not useful, and it is very confusing. Avoid void.
If you enjoyed this excerpt, buy a copy of JavaScript: The Good Parts .
Sign up today to receive special discounts,
DON‘T USE THE BAD PARTS!
„By simply avoiding these features, you make JavaScript a
better language, and yourself a better programmer.“

Browser und
JavaScript-Engines

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!

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 system
framework version of the engine that's used by Safari, Dashboard, Mail, and many other OS X
applications. WebKit's HTML and JavaScript code began as a branch of the KHTML and KJS libraries from
KDE.
Getting involved
There are many ways to get involved. You can:
download the latest nightly build
install developer tools and then check out and build the source
code
Once you have either of these, you can help by:
reporting bugs you find in the software
providing reductions to bugs
submitting patches for review
More info
More information about WebKit can be found on its wiki. You can help here too, by adding information
that can help others learn about WebKit. If you have more questions, contact us.
Projects
There are many exciting (new) projects that you can contribute to:
help us improve Website compatibility
write documentation
SVG
MathML
CSS
DOM
The WebKit Open Source Project
Home
Surfin’ Safari Blog
Planet WebKit
Project Goals
Keeping in Touch
Trac
Contributors Meeting
Working with the Code
Installing Developer Tools
Getting the Code
Building WebKit
Running WebKit
Debugging WebKit
Contributing Code
Commit and Review Policy
Adding Features
Security Policy
Documentation
Wiki
Projects
Code Style Guidelines
Technical Articles
Web Inspector
Web Developer Resources
Demos
Testing
Regression Testing
Leak Hunting
Writing New Tests
Getting a Crash Log
Bugs
Reporting Bugs
http://www.webkit.org/

Start Produkte Konferenzen Schaufenster Live Gruppen
What is V8?
V8 is Google's open source high-performance JavaScript engine, written in C++ and used in
Google Chrome, the open source browser from Google. It implements ECMAScript as specified
in ECMA-262, 3rd edition, and runs on Windows XP and Vista, Mac OS X 10.5+, and Linux
systems that use IA-32, ARM or MIPS processors. V8 can run standalone, or can be embedded
into any C++ application.
How do I start?
Missing Plug
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/

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 co
applications. 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/

https://github.com/kripken/emscripten/wiki

JavaScript nicht
nur im Browser

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 network
applications. 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

HOME
DOWNLOAD
ABOUT
NPM REGISTRY
DOCS
BLOG
COMMUNITY
LOGOS
JOBS
@nodejs
Node's goal is to provide an easy way to build
scalable 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 Worldn');
}).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 are
employed. Thread-based networking is relatively inefficient and very difficult to use.
See: this and this. Node will show much better memory efficiency under high-loads
than systems which allocate 2mb thread stacks for each connection. Furthermore, users
of Node are free from worries of dead-locking the process—there are no locks. Almost

Architektur
• Single Threaded
• Event Loop
• Non-Blocking I/O
Quelle: http://blog.zenika.com/index.php?post/2011/04/10/NodeJS

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

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!

Search Packages
NODE.JS HOME
DOWNLOAD
ABOUT
NPM REGISTRY
DOCS
BLOG
COMMUNITY
LOGOS
JOBS
Node Packaged Modules
Total Packages: 25 995
1 430 247 downloads in the last day
8 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-closurecompiler
9m slimple
14m mongojs
16m grunt-csso
18m slidify
21m bianca
34m d8
46m symfio-contrib-assets
49m se7ensky-restify-
resource
54m wintersmith-browserify
More...
Most Depended Upon
2545 underscore
1708 async
1568 request
1221 coffee-script
1206 express
1184 optimist
1024 commander
843 colors
599 uglify-js
544 mkdirp
More...
Create Account | Login

SOURCE CODE DOCUMENTATION API EXAMPLES FAQ
Full web stackFull web stack
No browser requiredNo browser required
PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and
native support for various web standards: DOM handling, CSS selector, JSON, Canvas,
and SVG.
DownloadDownload 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 TESTING
Run functional tests with
frameworks such as Jasmine,
QUnit, Mocha, Capybara,
WebDriver, and many others.
Learn more
SCREEN CAPTURE
Programmatically capture web
contents, including SVG and
Canvas. Create web site
screenshots with thumbnail
preview. Learn more
PAGE AUTOMATION
Access and manipulate webpages
with the standard DOM API, or
with usual libraries like jQuery.
Learn more
NETWORK MONITORING
Monitor page loading and export
as standard HAR files. Automate
performance analysis using YSlow
and 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

Apache CouchDB™ is a database
that uses JSON for documents,
JavaScript for MapReduce queries,
and regular HTTP for an API
DOWNLOAD
Version 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

JavaScript-Bibliotheken, -
Frameworks und -Tools

• DOM
• Ajax
• Utility
• UI/UX
• Graphics
• Templating
• Application
JS-Aufgaben

AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt. 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 Catalog
Did 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

market report of
specific JavaScript
libraries.
Learn more
Markup Languages
Character Encodings
Image File Formats
Site Elements
Certificate Authorities
Social Widgets
Web Servers
Operating Systems
Content Delivery
Traffic Analysis Tools
Advertising Networks
Top Level Domains
Content Languages
Trends
Usage Trend
Market Share Trend
Market
Top Site Usage
Market Position
Breakdown
Ranking
ple Technology Usage
Content Management
Server-side Languages
Client-side Languages
Markup Languages
Character Encodings
Image File Formats
Site Elements
Certificate Authorities
Social Widgets
Web Servers
Operating Systems
Content Delivery
Traffic Analysis Tools
Advertising Networks
Top Level Domains
the methodologies used in the surveys. Our reports are updated
daily.
How to read the diagram:
38.1% of the websites use none of the JavaScript libraries that we
monitor.
JQuery is used by 56.4% of all the websites, that is a JavaScript library market share of 91.1%.
None 38.1%
JQuery
56.4%
91.1%
MooTools
4.8%
7.7%
Prototype
3.5%
5.7%
ASP.NET Ajax
3.2%
5.2%
Script.aculo.us
2.7%
4.3%
YUI Library
1.5%
2.5%
Spry
0.6%
1.0%
Dojo
0.2%
0.3%
Ext JS
0.1%
0.1%
Knockout
less than 0.1%
0.1%
W3Techs.com, 24 March 2013
absolute usage percentage market share
Percentages of websites using various JavaScript libraries
Note: a website may use more than one JavaScript library
The following JavaScript libraries have a market share of less than 0.1%
DHTMLX
AngularJS
MochiKit
DOMAssistant
UIZE
applications based on
Advertise H
Latest related pos
Web technology fa
29 January 2013
Usage of the Knockou
library was growing b
last 10 months.
» more
Visual PHP App Build
www.lianja.com
Build Desktop,Web and
Apps. Free Download
Windows/OS X/Linux
Urlaub Westaustralie
www.WesternAustralia.
Ein perfekter Australien
Touren, Karten, Videos
Pure CSS3 Dropdown
CSS3Menu.com
Beautiful CSS3 Drop Do
Menus and Buttons! No
Javascript. No Images.
Quelle: http://w3techs.com/technologies/overview/javascript_library/all

DownloadDownload API DocumentationAPI Documentation BlogBlog PluginsPlugins Browser SupportBrowser Support
Plugins Contribute Events Support jQuery Foundation
Search jQuery 
Download
jQuery
v1.9.1
View Source on GitHub →
How jQuery Works →
Lightweight
Footprint
Only 32kB minified and
gzipped. Can also be
included as an AMD
module
CSS3 Compliant
Supports CSS3 selectors
to find elements as well as
in style property
manipulation
Cross-Browser
IE, 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 HTML
document traversal and manipulation, event handling, animation, and Ajax much simpler
with an easy-to-use API that works across a multitude of browsers. With a combination of
versatility and extensibility, jQuery has changed the way that millions of people write
JavaScript.
Who's Using jQueryWho's Using jQuery
ResourcesResources
jQuery Core APIjQuery Core API
DocumentationDocumentation
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 jQuery
BugsBugs

Naming Your PluginNaming Your Plugin Publishing Your PluginPublishing Your Plugin Package ManifestPackage Manifest
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
0
WATCHERS
1
FORKS
infinitus – jQuery Infinite
Scroll Plugin
A super tiny jQuery plugin to
implement infinite scrolling.
Version 0.1.0
Released 9 hours ago
0
WATCHERS
0
FORKS
ETFormValidation (with
optional Bootstrap-Support!)
Easy to use jQuery plugin
for validating forms.
 Recent Updates
infinitus – jQuery
Infinite Scroll Plugin
(version 0.1.2)
ETFormValidation
(with optional
Bootstrap-Support!)
(version 0.1.0)
jQuery Typewriter
(version 0.0.4)
jQuery Typer
(version 0.0.4)
jQRangeSlider

DemosDemos DownloadDownload API DocumentationAPI Documentation ThemesThemes DevelopmentDevelopment SupportSupport BlogBlog
AboutAbout
Search jQuery UI 
jQuery UI is a curated set of user
interface interactions, effects,
widgets, and themes built on top
of the jQuery JavaScript Library.
Whether you're building highly
interactive web applications or
you just need to add a date picker
to a form control, jQuery UI is the
perfect choice.
Stable
v1.10.2
jQuery 1.6+
Legacy
v1.9.2
jQuery 1.6+
Download jQuery UI
1.10.2
Custom Download
Quick
Downloads:
Developer Links
Source Code (GitHub)
jQuery UI Git (WIP
Build)
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 improved
accessibility. In addition, the dialog and progressbar widgets have
undergone API redesigns, making them easier to use and creating
more 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

Home
HomeHome Intro to Unit TestingIntro to Unit Testing API DocumentationAPI Documentation CookbookCookbook PluginsPlugins
Search QUnit 
QUnit: A JavaScript Unit Testing framework.
What is QUnit?
QUnit is a powerful, easy-to-use JavaScript unit testing
framework. It's used by the jQuery, jQuery UI and jQuery
Mobile projects and is capable of testing any generic
JavaScript code, including itself!
Getting Started
A minimal QUnit test setup:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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>
Download
QUnit is available from the jQuery CDN hosted by Media
Temple.
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 version
automatically generated from the latest commit to the
QUnit Git repository is also available for use.
qunit-git.js
qunit-git.css
Get InvolvedDienstag, 9. April 13

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

≣
Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you
use jQuery, you already know how to use Zepto.
While 100% jQuery coverage is not a design goal, the APIs provided match their jQuery counterparts. The
goal is to have a ~5-10k modular library that downloads and executes fast, with a familiar and versatile
API, 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

MV*-Frameworks
M
C
V
Request
Response

https://github.com/addyosmani/todomvc

Backbone.js gives structure to web applications by providing models with key-value
binding and custom events, collections with a rich API of enumerable functions, views
with declarative event handling, and connects it all to your existing API over a RESTful
JSON interface.
The project is hosted on GitHub, and the annotated source code is available, as well as
an 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 MIT
software license.
You can report bugs and discuss features on the GitHub issues page, on Freenode IRC
in the #documentcloud channel, post questions to the Google Group, add pages to the
wiki 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

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

Write dramatically less code with
Ember's Handlebars integrated
templates that update
automatically when the underlying
data changes.
Download Handlebars
Don't waste time making trivial
choices. Ember.js incorporates
common idioms so you can focus
on what makes your app special,
not reinventing the wheel.
Ember.js is built for productivity.
Designed with developer
ergonomics in mind, its friendly
APIs 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!

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

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

MeteorPREVIEW 0.5.9
FollowFollowHome Examples Documentation FAQ Blog Get Involved
Abetterway
tobuildapps.
Meteor is an open-source platform for
building top-quality web apps in a
fraction of the time, whether you're an
expert developer or just getting started.
001 Pure JavaScript.
Write your entire app in pure JavaScript. All the same APIs are
available 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 in
the database changes. No more boilerplate redraw code to write.
Supports any templating language.
Clean, powerful data synchronization.
Garry Tan
Also see the sequel
Watch the screencastWatch the screencast
This is the web
framework I always
wanted.

Mobile Frameworks
• jQuery Mobile
• Sencha Touch
• Wink Toolkit
• Dojo Mobile

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 the
next 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 popular
smartphone, tablet, and desktop platforms. Device support
jQuery Mobile: Touch-Optimized WebjQuery Mobile: Touch-Optimized Web
Framework for Smartphones & TabletsFramework for Smartphones & Tablets
A unified, HTML5-based user interface system for allA unified, HTML5-based user interface system for all
popular mobile device platforms, built on the rock-solidpopular mobile device platforms, built on the rock-solid
jQuery and jQuery UI foundation. Its lightweight code isjQuery and jQuery UI foundation. Its lightweight code is
built 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.0
Legacy 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/

Home / Products
Sencha Touch BuildMobileWebAppswithHTML5 Buy SupportBuy Support DownloadDownload
HTML5 Mobile App Development
Build universal, mobile web apps for any device and platform.
With over 50 built-in components, state
management, and a built-in MVC system,
Sencha Touch provides everything you need to
create universal mobile web apps.
Watch Video
View Examples
What is Sencha Touch?
Sencha Touch, a high-performance HTML5 mobile application
framework, is the cornerstone of the Sencha HTML5 platform.
Built for enabling world-class user experiences, Sencha Touch is
the only framework that enables developers to build fast and
impressive apps that work on iOS, Android, BlackBerry, Kindle
Fire, and more.
Find out why more and more companies are investing in their
future by developing with HTML5. View Apps and Customers
What’s New?
Sencha Touch 2.1 is the latest version of the market leading
mobile app framework. This release focuses on improving
performance and adding features to make developers more
productive. The updated list component now supports infinite
scrolling, enabling apps to show an unlimited amount of data.
An all-new, ultra high performance version of Charts is included as
a part of Touch (available as GPLv3 or as a part of Sencha
Complete). Charts now adds retina display support, new financial
charts, and improvements to the Draw and Chart packages for
expanded 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/

"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/

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 enables
rapid development of mobile web applications with a native look and feel on
modern webkit-enabled mobile devices such as iPhone, iPod Touch, iPad, Android
and RIM smartphones and tablets.
Ready-for-BusinessReady-for-Business
Forms & DataForms & Data
Dojo includes a new set of componentsDojo includes a new set of components
designed from scratch with mobile indesigned from scratch with mobile in
mind, 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 Controller
Dojo Mobile is now integrated with theDojo Mobile is now integrated with the
new MVC and Application Controllernew MVC and Application Controller
packages.packages.
Mobile Gallery ShowcaseMobile Gallery Showcase
API DocsAPI Docs
Reference GuideReference Guide
http://dojotoolkit.org/features/mobile

Tools
• Style Guides
• Code Format
• Code Analyse
• Packer

Style Guides

▶
Google JavaScript Style Guide
Revision 2.72
Aaron Whyte
Bob Jervis
Dan Pupius
Erik Arvidsson
Fritz Schneider
Robby Walker
Each style point has a summary for which additional information is available by toggling the
accompanying arrow button that looks this way: ▶ . You may toggle all summaries with the
big arrow button:
▶ Toggle all summaries
Table of Contents
JavaScript
Language
Rules
var Constants Semicolons Nested functions Function Declarations Within Blocks Exceptions
Custom exceptions Standards features Wrapper objects for primitive types Multi-level prototype hierarchies
Method and property definitions delete Closures eval() with() {} this for-in loop Associative Arrays
Multiline string literals Array and Object literals Modifying prototypes of builtin objects
Internet Explorer's Conditional Comments
JavaScript
Style
Rules
Naming Custom toString() methods Deferred initialization Explicit scope Code formatting Parentheses
Strings Visibility (private and protected fields) JavaScript Types Comments
Providing 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 your
left. 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'ts
for JavaScript programs.
http://google-styleguide.googlecode.com/svn/trunk/
javascriptguide.xml

CLACLA
JS Style Guide
JS Style GuideJS Style Guide HTML Style GuideHTML Style Guide Markup ConventionsMarkup Conventions
Commits & Pull RequestsCommits & Pull Requests
Search Contribute to jQuery 
JavaScript Style Guide
1. Linting
Grunt provides a JSHint task to verify some basic, practical soundness of the codebase. The
options 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
1
2
3
4
5
6
7
// Bad
if(condition) doSomething();
// Bad
while(condition) iterating++;
// Bad
Contributing to …Contributing to …
Bug TriageBug Triage
CodeCode
CommunityCommunity
Open SourceOpen Source
SupportSupport
Web SitesWeb Sites
http://contribute.jquery.org/style-guide/js/

Code Conventions for the JavaScript Programming Language
This is a set of coding conventions and rules for use in JavaScript programming. It is inspired by the Sun document Code Conventions
for 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 program
will be handled by many pairs of hands and eyes. If a program is able to clearly communicate its structure and characteristics, it is less
likely 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 Files
JavaScript 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 adds
significantly 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 script
loading on other page components. There is no need to use the language or type attributes. It is the server, not the script tag, that
determines the MIME type.
Indentation
The 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 a
standard for the placement of tabstops. The use of spaces can produce a larger filesize, but the size is not significant over local
networks, and the difference is eliminated by minification.
Line Length
Avoid lines longer than 80 characters. When a statement will not fit on a single line, it may be necessary to break it. Place the break
after 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.html

Code Formatting

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 the
github under MIT licence,
and we have a command-line version, python library and a
node 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://jsbeautiﬁer.org/

Code Analyse

http://www.jslint.com/

About Docs Install Hack Blog
JSHint is a tool to detect errors and potential problems in JavaScript
code and can be used to enforce coding conventions.
LintLint
// Your code goes here.1
http://www.jshint.com/

Packer

http://www.crockford.com/javascript/jsmin.html

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 web
applications 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 that
downloads 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 optimizer
The Closure Compiler compiles JavaScript into compact, high-performance code. The compiler removes dead code and rewrites
and minimizes what's left so that it downloads and runs quickly. It also checks syntax, variable references, and types, and warns
about common JavaScript pitfalls. These checks and optimizations help you write apps that are less buggy and easier to maintain.
A comprehensive JavaScript library
The Closure Library is a broad, well-tested, modular, and cross-browser JavaScript library. You can pull just what you need from a
large 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/

YUI Compressor
According to Yahoo!'s Exceptional Performance Team, 40% to 60% of Yahoo!'s users have an empty cache experience and
about 20% of all page views are done with an empty cache (see this article by Tenni Theurer on the YUIBlog for more
information 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 a
primary strategy. With the right design in place, there are many secondary strategies for improving performance such as
minification 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 Dojo
compressor and Dean Edwards' Packer. Each of these tools, however, has drawbacks. JSMIN, for example, does not yield
optimal savings (due to its simple algorithm, it must leave many line feed characters in the code in order not to introduce any
new bugs).
The goal of JavaScript and CSS minification is always to preserve the operational qualities of the code while reducing its
overall byte footprint (both in raw terms and after gzipping, as most JavaScript and CSS served from production web servers is
gzipped as part of the HTTP protocol). The YUI Compressor is JavaScript minifier designed to be 100% safe and yield a higher
compression 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 Isaac
Schlueter'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 implements
code from Mozilla's Rhino project. Rhino is issued under the Mozilla Public License (MPL), and MPL applies to the
Rhino source and binaries that are distributed with YUI Compressor, including Rhino modifications made by YUI
Compressor. YUI Compressor also makes use of and distributes a binary of JArgs; the JArgs BSD license applies to this
binary.
Download: Download the YUI Compressor.
Video: Yahoo engineer Julien Lecomte introduces the YUI Compressor
Table of Contents
Quick Links
Video: Yahoo engineer Julien
Lecomte introduces the YUI
Compressor
How does the YUI Compressor work?
Using the YUI Compressor from the
command line
Additional notes
Support & Community
Filing Bugs & Feature Requests
More Reading about JavaScript/CSS
minification and the YUI Compressor
http://yui.github.com/yuicompressor/

JavaScript-Alternativen

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 expose
the 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 the
equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library
seamlessly 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 tends
to 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 = 42
opposite = 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

Dart brings structure to web app engineering with
a new language, libraries, and tools. Learn Dart
with our tutorials!
 Download nowDownload now Circle +DartCircle +Dart  SubscribeSubscribe FollowFollow @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 DocsDocs ToolsTools ResourcesResources DevelopmentDevelopment

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.
OVERVIEW
A STRUCTURED LANGUAGE THAT'S FLEXIBLE AND FAMILIAR

Code completion
Explore the methods and fields available to the object you're
working on.
Refactoring
Change your code structure without changing the behavior.
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 TypeScript Now
TypeScript is a language for application-scale JavaScript development.
TypeScript is a typed superset of JavaScript that compiles to plain
JavaScript.
Any browser. Any host. Any OS. Open Source.
Scalable
TypeScript 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 into
the behavior of existing JavaScript libraries.
learn play get it run it join in

Login »
HOMEHOME DOWNLOAD DOCUMENTATION COMMUNITY FORUM IRC API
One language, everywhere.
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/

Licensing | Forum | Blog | Docs | Roadmap
The data-driveThe data-drive
JavaScript developmeJavaScript developme
for business apfor business ap
What's new in WakanWhat's new in Wakan
(Released 2013-03-19)
Play with 1,000,000 database records from your browser
Manipulate data with pure server-side JavaScript code
No 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 Down

Ausblick und Fazit

C/C++
Python
Java
Perl
ActionScript
Tamarin
ActionMonkey
JavaScript::
Spidermonkey
JScript
JScript
.NET
Framework
Engine
GWT
Hook/Convertor
Ruby
python-
spidermonkey
Internet
Explorer
Applications
futhark
Konqueror
KJS
JScript.NET
QtScript
iCab
InScript
iCab
DMDScript
DMD
ExtendScript
Opera
FlashonC++
Implementation
Language
AIR
Android
Safari
Flash
PDF
Tomcat
mod_gcj
mod_perl
Helma
mod_jk
IronRuby
Narcissus
Spidermonkey
Camino
linear_b
RubyJS
Haskell Haxe
(OCaml)
JSCore
CouchDB
HDDVD
Scheme2JS
Phobos
JavaScript
C/C++
JavaScript
Python
Java
Perl
ActionScript
Tamarin
ActionMonkey
JavaScript::
Spidermonkey
JScript
JScript
.NET
Framework
Engine
Language
GWT
Hook/Convertor
Ruby
python-
spidermonkey
Internet
Explorer
Applications
futhark
Konqueror
KJS
JScript.NET
QtToolkit
QtScript
iCab
InScript
iCab
DMDScript
DMD
ruby-spidermonkey
ExtendScript
Opera
Microsoft
Apple
Adobe
Mozilla
OperaCompany
Google
TheWorldof
ECMAScript
FlashonC++
ByJohnResig(ejohn.org)
UpdatedNovember15,2007
ReleasedundertheGPLv2
Implementation
Language
AIR
Android
Safari
Photoshop
Flash
PDF
Tomcat
Apache
mod_gcjmod_js
mod_perl
Helma
mod_jk
Silverlight
Firefox
IronRuby
IronPython
Narcissus
Spidermonkey
Camino
Flex
linear_b
RubyJS
ParenScript
(Lisp)
Haskell Haxe
(OCaml)
Scheme
YHC/JavaScript
JSCore
Rhino
CouchDB
HDDVD
Scheme2JS
Phobos
JavaScript

http://heise.de/-1828268

http://www.w3.org/standards/techs/js
Das W3C arbeitet zur Zeit an rund 75 JavaScript-API.

„JavaScript is the
virtual machine of the
Internet.“
Quelle: „The Future of JavaScript I mean ECMAScript - Douglas Crockford“

Das war‘s:

Vielen Dank!
Peter Hecker
E-Mail: hecker@gfu.net

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

Recommended

Recommended

More Related Content

What's hot

What's hot (11)

Viewers also liked

Viewers also liked (20)

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

Similar to JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten missverstandene Programmiersprache (20)

More from Peter Hecker

More from Peter Hecker (15)

Recently uploaded

Recently uploaded (20)

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