Information and Communication Technology Department
UNIT 6
JavaScript
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript is computer programming language
commonly used to create interactive effects within web
browsers.
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript
We use it for these purposes:
● Updating and changing both HTML and CSS.
● Calculating, manipulating and validating data.
Markup Languages and Information Management Systems
Information and Communication Technology Department
Three ways to insert JavaScript
• Inside a tag
• Inside the <script> tag
• In an external .js file
Markup Languages and Information Management Systems
Information and Communication Technology Department
HTML Mouse Event Attributes
Attribute It fires when…
onclick Clicking on the element
ondblclick Double clicking on the element
onmousedown The mouse button is pressed down on the element
onmousemove The mouse pointer is moving over the element
onmouseout The mouse pointer moves out of the element
onmouseover The mouse pointer moves over the element
onmouseup The mouse button is released over the element
onwheel The mouse wheel rolls up or down over an element
Markup Languages and Information Management Systems
Information and Communication Technology Department
HTML Event Attributes
!
IT
RY <!DOCTYPE HTML>
T
<html lang="en">
<head></head>
<body>
<p>Click the button to display an alert box.</p>
<button onclick="alert(‘It is magic!’)">Hocus pocus!</button>
</body>
</html>
Markup Languages and Information Management Systems
Information and Communication Technology Department
HTML Event Attributes
1. Identify the JavaScript code.
2. Reuse the previous code to see how the different event
attributes work.
3. Visit this page to learn more about event attributes.
4. What other kinds of event attributes are available?
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript code inside <script>
!
IT
Y <!DOCTYPE HTML>
TR
<html lang="en">
<head></head>
<body>
<p>Click the button to display an alert box.</p>
<button onclick="message()">Hocus pocus!</button>
<script>
function message() {
alert("It is magic!");
}
</script>
</body>
</html>
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript code inside <script>
The <script> tag can be placed in the <body>, or in
the <head> section of an HTML page, even in both.
Bearing in mind that the browser reads an HTML file
from the beginning to the end, what is the most
appropriate place to write the <script> tag?
Markup Languages and Information Management Systems
Information and Communication Technology Department
External JavaScript File
When the JavaScript code is not short, it is advisable to write it
apart from the HTML code. We will use a .js file.
In order to link the HTML file to the JavaScript one, we will also use
the <script> tag but in a different way:
<script src=”file_path”></script>
Markup Languages and Information Management Systems
Information and Communication Technology Department
External JavaScript File
Split the code in slide number 8 into two different
files (HTML and JavaScript). Then link them.
Markup Languages and Information Management Systems
Information and Communication Technology Department
Comments
JavaScript comments can be written like this:
● For one line comments, we can use // Comment
● For any part of the code /* Comment */
Markup Languages and Information Management Systems
Information and Communication Technology Department
Changing HTML content
!
IT
RY <!DOCTYPE HTML>
T
<html lang="en">
<head></head>
<body>
<p id="message">Click the button to change me.</p>
<button onclick =
'[Link]("message").innerHTML = "It is magic!"'>Hocus
pocus!</button>
</body>
</html>
Markup Languages and Information Management Systems
Information and Communication Technology Department
Changing HTML Attribute Values
!
IT
RY <!DOCTYPE HTML>
T
<html lang="en">
<head></head>
<body>
<p>Click the button to change the type of input.</p>
<input type="text" id="info">
<button onclick = '[Link]("info").type =
"password"'>Hocus pocus!</button>
</body>
</html>
Markup Languages and Information Management Systems
Information and Communication Technology Department
Changing CSS Values
!
IT
RY <!DOCTYPE HTML>
T
<html lang="en">
<head></head>
<body>
<p id=”message”>Click the button to change my colour.</p>
<button onclick =
'[Link]("message").[Link] = "red"'>Hocus
pocus!</button>
</body>
</html>
Markup Languages and Information Management Systems
Information and Communication Technology Department
Changing web pages
Write a document that, using buttons, allows to:
● Hide an element
● Display a hidden element
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript Output
We can display data using:
● innerHTML, to write HTML code inside an element.
● innerText, to write text inside an element.
● [Link](), to write into the HTML output..
● [Link](), to write into an alert box.
● [Link](), to write into the browser console.
Markup Languages and Information Management Systems
Information and Communication Technology Department
!
JavaScript Output
IT
Y
TR <!DOCTYPE HTML>
<html lang="en">
<head></head>
<body>
<div id=”message”></div>
<script>
[Link]("message").innerHTML =
“<h1>Ta-da!</h1>”;
</script>
</body>
</html>
This is the most common way to display data in HTML.
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript Output
!
IT
Y
TR <!DOCTYPE HTML>
<html lang="en">
<head></head>
<body>
<p id=”message”></p>
<script>
[Link]("message").innerText = “Ta-da!”;
</script>
</body>
</html>
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript Output
What are the main similarity and the main difference
between innerHTML and innerText?
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript Output
!
IT
Y
TR <!DOCTYPE HTML>
<html lang="en">
<head></head>
<body>
<span>The magician had a cape, a top hat, a pair of
gloves…</span>
<script>
[Link](“ and a wand!”);
</script>
</body>
</html>
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript Output
!
IT
Y
TR <!DOCTYPE HTML>
<html lang="en">
<head></head>
<body>
<span>The magician had a cape, a top hat, a pair of
gloves…</span>
<button onclick = '[Link](“and a wand!”)'>Hocus
pocus!</button>
</body>
</html>
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript Output
What happened the last time you used
[Link]?
It is only advisable to use [Link] for
testing purposes.
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript Output
!
IT
Y
TR <!DOCTYPE HTML>
<html lang="en">
<head></head>
<body>
<p>Click to find out what is inside the magician’s hat.
</p>
<button onclick = '[Link](“A rabbit!”)'>Hocus
pocus!</button>
</body>
</html>
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript Output
The window keyword is optional, so we can write
just alert().
Remove this keyword from the former code and
check the output.
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript Output
!
IT
Y
TR <!DOCTYPE HTML>
<html lang="en">
<head></head>
<body>
<span>The magician had a cape, a top hat, a pair of gloves…
</span>
<script>
[Link](“and a wand!”);
</script>
</body>
</html>
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript Output
What is the output when using [Link]()?
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript Output
After running the previous code, follow these steps:
1. Click F12.
2. Select “console”.
3. Read the information.
4. Have you found the text in the [Link]
braces?
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript Output
This information is not available for the web users
but only for developers, so [Link]() is
normally used for debugging purposes.
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript Output
Apart from the screen, JavaScript does not allow
to access other output devices.
However, it is possible to print the content of the
current web page using [Link]().
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript Output
!
IT
Y
TR <!DOCTYPE HTML>
<html lang="en">
<head></head>
<body>
<p>The magician had a cape, a top hat, a pair of gloves, and a
wand.</p>
<script>
[Link]();
</script>
</body>
</html>
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript
Write a web page that takes a person’s birth year
and delivers a message with their age by the end
of the current year.
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript
Write a web page that takes two numbers and
delivers a message with their product.
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript Values
NUMBERS STRINGS BOOLEANS
3025
-75 “Artificial Intelligence” true
14.36
-68.266 ‘Artificial Intelligence’ false
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript Values
Values can be stored in:
● Constants (fixed values)
● Variables (values that can change)
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript Storing Data
CONSTANTS VARIABLES
const PI = 3.14; let age;
let age = 18;
const TAX = “IVA”; let name = “Jane”;
let age = 18, name = “Jane”;
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript Storing Data
The names of constants and variables must follow these rules:
● They start with a letter, _, or $.
● They can contain digits after the first character.
● They cannot be a reserved keyword (let, const, if, etc.).
● They are case-sensitive.
Markup Languages and Information Management Systems
Information and Communication Technology Department
JavaScript Operators
Assignment operators Arithmetic operators
= - + * ** / %
+= -= -= **= /= %= -- ++
Comparison operators Logical operators
== === != !==
< <= > >= && || !
Markup Languages and Information Management Systems