0
JavaScript by bye : Working with Dart           Say! Hello Dart                         Anand Shankar
What is DartDart is a new open source web programminglanguage developed by Google. It was unveiled atthe GOTO conference,...
What is DartThe goal of Dart is ultimately to replaceJavaScript as the lingua franca of web developmenton the open web pl...
Advantages of Dart over              JavaScriptGood point is that it has native support.A very critical issue with JavaS...
Coding difference between   JavaScript and Dart
Code embedding          JavaScript                          Dart<script                          • <script   src=‘myscript...
Entry point         JavaScript                      Dart• Not required              • REQUIRED                            ...
Printing to the console         JavaScript                        Dart• console.log(‘Hello BCB);   • print(‘Hello BCB);
Code modularity         JavaScript                       Dart• No native implementation   • Defining library              ...
Variables          JavaScript                         Dart• var – mostly used for all     • Strongly supports types  types...
Collections          JavaScript                         Dart• No native JavaScript         • Set for unique item  equivale...
Function         JavaScript                              Dart• function fun(a, b, c) { return   • fun(a, b, c) => c;  c; }...
Function         JavaScript                        Dart• Does not have native       • myFun(x, [y, z])  support for named ...
For Each Loop         JavaScript                   Dart• Not available          • data.forEach((key, value){              ...
Classes         JavaScript                          Dart• function BCB(){               • class BCB {this.name=null;      ...
Constructors            JavaScript                          Dart• function BCB(x) {            • class BCB {this.x = x;   ...
Inheritance• JavaScript• function Person(name) {this.name = name;}• Person.prototype.greet = function() { return Hello,  +...
• Employee.prototype = new Person();  Employee.prototype.constructor = Employee; Employee.prototype.grantRaise =   functio...
• Dart• class Person {var name;Person(this.name);greet() => Hello, $name; }
class Employee extends Person { var salary;Employee(name, this.salary) : super(name);grantRaise(percent){ salary = (salary...
Operator Overloading         JavaScript                Dart• Not supported       • class Point {                      var ...
main(){var p1 = new Point(1, 1); var p2 = new Point(2, 2);var p3 = p1 + p2; print(p3);}
Advance for loop         JavaScript                  Dart• Not available        • For( var x in list)                     ...
Manipulating DOM          JavaScript                      Dart• var element =               • var element = new  document....
Regular expressions          JavaScript                 Dart• var email =           • var email =  test@example.com;      ...
• var invalidEmail =       • var invalidEmail =  f@il@example.com;        f@il@example.com;  invalidEmail.match(/@/     (n...
Exceptions Handling              JavaScript                           Dart• try { undefinedFunction();       • try { Math....
Ajax• JavaScriptvar client = new XMLHttpRequest; client.onreadystatechange = function() {if (this.readyState == 4) {proces...
client.open(GET, data.json); client.send();function processData(request) {console.log(The contents of your data:  +  reque...
• Dartvar xhr = new  XMLHttpRequest.getTEMPNAME("/data.json",  (req) { print("The contents of your data:  ${req.responseTe...
Run time program manipulation        JavaScript                                 Dart• Supports Eval                      •...
Questions ?
Thanks      Anand ShankarE-mail: com@ashankar.com    Twitter: anandvns   Facebook: anandvns
Referenceshttp://www.dartlang.org
Upcoming SlideShare
Loading in...5
×

Dart

1,504

Published on

Published in: Lifestyle, Technology
1 Comment
2 Likes
Statistics
Notes
  • A comparision of Dart with JavaScript presented in BCB12.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,504
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
27
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Dart"

  1. 1. JavaScript by bye : Working with Dart Say! Hello Dart Anand Shankar
  2. 2. What is DartDart is a new open source web programminglanguage developed by Google. It was unveiled atthe GOTO conference, October-2011.The current version is 0.10; released 07-June-2012.Dart helps developers to build structured modernweb apps.
  3. 3. What is DartThe goal of Dart is ultimately to replaceJavaScript as the lingua franca of web developmenton the open web platform.Dart is a class-based, object-oriented languagewith lexical scoping, closures, and optional statictyping.
  4. 4. Advantages of Dart over JavaScriptGood point is that it has native support.A very critical issue with JavaScript is handlingconcurrency. Dart has "isolates": these are used forhandling concurrency.
  5. 5. Coding difference between JavaScript and Dart
  6. 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. 7. Entry point JavaScript Dart• Not required • REQUIRED – main() { }
  8. 8. Printing to the console JavaScript Dart• console.log(‘Hello BCB); • print(‘Hello BCB);
  9. 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. 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. 11. Collections JavaScript Dart• No native JavaScript • Set for unique item equivalent for unique item collection. collection.
  12. 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. 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. 14. For Each Loop JavaScript Dart• Not available • data.forEach((key, value){ print(${key}, ${value}); });
  15. 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. 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. 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. 18. • Employee.prototype = new Person(); Employee.prototype.constructor = Employee; Employee.prototype.grantRaise = function(percent) {this.salary = (this.salary * percent).toInt(); }
  19. 19. • Dart• class Person {var name;Person(this.name);greet() => Hello, $name; }
  20. 20. class Employee extends Person { var salary;Employee(name, this.salary) : super(name);grantRaise(percent){ salary = (salary * percent).toInt();} }
  21. 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. 22. main(){var p1 = new Point(1, 1); var p2 = new Point(2, 2);var p3 = p1 + p2; print(p3);}
  23. 23. Advance for loop JavaScript Dart• Not available • For( var x in list) { print(x); }
  24. 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. 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. 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. 27. Exceptions Handling JavaScript Dart• try { undefinedFunction(); • try { Math.parseInt("three"); } catch(e) { }catch(BadNumberFormatExif (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 offinally { console.log(This runs exception"); } even if an exception is finally { print("This runs even if thrown); } an exception is thrown"); }
  28. 28. Ajax• JavaScriptvar client = new XMLHttpRequest; client.onreadystatechange = function() {if (this.readyState == 4) {processData(this);}}
  29. 29. client.open(GET, data.json); client.send();function processData(request) {console.log(The contents of your data: + request.responseText);}
  30. 30. • Dartvar xhr = new XMLHttpRequest.getTEMPNAME("/data.json", (req) { print("The contents of your data: ${req.responseText}"); });
  31. 31. Run time program manipulation JavaScript Dart• Supports Eval • Doesnt support eval() – eval(alert("hello from • Doesnt 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. 32. Questions ?
  33. 33. Thanks Anand ShankarE-mail: com@ashankar.com Twitter: anandvns Facebook: anandvns
  34. 34. Referenceshttp://www.dartlang.org
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×