Unit IV: JavaScript
Learning Objectives
Understand what JavaScript is and why it is important
Event handling with JavaScript
Functions in JavaScript
Form validation using JavaScript
Understand the jQuery library
Understand the uses of Ajax
Understand the uses of JSON
Introduction
JavaScript is the programming language of the Web.
NOT Java
And not related to Java
It is used to program the behaviour of web pages
Invented 1995 but became an ECMA standard in 1997
ECMAScript is the official name of the language
Basic JS Code
JS Variables
var Declares a variable
let Declares a block variable
cons Declares a block constant
t
JavaScript Operators
JavaScript uses arithmetic operators ( + - * / ) to compute values
JavaScript uses an assignment operator ( = ) to assign values to variables
Logical operators
Comments
Code after double slashes // or between /* and */ is treated as a comment.
Comments are ignored, and will not be executed:
Functions in JavaScript
<script>
function myFunction() {
[Link]("demo").innerHTML = "Paragraph changed.";
}
</script>
<button type="button" onclick="myFunction()">Try it</button>
Conditional Statements in JavaScript
If statement
if (condition) {
// block of code to be executed if the condition is true
}
if (hour < 18) {
greeting = "Good day";
}
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
switch
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
For loop
for (let i = 0; i < [Link]; i++) {
text += cars[i] + "<br>";
}
While loop
while (i < 10) {
text += "The number is " + i;
i++;
}
What can you do using JS in web pages?
1. Change HTML Content
One of many JavaScript HTML methods is getElementById().
[Link]("demo").innerHTML = "Hello JavaScript";
2. Change CSS Styles (CSS)
Changing the style of an HTML element, is a variant of changing an HTML attribute
[Link]("demo").[Link] = "35px";
3. Animation
For example hiding HTML elements can be done by changing the display style
[Link]("demo").[Link] = "none";
[Link]("demo").[Link] = "block";
4. Better data visualisation
Through plotting graphs and making use of other visualisation tools
5. Create events in pages
Creates events in pages
Where to place JS code
Inline JS
<element event=“some JavaScript code or function call>
Eg.
<p onclick="alert('Hello World!')">Click me and see what happens</p>
Internal JS - Within <head> or <body> tag
In HTML, JavaScript code is inserted between <script> and </script> tags.
Best place to place it is just before the </body>
<script>
[Link]("demo").innerHTML = "My First JavaScript";
</script>
External JavaScript
<script src="[Link]"></script>
[Link]
function myFunction() {
[Link]("demo").innerHTML = "Paragraph changed.";
}
External JavaScript Advantages
It separates HTML and code
It makes HTML and JavaScript easier to read and maintain
Cached JavaScript files can speed up page loads
HTML DOM
DOM stands for Document Object Model
It is a W3C standard
It allows programs and scripts to dynamically access and update and update content,
structure, and style of a document
DOM standard is in 3 parts
1. Core DOM – standard model for all document types
2. XML DO M – standard model for XML documents
3. HTML DOM – standard model for HTML documents
HTML DOM
Programming interface for HTML
It defines:
1. HTML elements as objects
2. Properties for HTML elements (objects)
3. Methods to access all HTML elements (objects)
4. Events for all HTML elements (objects)
It is a standard for how to get, change, add or delete HTML elements
How to get, update and delete elements
getElementById() - example
getElementByClassName() - example
getElementByTagName() – li, *, ()[0]
querySelector() - .example, only gets the first
querySelectorAll()
var name = [Link]("p1").innerHTML
[Link]("first_p").innerHTML = "You are in the right
direction, start registering"
name = [Link]("name").value
[Link]("first_p").[Link] = "green"
Event handling with JS
HTML events are "things" that happen to HTML elements.
When JavaScript is used in HTML pages, JavaScript can "react" on these events.
An HTML event can be something the browser does, or something a user does.
H ere are some examples of HTML events:
An HTML web page has finished loading
An HTML input field was changed
An HTML button was clicked
Often, when events happen, you may want to do something.
JavaScript lets you execute code when events are detected.
HTML allows event handler attributes, with JavaScript code, to be added to HTML
elements.
<element event=“some JavaScript code or function call>
Common HTML Events
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML element
Onmouseout The user moves the mouse away from an HTML element
Onkeydown The user pushes a keyboard key
Onload The browser has finished loading the page
Alert, prompt and confirm box in JS
alert(“MY name is”)
Debugging JS in web page
For debugging purposes, you can call the [Link]() method in the browser to display data.
jQuery
jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn.
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
JQuery Effects
jQuery hide() and show()
With jQuery, you can hide and show HTML elements with the hide() and show() methods:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
jQuery fadeIn() / fadeOut() Method
The jQuery fadeOut() method is used to fade out a visible element.
$(selector).fadeOut(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following
values: "slow", "fast", or milliseconds.
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeToggle() Method
The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods.
jQuery fadeTo() Method
The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1).
$(selector).fadeTo(speed,opacity,callback);
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
jQuery Slide
The jQuery slide methods slide elements up and down.
With jQuery you can create a sliding effect on elements.
jQuery has the following slide methods:
slideDown()
slideUp()
slideToggle()
Ajax
AJAX = Asynchronous JavaScript And XML.
AJAX is not a programming language.
AJAX just uses a combination of:
A browser built-in XMLHttpRequest object (to request data from a web
server)
JavaScript and HTML DOM (to display or use the data)
AJAX is a developer's dream, because you can:
Update a web page without reloading the page
Request data from a server - after the page has loaded
Receive data from a server - after the page has loaded
Send data to a server - in the background
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
Function loadDoc()
function loadDoc() {
var xhttp = new XMLHttpRequest();
[Link] = function() {
if ([Link] == 4 && [Link] == 200) {
[Link]("demo").innerHTML = [Link];
}
};
[Link]("GET", "ajax_info.txt", true);
[Link]();
}
ajax_info.txt
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a technique for accessing web servers from a web page.</p>
<p>AJAX stands for Asynchronous JavaScript And XML.</p>
How Ajax works
1. An event occurs in a web page (the page is loaded, a button is clicked)
2. An XMLHttpRequest object is created by JavaScript
3. The XMLHttpRequest object sends a request to a web server
4. The server processes the request
5. The server sends a response back to the web page
6. The response is read by JavaScript
7. Proper action (like page update) is performed by JavaScript
JSON
JSON stands for JavaScript Object Notation
JSON is a text format for storing and transporting data
JSON is "self-describing" and easy to understand
'{"name":"John", "age":30, "car":null}'
It defines an object with 3 properties:
name
age
car
Each property has a value.
If you parse the JSON string with a JavaScript program, you can access the data as an object
The JSON format is syntactically similar to the code for creating JavaScript objects. Because
of this, a JavaScript program can easily convert JSON data into JavaScript objects.
Since the format is text only, JSON data can easily be sent between computers, and used by
any programming language.
JavaScript has a built in function for converting JSON strings into JavaScript objects:
[Link]()
JavaScript also has a built in function for converting an object into a JSON string:
[Link]()
[Link]
Using HTML, [Link] and any other web scripting tools of your choice, design a webpage to
show the following:
a) A heading labelled Practical Assignment 1 (5)
b) A table showing your group members first names, surnames and registration numbers
(5)
c) A paragraph discussing the relevance of the HTML Canvas tag. (10)
d) A bar chart showing any Bioinformatics data visualisation exercise of your choice.
Include an italised paragraph at the top of the graph describing the scenario. (30)
e) A line chart showing any Bioinformatics data visualisation exercise of your choice.
Include a paragraph with bold text at the top of the graph describing the scenario.
(30)
Turn in your work as a single zipped file. Extra marks will be award for following
instructions, innovation, visually appealing designs and code cleanliness. (20)