5. 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!")
}
6.
7. #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
12. $()
$('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.
13. $("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.
14. $("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();
15. // 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>
16. // 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
17. // 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 + ")");
})
18. // 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.
});
26. 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>
27. <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>
28. <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>
