javascript and epub - Bitly

ebookcraft - March 22, 2017

JAVASCRIPT AND EPUB: Making Interactive Ebooks

christinatruong.com
 @christinatruong

Online editor codepen.io Slides (PDF) bit.ly/ebookcraft-slides

#EBOOKCRAFT JS WORKSHOP


@christinatruong

#EBOOKCRAFT JS WORKSHOP


@christinatruong

HTML defines the content. CSS adds presentational styles. JavaScript adds interaction.

#EBOOKCRAFT JS WORKSHOP


@christinatruong

What does this mean for ebooks?

#EBOOKCRAFT JS WORKSHOP


@christinatruong

JavaScript and EPUB3 Adding interactivity can enhance the reading experience. • • • •

Drag and move items on the page Interactions can be based on specific user input CSS animations, audio & video can be triggered by specific actions instead of starting right away and more!

Further Reading: EPUB3 Now! at IDPF DigitalBook World 2013

bit.ly/ebookcraft-final

#EBOOKCRAFT JS WORKSHOP


@christinatruong

What is JavaScript? •

Programming language

•

Different programming languages have different syntaxes

•

Programs, or scripts, are a set of instructions for the computer to execute

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Writing a Program 1. Define the goal • Create a "choose your own adventure" story

2. Break it down into small steps or a series of tasks • (1) Select an option, (2) update the sentence with the selected word, (3) trigger the corresponding animation

3. Code each step with HTML, CSS and JavaScript

#EBOOKCRAFT JS WORKSHOP


@christinatruong

JavaScript and Programming Programming languages tend to have more complexities than HTML or CSS. The basic building blocks of programming includes many different concepts and has more syntax rules to follow.

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Today you will learn about… •

functions

•

variables

•

objects

•

for loop

•

conditionals

•

concatenation

#EBOOKCRAFT JS WORKSHOP


@christinatruong

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Project Plan 1. Select an option (a) Listen for click / tap event

2. Update the sentence with the selected word (a) Store the selected option (b) Grab the blank text container (c) Update it with the selected word

3. Trigger the corresponding animation (a) Grab the animation wrapper (b) Add a class attribute and corresponding class name

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Part 1: Create a set of instructions

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Functions •

Used to execute a set of instructions

•

Can also be reused throughout the program

•

There are pre-defined functions in the language


 prompt() //creates a dialogue box

Further reading: Mozilla Developer Network (MDN) - prompt()

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Creating Your Own Functions • • • •

Defining it first with the keyword function Give the function a name and parentheses Add the instructions within the curly braces {} Call the function to execute it

function myFunction(){ // instructions here } myFunction();

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Functions and Arguments Arguments can be used to pass ; // will both display the same
 var name = "Christina Truong";

Whitespace matters when used in a string or using keyword. var name = "ChristinaTruong"; // Will show with no space
 varname = "Christina Truong"; // not valid

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Project Starter Files: bit.ly/ebookcraft-start (codepen)

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Project Setup Starter code: bit.ly/ebookcraft-start Fork the pen to create your own copy. •

If you have an account, it will save to your profile

•

If you do not have an account, it still generates a unique url that you can edit and save changes to

#EBOOKCRAFT JS WORKSHOP


@christinatruong

1a. Project Exercise 1. Select an option (a) Listen for click / tap event




Add an onclick attribute to the HTML button to initiate the interaction. starry snowy

#EBOOKCRAFT JS WORKSHOP


@christinatruong

2a. Project Exercise 2. Update the sentence with the selected word (a) Store the selected option • Create a function to execute when the button is clicked function select(){ //instructions here

}

• Pass in the value of the selected option & output it to the console function select(word) { console.log(word); }

• Call this function to execute these steps. select('starry'); or select('snowy');

#EBOOKCRAFT JS WORKSHOP


@christinatruong

2a. Project Exercise Add the function to your projects. function select(word) { console.log(word); }

Call the function in the button to trigger the function when clicked. Add an argument to pass the value into the function. starry snowy

#EBOOKCRAFT JS WORKSHOP


@christinatruong

2b & 2c. Project Exercise 2. Update the sentence with the selected word (b) Grab the blank text container (c) Update it with the selected word We'll need to update the function with the following instructions: function select(word) { // Grab the blank text HTML container // Replace the container's content with the selected word }

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Part 3: Manipulating HTML Objects

#EBOOKCRAFT JS WORKSHOP


@christinatruong

The Document Object Model Web pages — the browser document, is made up of many blocks. Each HTML element is an object.

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Variables vs Objects A variable holds one value. Access the value using the name. var food = "pizza"; console.log(food);// returns pizza

An object holds a collection of values. Assign and access the property values using dot notation. var pizza = {}; pizza.crust = "thin"; pizza.meat = "pepperoni"; pizza.veg = "mushrooms"; console.log(pizza.crust);// returns thin

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Objects, Functions and Methods Methods are just like functions, except they are applied to objects. Functions run on their own. // function alert("Hello!"); // method attached to an object document.write("Hello!");

#EBOOKCRAFT JS WORKSHOP


@christinatruong

querySelector() When applied to the document object, it returns the first matching element. document.querySelector('.word');

It was a ______ night.

The selector can be any CSS selector, passed into the method as a string. Further reading: MDN: querySelector()

#EBOOKCRAFT JS WORKSHOP


@christinatruong

querySelector() Use a variable to hold the selected HTML element (the container for the word to be updated). function select(word) { // Grab the blank text HTML container var updateWord = document.querySelector('.word'); }

#EBOOKCRAFT JS WORKSHOP


@christinatruong

innerHTML innerHTML is a property, not a method. (Hint: there's no parentheses!) Properties are used to get or set a value of an object. Remember the pizza object? pizza.crust = "thin"; pizza.meat = "pepperoni";

Use innerHTML to set & update the word in the sentence. var updateWord = document.querySelector('.word'); updateWord.innerHTML = word;

#EBOOKCRAFT JS WORKSHOP


@christinatruong

2b. & 2c. Project Exercise Update the function. function select(word) { // Grab the blank text HTML container var updateWord = document.querySelector('.word'); // Replace the container's content with the selected word updateWord.innerHTML = word; }

Further reading: MDN innerHTML

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Part 4: Add CSS Animations

#EBOOKCRAFT JS WORKSHOP


@christinatruong

3a. Project Exercise 3. Trigger the corresponding animation (a) Grab the animation wrapper

var animation = document.querySelector('#wrapper');

#EBOOKCRAFT JS WORKSHOP


@christinatruong

3b. Project Exercise 3. Trigger the corresponding animation (b) Add a class attribute and corresponding class name

Use the setAttribute() method to add and set the value of the attribute.
 Syntax: setAttribute(attributeName, attributeValue); Further reading: MDN - setAttribute()

#EBOOKCRAFT JS WORKSHOP


@christinatruong

setAttribute() If the attribute already exists in the selected element, the value is updated; otherwise a new attribute is added with the specified name and value. var animation = document.querySelector('#wrapper'); animation.setAttribute('class', word);

#EBOOKCRAFT JS WORKSHOP


@christinatruong

3a. & 3b. Project Exercise Update the function. function select(word) { // Grab the blank text HTML container var updateWord = document.querySelector('.word'); // Replace the container's content with the selected word updateWord.innerHTML = word; // Grabs the animation wrapper div var animation = document.querySelector('#wrapper'); // Adds a class attribute with the selected option value animation.setAttribute('class', word); }

#EBOOKCRAFT JS WORKSHOP


@christinatruong

It works! Sorta…

#EBOOKCRAFT JS WORKSHOP


@christinatruong

HTML & JavaScript It works! But there's only one star or snowflake. What if you want more? You can add it manually or use JavaScript to generate additional HTML elements.

#EBOOKCRAFT JS WORKSHOP


@christinatruong

HTML This is what the HTML needs to look like to have multiple snowflakes or stars.
 ...

#EBOOKCRAFT JS WORKSHOP


@christinatruong

CSS The top and bottom values should be different to position the elements in different parts of the page. .snowflake1 { top: 0px; left: 400px; }

.snowflake2 { top: -100px; left: 200px; }

#EBOOKCRAFT JS WORKSHOP


@christinatruong

JavaScript & innerHTML Remove the from the current HTML and use innerHTML to add the HTML and CSS into the wrapper.

The HTML and inline CSS will be added using innerHTML. var animation = document.querySelector('#wrapper'); animation.innerHTML = ''

#EBOOKCRAFT JS WORKSHOP


@christinatruong

We're not done yet!

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Concatenation If you use the + operator with numerical values, it will add the values. var number = 2 + 2; // result: 4 var number = 3; var addIt = number + 5; // result: 8

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Concatenation If you use the + operator with at least one string, it will combine the outputs. var numberAndString = "3" + 5; // result: 35 var example = "Hello. " + "My name is Christina."; // Result: Hello. My name is Christina; var example = "Hello. "; example += "My name is Christina."; // Result: Hello. My name is Christina; Further reading: String Concatenation and String Operators

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Add Multiple Elements Use a for loop to generate multiple elements. for (var i = 0; i < 5; i++) { animation.innerHTML += ''; }

i refers to the index and starts at 0 If i is less than five, add 1 to continue the loop += the HTML markup will be concatenated and appended to the end of the previous value every time it loops. Further reading: MDN - Loops and Iteration

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Add Multiple Elements for (var i = 0; i < 5; i++) { animation.innerHTML += ''; }

This will result in 5 new elements added dynamically into the HTML. But they have the same position values.

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Add Multiple Elements Every time you press a button option, the loop will continue to append the elements. Set the innerHTML to blank first, to clear any elements and restart with an empty animation wrapper. animation.innerHTML = ""; for (var i = 0; i < 5; i++) { animation.innerHTML += ''; }

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Randomize the CSS Position Generate random values for the top and left CSS properties using the function below. 


// Generate a random integer between two values function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min)) + min; } Further Reading: MDN - Math.random()

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Randomize the CSS Position Use variables as a placeholder to generate random top and bottom values for each element. 


// Generate random values between two values var topValue = getRandomInt(0,600); var leftValue = getRandomInt(0,1200); The variables and HTML must be concatenated because we are mixing strings and variables. animation.innerHTML += ''

#EBOOKCRAFT JS WORKSHOP


Final Update

@christinatruong

function select(word) { // Grab the blank text HTML container var updateWord = document.querySelector('.word');

// Replace the container's content with the selected word updateWord.innerHTML = word; // Grabs the animation wrapper div var animation = document.querySelector('#wrapper'); // Adds a class attribute with the selected option value animation.setAttribute('class', word); // Resets and removes any previously added span element.

animation.innerHTML = ""; // Adds multiple animation elements for (var i = 0; i < 5; i++) { var topValue = getRandomInt(0,600); var leftValue = getRandomInt(0,1200); animation.innerHTML += '' } }

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Bonus!

#EBOOKCRAFT JS WORKSHOP


@christinatruong

if / else Conditionals To make the snow appear to "fall" at different starting points, use a negative margin value. Use if/else to determine which option has been selected. if (word === "snowy"){ topValue = getRandomInt(-1000,0); leftValue = getRandomInt(0,1200); } else { topValue = getRandomInt(1,600); leftValue = getRandomInt(1,1200); }

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Update the Loop for (var i = 0; i < 5; i++) { var topValue; var leftValue; if (word === "snowy"){ topValue = getRandomInt(-1000,0); leftValue = getRandomInt(0,1200); } else { topValue = getRandomInt(1,600); leftValue = getRandomInt(1,1200); } animation.innerHTML += '' }

#EBOOKCRAFT JS WORKSHOP


@christinatruong

You did it!

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Extra Resources •

idpf: EPUB Content Documents - Scripting

•

idpf: JavaScript epubReadingSystem Object

•

javascript.com - Tutorials

•

eloquentjavascript.net - online book including interactive demos

#EBOOKCRAFT JS WORKSHOP


@christinatruong

Thank you!