STIC I

Interactive Applications with JavaScript

Front-end web development

Reminder: course perspective

JavaScript between Computational Thinking and Interaction

What is programming (1)

“...est une solution automatisée qui permet à des utilisateurs d’obtenir, à partir de certains inputs, des outputs qui contribuent à résoudre un problème initial ou à répondre à un besoin.”

— EduTechWiki

What is programming (2)

What is programming (3)

Programming comes down to...

How to insctruct the machine

Since you don't have to deal with binary code anymore, the choice of the programming language/technology depends on what is your intention?

Develop interactive applications to foster learning.

Why JavaScript

It was meant to create interaction in the web by its creator
It is interpreted in the browser and integrated with HTML5
It is relatively easy compared to other languages
It can be used outside the browser

The importance of the environment

It determines what you can do and where it happens.

JavaScript and the browser

<!DOCTYPE html>
<html lang="en">
<head>
	<title>An HTML page</title>
	<meta charset="UTF-8">
	<!-- Download of the CSS -->
	<link href="assets/css/style.css" rel="stylesheet">
</head>

<body>
	<!-- Download of the JS -->
	<script src="assets/js/app.js"></script>
</body>
</html>

With the page you download the instructions!

The window global object

JavaScript is allowed to instruct the browser on what to do through the window object

Open the console in your browser F12
Type window
Then type window.innerHeight
Then type window.location.href

Access to the document (page)

Inside the window object, you have the window.document object which gives access to the DOM.

Type window.document in the console
Then type just document
Now type document.title
Then type document.title = 'I have changed the title!'
Finally type document.body

Manipulate the DOM

Through the access to the document object, you can manipulate the HTML element of a page.

Type document.getElementById('slideTitle').innerHTML
Now type document.getElementById('slideTitle').innerHTML = 'We can do better!'

Instructions for this presentation

This presentation uses JavaScript code from Reveal.js, which means that you have downloaded the code with the presentation.

Type Reveal in your console
Now type Reveal.getTotalSlides()
And finally type Reveal.next()

Easy, isn't it?

Now look at the HTML code of the button below.

<button onclick="Reveal.next()">Next slide</button>

What happens when you click on it? Try...

More difficult...

Another button, there is no onclick though...

<button id="logHelloBtn">Log Hello to the console</button>

But with the page you have downloaded this code...

//Identify the interactive element (button)
var myBtn = document.getElementById('logHelloBtn');
//Add an event listener that triggers the behavior
myBtn.addEventListener('click', function () {
	//Show a feedback in the console
	console.log('Hello at ' + new Date());
});

Interaction

Hot to create an I/O interaction

INPUT X

Identify the button to be clicked on

F(X) = Y

When clicked, say Hello with the current date

OUTPUT Y

Show the message in the console

Make this count...

See the Pen Client Side JavaScript basic example by Mattia A Fritz ( @mafritz) on CodePen.

Open this example in Codepen.io