1. JavaScript by bye : Working with Dart
Say! Hello Dart
Anand Shankar

2. What is Dart
Dart is a new open source web programming
language developed by Google. It was unveiled at
the GOTO conference, October-2011.
The current version is 0.10; released 07-June-
2012.
Dart helps developers to build structured modern
web apps.

3. What is Dart
The goal of Dart is ultimately to replace
JavaScript as the lingua franca of web development
on the open web platform.
Dart is a class-based, object-oriented language
with lexical scoping, closures, and optional static
typing.

4. Advantages of Dart over
JavaScript
Good point is that it has native support.
A very critical issue with JavaScript is handling
concurrency. Dart has "isolates": these are used for
handling concurrency.

5. Coding difference between
JavaScript and Dart

6. Code embedding
JavaScript Dart
<script • <script
src=‘myscript.js'></script> type='application/dart'
src='myscript.dart'></script
>
• <script
type='text/javascript'> if
(navigator.webkitStartDart) {
navigator.webkitStartDart();
} </script>

7. Entry point
JavaScript Dart
• Not required • REQUIRED
– main() { }

8. Printing to the console
JavaScript Dart
• console.log(‘Hello BCB'); • print(‘Hello BCB');

9. Code modularity
JavaScript Dart
• No native implementation • Defining library
– #library(‘BCB');
– class BCB11 { hello() => ‘Hello
BCB 11'; }
• Using library
– #import(‘BCB ');
– var msg = new BCB11();

10. Variables
JavaScript Dart
• var – mostly used for all • Strongly supports types
types. variables: var, String, int,
• Undeclared variable : double, boolean, etc.
“undefined” • Undeclared variable : “null”
• No “final” variable support • Supports “final”

11. Collections
JavaScript Dart
• No native JavaScript • Set for unique item
equivalent for unique item collection.
collection.

12. Function
JavaScript Dart
• function fun(a, b, c) { return • fun(a, b, c) => c;
c; }; – fn(1);
– fun(1) Result=ERROR:NoSuchMethodEx
Result= undefined ception
– fn(1, 2, 3);
– fun(1, 2, 3)
Result= 3
Result= 3
• Optional parameters
– fn(a, [b, c]) => c;
– fn('a');
Result= null

13. Function
JavaScript Dart
• Does not have native • myFun(x, [y, z])
support for named { print("Hello BCB ${x} ${y}
parameters ${z}" ); }
– myFun(11);
– myFun(11, 12);

14. For Each Loop
JavaScript Dart
• Not available • data.forEach((key, value){
print('${key}, ${value}'); });

15. Classes
JavaScript Dart
• function BCB(){ • class BCB {
this.name=null; var name;
}; greet() => 'Hello, $name';
}
BCB.prototype.greet=function(
){
return ‘Hello, ‘ + this.name;
}

16. Constructors
JavaScript Dart
• function BCB(x) { • class BCB {
this.x = x; var x;
}; BCB(x) {
this.x = x;
}}
• In short
class BCB {
var x;
BCB(this.x); }

17. Inheritance
• JavaScript
• 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; }

18. • Employee.prototype = new Person();
Employee.prototype.constructor = Employee;
Employee.prototype.grantRaise =
function(percent) {
this.salary = (this.salary * percent).toInt();
}

19. • Dart
• class Person {
var name;
Person(this.name);
greet() => 'Hello, $name';
}

20. class Employee extends Person {
var salary;
Employee(name, this.salary) : super(name);
grantRaise(percent)
{
salary = (salary * percent).toInt();
}
}

21. Operator Overloading
JavaScript Dart
• Not supported • class Point {
var x, y;
Point(this.x, this.y);
operator + (Point p) => new
Point(x + p.x, y + p.y);
toString() => 'x:$x, y:$y';
}

22. main()
{
var p1 = new Point(1, 1);
var p2 = new Point(2, 2);
var p3 = p1 + p2; print(p3);
}

23. Advance for loop
JavaScript Dart
• Not available • For( var x in list)
{
print(x);
}

24. Manipulating DOM
JavaScript Dart
• var element = • var element = new
document.createElement('p Element.html('<p>Hello BCB
'); <em>12</em>.</p>');
• element.innerHTML =
‘Hello BCB <em>12</em>.';

25. Regular expressions
JavaScript Dart
• var email = • var email =
'test@example.com'; 'test@example.com';
email.match(/@/) (new
• Result= ['@'] RegExp(@'o')).firstMatch(e
mail)
• Result= Match Object

26. • var invalidEmail = • var invalidEmail =
'f@il@example.com'; 'f@il@example.com';
invalidEmail.match(/@/ (new
g) RegExp(@'o')).allMatch
• Result= ['@', '@'] es(invalidEmail)
• Result= Iterable Match
Object

27. Exceptions Handling
JavaScript Dart
• try { undefinedFunction(); • try { Math.parseInt("three");
} catch(e) { }catch(BadNumberFormatEx
if (e instanceof ception bnfe) {
ReferenceError) { print("Ouch! Detected:
console.log('You called a $bnfe");
function that does not }catch(var e) {
exist'); } } print("If some other type of
finally { console.log('This runs exception"); }
even if an exception is finally { print("This runs even if
thrown'); } an exception is thrown"); }

28. Ajax
• JavaScript
var client = new XMLHttpRequest;
client.onreadystatechange = function() {
if (this.readyState == 4) {
processData(this);
}}

29. client.open('GET', 'data.json');
client.send();
function processData(request) {
console.log('The contents of your data: ' +
request.responseText);
}

30. • Dart
var xhr = new
XMLHttpRequest.getTEMPNAME("/data.json",
(req) { print("The contents of your data:
${req.responseText}"); });

31. Run time program manipulation
JavaScript Dart
• Supports Eval • Doesn't support eval()
– eval('alert("hello from • Doesn't support changing a
eval")'); class after the program has
• Adding a method to a class been compiled
– String.prototype.startsWith =
function(beginning) { var
head = this.substr(0,
beginning.length); return
head == beginning; }

32. Questions ?

33. Thanks
Anand Shankar
E-mail: com@ashankar.com
Twitter: anandvns
Facebook: anandvns

34. References
http://www.dartlang.org