Download - Dart
![Page 1: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/1.jpg)
JavaScript by bye : Working with Dart
Anand Shankar
Say! Hello Dart
![Page 2: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/2.jpg)
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.
![Page 3: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/3.jpg)
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.
![Page 4: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/4.jpg)
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.
![Page 5: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/5.jpg)
Coding difference between JavaScript and Dart
![Page 6: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/6.jpg)
Code embedding
JavaScript
<script src=‘myscript.js'></script>
Dart
• <script type='application/dart' src='myscript.dart'></script>
• <script type='text/javascript'> if (navigator.webkitStartDart) { navigator.webkitStartDart(); } </script>
![Page 7: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/7.jpg)
Entry point
JavaScript
• Not required
Dart
• REQUIRED – main() { }
![Page 8: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/8.jpg)
Printing to the console
JavaScript
• console.log(‘Hello BCB');
Dart
• print(‘Hello BCB');
![Page 9: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/9.jpg)
Code modularity
JavaScript
• No native implementation
Dart
• Defining library – #library(‘BCB');
– class BCB11 { hello() => ‘Hello BCB 11'; }
• Using library – #import(‘BCB ');
– var msg = new BCB11();
![Page 10: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/10.jpg)
Variables
JavaScript
• var – mostly used for all types.
• Undeclared variable : “undefined”
• No “final” variable support
Dart
• Strongly supports types variables: var, String, int, double, boolean, etc.
• Undeclared variable : “null”
• Supports “final”
![Page 11: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/11.jpg)
Collections
JavaScript
• No native JavaScript equivalent for unique item collection.
Dart
• Set for unique item collection.
![Page 12: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/12.jpg)
Function
JavaScript
• function fun(a, b, c) { return c; }; – fun(1)
Result= undefined – fun(1, 2, 3)
Result= 3
Dart
• fun(a, b, c) => c; – fn(1);
Result=ERROR:NoSuchMethodException
– fn(1, 2, 3);
Result= 3
• Optional parameters – fn(a, [b, c]) => c;
– fn('a');
Result= null
![Page 13: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/13.jpg)
Function
JavaScript
• Does not have native support for named parameters
Dart
• myFun(x, [y, z])
{ print("Hello BCB ${x} ${y} ${z}" ); } – myFun(11);
– myFun(11, 12);
![Page 14: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/14.jpg)
For Each Loop
JavaScript
• Not available
Dart
• data.forEach((key, value){ print('${key}, ${value}'); });
![Page 15: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/15.jpg)
Classes
JavaScript
• function BCB(){
this.name=null;
};
BCB.prototype.greet=function(){
return ‘Hello, ‘ + this.name;
}
Dart
• class BCB {
var name;
greet() => 'Hello, $name';
}
![Page 16: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/16.jpg)
Constructors
JavaScript
• function BCB(x) {
this.x = x;
};
Dart
• class BCB {
var x;
BCB(x) {
this.x = x;
} }
• In short
class BCB {
var x;
BCB(this.x); }
![Page 17: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/17.jpg)
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; }
![Page 18: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/18.jpg)
• Employee.prototype = new Person(); Employee.prototype.constructor = Employee;
Employee.prototype.grantRaise = function(percent) {
this.salary = (this.salary * percent).toInt();
}
![Page 19: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/19.jpg)
• Dart
• class Person {
var name;
Person(this.name);
greet() => 'Hello, $name';
}
![Page 20: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/20.jpg)
class Employee extends Person {
var salary;
Employee(name, this.salary) : super(name);
grantRaise(percent)
{
salary = (salary * percent).toInt();
}
}
![Page 21: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/21.jpg)
Operator Overloading
JavaScript
• Not supported
Dart
• 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';
}
![Page 22: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/22.jpg)
main()
{
var p1 = new Point(1, 1);
var p2 = new Point(2, 2);
var p3 = p1 + p2; print(p3);
}
![Page 23: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/23.jpg)
Advance for loop
JavaScript
• Not available
Dart
• For( var x in list)
{
print(x);
}
![Page 24: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/24.jpg)
Manipulating DOM
JavaScript
• var element = document.createElement('p');
• element.innerHTML = ‘Hello BCB <em>12</em>.';
Dart
• var element = new Element.html('<p>Hello BCB <em>12</em>.</p>');
![Page 25: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/25.jpg)
Regular expressions
JavaScript
• var email = '[email protected]'; email.match(/@/)
• Result= ['@']
Dart
• var email = '[email protected]';
(new RegExp(@'o')).firstMatch(email)
• Result= Match Object
![Page 26: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/26.jpg)
• var invalidEmail = 'f@[email protected]'; invalidEmail.match(/@/g)
• Result= ['@', '@']
• var invalidEmail = 'f@[email protected]'; (new RegExp(@'o')).allMatches(invalidEmail)
• Result= Iterable Match Object
![Page 27: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/27.jpg)
Exceptions Handling
JavaScript
• 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'); }
Dart
• try { Math.parseInt("three"); }catch(BadNumberFormatException bnfe) {
print("Ouch! Detected: $bnfe");
}catch(var e) {
print("If some other type of exception"); }
finally { print("This runs even if an exception is thrown"); }
![Page 28: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/28.jpg)
Ajax
• JavaScript
var client = new XMLHttpRequest;
client.onreadystatechange = function() {
if (this.readyState == 4) {
processData(this);
} }
![Page 29: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/29.jpg)
client.open('GET', 'data.json');
client.send();
function processData(request) {
console.log('The contents of your data: ' + request.responseText);
}
![Page 30: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/30.jpg)
• Dart
var xhr = new XMLHttpRequest.getTEMPNAME("/data.json", (req) { print("The contents of your data: ${req.responseText}"); });
![Page 31: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/31.jpg)
Run time program manipulation
JavaScript
• Supports Eval – eval('alert("hello from
eval")');
• Adding a method to a class – String.prototype.startsWith =
function(beginning) { var head = this.substr(0, beginning.length); return head == beginning; }
Dart
• Doesn't support eval()
• Doesn't support changing a class after the program has been compiled
![Page 32: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/32.jpg)
Questions ?
![Page 34: Dart](https://reader034.vdocuments.site/reader034/viewer/2022042423/53f9c32a8d7f72b82e8b4b8c/html5/thumbnails/34.jpg)
References
http://www.dartlang.org