A short taster session into the fundamental technologies powering the world wide web.
An introduction to JavaScript
Okay - we now have a pretty good idea of how to build a website. We know that HTML is for the content and structure and CSS makes our HTML look pretty. But our sites don't do very much at the moment, there is no interaction. Enter JavaScript.
Unlike HTML and CSS that are markup languages, JavaScript is a fully fledged programming language. This means that it can do stuff - like perform calculations and handle behaviour.
In this session we're going to look at how we can use JavaScript to manipulate something called the Document Object Model or DOM.
To demonstrate the JavaScript is a full programming language, let's quickly do some maths with it!
Manipulating the DOM
The DOM (Document Object Model) is the browsers internal representation of your HTML. When the browser loads the your page, it builds up a tree like representation of your HTML.
At the top of the tree is the opening <html> tag. This tag has two children, <head> and <body>
The body tag then contains all of the HTML elements that are displayed on your webpage.
It is our job to dynamically interact with these elements. But before we can interact with them we must know how to select them.
Introducing jQuery $
jQuery is a JavaScript library written on top of old school JavaScript. It makes common web development tasks much easier. It also happens to be much easier to learn. This doesn't mean it's not a proper tool though - jQuery is used on 50% of all websites!
We'll use jQuery to select our elements, and then manipulate them.
Adding jQuery to our Site
You'll now have jQuery on your site, so we should be able to test it out.
jQuery uses CSS selectors
jQuery uses CSS selectors to allow us to access elements of the DOM. Much like how CSS allows us to style things using these selectors, jQuery allows us to manipulate things.
Everything in jQuery starts by selecting elements, and to select elements you use the following syntax:
$("h1")
$("p")
$("#square")
So everything in jQuery starts with the $ symbol. Then you open a pair of parenthesis and in quotes enter your CSS selector.
The Script Tag
Okay - but I want to run JavaScript on my site permanently, not through the console!
Like CSS's <style> tag, JavaScript has its own tag too. All JavaScript code should be placed between a <script>...</script> set of tags.
Unlike the <style> tag, the <script> tag doesn't live in the head, rather it should be placed above the </body> tag.
Doing something once we've selected elements
So far we haven't done anything with our selected elements, that's going to change now.
jQuery offers us a whole host of manipulation methods that are all called the same way. Here are a few of them.
$("h1").hide()
$("h1").show()
$("h1").fadeOut()
$("h1").fadeIn()
$("h1").text("New text here")
$("h1").slideUp()
$("h1").slideDown()
$("h1").css("css-property", "value")
<script> tagFunctions
In JavaScript, a function is a named section of code that performs a particular task. A function can be thought of as a routing with a name.
You must declare a function before you can use it. For instance:
function hello() {
alert("Hello World")
}
The above code creates a function called hello. But putting this JavaScript in our application won't cause a pop up to appear. This is becuase we haven't called our function yet.
To call our function, we use the function name followed by a set of parenthesis. To call our hello function, we'd need to use hello()
We'll have a go at creating some functions now. All of the code we write below needs to live in the <script> tag.
function hideHeadings() { }$("h1") and we can hide everything selected with .hide()Event Handling
Okay - functions are fine, you get them, but they aren't that useful unless we can call them at particular times. That's where events come in.
When you navigate a website your web browser is constantly firing events. Events are simple messages such as "the mouse has clicked this button", "the enter key has been pressed" or "the mouse is hovering over this image".
But nothing is ordinarily listenening to these events, so they get ignored. Enter jQuery. jQuery makes is extremely easy to set up event listeners - things that listen for particular events happening on particular elements. And that's right, they use functions to do so!
$("selector").click(function_name);
Above, we are listening to click events on all elements that match the selector. When a click event happens we call the function_name() function.
function handleClick() {
alert("I have been clicked");
}
$("h1").click(handle_click);
In the above example, we are listing for click events on all h1 elements. When a click event happens we will call the handle_click() method that displays an alert on screen.
We can equally as easily listen for hover events, for example:
function myHoverEvent() {
$("p").text('I have been hovered in!')
}
$("p").hover(myHoverEvent);
The above example listens for the mouse to be hovering over all paragraph elements. When this occurs we call our myHoverEvent function that changes the text inside our paragraph elements to read "I have been hovered in!".
function displayPrice() { ... }$(this).text(). Your alert should now read: alert($(this).text())