Dart is an open-source programming language developed by Google to build structured web applications. It aims to replace JavaScript for web development. Dart is class-based, object-oriented language with optional static typing. It has advantages over JavaScript like native support for concurrency using isolates, strong typing of variables, and required main entry point. While the syntax is similar, Dart introduces features like libraries, constructors, inheritance, operator overloading, and exceptions handling that are not available natively in JavaScript.

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