Javascript Frameworks

JavaScript Frameworks Lecture 12 (Source: wikipedia, MIT OCW, and CS142 from Stanford University taught by Mendel Rosenblum) Disclaimer • The following represents my subjecMve view of the JavaScript frameworks landscape. It’s sMll evolving, so some of what we learn may be out of date by the Mme you graduate J • Unlike in the earlier lectures, we’ll not have Mme to go in depth into any one technology or framework – we’ll consider a broad overview • Some of this is more “factual” than conceptual JavaScript Frameworks • jQuery • Angular.js (also Backbone and Ember.js) • React.js jQuery • One of the most widely used JavaScript frameworks (created by John Resig, circa ‘06) • Include using <script src=“jquery.js”></script> • Makes it easier to navigate DOM, handle events and send AJAX messages – Does not aempt to superimpose higher level models on the applicaon – Can interoperate with nave JavaScript code as it’s just another library (for the most part) – Provides cross-browser compability Central AbstracMon in jQuery • $() to select DOM elements and/or handlers • Can do whatever you want insider the $() $(funcMon () { // when the page has loaded $('img').on('click', funcon () { // handle click event on any img element … }); }); Cascading funcMons • $ is just another JavaScript funcMon, but it also returns the object on which it is invoked, so you can invoke further methods on it. • This applies not only to the $ funcMon, but to other jQuery funcMons as well as below: $('div.test ').add('p.quote').addClass('blue').slideDown('slow'); jQuery: UMlity FuncMons • Prefixed with a “$.” (dollar and dot) • Examples: $.each, $.ajax $.ajax({ type: 'POST', url: '/process/submit.php', data: { name : 'John', locaon : 'Boston', }, }).done(funcon(msg) { alert('Data Saved: ' + msg); }).fail(funcMon(xmlHpRequest, statusText, errorThrown) { alert(‘Error’ + statusText); } jQuery: Closing thoughts • Very useful framework for geng around some of JavaScript’s ugliness in syntax • But most of its popularity comes from cross- plaorm compability which is not really that important these days • Design principles of Jquery can be incorporated without the whole shebang – Size and compability are other consideraons JavaScript Frameworks • jQuery • Angular.js (also Backbone and Ember.js) • React.js Angular.js • Model-View-Controller framework for JavaScript (along with Ember.js, Backbone.js) • Popularized by Google starMng about 2010. Has overtaken many other rival frameworks • Main idea: connect DOM to the JS code through a single declarave specificaon Model-View-Controller MODEL VIEW CONTROLLER Defines the Template that Defines data that will defines how funcMons that be used by the the data will be alter the data applicaon. shown to the in model user Data = model FuncMons = variables controller funcons 11 Model-View-Controller MODEL VIEW CONTROLLER Model Controller variables funcons Defines Legend: Uses 12 AngularJS Workflow Write view in Iterave process HTML (it’s not always immediately clear what Write model in model variables JavaScript and controller funcMons to define) Write controller in JavaScript 13 Defining the View: Write a Template in HTML <html ng-app="todoApp"> <head> … <script type="text/javascript" src=”js/angular.js"></script> <script type="text/javascript" src="js/controller.js"></script> </head> <body ng-controller="TodoController"> … <div>There are currently {{listSize}} items in the list</div> <div> <div ng-repeat="item in todoList"> {{item}} </div> </div> <input type="text" ng-model="userInput" /> <button>Add Item</button> </body> </html> 14 Including the AngularJS Library <html ng-app="todoApp"> <head> … <script type="text/javascript" src=”js/angular.js"></script> <script type="text/javascript" src="js/controller.js"></script> </head> <body ng-controller="TodoController"> … Opon 1: Opon 2: <div>There are currently {{listSize}} items in the list</div> <div> Download Type URL from <div ng-repeat="itemAngularJS in from todoList"> Angular website {{item}} angularjs.org and directly </div> </div> save into a file <input type="text" ng-model="userInput" /> <button>Add Item</button> </body> </html> 15 Indicang where the Angular Program is Rooted <html ng-app="todoApp"> <head> … <script type="text/javascript" src=”js/angular.js"></script> <scriptng-app type="text/: A special javascript" src="Name of the js/controller.js"></script> </head> <bodyAngular aribute ng-controller="TodoController">applicaon (will be … that indicates where defined in JS code <div>Therethe Angular program are currently {{listSize}}later) items in the list</div> <div> <divis rooted ng-repeat="item in todoList"> {{item}} </div> </div> <input type="text" ng-model="userInput" /> <button>Add Item</button> </body> </html> 16 Indicang where the Angular Program is Rooted <html ng-app="todoApp"> <head> … <script type="text/javascript" src=”js/angular.js"></script> <script type="text/javascript" src="js/controller.js"></script> </head>… <body<div ng-controller="ng-app=“otherAppTodoController”> "> Can place root in … any tag <div>There <div> are currently {{listSize}} items in the list</div> <div> Different Root <div ng-repeat="item in todoList"> In this case, Angular {{item}} </div> program only applies </div></div> to this tag and its </div> <input… type="text" ng-model="userInputdescendants" /> <button>Add Item</button> </body> </html> 17 Indicang where the Angular Program is Rooted <html ng-app="todoApp"> <head> … <script type="text/javascript" src=”js/angular.js"></script> <script type="text/javascript" src="js/controller.js"></script> </head> <body ng-controller="TodoControllerng-app in HTML tag "> … means we want <div>There are currently {{en-relistSize program to be }} items in the list</div> <div> <div ng-repeat="item in todoListAngular"> {{item}} </div> </div> <input type="text" ng-model="userInput" /> <button>Add Item</button> </body> </html> 18 ng-repeat <html ng-app="todoApp"> <head> Creates this div … ng-repeat: A element for each <scriptspecial Angular type="text/javascript" src=”js/angular.js"></script> <script type="text/javascript" src="jsitem in the /controller.jstodoList"></script>. </head>aribute (more on <body ngthis later…)-controller=" TodoController"> … <div>There are currently {{listSize}} items in the list</div> <div> <div ng-repeat="item in todoList"> {{item}} </div> </div> <input type="text" ng-model="userInput" /> <button>Add Item</button> </body> </html> 19 Two-Way Data Binding: Curly Braces <html ng-app="todoApp"> <head> … <script type="text/javascript" src=”js/angular.js"></script> <script type="text/javascript" src="js/controller.js"></script> </head> <body ng-controller="TodoController"> … <div>There are currently {{listSize}} items in the list</div> <div> <div ng-repeat="item in todoList"> {{item}} </div> </div> <input type="text" ng-model="userInput" /> <button>Add Item</button> </body> </html> 20 Two-Way Data Binding: Curly Braces <html ng-app="todoApp"> <head> … <script type="text/javascript" src=”js/angular.js"></script> <script type="text/javascript" src="js/controller.js"></script> </head> <body ng-controller="TodoController"> … <div>There are currently {{listSize}} items in the list</div> <div> <div ng-repeat="item in todoList"> {{item}} e.g., evaluates value </div> of listSize </div> whenever changes <input type="text" ng-model="userInput" /> <button>Add Item</button> are made to that </body> variable </html> 21 Two-Way Data Binding: Curly Braces <html ng-app="todoApp"> <head> … <script type="text/javascript" src=”js/angular.js"></script> <script type="text/javascript" src="js/controller.js"></script> </head> <body ng-controller="TodoController"> … <div>There are currently {{listSize}} items in the list</div> <div> <div ng-repeat="item in todoList"> Value of {{item}} listSize: 5 CHANGE Value of listSize: 6 </div> AUTOMATICALLy </div> UPDATE <inputIn the DOM: type="text" ng-model="userInputIn the DOM: " /> <button>AddThere are currently 5 items in the list Item</button> There are currently 6 items in the list </body> </html> 22 Two-Way Data Binding: Curly Braces <html ng-app="todoApp"> <head> … <script type="text/javascript" src=”js/angular.js"></script> <script type="text/javascript" src="js/controller.js"></script> </head> <body ng-controller="TodoController"> … <div>There are currently {{listSize}} items in the list</div> <div> <div ng-repeat="item in todoList"> {{item}}Two-Way Data Binding: Angular automacally updates the </div>DOM whenever model variables change </div> <input type="text" ng-model="userInput" /> <button>AddDOM is abstracted out from developer Item</button> è No DOM interacMons! </body> </html> 23 Two-Way Data Binding: ng-model <html ng-app="todoApp"> <head> … <script type="text/javascript" src=”js/angular.js"></script> <script type="text/javascript" src="js/controller.js"></script> </head> <body ng-controller="TodoController"> … ng-model: Value of <div>There are currently {{listSize}} items in the list</div> <div> userInput is bound to the <div ngvalue of the text input element-repeat="item in todoList"> {{item}} </div> </div> <input type="text" ng-model="userInput" /> <button>Add Item</button> </body> </html> 24 Two-Way Data Binding: ng-model <html ng-app="todoApp"> <head> … Text input element W a k e u p <script type="text/javascript" src=”js/angular.js"></script> <script type="text/javascript" src="js/controller.js"></script> </head> <body ng-controller="TodoController"> … Value of userInput : W a k e u p <div>There are currently {{listSize}} items in the list</div> <div> <div ng-repeat="item in todoList"> {{item}} </div>

Javascript Frameworks

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support