Variable Declaration in JavaScript and Its Impact on Web Design

D

e

s

i

g

n

a

n

d

I

m

p

l

e

m

e

n

t

a

t

i

o

n

o

f

O

n

l

i

n

e

B

e

h

a

v

i

o

r

a

l

E

x

p

e

r

i

m

e

n

t

s

nodeGame.org

Stefano Balietti

MZES and Heidelberg

More

JavaScript

@balietti

@nodegameorg

stefanobalietti.com@gmail.com

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

I

n

t

e

r

n

a

l

V

a

l

i

d

i

t

y

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

E

x

t

e

r

n

a

l

V

a

l

i

d

i

t

y

Telescope:

From Land to Sky

Experiments:

From Lab to Real Life

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

I

n

d

u

c

e

d

V

a

l

u

e

T

h

e

o

r

y

Monotonicity

Salience

Dominance

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

COMPLEXITY OF EXECUTION

Survey

Experiments

Game-Based

Asynchronous

Experiments

Game-Based

Synchronous

Experiments

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

D

r

o

p

o

u

t

s

F

i

r

s

t

E

x

e

r

c

i

s

e

!

Open the 

JavaScript console 

(Ctrl-Shift-I or Right click / inspect element)

F

i

r

s

t

E

x

e

r

c

i

s

e

!

F

i

r

s

t

E

x

e

r

c

i

s

e

!

Great tutorial from novice to JavaScript Ninja:

http://javascript.info/

F

i

r

s

t

E

x

e

r

c

i

s

e

!

•

Variables

•

Objects

•

Functions

•

Arrays

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

Variables

var message = 'Hello!';

// value changed.

message = 'World!';

alert(message);

http://javascript.info/

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

var user = {

  name: "John", // by key "name" store value "John"

  age: 30       // by key "age" store value 30

};

http://javascript.info/

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

var user = {

  name: "John", // by key "name" store value "John"

  age: 30       // by key "age" store value 30

};

// Access a property.

user

.

name; // John

// We now add a new property

// Note! JavaScript is case sensitive

user.isAdmin = true;

http://javascript.info/

P

r

o

t

o

t

y

p

e

v

s

P

r

o

p

e

r

t

y

for (var property in user) {

if (user.hasOwnProperty(property)) 

{

    console.log(property + ': ' + user[property]);

}

}

// Output.

// name: John

// isAdmin: true

for (var property in user) {

if (user.hasOwnProperty(property)) 

{

    console.log(property + ': ' + user[property]);

}

}

// Output.

// name: John

// isAdmin: true

P

r

o

t

o

t

y

p

e

v

s

P

r

o

p

e

r

t

y

for (var property in user) {

if (user.hasOwnProperty(property)) 

{

    console.log(property + ': ' + user[property]);

}

}

// Output.

// name: John

// isAdmin: true

P

r

o

t

o

t

y

p

e

v

s

P

r

o

p

e

r

t

y

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S



V

a

r

i

a

b

l

e

s



M

e

t

h

o

d

s

(

o

r

F

u

n

c

t

i

o

n

s

)



O

b

j

e

c

t

s



A

r

r

a

y

s

// Functions are reusable blocks of codes.

function showPerson(person) {

    var message = 'Hello, ';

    message = message + 'person.name';

    alert(message);

}

// Execute the function.

// Remember! We have already defined

// the variable user before.

showPerson(user);

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S



V

a

r

i

a

b

l

e

s



M

e

t

h

o

d

s

(

o

r

F

u

n

c

t

i

o

n

s

)



O

b

j

e

c

t

s



A

r

r

a

y

s

// Functions are reusable blocks of codes.

function showPerson(person) {

    var message = 'Hello, ';

    message = message + 'person.name';

    alert(message);

}

// Execute the function.

// Remember! We have already defined

// the variable user before.

showPerson(user);

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S



V

a

r

i

a

b

l

e

s



M

e

t

h

o

d

s

(

o

r

F

u

n

c

t

i

o

n

s

)



O

b

j

e

c

t

s



A

r

r

a

y

s

function showPerson2(person) {

    var message = 'Hello, ';

    message = message + 'person.name';

    if (person.isAdmin === true) {

        message += 'I notice that you are an admin';

    }

    alert(message);

}

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S



V

a

r

i

a

b

l

e

s



M

e

t

h

o

d

s

(

o

r

F

u

n

c

t

i

o

n

s

)



O

b

j

e

c

t

s



A

r

r

a

y

s

function showPerson2(person) {

    var message = 'Hello, ';

    message = message + 'person.name';

    if (person.isAdmin === true) {

        message += 'I notice that you are an admin';

    }

    alert(message);

}

=

=

v

s

=

=

=

•

https://dorey.github.io/JavaScript-Equality-Table/

https://dorey.github.io/JavaScript-Equality-Table/

===

==

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

var fruits = [

"Apple",

"Orange",

"Pear",

"Lemon"

];

http://javascript.info/

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

var fruits = [

"Apple",

"Orange",

"Pear",

"Lemon"

];

fruits.length; // 4

fruits[2]; // "Pear"

http://javascript.info/

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

var fruits = [

"Apple",

"Orange",

"Pear",

"Lemon"

];

fruits.length; // 4

fruits[2]; // "Pear"

http://javascript.info/

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

var fruits = [ "Apple", "Orange",

               "Pear", "Lemon" ];

var message  = 'I like ';

// This is a "for loop".

for (var i = 0 ; i < fruits.length ; i++) {

   // Code to be added here.

}

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

var fruits = [ "Apple", "Orange",

               "Pear", "Lemon" ];

var message  = 'I like ';

// This is a "for loop".

for (var i = 0 ; i < fruits.length ; i++) {

   // Code to be added here.

}

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

var fruits = [ "Apple", "Orange",

               "Pear", "Lemon" ];

var message  = 'I like ';

// This is a "for loop".

for (var i = 0 ; i < fruits.length ; i++) {

}

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

var fruits = [ "Apple", "Orange",

               "Pear", "Lemon" ];

var message  = 'I like ';

// This is a "for loop".

for (

var i = 0 

; i < fruits.length ; i++) {

}

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

var fruits = [ "Apple", "Orange",

               "Pear", "Lemon" ];

var message  = 'I like ';

// This is a "for loop".

for (var i = 0 ; 

i < fruits.length 

; i++) {

}

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

var fruits = [ "Apple", "Orange",

               "Pear", "Lemon" ];

var message  = 'I like ';

// This is a "for loop".

for (var i = 0 ; i < fruits.length ; 

i++

) {

}

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

var fruits = [ "Apple", "Orange",

               "Pear", "Lemon" ];

var message  = 'I like ';

// This is a "for loop".

for (var i = 0 ; i < fruits.length ; i++) {

    message += fruits[i] + ',';

}

alert(message);

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

var fruits = [ "Apple", "Orange",

               "Pear", "Lemon" ];

var message  = 'I like ';

// This is a "for loop".

for (var i = 0 ; i < fruits.length ; i++) {

    message += fruits[i] + ',';

}

alert(message);

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

var fruits = [ "Apple", "Orange",

               "Pear", "Lemon" ];

var message  = 'I like ';

// This is a "for loop".

for (var i = 0 ; i < fruits.length ; i++) {

    message += fruits[i] + ',';

}

alert(message);

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

var fruits = [ "Apple", "Orange",

               "Pear", "Lemon" ];

var message  = 'I like ';

// This is a "for loop".

for (var i = 0 ; i < fruits.length ; i++) {

    message += fruits[i] + ',';

}

alert(message);

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

var message  = 'I like ';

// This is a "for loop".

for (var i = 0 ; i < fruits.length ; i++) {

    message += fruits[i];

    if (i < (fruits.length – 1 )) {

        message += ', ';

    }

    else {

        message += '.';

    }

}

alert(message);

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

Quotation mark, they enclose strings

and they are mostly the same in JS

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

<HTML>

    <HEAD>

         <LINK>

         <SCRIPT>

    </HEAD>

<BODY>

    …

    </BODY>

</HTML>

DOM Tree

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

<P>

<DIV>

<SPAN>

Container Tags

https://stackoverflow.com/questions/30879707/why-is-a-div-called-a-div-why-is-a-span-called-a-span

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

<STYLE>

<LINK>

Style Tags

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

CSS (Cascading Style Sheets)

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

CSS (Cascading Style Sheets)

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

Script Tags 

<SCRIPT>

F

i

r

s

t

E

x

e

r

c

i

s

e

!

Go to Google.com and manipulate the page elements programmatically:

// Fetch the HTML element with given id.

var logo = 

document

.

getElementById

("hplogo");

// Change one of its attributes (pick any image you like).

a.srcset = 

"https://nodegame.org/images/Logo_Square_with_dots.png";

// Defines an onclick event-handler.

a.

onclick

 = function() {

   // Redirect to a new page.

window

.location.href = "https://nodegame.org";

};

F

i

r

s

t

E

x

e

r

c

i

s

e

!

Go to Google.com and manipulate the page elements programmatically:

// Fetch the HTML element with given id.

var logo = 

document

.

getElementById

("hplogo");

// Change one of its attributes (pick any image you like).

a.srcset = 

"https://nodegame.org/images/Logo_Square_with_dots.png";

// Defines an onclick event-handler.

a.

onclick

 = function() {

   // Redirect to a new page.

window

.location.href = "https://nodegame.org";

};

How to change the image displayed?

F

i

r

s

t

E

x

e

r

c

i

s

e

!

Go to Google.com and manipulate the page elements programmatically:

// Fetch the HTML element with given id.

var logo = 

document

.

getElementById

("hplogo");

// Change one of its attributes (pick any image you like).

logo.srcset = 

"https://nodegame.org/images/Logo_Square_with_dots.png";

// Defines an onclick event-handler.

a.

onclick

 = function() {

   // Redirect to a new page.

window

.location.href = "https://nodegame.org";

};

F

i

r

s

t

E

x

e

r

c

i

s

e

!

Go to Google.com and manipulate the page elements programmatically:

// Fetch the HTML element with given id.

var logo = 

document

.

getElementById

("hplogo");

// Change one of its attributes (pick any image you like).

logo.srcset = 

"https://nodegame.org/images/Logo_Square_with_dots.png";

// Defines an onclick event-handler (anonymous function).

logo.

onclick

 = function() {

   // Redirect to a new page.

window

.location.href = "https://nodegame.org";

};

Let's do Something Here!

F

i

r

s

t

E

x

e

r

c

i

s

e

!

Go to Google.com and manipulate the page elements programmatically:

// Fetch the HTML element with given id.

var logo = 

document

.

getElementById

("hplogo");

// Change one of its attributes (pick any image you like).

logo.srcset = 

"https://nodegame.org/images/Logo_Square_with_dots.png";

// Defines an onclick event-handler (anonymous function).

logo.

onclick

 = function() {

   // Redirect to a new page.

window

.location.href = "https://nodegame.org";

};

F

i

r

s

t

E

x

e

r

c

i

s

e

!

// Create a new DIV element.

var myDiv = 

document

.

createElement

("div");

// Add something inside.

myDiv.innerHTML = 'I am cool div.';

// Add the element to the page.

document.body.

appendChild

(myDiv);

F

i

r

s

t

E

x

e

r

c

i

s

e

!

// Create a new DIV element.

var myDiv = 

document

.

createElement

("div");

// Add something inside.

myDiv.innerHTML = 'I am cool div.';

// Add the element to the page.

document.body.

appendChild

(myDiv);

F

i

r

s

t

E

x

e

r

c

i

s

e

!

// Create a new DIV element.

var myDiv = 

document

.

createElement

("div");

// Add something inside.

myDiv.innerHTML = 'I am cool div.';

// Add the element to the page.

document.body.

appendChild

(myDiv);

F

i

r

s

t

E

x

e

r

c

i

s

e

!

// Add a SPAN element inside our DIV.

var mySpan = 

document

.

createElement

("span");

// Add something inside.

mySpan.innerHTML = 'I am a child of myDiv.';

// Add the element to the page.

myDiv.

appendChild

(mySpan);

F

i

r

s

t

E

x

e

r

c

i

s

e

!

// Add a SPAN element inside our DIV.

var mySpan = 

document

.

createElement

("span");

// Add something inside.

mySpan.innerHTML = 'I am a child of myDiv.';

// Add the element to the page.

myDiv.

appendChild

(mySpan);

F

i

r

s

t

E

x

e

r

c

i

s

e

!

// Add a SPAN element inside our DIV.

var mySpan = 

document

.

createElement

("span");

// Add something inside.

mySpan.innerHTML = 'I am a child of myDiv.';

// Add the element to the page.

myDiv.

appendChild

(mySpan);

However, did you know that

you can change this

behavior with a CSS

"display" rule?

F

i

r

s

t

E

x

e

r

c

i

s

e

!

// Add a SPAN element inside our DIV.

var mySpan = 

document

.

createElement

("span");

// Add something inside.

mySpan.innerHTML = 'I am a child of myDiv.';

// Add the element to the page.

myDiv.

appendChild

(mySpan);

F

i

r

s

t

E

x

e

r

c

i

s

e

!

// Add a SPAN element inside our DIV.

var mySpan = 

document

.

createElement

("span");

// Add something inside.

mySpan.innerHTML = 'I am a child of myDiv.';

// Add the element to the page.

myDiv.

appendChild

(mySpan);

F

i

r

s

t

E

x

e

r

c

i

s

e

!

Every element in the DOM tree has a "parent"

element and might have one or more "children"

elements.

appendChild

 is a method available in every

HTML element to add a 

new

 element 

at the

bottom 

of the list of its children.

https://en.wikipedia.org/wiki/Document_Object_Mode

F

i

r

s

t

E

x

e

r

c

i

s

e

!

Every element in the DOM tree has a "parent"

element and might have one or more "children"

elements.

appendChild

 is a method available in every

HTML element to add a 

new

 element 

at the

bottom 

of the list of its children.

https://en.wikipedia.org/wiki/Document_Object_Mode

Bonus question. What happens if you

append an element that is already

appended somewhere in the DOM

under a new parent?

F

i

r

s

t

E

x

e

r

c

i

s

e

!

// Let's start over. Clear the content of the body.

document.body.innerHTML = '';

document.body.appendChild(myDiv);

// Change the font color.

myDiv.style.color = 'red';

// Change the font color.

myDiv.style.background = 'red';

Any Idea How to Do It?

F

i

r

s

t

E

x

e

r

c

i

s

e

!

// Let's start over. Clear the content of the body.

document.body.innerHTML = '';

document.body.appendChild(myDiv);

// Change the font color.

myDiv.style.color = 'red';

// Change the font color.

myDiv.style.background = 'red';

F

i

r

s

t

E

x

e

r

c

i

s

e

!

// Let's start over. Clear the content of the body.

document.body.innerHTML = '';

// Re-add myDiv.

document.body.appendChild(myDiv);

// Change the font color.

myDiv.style.color = 'red';

// Change the font color.

myDiv.style.background = 'red';

F

i

r

s

t

E

x

e

r

c

i

s

e

!

// Let's start over. Clear the content of the body.

document.body.innerHTML = '';

// Re-add myDiv.

document.body.appendChild(myDiv);

// Change the font color.

myDiv.style.color = 'red';

// Change the font color.

myDiv.style.background = 'red';

F

i

r

s

t

E

x

e

r

c

i

s

e

!

// Let's start over. Clear the content of the body.

document.body.innerHTML = '';

// Re-add myDiv.

document.body.appendChild(myDiv);

// Change the font color.

myDiv.style.color = 'red';

// Change the background color.

myDiv.style.background = 'lightblue';

Will it Change the Background

Of the SPAN as well?

F

i

r

s

t

E

x

e

r

c

i

s

e

!

// Change the span background color

mySpan.style.background = 'white';

// Make font size larger.

myDiv.style.font-size = '30px';

// The – (minus) is an arithmetic operator.

// We must access the object as an array, but

instead of the number, we give the property name.

myDiv.style['font-size'] = '30px';

F

i

r

s

t

E

x

e

r

c

i

s

e

!

// Change the span background color

mySpan.style.background = 'white';

// Make font size larger.

myDiv.style.font-size = '30px';

F

i

r

s

t

E

x

e

r

c

i

s

e

!

// Change the span background color

mySpan.style.background = 'white';

// Make font size larger.

myDiv.style.font-size = '30px';

// The – (minus) is an arithmetic operator.

// We must access the object as an array, but

instead of the number, we give the property name.

myDiv.style['font-size'] = '30px';

F

i

r

s

t

E

x

e

r

c

i

s

e

!

// Change the visibility of the element on the page.

myDiv.style.display = 'none';

myDiv.style.display = ''; // or 'block'

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

<HTML>

    <HEAD>

         <LINK>

         <SCRIPT>

    </HEAD>

    <BODY>

    …

    </BODY>

</HTML>

DOM Tree

Presentation Tags

<DIV id="header">

<SPAN class="bold">

<IMG SRC="image.jpg" />

<A HREF="newpage.htm">

<INPUT disabled>

Images and Links

<IMG>

<A>

Forms

<INPUT>

<TEXTAREA>

Attributes

<P>

<DIV>

<SPAN>

CSS Declarations

display: none;

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

To successfully learn JavaScript is important that you give

me your FULL attention when I am teaching.

Did you give me your full attention?

YES

NO

V

a

r

i

a

b

l

e

D

e

c

l

a

r

a

t

i

o

n

i

n

J

S

Do You want to learn more JavaScript?

YES

NO