javascript libraries & frameworks | connor goddard
Post on 14-Apr-2017
76 Views
Preview:
TRANSCRIPT
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!")
}
#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
Embed View on Twitter
27 Apr
Felt someone should jump in.. Realtime news synchronisation #aber_ftw
Connor Goddard @cgddrd
Edel Sherratt @edel_sherratt
$("li").css("background-color","yellow").slideUp("slow");
$()
$('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.
$("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.
$("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();
// 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>
// 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
// 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 + ")");})
// 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.
});
<script src="lib/js/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<H1>
<H1>
<H1> onLoad()
buttonpressed()
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>
<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>
<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>
™
top related