// Create a simple text notification:
let notification = webkitNotifications.createNotification('48.png', // icon url - can be relative
                                                          'Hello!', // notification title
                                                          'Lorem ipsum...' // notification body text
                                                         );

/* The getAnnot method returns an Annotation object, an object that holds all
data of the annotation. This method takes two parameters, nPage (page number)
and cName (the name of the annot). For example, */
let a = this.getAnnot({ nPage: 2, cName: "myAnnot" });
if ( a != null ) {
    console.println("This annot has type " + a.type);
    if ( (a.type != "FileAttachment") || (a.type != "Sound") )
        console.println("The comment of this annot is " + a.contents);
}

let divs = document.getElementsByTagName('div');
for (let i = 0, div; div = divs[i]; i++) {
  /* Process div in some way */
}

let x;
x = "example";
let y = 5;

const veggies = ["Tomato", "Lettuce", "Pepper"];
veggies.push("Carrot"); // Adds a new element (Carrot) to veggies
console.log(veggies)

let value;
console.log(value)

let value = null;
console.log(value)

int i = 1; // Note how we explicitly declare that i is an int
i = "hello";
-> error

let i = 1; // Note how we only declare a variable, not its type
i = "hello";
-> no problem

let number_variable = 5;
let string_variable = "10";

let result = number_variable + string_variable ;
console.log(result);

let name = "Johan";
function printName() {
    console.log("The name is " + name);
}
function printFullName() {
    let name = "Johan Falkenjack";
    printName();
}
printFullName();

<script>
    console.log("Hello World");
</script>

<script src="script.js" defer>

<!DOCTYPE html>

<html>
    <head>
        <title>JavaScript Execution in HTML</title>
    </head>
    <body>

        <!-- Inline JavaScript -->
        <script>
            console.log("Inline JavaScript executed");
        </script>

        <!-- External JavaScript file -->
        <script src="external-script.js"></script>
    ...

document.getElementsByTagName("tagname")
document.getElementsByClassName("classname")

document.querySelector("#elementid")

// get the first element from a selector result
let myElement = document.querySelector(".box p");

// get an elements relatives
myElement.firstElementChild;
myElement.lastElementChild;
myElement.parentElement;
myElement.nextElementSibling;
myElement.previousElementSibling;

// get a NodeList of elements using a selector query
myElements = document.querySelectorAll("div p");

// get a live HTMLCollection of elements of a specified type
myElements = document.getElementsByTagName("a");

// Elements in NodeLists and HTMLCollections can be accessed
// using an index.

// get all HTML inside an element
allHTML = element.innerHTML;

// we can also change the inner HTML
element.innerHTML = "<img src='cat.jpg'>"

// just get the text content of an element
theText = element.textContent;

// array access to an element's attributes
theAttributes = element.attributes;

// get the value of an element's attribute
anAttribute = element.getAttribute("attributeName");

// set inner HTML of an element
element.innerHTML = "new inner HTML";

// set the value of an element's attribute
element.setAttribute("attribute name", "attribute value");

// create an h1 element
heading = document.createElement("h1");

// create a paragraph element
paragraph = document.createElement("p");

// create heading text
headingText = document.createTextNode("Heading 1");

// create paragraph text
paragraphText = document.createTextNode("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, rem, adipisci, iste nisi vel quibusdam nulla tenetur repudiandae possimus maiores inventore doloremque asperiores aut omnis cum et harum provident suscipit!");

// create an h1 element
heading = document.createElement("h1");

// create a paragraph element
paragraph = document.createElement("p");

// create heading text
headingText = document.createTextNode("Heading 1");

// create paragraph text
paragraphText = document.createTextNode("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, rem, adipisci, iste nisi vel quibusdam nulla tenetur repudiandae possimus maiores inventore doloremque asperiores aut omnis cum et harum provident suscipit!");

// add text to heading and paragraph
heading.appendChild(headingText);
paragraph.appendChild(paragraphText);

// append paragraph to body, append always places an element last
body = document.getElementsByTagName("body")[0];
body.appendChild(paragraph);

// insert an element at a specific position
bodyNodes = body.childNodes;
body.insertBefore(bodyNodes[0], heading);

<div class="box" style="border: 1px solid green;"></div>

// grab the first heading
heading = document.getElementsByTagName("h1")[0]

// change the font-family property of the heading
// note that properties with a dash ('-') are camelCased
heading.style.fontFamily = "Times"

// grab the first heading
heading = document.getElementsByTagName("h1")[0]

// set a class
heading.classList.add("maintitle");

// remove a class
heading.classList.remove("fancy");

// function declaration, create a named function
function helloWorld() {
    console.log("hello world");
}

helloWorld();

hello world

// function declaration with parameter
function greeting(name) {
    console.log("hello " + name);
}
greeting("Charlie");

hello Charlie

// defining an anonymous function, and keeping a reference to
// its function object
const f1 = function() {
    console.log("Anonymous hello world");
}
f1();

Anonymous hello world

// function expression with a parameter
const f2 = function(somearg) {
    console.log(somearg);
}
f2("Very secret message.")

Very secret message.

// referencing the function object of a named function
let hello = helloWorld;
hello();

hello world

const f3 = () => {
    console.log("This is also a function.");
}
f3();

This is also a function.

const f4 = (anotherarg) => {
    console.log(anotherarg);
}
f4("Another secret message!")

Another secret message!

let add1_oneliner = (value) => {return value + 1}
console.log(add1_oneliner(4))

5

let add1_oneliner = (value) => value + 1
console.log(add1_oneliner(2))

3

let add1_oneliner = value => value+1
console.log(add1_oneliner(7))

8

(() => {
  console.log('This is printed despite the function not even being assigned a name or passed to a function.')
})()

This is printed despite the function not even being assigned a name or passed to a function.

// using an anonymous function
element.onclick = function(event) {
    alert("Hello World");
};

// using an arrow expression
element.onclick = (event) => {
    alert("Hello World");
}

// using a function object
function hello(event) {
    alert("Hello World!");
}
element.onclick = hello;

element.addEventListener("keydown", keyhandler)

// using an anonymous function
element.addEventListener('click', function(event) {
    alert("Hello World");
});

// using an arrow expression
element.addEventListener('click',(event) => {
    alert("Hello World");
});

// using a function object
function hello(event) {
    alert("Hello World!");
}
element.addEventListener('click', hello);

let x = 1;
console.log("Value of x:", x.toString())

Value of x: 1

a = a + b

let y = 10;
x += y;
console.log("Value of x:", x.toString())

Value of x: 11

let x = 5;
let before = x
let returned = x++
let after = x
console.log("Value before:", before.toString());
console.log("Value returned:", returned.toString());
console.log("Value after:", after.toString());

Value before: 5
Value returned: 5
Value after: 6

let a = 3;
let b = 2.0;
console.log(a+b);
console.log(a-b);
console.log(a/b);
console.log(a*b);

5
1
1.5
6

let a = "Hello";
let b = "World!";
console.log(a + " " + b);
console.log(a, b);

Hello World!
Hello World!

// length of string
console.log(a.length);

5

console.log(a.replace("l", "j"));
console.log(b.startsWith("Wo"));

Hejlo
true

let myArray1 = new Array();
let myArray2 = Array();
let myArray3 = [];
// we can fill an array when initializing it
let myArray4 = [1, 2, "hello"];
console.log(myArray4)
console.log(myArray4[0])

[ 1, 2, "hello" ]
1

myArray4[5] = "what!";
console.log(myArray4)

[ 1, 2, "hello", <2 empty items>, "what!" ]

let myArray = [1, 2, "hello", "world"]
console.log("Length of array:", myArray.length)
console.log("Pushing adds an element to end of array and returns the new length of the array:", myArray.push("yay"))
console.log("Popping removes and returns the last element of the array:", myArray.pop())

Length of array: 4
Pushing adds an element to end of array and returns the new length of the array: 5
Popping removes and returns the last element of the array: yay

let image = {
    
    filename: "cat1.jpg",
    
    sayHello: function() {
        console.log("Hello!");
    }
    
}

console.log(image.filename);
image.sayHello();

cat1.jpg
Hello!

if (a == b) {
    statement;
    statement;
} else if (a == c) {
    statement;
    statement;
} else {
    statement;
    statement;
}

console.log(1=="1");
console.log(1==="1");

true
false

console.log([] == 0)
console.log(Boolean([]) == Boolean(0))

true
false

console.log(null > 0)
console.log(null == 0)
console.log(null >= 0)

false
false
true

console.log(false == undefined)
console.log(false == null)
console.log(null == undefined)

false
false
true

console.log(0 == '')
console.log(0 == '0')
console.log('' == '0')

true
true
false

console.log([] == ![])

true

while (condition) {
    //statement
    //...
}

let x = 5;
while (x > 0) {
    console.log("x: " + x--)
}

x: 5
x: 4
x: 3
x: 2
x: 1

do {
    //statements
    //...
} while (condition);

let x = 5;
do {
    console.log("x: " + x--)
} while (false)

x: 5

for (<loop variable declaration and initialization>; <while-like condition>; <compute next value>) {
    // statements
    // ...
}

for(let x = 5; x>0; x--) {
    console.log("x: " + x);
}

x: 5
x: 4
x: 3
x: 2
x: 1

for(property in object) {
    // statements
}

let myArray = ["value 1", "value 2"]
for(let v in myArray) {
    console.log("index: " + v);
}

index: 0
index: 1

for(variable of object) {
    // statements
}

let myArray = ["value 1", "value 2"]
for(let e of myArray) {
    console.log("value: " + e);
}

value: value 1
value: value 2

729G87 Interaction Programming¶

Lecture 2¶

Johan Falkenjack, johan.falkenjack@liu.se¶

Lecture overview¶

HTML/CSS review¶

HTML - structure¶

CSS - style and layout¶

Validating your HTML and CSS¶

What is JavaScript?¶

Why the confusing name?¶

Story time¶

A Lisp for the web?¶

Java and only Java?¶

The result?¶

To summarize¶

And conversely¶

I heard that JavaScript is weird, is this why?¶

Well...¶

Microsoft invents their own scripting language¶

European Computer Manufacturers Association (ECMA) get pulled in¶

Turmoil¶

ES6 and normalization¶

To summarize again¶

</rant>¶

JavaScript features¶

Where is JavaScript used¶

JavaScript is JavaScript, is JavaScript?¶

Google Chrome Extension¶

JavaScript for PDFs - annotation¶

Get div nodes from HTML DOM¶

What can JavaScript do?

JavaScript can be used to¶

Creating an interactive interface using HTML, CSS and JavaScript¶

JavaScript resources

JavaScript today¶

The JavaScript language¶

Assignment 2: Codecademy exercises¶

A note on JavaScript code style¶

Types and variables¶

JavaScript is¶

Declaration and initalization of variables¶

Hoisting¶

Constants¶

Variables declared with var¶

Levels of nothing¶

Static typing¶

Dynamic typing¶

Is JavaScript "weakly" typed?¶

JavaScript's "weak" typing¶

Lexical scope¶

Scope chain¶

JavaScript in the browser

Connecting the script to the content¶

When is the JavaScript in the script tag run?¶

Use defer to run JavaScript only after DOM created¶

HTML + JS Examples¶

Multiple source files

Modules

JavaScript in the browser

JavaScript and the DOM¶

Accessing the DOM tree¶

Accessing elements¶

The "old" way¶

Newer query selectors¶

Element relatives¶

Accessing elements¶

Should I use getElements* or querySelectorAll?¶

Accessing element content¶

Accessing attributes¶

Browser JavaScript demo

Editing the DOM tree

Change innerHTML and set an attribute value¶

Creating new nodes in the DOM tree

Create an element node¶

Create text nodes¶

Add text nodes to elements¶

Appending and inserting elements¶

Changing the CSS for an element

Inline styles vs Stylesheet rules¶

Set an element’s style using JavaScript¶

`</rant>`¶

Get `div` nodes from HTML DOM¶

Variables declared with `var`¶

Should I use `getElements*` or `querySelectorAll`?¶

Using `.addEventListener()`¶

More on `Array`¶

Conclusion: Use `===`, not `==`¶

C-style for loop - a `while` loop with bells and whistles¶

`for ... in`¶

`for ... of`¶