Synonyms - Dart, JavaScript, C#, Python - Dart - Structured Web Apps

2/5/2014 Synonyms - Dart, JavaScript, C#, Python | Dart: Structured web apps
https://www.dartlang.org/docs/synonyms/ 1/35
Getting started
Code embedding
// Use both script tags to reach all browsers
// For browsers with the Dart VM
<script type='application/dart' src='program.dart'></script>
// The following will kickstart the Dart engine and
// try to automatically load the javascript version
// of your app for non-Dartium browsers.
<script src="packages/browser/dart.js">
</script>
<script src='program.js'></script>
Entry point
// REQUIRED.
main() {
// this is the entry point to the program
}
// Or
main(List<String> args) {
// ...
}
// Not required.
function main() {
// To be used as the entry point, but it must be
// called manually.
}
main();
// Sometimes the entry point is written as an
// anonymous function
(function(){
// Code to be run automatically on execution
})();
Detect language unavailability
<script type='text/javascript'>
if (navigator.userAgent.indexOf('(Dart)') === -1) {
// Browser doesn't support Dart
}
</script>
<noscript>
Your browser doesnt support JavaScript.
</noscript>
Printing to the console
print('Level completed.');
console.log('Level completed.');
Modal alerts
import 'dart:html';
window.alert('Clicked on the button.');
alert('Clicked on the button.');
Code modularity (Learn more )
Define a library
// declares the following is in the animals library
library animals;
class Dog {
noise() => 'BARK!';
}
// No native implementation.
// Consider require.js and AMD
Use a library
import 'animals.dart';
var fido = new Dog();
// prefixes are supported to avoid namespace collisions
import 'animals.dart' as pets;
var fido = new pets.Dog();
// no native implementation
// consider require.js and AMD
Variables (Learn more )
Create + assign value
// Dart variables can be typed...
String myName = 'Aaron';
// but they don't need to be
var myOtherName = 'Aaron';
var myName = 'Aaron';
Default value
var myName;
// == null
int x;
// == null
var myName;
// == undefined
Hoisting
// Dart does not hoist variables. The following
// method will issue a compilation error of "cannot resolve name"
printName() {
print('Hello, $name'); // compilation error here
var name = 'Bob';
}
// JavaScript "hoists" variables to the top of
// their scope. So the following function:
function printName() {
console.log('Hello, ' + name);
var name = 'Bob';
}
// is equivalent to this function:
function printName() {
var name;
console.log('Hello, ' + name);
name = 'Bob';
}
printName();
// Hello, undefined
Final variables
final name = 'Bob';
// you can combine types and final
final String name = 'Bob';
// Trying to reassign a final variable raises an error
name = 'Alice';
// ERROR: cannot assign value to final variable
// no support
Collections (Learn more )
Arrays / Lists
var a = new List();
var a = [];
var a = ['apple', 'banana', 'cherry'];
a.add('orange');
a.length == 4;
// In Dart you can use generics.
var a = new List<String>();
var a = new Array();
var a = [];
var a = ['apple', 'banana', 'cherry'];
a.push('orange');
a.length == 4;
Custom sort
var numbers = [42, 2.1, 5, 0.1, 391];
numbers.sort((a, b) => a - b);
// == [0.1, 2.1, 5, 42, 391];
var numbers = [42, 2.1, 5, 0.1, 391];
numbers.sort(function(a, b) {
return a - b;
});
// == [0.1, 2.1, 5, 42, 391]
Key-value pairs
// Dart has a Map interface for key-value pairs
var periodic = {};
var periodic = new Map();
// An empty key-value pair can be declared
// in two different ways in JavaScript
var periodic = new Object();
var periodic = {};
Appropriate keys
// Map literals must use strings as keys
var periodic = {
'gold' : 'AU',
'silver' : 'AG'
};
// Map constructors can use any object as a key
var favoriteIceCream = new Map();
favoriteIceCream[new Kid('Billy')] = 'vanilla';
var periodic = {
gold: 'AU',
silver: 'AG'
};
var periodic = {
'gold': 'AU',
'silver': 'AG'
};
Accessing values
// Values can only be 'get' or 'set' by using the square
// bracket notation. Dot notation does not work
periodic['gold'] // == 'AU'
periodic['gold'] = 'Glitter';
// You can set a key if it does not exist first.
// Runs a function to generate the value.
periodic.putIfAbsent('Xenon', () => 'XE');
periodic.gold // == 'AU'
periodic['gold'] // == 'AU'
periodic.gold = 'Glitter';
periodic['gold'] = 'Glitter';
Sets (collections of unique items )
var fruits = new Set();
fruits.add('oranges');
fruits.add('apples');
fruits.length // == 2
fruits.add('oranges'); // duplicate of existing item
fruits.length // == 2
// no native JavaScript equivalent
Queues (FIFO )
// Queues are optimized for removing items from the head
var queue = new Queue();
queue.add('event:32342');
queue.add('event:49309');
print(queue.length); // 2
var eventId = queue.removeFirst();
print(eventId == 'event:32342'); // true
print(queue.length); // 1
// No dedicated queue, use an array.
var queue = [];
queue.push('event:32342');
queue.push('event:49309');
console.log(queue.length); // 2
var eventId = queue.shift();
console.log(eventId === 'event:32342');
console.log(queue.length); // 1
Strings (Learn more )
Raw strings
var rawString = r'The following is not expanded to a tab \t';
var escapedString = 'The following is not expanded to a tab \\t';
rawString == escapedString // == true
// JavaScript does not have 'raw' strings.
// All escaping must be done manually.
var escapedString = 'A tab looks like \\t';
Interpolation
var name = 'Aaron';
var greeting = 'My name is $name.';
var greetingPolish = 'My Polish name would be ${name}ski.';
// calculations can be performed in string interpolation
element.style.top = '${top + 20}px';
var name = 'Aaron';
var greeting = 'My name is ' + name;
var greetingPolish = 'My Polish name would be ' + name + 'ski';
element.style.top = (top + 20) + 'px';
Concatenation
// Adjacent string literals concatenate.
var longMessage = 'This is a very long line. '
'It is concatenated into one string.';
// Using + also works.
var anotherMessage = 'This is also a very long line. ' +
'It is concatenated with a +.';

// Or use string interpolation.
var name = 'Aaron';
var greeting = 'My name is $name.';
var longMessage = 'This is a very long line. ' +
'It is concatenated into one string.';

var name = 'Aaron';
var greeting = 'My name is ' + name;
Substring
'doghouses'.substring(3, 8); // == 'house'
'doghouses'.substring(3, 8) // == 'house'
'doghouses'.substr(3, 5) // == 'house'
Replace all occurences
'doghouses'.replaceAll('s','z'); // == 'doghouzez'
'doghouses'.replace(/s/g, 'z') // == 'doghouzez'
Replace one occurence
'racecar'.replaceFirst('r', 'sp'); // == 'spacecar'
'racecar'.replace(/r/, 'sp') // == 'spacecar'
Multi-line strings
// Dart ignores the first new-line (if it is directly after
// the quotes), but not the last.
var string = '''
This is a string that spans
many lines.
''';
var string =
'This is a string that spans\n' +
'many lines.\n';
Split into an array
var animals = 'dogs, cats, gophers, zebras';
var individualAnimals = animals.split(', ');
// == ['dogs', 'cats', 'gophers', 'zebras'];
var animals = 'dogs, cats, gophers, zebras';
var individualAnimals = animals.split(', ');
// == ['dogs', 'cats', 'gophers', 'zebras'];
Test whether a string starts with a substring
// Dart string objects have a built-in startsWith method
'racecar'.startsWith('race'); // == true
'racecar'.startsWith('pace'); // == false
// JavaScript has no built-in startsWith function
String.prototype.startsWith = function(beginning) {
var head = this.substr(0, beginning.length);
return head == beginning;
}
'racecar'.startsWith('race') // == true
'racecar'.startsWith('pace') // == false
Booleans (Learn more )
If statements
var bugNumbers = [3234,4542,944,124];
if (bugNumbers.length > 0) {
print('Not ready for release');
}
var bugNumbers = [3234,4542,944,124];
if (bugNumbers.length > 0) {
console.log('Not ready for release');
}
Ternary statements
var bugNumbers = [3234,4542,944,124];
var status = bugNumbers.length > 0 ? 'RED' : 'GREEN';
print('The build is $status');
var bugNumbers = [3234,4542,944,124];
var status = bugNumbers.length > 0 ? 'RED' : 'GREEN';
console.log('The build is ' + status);
Checking for empty string
var emptyString = '';
if (emptyString.isEmpty) {
print('use isEmpty');
}
var emptyString = '';
if (!emptyString) {
console.log('empty strings are treated as false');
}
Checking for zero
var zero = 0;
if (zero == 0) {
print('use == 0 to check zero');
}
var zero = 0;
if (!zero) {
console.log('0 is treated as false');
}
Checking for null
var myNull = null;
if (myNull == null) {
print('use == null to check null');
}
var myNull = null;
if (!myNull) {
console.log('null is treated as false');
}
Checking for NaN
var myNaN = 0/0;
if (myNaN.isNaN) {
print('use isNaN to check if a number is NaN');
}
var myNaN = NaN;
if (!myNaN) {
console.log('NaN is treated as false');
}
Checking for undefined
// Dart does not have a concept of undefined
if (typeof isUndefined === 'undefined') {
console.log('undefined');
}
Value and identity equality
/*
* In Dart, == will check the following, in order:
* 1) if either x or y is null, then return identical(x, y)
* 2) otherwise, return x.==(y)
*/
/*
* This means:
* a) use identical(a, b) instead of === (there is no ===)
* b) when implementing ==() you don't have to worry about
* manually checking for null arg
* c) you can't define your own type that considers itself
* equal to null
* d) null == null
*/
// therefore, the following code will work:
var letterA = 'A';
var charA = new String.fromCharCodes([65]);
// String defines equality as 'same character codes in same order'
letterA == charA // == true
// However, the following is different than JavaScript
var number5 = 5;
var char5 = '5';
number5 != char5 // == true, because of different types
// You can implement == in your own class
class Person {
String name;
String ssn;
Person(this.name, this.ssn);

bool operator ==(Person other) {
return ssn == other.ssn;
}
}
new Person('Bob', '111') == new Person('Robert', '111');
var letterA = 'A';
var charA = String.fromCharCode(65);
// JavaScript converts both values to the same type
// before checking their value with 'double equals'.
letterA == charA // == true
// Similarly...
var number5 = 5;
var char5 = '5';
// This comparison triggers type conversion
number5 == char5 // == true
// 'triple equals' checks type and value
letterA === charA // == true
number5 === char5 // == false
Functions (Learn more )
Function definition
// Specifying the return type of the function
// in Dart is optional.
fn() {

return true;
}
// can also be written as
bool fn() {

return true;
}
function fn() {

return true;
}
Return value
// Like JavaScript, use the 'return' keyword in a function
// definition to return a value.
fn() {
return 'Hello';
}
fn(); // == 'Hello'
// A function with no return value returns null.
doNothing() {
// nothing
}
doNothing(); // == returns null
// if the body of the function is returning a single expression,
// this is the short form
fn() => true;
function fn() { return 'Hello'; }
fn(); // == 'Hello'
(function(){})() // == returns undefined
Assign a function to a variable
var loudify = (msg) => msg.toUpperCase();
loudify('not gonna take it anymore'); // NOT GONNA TAKE IT ANYMORE
var loudify = function(msg) {
return msg.toUpperCase();
}
loudify('not gonna take it anymore');
// NOT GONNA TAKE IT ANYMORE
Optional parameters
fn(a, b, c) => c;
fn(1); // ERROR: NoSuchMethodException
fn(1, 2, 3); // == 3
// Dart specifies optional parameters with square braces
fn(a, [b, c]) => c;
fn('a'); // == null
function fn(a, b, c) { return c; };
fn(1) // == undefined
fn(1, 2, 3) // == 3
Parameters with default values
String send(msg, [rate='First Class']) {
return '${msg} was sent via ${rate}';
}
send('hello'); // == 'hello was sent via First Class'
send("I'm cheap", '4th class'); // == "I'm cheap was sent via 4th class"
function send(msg, rate) {
rate = rate || 'First Class';
return msg + " was sent via " + rate;
}
send('hello') // == 'hello was sent via First Class'
send("I'm cheap", '4th class') // == "I'm cheap was sent via 4th class
Named parameters
String send(msg, {rate: 'First Class'}) {
return '${msg} was sent via ${rate}';
}
// you can use named parameters if the argument is optional
send("I'm cheap", rate:'4th class'); // == "I'm cheap was sent via 4th class"
// JavaScript does not have native support for named parameters
Variable number of arguments
// Dart does not support variable numbers of arguments
function superHeros() {
for (var i = 0; i < arguments.length; i++) {
console.log("There's no stopping " + arguments[i]);
}
}
superHeros('UberMan', 'Exceptional Woman', 'The Hunk');
Iterators (Learn more )
For loops for lists
var colors = ['red', 'orange', 'green'];
for (var i = 0; i < colors.length; i++) {
print(colors[i]);
}
var colors = ['red', 'orange', 'green'];
for (var i = 0; i < colors.length; i++) {
console.log(colors[i]);
}
For-in loops
var fruits = ['orange', 'apple', 'banana'];
// 'in' notation in Dart returns the element
// of the list, not the index
for (var fruit in fruits) {
print(fruit);
}
var fruits = ['orange', 'apple', 'banana'];
// 'in' notation in JavaScript iterates through
// the properties, not values, of an object.
// Thus it returns the indices of the array
// and any items add to the Array prototype.
for (var i in fruits) {
console.log(fruits[i]);
}
For loops for objects/maps
var data = { };
for (var key in data.keys) {
print('$key, ${data[key]}');
}
// Alternatively, the forEach loop is a method on a Map in Dart.
data.forEach((key, value) {
print('${key}, ${value}');
});
var data = { };
for (var key in data) {
console.log('key', key);
console.log('value', data[key]);
}
Closures and counters in loops
// Dart doesn't reuse and close over the same
// loop variable in each iteration
var callbacks = [];
for (var i = 0; i < 2; i++) {
callbacks.add(() => print(i));
}
callbacks[0]() // == 0
var callbacks = [];
// A closure must be used to preserve the return for
// each function at each step of the loop. Otherwise
// every entry in callbacks will return 2;
for (var i = 0; i < 2; i++) {
(function(_i) {
callbacks.push(function() {
return _i;
});
})(i);
}
// Without the internal closure, the result is 2
callbacks[0]() // == 0
// ECMAScript 6 can support this with the use of blocks
let callbacks = [];
for (let i = 0; i < 10; i++) {
let j = i;
callbacks.push(function() { print(j) });
}
Classes (Learn more )
Define
class Person {
String name;
String greet() => 'Hello, $name';
}
function Person() {
this.name = null;
};
Person.prototype.greet = function() {
return 'Hello, ' + this.name;
}
Constructor with parameter
class Person {
String name;
Person(String name) {
this.name = name;
}
}
// Shorter alternative
class Person {
String name;
// parameters prefixed by 'this.' will assign to
// instance variables automatically
Person(this.name);
}
function Person(name) {
this.name = name;
};
Instantiate
var person = new Person();
var person = new Person();
Reflection
var name = "Bob";
name.runtimeType // == String
var name = 'Bob';
typeof name // == 'String'
Check the type
var name = 'Bob';
name is String // == true
name is! int // == true
var name = 'Bob';
// Because of javascript's type system we
// need to check both instanceof and typeof
name instanceof String || typeof name === 'string';
// == true
(!(name instanceof Number || typeof name === 'number'));
// == true
Subclass
class Person {
String name;
Person(this.name);
String greet() => 'Hello, $name';
}
class Employee extends Person {
num salary;
Employee(String name, this.salary) : super(name);

void grantRaise(num percent) {
percent /= 100;
salary += (salary * percent).toInt();
}
}
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
return 'Hello, ' + this.name;
}

function Employee(name, salary) {
Person.call(this, name);
this.salary = salary;
}
Employee.prototype = new Person();
Employee.prototype.constructor = Employee;
Employee.prototype.grantRaise = function(percent) {
percent /= 100;
this.salary += (this.salary * percent).toInt();
}
Operator "overloading "
class Hug {
num strength;
Hug(this.strength);

Hug operator +(Hug other) => new Hug(strength + other.strength);
}
main() {
var hug1 = new Hug(10);
var hug2 = new Hug(100);
var bigHug = hug1 + hug2;
}
// not supported
Finding elements in DOM
Find one element by id
querySelector('#main');
document.getElementById('main');
document.querySelector('#main');
Find one element by class
querySelector('.visible');
document.getElementsByClassName('visible')[0];
document.querySelector('.visible');
Find many elements by class
querySelectorAll('.visible');
document.getElementsByClassName('visible');
document.querySelectorAll('.visible');
Find one element by tag
querySelector('div');
document.getElementsByTagName('div')[0];
document.querySelector('div');
Find many elements by tag
querySelectorAll('div');
document.getElementsByTagName('div');
document.querySelectorAll('div');
Find one element by name
querySelector('[name="form"]');
document.getElementsByName('form')[0];
document.querySelector('[name="form"]');
Find many elements by name
querySelectorAll('[name="form"]');
document.getElementsByName('form');
document.querySelectorAll('[name="form"]');
Find elements by combination of above
querySelector('#main').querySelector('div').querySelectorAll('.visible');
querySelectorAll('#main div:first-of-type .visible');
document.getElementById('main').getElementsByTagName('div')[0].getElementsByClassName('visible');
document.querySelectorAll('#main div:first-of-type .visible');
Iterate over a list of elements
for (var el in els) {
doSomethingWithEl(el);
}
for (var i = 0, el; el = els[i]; i++) {
doSomethingWithEl(el);
}
Access the first child
elem.children.first;
elem.children[0];
elem.firstChild();
Find out whether an element has children elements
!elem.nodes.isEmpty;
elem.hasChildNodes();
Manipulating DOM
Create an element
import 'dart:html';
var element = new Element.tag('div');
// Many elements have their own constructors.
var element = new DivElement();
var element = document.createElement('div');
Create an element and set its contents
var element = new Element.html('<p>A quick brown <em>fox</em>.</p>');
var element = document.createElement('p');
element.innerHTML = 'A quick brown <em>fox</em>.';
Add an element to a parent
element.children.add(newElement);
element.appendChild(newElement);
Remove an element from its parent
element.remove();
element.parentNode.removeChild(element);
Regular expressions
var email = 'test@example.com';
(new RegExp(r'@')).firstMatch(email);
// == Match Object
var email = 'test@example.com';
email.match(/@/);
// == ['@']
var invalidEmail = 'f@il@example.com';
(new RegExp(r'@')).allMatches(invalidEmail)
// == Iterable Match Object
var invalidEmail = 'f@il@example.com';
invalidEmail.match(/@/g)
// == ['@', '@']
Exceptions
Throw an exception
throw new Exception("Intruder Alert!!");
// You can also throw strings
throw "Unexpected user input";
throw new Error("Intruder Alert!!");
// or...
throw "Intruder Alert!!";
Catch an exception
main() {
try {
int.parse("three");
} on FormatException catch(fe) {
print("Ouch! Detected: $fe");
} catch(e) {
print("If some other type of exception");
} finally {
print("This runs even if an exception is thrown");
}
}
try {
undefinedFunction();
} catch(e) {
if (e instanceof ReferenceError) {
console.log('You called a function that does not exist');
}
} finally {
console.log('This runs even if an exception is thrown');
}
DOM Event handling
Attach an event handler
element.onClick.listen(handleOnClick);
handleOnClick(Event e) {
// ...
}
// Or, if the handler does not take an event
element.onClick.listen((e) => subscribeToService());
element.addEventListener('click', handleOnClick, false);
Remove an event handler
var subscription = element.onClick.listen(handleOnClick);
subscription.cancel();
element.removeEventListener('click', handleOnClick, false);
Timing
Schedule a future event
import 'dart:async';
var timer = new Timer(new Duration(milliseconds:500), () { });
setTimeout(function() { }, 500);
Measure the execution time of a function
int measure(fn) {
var watch = new Stopwatch();
watch.start();
fn();
return watch.elapsedMicroseconds;
}
function measure(fn) {
var start = Date.now();
fn();
return Date.now() - start;
}
HTML attributes
Get HTML attribute
element.attributes['href'];
element.getAttribute('href');
Set HTML attribute
element.attributes['playable'] = true;
element.setAttribute('playable', true);
Remove HTML attribute
element.attributes.remove('playable');
element.removeAttribute('playable');
Check if HTML attribute exists
element.attributes.containsKey('href');
element.hasAttribute('href');
CSS classes
Add CSS class
element.classes.add('new-class');
element.className += ' new-class';
element.classList.add('new-class');
Remove CSS class
element.classes.remove('new-class');
element.className = element.className.replace(/ new-class/, '');
element.classList.remove('new-class');
Request data via XMLHttpRequest
HttpRequest.request("/data.json").then((req) {
print("The contents of your data: ${req.responseText}");
});
var client = new XMLHttpRequest;

client.onreadystatechange = function() {
if (this.readyState == 4) {
processData(this);
}
}
client.open('GET', 'data.json');
client.send();
function processData(request) {
console.log('The contents of your data: ' + request.responseText);
}
jQuery
React to document finishing loading
window.onContentLoaded.listen((e) => print('Content is loaded'));
// However, main() will normally run after DOMContentLoaded
$(document).ready(function(){
console.log('Content is loaded');
});
Node lookup
var els = querySelectorAll('div');
var els = jQuery('div');
Node creation
var pic = new Element.tag('img');
pic.classes.add('avatar');
pic.classes.toggle('main');
pic.attributes['src'] = 'myPic.jpg';
// Or:
var pic = new ImageElement('myPic.jpg');
pic.classes
..add('avatar')
..toggle('main');

// Cascades (..) allow you to chain
// multiple method calls on an object.
document.body.children.add(pic);
var pic = $('<img/>');
pic.addClass('avatar');
pic.toggleClass('main');
pic.attr('src', 'myPic.jpg');
$('body').append(pic);
Event handling
querySelectorAll('a.person').forEach((el) {
el.onClick.listen((e) => print('Person clicked'));
});
$('a.person').click(function(e){
console.log('Person clicked');
})
Relative nodes
var myNode = querySelector('div');
var parent = myNode.parent;
var next = myNode.nextNode;
var myNode = $('div:first');
var parent = myNode.parent();
var next = myNode.next();
Children
var myNode = querySelector('div');
if (!myNode.children.isEmpty) {
myNode.children.clear();
}
var myNode = $('div:first');
// If there are children, remove them
if (!myNode.is(':empty')) {
myNode.empty();
}
Clone
var clonedElement = querySelector('#about').clone(true);
var clonedElement = $('#about').clone();
Absolute value
-4.abs() // == 4
Math.abs(-4) // == 4
Ceiling
4.89.ceil() // == 5
Math.ceil(4.89) // == 5
Floor
4.89.floor() // == 4
Math.floor(4.89) // == 4
Random
import 'dart:math';
var rand = new Random();
// Returns a random double greater than or equal to 0.0
// and less than 1.0
rand.nextDouble();
// Returns a random boolean value.
rand.nextBool();
// Returns a positive random integer greater or equal
// to 0 and less than 10
rand.nextInt(10);
// Returns a random float greater than or equal to 0.0
// and less than 1.0
Math.random()
Sine and Cosine
import 'dart:math' as Math;
sin(Math.PI/2) // == 1.0
cos(Math.PI) // == -1.0
Math.sin(Math.PI/2) // == 1
Math.cos(Math.PI) // == -1
Convert a String to a number
int.parse('3') // == 3
double.parse('3.14') // == 3.14
int.parse('3px') // ERROR: throws FormatException
int.parse('three') // ERROR: throws FormatException
parseInt('3') // == 3
parseFloat('3.14') // == 3.14
parseInt('3px') // == 3
parseInt('three') // NaN
Run-time program manipulation
// Dart doesn't support eval(). This is not a bug.
eval('alert("hello from eval")');
Adding a method to a class
// Dart doesn't support changing a class after
// the program has been compiled
String.prototype.startsWith = function(beginning) {
var head = this.substr(0, beginning.length);
return head == beginning;
}

Synonyms - Dart, JavaScript, C#, Python - Dart - Structured Web Apps

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Synonyms - Dart, JavaScript, C#, Python - Dart - Structured Web Apps

Transféré par

Droits d'auteur :

Formats disponibles

2/5/2014 Synonyms - Dart, JavaScript, C#, Python | Dart: Structured web apps

Vous aimerez peut-être aussi