fii practic frontend - beenear - laborator3

GROW YOUR TALENT WITH US!

Iasi, martie 2014

Speakers: Alexandra Constandache [email protected]

Alexandru Pradais [email protected]

mailto:[email protected]

mailto:[email protected]

GROW YOUR TALENT WITH US!

Iasi, martie 2014

FRONTEND DEVELOPMENT – LABORATOR 3

HTML

• defines the structure of the page

CSS

• defines the style, or presentation

So HTML + CSS = something well structured that looks OK • something like having the first frame of a movie

• it's ok at first but...don't you want it to do something?

3

JavaScript

JavaScript

• Should have been called JavaEngine

Why?

• It turns a simple static page into something

• Active

• Interactive

• It powers the web

• Gives your pages/apps behavior

5

JavaScript Essentials Variables

What they are?

• Containers to hold bits and pieces of information

When they should be used?

• When you need to store the result of some operation for further processing.

6

JavaScript - VARIABLES

Defining a new variable for use in code: var myVar;

Anatomy of a variable declaration:

• var - tells the browser that you want to define a new variable

• variables are declared with the same keyword 'var' no matter what their type is

• myVar - the variable name.

! A variable can be defined implicitly without specifying the var

keyword, and only using assignation.

myVar = 10;

7


Things to note about javascript variables

• The names are case-sensitive • This means that myVar is different from MyVar which is different

from Myvar which is… you get the picture right?

• Avoid reserved keywords when defining variables

• as, break, catch, continue, delete, do, null, etc...

• They can be used without an initial

declaration, but that's a big no-no

8


Assigning values to a variable: var myVar = "my variable value";

The variable adjusts it's type according to the value assigned to it.

• That means you can later do something like myVar = 5, and it won't mind

9


Special kinds of values a variable can take • Null value is programmer-speak for “nothing” or “no value”

• Variable defined, initialized/used but now it has no value

• Undefined is used as “no value assigned yet” • Variable defined but it was not initialized yet

• NaN is used as “not a number” • Variable is not a number

• Most often used for testing

if (myObject == null)

{ // There is no myObject in existence. // Now might be a good time to create one.

}

10


Variable Scope • There are 2 basic places where you can

create variables • inside a function

• outside a function

• Local variables are declared inside a function

• local - because they can be used only inside the declaring function

• Global variables are declared outside functions

• global - because they are valid in any function you define

11


12

localVariable

• will be available and hold information only within the doSomething function

• when doSomething ends, the variable will cease to exist

globalVariable

• will be available while the page is up

• can hold data from multiple functions

• allows passing information from one function to another

<script>

var globalVariable;

function doSomething() {

var localVariable;

...

}

</script>


What else are variables good for? • To be used in Operations (esp. the numeric ones)

• To control the flow of processes through

• Branching

• Looping

• To pass information to and from functions

• To be part of bigger objects as properties

13


Operations

Most common ones for numerics: +, -, *, /.

var myNumber = (10 + 5) * 2 / 5;

+ can be used to also join strings together

var firstString = "JavaScript"; var secondString = "is Fun"; var myFullString = firstString + secondString;

-, *, / can't be used with string

• the result will be NaN (not a number).

14


!Warning • JavaScript does automatic type conversion for the

variables used in an expression

» don't mix them up or the result will be...fuzzy

Example:

var myStringNumber = "22"; var myNumNumber = 2; var myResult = myStringNumber + myNumNumber;

15


Previous result:

• myResult is equal to the string "222" and not to the number 24.

• Why?

• Because a string is detected in the expression and an automatic conversion is performed for myNumNumber from numeric to string.

16


Comparisons Are operations that produce a true or false value.

• These results are crucial for branching and looping.

The logical operators can be applied to variables of any type.

• Types can still be mixed but the result might vary sometimes.

Usage var1 logicalOperator var2

17


Logical operators

18


A couple of fancy operators: === and !==.

They're similar to the equal, not equal operators but surpass them in one aspect: Type checking

=== and !== check if

• the values supplied are the same

• the values supplied come in the same form

• are the same type

19


Ex:

myNumVar = 22; myNumVar2 = 22; myStringVar = "22"; myNumVar == myNumVar2 => true; myNumVar == myStringVar => true; myNumVar === myStringVar => false;

When performing the normal comparison (==) • automatic conversion is performed

22 results equal to "22".

20


Branching

It's about giving the program freedom of choice • To be able to decide based on current values available what block

of code to execute.

The program becomes dynamic

• new input values => new results

21


Branching constructs

• if - blue

• if...else - red

• nested if...else- blue + red + green

• switch

22

if (y % 2 == 0) { console.log('Even'); } else { if (y % 3 == 0) { console.log('Divisible by 3'); } else { console.log('Not a multiple'); }

}


The Switch

Is an alternative to the regular if...else statements.

It's used when you need to pick from a large list of values available

23

Looping

What it is? A fancy way of saying:

• We want to repeat a block of code x times.

• The number of times can be • known at the start of the loop

• ...or not.

A loop requires 3 elements

• a starting state

• an ending condition

• a way to progress

25

The For loop

26

The While loop

27

JavaScript Functions

A way to group together • variables

• branching statements

• loops • in order to get a certain result or to cause a certain

behavior.

28

JavaScript Functions

Declaring a function

function myFunctionName ([myParameterList])

{ //do something with variables, branches, loops, etc [return some value] }

29

Contents of [ and ] are optional

• a function can be declared and used without input parameters (myParameterList)

• a function can be without having to return some result to the user (return some value)

Because JavaScript doesn't care about types

• parameter types are not needed

30

Ex:

function multiplyNumbers(numberA, numberB) { return numberA * numberB;

}

var someNumber = 23405;

var result = multiplyNumbers(3202, someNumber);

31

JavaScript is pretty understanding

Regarding the difference between the parameter number from the function definition and the number of parameters used in the call.

• If there are more parameters -> the excess is ignored

• If there are less parameters -> the ones missing = Undefined

function quadratic(a, b, c)

{ return -b + Math.sqrt(b*b - 4*a*c) / (2*a); }

var root = quadratic(1, -3, 2, 2, 3, 8);

var root = quadratic(1, -3);

var root = quadratic(1, -3, 2);

The function declaration can be below the call but functions must be in scope when they are called

console.log(square(5));

/* ... */

function square(n){return n*n}

32

Anonymous functions Functions can also be created by a function expression. Such a function can

be anonymous; it does not have to have a name. var square = function(number) {return number * number};

var x = square(4) //x gets the value 16

var factorial = function fac(n) {return n<2 ? 1 : n*fac(n-1)}; console.log(factorial(3));

Function expressions are convenient when passing a function as an argument to another function. function map(f,a) {

var result = [], // Create a new Array

i;

for (i = 0; i != a.length; i++)

result[i] = f(a[i]);

return result;

}

The call:

map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]);//returns [0, 1, 8, 125, 1000].

33

Objects

Are a way to group together variables and functions

• variables are called properties

• functions are called methods

Declaring an object

• with object literals

• with object-definition functions

34

Using object literals

You define an object like so

• var myEmptyPersonObject = {};

Whatever is written between { and } becomes part of the object.

• var myPersonObject = { firstName="John", lastName="PizzaDough"};

The '.' can be used to reference property, methods of an object

• and also to add new ones

Ex:

myEmptyPersonObject.firstName=myPersonObject.firstName myEmptyPersonObject.lastName=" PizzaDough";

35

JavaScript - TYPES

Data types

• Number • Advanced operations using the special predefined object Math:

– Math.abs(x), Math.ceil(x), Math.cos(x), Math.exp(x), Math.floor(x)

• String • Can be considered as objects

• String methods:

– s.charAt(pos) s.concat(s1, ..) s.match(regexp) s.replace(search, replace) s.split(separator, limit) s.substring(start, end) etc

• Boolean

• Object (Function, Array, Date, etc)

36

Using Object Definition Functions

An object definition function

• is a function, like any other

• is used to define all the bits of information related to an object

• uses the keyword 'this' to reference the current object defined

37

Using Object Definition Functions

38

• The function takes as input initialization values for the object properties and creates them

• When using the function the 'new' keyword is mandatory

– without the 'new' we'd just call the function and assign the return value to the object.

function Person(fname, lname) { this.firstName = fname; this.lastName = lname; } var person1 = new Person("Emilio","Shanks");

var person2= new Person("Petro","Shanks");

Be careful around Javascript

Everything in JavaScript is an Object

All properties and methods of an Object are public

Functions hide anything defined inside them

39

Fitting JavaScript into HTML

There are three main ways to use JavaScript 1. Inline <script> element

2. External linked JavaScript file

3. Inline event handlers

40

INLINE <script> element

41

<!DOCTYPE html> <html> <head> <title>Inline script</title> </head> <body> <script> window.alert("Inline script!"); </script> </body> </html>

can be placed in the body or head section

most basic form of including some code in the page

it's called when the page rendering reaches that point.

External linked JavaScript file

42

<!DOCTYPE html> <html> <head> <title>Linked script</title> </head> <body> <script src="myscript.js"></script> </body> </html>

Advantages

• the bulk of the code is all in one place

• the code is reusable in other pages

• easier to use with events

Inline event handlers

43

<!DOCTYPE html> <html> <head> <title>Inline event handler</title> </head> <body> <button onclick="window.alert('Inline event!');"> Click me </button> </body> </html>

Give the page a way of reacting and giving feedback to the user.

Code to call can be written there or a function from an external file can be called.

HTML DOM

What does DOM mean anyway? • Document Object Model

What is The DOM? • DOM Is a cross-platform and language-independent

convention for representing and interacting with objects in HTML, XHTML and XML documents. Objects in the DOM tree may be addressed and manipulated by using methods on the objects

Come again? • Basically, it represents all the stuff present on your page

and allows you to interact with that content and modify it.

44

HTML DOM

Where does this DOM come from? I didn't put it there

• When a web page is loaded, the browser creates a Document Object Model of the page.

What would a visual representation of it look be?

45

HTML DOM

A clear way that we can think of this DOM?

• JavaScript's Sidekick.

Why so? Because through it JavaScript can:

• change all the HTML elements in the page

• change all the HTML attributes in the page

• change all the CSS styles in the page

• remove existing HTML elements and attributes

• add new HTML elements and attributes

• react to all existing HTML events in the page

• create new HTML events in the page

You can also think of it as Batman's cool utility belt.

46

HTML DOM

How do you work with it?

• From inside the JavaScript code • using the document object and its

• methods • properties

Ex: <html> <body> <p id="intro">Hello World!</p> <script> var txt=document.getElementById("intro").innerHTML; document.write(txt); </script> </body> </html>

47

Common uses of the DOM

Finding HTML elements from the page

48


Changing HTML elements

49


Adding and Deleting elements

50


And the best part...

Adding Event Handlers

Ex: document.getElementById(id).onclick=function(){code}

What does it do?

• it adds an event handler for the onclick event of the element with the provided id.

51

NEW semantic elements of HTML5

52

HTML5 semantic elements for structuring

<div> is the cornerstone of nearly modern web page

• Usually with <div> elements and a healthy pinch of CSS formatting, you can carve an HTML document into headers, side panels, navigation bars, and more.

This technique is good but not transparent.

53

HTML5

HTML4


54


Why?

• Easier editing and maintenance

• Accessibility

• Search-engine optimization

• Future elements

The new semantic elements behave exactly like <div> elements:

• They group a block of markup, they don’t do anything on their own, and they give you a styling hook that lets you apply formatting.

55

HTML4 quick reminder

<html></html> • The root of an HTML document

<head></head> • Collection of metadata about the document

• <title></title> – Title of the document shown in the a browser’s title

• <base></base> – The base url for all relative URLs

• <link></link> – Used to link JavaScript and external CSS

• <style></style> – Inline style definition

• <script></script> – Defines either an internal script or a link to an external script. The script language is JavaScript.

<body></body> • Represents the content of an HTML document. • There is only one <body> element in a document.

Heading elements: h1 …. h6 • <h1>Heading level 1</h1> <h2>Heading level 2</h2> <h3>Heading level 3</h3> <h4>Heading

level 4</h4> <h5>Heading level 5</h5> <h6>Heading level 6</h6> • <h1> is the most important and <h6> is the least

56


<main></main> • represents the main content of the <body> of a document or

application.

• This content should be unique to the document excluding any content that is repeated across a set of documents such as sidebars, navigation links, copyright information, site logos, and search forms (unless, of course, the document's main function is as a search form).

57

Note: There must not be more than one <main> element in a document, and it must not be a descendent of an <article>, <aside>, <footer>, <header>, or <nav> element.

<main> <h1>Apples</h1> <p>The apple is the pomaceous fruit of the apple tree.</p> ... </main>

More information: http://html5doctor.com/the-main-element/

http://html5doctor.com/the-main-element/






<section></section> • generic section of a document or application

• a thematic grouping of content, typically with a heading

• Example: • chapters, various tabbed pages or numbered sections of a chapter.

• Sections in a web page: split in introduction, news item & contact information

58

<div> <h1>Level 1</h1> <h1>Level 2</h1> <div> <h1>Level 3</h1> </div> </div> <section>

<h1>Level 1</h1> <h1>Level 2</h1> <section> <h1>Level 3</h1> </section> </section>


<nav></nav>

• a section with navigation links to other pages or to parts within the page

• Links part of a menu

59

<div id="nav"> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul> </div>

<nav> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul> </nav>


<article></article>

• Self-contained composition in a document, page, application or site

• Example: • Magazine/newspaper post, blog entry, forum post…

60

<div class="entry"> <p class="post-date">October 22, 2009</p> <h2><a href="#" rel="bookmark" title="link to this post">Travel day</a></h2> </div>

<article> <header> <p class="post-date">October 22, 2009</p> <h1><a href="#" rel="bookmark" title="link to this post"> Travel day</a></h1> </header> </article>


<aside></aside>

• section of a page that consists of content that is tangentially related to the content around the aside element, and that could be considered separate from that content

61

<div> <h1>Archives</h1> <ul> <li><a href="/2007/09/">September 2007</a></li> <li><a href="/2007/08/">August 2007</a></li> <li><a href="/2007/07/">July 2007</a></li> </ul> </div>

<aside> <h1>Archives</h1> <ul> <li><a href="/2007/09/">September 2007</a></li> <li><a href="/2007/08/">August 2007</a></li> <li><a href="/2007/07/">July 2007</a></li> </ul> </aside>


<hgroup></hgroup>

• represents the heading of a section

• used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

62

<h1>My Weblog</h1> <h2>A lot of effort went into making this effortless.</h2>

<hgroup> <h1>My Weblog</h1> <h2>A lot of effort went into making this effortless.</h2> </hgroup>

The hgroup element is obsolete in HTML5. HTML specification:

elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.

How to mark up subheadings, subtitles, alternative titles and taglines http://html5doctor.com/howto-subheadings/

http://html5doctor.com/howto-subheadings/




<header></header>

• a group of introductory or navigational aids

• Can contain an h1–h6 element or an hgroup element, but this is not required, it can contain ordinary information

63

<div id="header"> <h1>My Weblog</h1> <p class="tagline">A lot of effort went into making this effortless.</p> </div>

<header> <h1>My Weblog</h1> <p class="tagline">A lot of effort went into making this effortless.</p> </header>


<footer></footer> • represents a footer for its nearest ancestor sectioning content or

sectioning root element • Example:

• contains information about its section such as who wrote it • links to related documents, • copyright data

• When the footer element contains entire sections, they represent appendixes, indexes, license agreements, and other such content.

64

<div id="footer"> <p>§</p> <p>© 2001–9 <a href="#">Mark Pilgrim</a></p> </div>

<footer> <p>§</p> <p>© 2001–9 <a href="#">Mark Pilgrim</a></p> </footer>

HTML5 elements list

The list of HTML5 elements is larger than the one specified…

All valid HTML5 elements are listed by the Mozilla Developer Network in their HTML5 Developer Guide at this link: • https://developer.mozilla.org/en-

US/docs/Web/Guide/HTML/HTML5/HTML5_element_list

In the mentioned list you can find for each element the attributes which can be used

66

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list



HTML5 Glitz

67

and maybe next time…

68

HTML5 Audio & Video

69

The main idea is:

• Make noise / watch cats playing piano without the need of a plugin

» No more Flash

• A lot of video/audio formats supported

• It is as easy as adding an image with the <img> tag – Audio in fact uses the <audio> tag

– Video in fact uses the <video> tag

HTML5 Audio

Audio <p>

Hear us rock out with our new song,

<i>Sesame Street Rubber Duckies</i>:

</p>

<audio src="rubberduckie.mp3" controls></audio>

SRC = file name to be played

CONTROLS = tell the browser to include a basic set of playback controls (with the style specific to each browser as shown below (picture from HTML5: The missing manual)

70

!Note: The <audio> and <video> elements must have both a start and an end tag. You can’t use empty element syntax, like <audio />.

HTML5 Audio

In order to create your own controls we can use the following API methods: • play() — plays the audio

• pause() — pauses the audio

• canPlayType() — interrogates the browser to establish whether the given mime type can be played

• buffered() — attribute that specifies the start and end time of the buffered part of the file

• And the following properties • currentTime = playhead position (seconds)

• duration = media duration (seconds) – read only

• muted = is volume muted? (boolean)

• paused = is media paused? (boolean)

• volume = volume level (double)

71

HTML5 Audio

Other <audio> attributes:

• preload – with the following possible values • auto – let the browser decide what to do

• metadata – the browser is told to download a small chunk of information (“metadata”) before playing – like the total length of the audio

• none – the browser is told to hold the download

• When the value of the preload attribute is in {metadata, none} the media is downloaded once it is started to play

• autoplay - start playback as soon as it can

• loop – specify whether the file should be played repeatedly

72

HTML5 Audio

Have you met the codecs ? • In software, an audio codec is a computer program implementing

an algorithm that compresses and decompresses digital audio data according to a given audio file format or streaming media audio format.

• Famous HTML5 audio codecs: Ogg Vorbis, MP3, WAV • How do we know what works where?

– Using the source tag and type attribute:

<audio>

<source src="elvis.mp3" type='audio/mpeg; codecs="mp3"'>

<source src="elvis.oga" type='audio/ogg; codecs="vorbis"'>



</audio>

– Use the canPlayType method which can return: Probably, maybe or an empty string.

» (why? Because the browser can only guess)

» audio.canPlayType('audio/ogg');

» audio.canPlayType('audio/ogg; codecs="vorbis"');

73

HTML5test.com says…

74

HTML5 Video

Video • <video width="640" height="360“

src="http://www.youtube.com/demo/google_main.mp4"

controls autobuffer poster="whale.png" >

<p> Or you can

<a href="http://www.youtube.com/demo/google_main.mp4">

download the video </a> instead.

</p>

</video>

Attributes are similar to the audio tag with few exceptions:

• autobuffer – similar to the audio preload attribute

• poster – useful to display a frame of the video (as a .jpg, .png ….and so on) in case the video doesn’t load the video.

75

Audio – Video examples

• Check this online music player: • http://antimatter15.github.com/player/player.html

77

http://antimatter15.github.com/player/player.html

HTML5 Canvas

78

More cool stuff at http://www.html5canvastutorials.com/

http://www.html5canvastutorials.com/

HTML5 canvas

Getting started: • <canvas id="drawingCanvas" width="500" height="300"></canvas>

• Initialized as a blank borderless rectangle

• A little css never hurt nobody canvas {

border: 1px dashed black;

}

• To start working with the canvas, we need the reference to the canvas: var canvas = document.getElementById("drawingCanvas");

• Second, we need to setup the 2D context (well there is no 3D context yet) var b_context = b_canvas.getContext("2d")

function draw()

{

var canvas = document.getElementById("drawingCanvas");

var context = canvas.getContext("2d");//future 3D

}

79

HTML5 Canvas

Drawing in Canvas Context:

The esential functions are: beginPath()

closePath()

stroke()

fill()

Properties: fillStyle = (CSS color,pattern,gradient)

strokeStyle= (CSS color,pattern,gradient)

o Drawing lines o moveTo(x, y)

o lineTo(x, y)

80

context.moveTo(10,10); context.lineTo(400,40); context.stroke(); //draws a line from 10-10 to 400-400

HTML5 Canvas

Modifying lines (must be set before stroke)

• Linewidth = width of the line in pixels • context.lineWidth = 10;

• Strokestyle = color of the line in HTML color name and color code • // Set the color (brick red) using an HTML color code:

context.strokeStyle = "#cd2828";

• // Set the color (brick red) using the rgb() function:

context.strokeStyle = "rgb(205,40,40)";

• linecap = decide the cap of the line • butt – squared-off edge

• round

• square - (which looks the same as butt, but extends the line

an amount equal to half its thickness on each end).

81

HTML5 Canvas Drawing lines

// Set the line width and color (for all the lines).

context.lineWidth = 20; context.strokeStyle = "rgb(205,40,40)"; // Draw the first line, with the standard butt

ending. context.moveTo(10, 50); context.lineTo(400, 50); context.lineCap = "butt"; context.stroke(); // Draw the second line, with a round cap. context.beginPath(); context.moveTo(10, 120); context.lineTo(400, 120); context.lineCap = "round"; context.stroke(); // Draw the third line, with a square cap. context.beginPath(); context.moveTo(10, 190); context.lineTo(400, 190); context.lineCap = "square"; context.stroke();

82

HTML5 Canvas

Drawing and filling triangles or any other polygons context.moveTo(250,50);

context.lineTo(50,250);



context.lineWidth = 10;

context.strokeStyle = "red";

context.stroke();

• Filling the triangle means that we need to close the line path with closePath(), pick a color using fillStyle and call fill()

context.closePath();

context.fillStyle = "blue";

context.fill();

closePath also connects the begin point with the last drawn point

Calling fill after stroke means that the stroke will be overlapped with the fill color, if we do not want that, this means stroke must be called after fill

o Drawing rectangles • fillRect(x, y, width, height)

• strokeRect(x, y, width, height)

• clearRect(x, y, width, height)

83

HTML5 Canvas

Drawing text

Context: Context.font= {font}

Context.textAlign={start,end,left,right,center};

Context.textBaseline=

{top,hanging,middle,alphabetic,ideographic,bottom};

o Drawing o Context.fillText(text,x,y);

84

HTML5 Canvas

This is just a taste of it…. Canvas can do a lot of things: • Draw different arcs

• Draw with gradients

• Draw with transparency

• Draw full images

• Transform the context

• Make composite operations by indicating how overlapping figures must look

• Interact with the user

You can read more about them on: • http://www.html5canvastutorials.com/

• https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial

85

http://www.html5canvastutorials.com/

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial



Canvas demos

• http://htmlfive.appspot.com/static/gifter.html

• http://html5demos.com/canvas-grad

86

http://htmlfive.appspot.com/static/gifter.html

http://html5demos.com/canvas-grad



Bibliography

HTML5: The Missing Manual by Matthew MacDonald

JavaScript by Mozilla Developer Network

• https://developer.mozilla.org/en-US/docs/Web/JavaScript

DIVE INTO HTML5 by Mark Pilgrim http://diveinto.html5doctor.com/

HTML5 Doctor: http://html5doctor.com/ Other HTML5 demos …well check this out: http://html5demos.com/

For beginners: • http://www.w3.org/community/webed/wiki/HTML/Training

• http://www.w3.org/community/webed/wiki/HTML/Elements

87

https://developer.mozilla.org/en-US/docs/Web/JavaScript



http://diveinto.html5doctor.com/

http://html5doctor.com/

http://html5demos.com/

http://www.w3.org/community/webed/wiki/HTML/Training

http://www.w3.org/community/webed/wiki/HTML/Elements

Now a little test

88

Thank you!

89

fii practic frontend - beenear - laborator3

Education