Successfully reported this slideshow.

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Javascript Libraries & Frameworks | Connor Goddard

  1. 1. var string1 = "Hello", string2 = "World"; var myLibrary = new ExampleLibrary(); var concatString = myLibrary.concat(string1, string2); var myFramework = new ExampleFramework(); myFramework.bind("loadPage", displayMessage); function displayMessage() { alert("Hello World!") }
  2. 2. #aber_ftw 12 Aug 05 Jul #aber_ftw CS25210 resit: Fri Aug 12th at 3pm (today!) is the deadline for uploading your web game and report. #aber_ftw The summer 2016 supplementary (resit) assignment is now available in Blackboard Edel Sherratt @edel_sherratt Edel Sherratt @edel_sherratt
  3. 3. Embed View on Twitter 27 Apr Felt someone should jump in.. Realtime news synchronisation #aber_ftw Connor Goddard @cgddrd Edel Sherratt @edel_sherratt
  4. 4. $("li").css("background-color","yellow").slideUp("slow");
  5. 5. $() $('p.text-label') // Returns jQuery object with all DOM elements that match. $(window.document) // Returns jQuery object representing the document. $('<p class="text-label">Hello World!</p>') // Returns jQuery object. $(printGreeting) // Invokes function once DOM is ready.
  6. 6. $("section").length; // Number of <section> elements within the body. $("section")[1]; // Access the second <section> element. $("section")[1].html("<p>Hello World!</p>"); // Set the innerHTML for the second <section> element.
  7. 7. $("section").selector; // Returns "section" $("section").context; // Most likely returns "document" $("section").jquery; // Returns jQuery version number (e.g. "1.4.2") $("section").parent(); // Returns jQuery object for <body> or perhaps <div>. $("li.selected").css("background-color", "red").siblings().css("background-color", "white"); $("ul").children().first(); // Returns first <li> element. // Could also do: $("li").first();
  8. 8. // Get the associated CSS property. $("h2").css("color") // Returns "rgb(45, 62, 79)". // Change the background-color CSS property for all <H2> elements. $("h2").css("background-color", "#47D591"); <H2>
  9. 9. // Change the "href" attribute of an <A> element. $("a").attr("href","http://www.qinusty.co.uk/dapstep.mp3"); // Update the content for the <A> element with the content of the <H2> element. $("a").text($("a").siblings("h2").text()); // Update the innerHTML for the <A> element with the content of the <H2> element. $("a").html("<i>" + $("a").siblings("h2").text() + "</i>"); Aber Comp Sci Homepage
  10. 10. // Iterate through all available <LI> elements and change their background colour. $("li").css("background-color", "red"); each() $("p").each(function(i) { $(this).css("background-color", "red"); $(this).append(" (that was li number " + i + ")"); })
  11. 11. // Add 'click' event handler on <LI> elements. $("li").on("click",function() { $(this).css("background-color","blue"); }); // Provide custom logic on <FORM> submit. $("form").on( "submit", function( event ) { // Perform custom action with form data. }); // 'Special' event triggered when DOM is ready. $(document).ready(function() { // Initalise component or display content. });
  12. 12. <script src="lib/js/jquery-1.12.3.min.js"></script> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  13. 13. <H1> <H1> <H1> onLoad() buttonpressed()
  14. 14. ng- {{ ... }} <!-- ng-app is used to "bootstrap" AngularJS, by designating the root element of the application --> <body ng-app=""> <div> <p>The sum of 5 + 5 is: {{ 5 + 5 }}</p> <!-- "The sum of 5 + 5 is: 10" --> </div> </body>
  15. 15. <div ng-app=""> <!-- ng-model binds the content of the input box to the property "name". --> <p>Name: <input type="text" ng-model="name"></p> <p>My name is: {{name}}></p> </div>
  16. 16. <div ng-app="" ng-controller="myController"> <p>First Name: <input type="text" ng-model="firstName"></p> <p>Surname: <input type="text" ng-model="surname"></p> <p>My full name is: {{firstName + " " + surname}}></p> </div> <script> var myApp = angular.module('myApp', []); // Define our new AngularJS controller. myApp.controller('myController', function($scope) { // $scope provides access to our model. $scope.firstName= "John"; $scope.surname= "Doe"; }); </script>
  17. 17.

×