Uploaded on

 

More in: Lifestyle , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • A comparision of Dart with JavaScript presented in BCB12.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,394
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
27
Comments
1
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JavaScript by bye : Working with Dart Say! Hello Dart Anand Shankar
  • 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. 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. 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. 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(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. Ajax• JavaScriptvar 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. • Dartvar xhr = new XMLHttpRequest.getTEMPNAME("/data.json", (req) { print("The contents of your data: ${req.responseText}"); });
  • 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. Questions ?
  • 33. Thanks Anand ShankarE-mail: com@ashankar.com Twitter: anandvns Facebook: anandvns
  • 34. Referenceshttp://www.dartlang.org