JavaScript
Discover the JavaScript Language
SUPINFO International University http://www.supinfo.com
JavaScript
Course objectives
By completing this course, you will be able to:
Explain origins of JavaScript Describe how it works Explain its utility Develop basic JavaScript procedures Manipulate the DOM with JavaScript
SUPINFO International University http://www.supinfo.com
JavaScript
Course plan
Presentation
Basics notions
Functions & Scope
Events
DOM Interactions
Object Modeling
SUPINFO International University http://www.supinfo.com
Discover JavaScript language
INTRODUCTION
SUPINFO International University http://www.supinfo.com
Introduction
Presentation
JavaScript is a scripting language Design by Brendan Eich (Netscape) in 1995 Inspired by many languages, including Java and Python
SUPINFO International University http://www.supinfo.com
Introduction
Presentation
At first, server side language called LiveScript Then, client side version called JavaScript
Partnership between Sun Microsystems and Netscape about the name "JavaScript was a trademark of Sun Microsystems and now Oracle Corporation
SUPINFO International University http://www.supinfo.com
Introduction
Presentation
Client side Interpreted by web browser
Different from PHP
Complementary to HTML and CSS
Add dynamism!
User Interactions Animations Navigation Help
SUPINFO International University http://www.supinfo.com
Introduction
Presentation
As CSS, JavaScript code can be defined in:
HTML code a separate script file (.js)
SUPINFO International University http://www.supinfo.com
Introduction
Presentation
Based on events:
onload onfocus onclick ondblclick onabort onerror onmouseover .
Associated to DOM objects:
window, document, forms, ...
SUPINFO International University http://www.supinfo.com
Introduction
Presentation
Not a classical OOP language
Prototype-based
No real concept of class
"Pseudo-classes" can be written like collections of key/value pairs
Includes most of class-based OOP features
SUPINFO International University http://www.supinfo.com
Introduction
History
1994
1995
1996
First release of Netscape
JavaScript creation
Release of Netscape2 with JavaScript
ECMA produced the ECMAScript
Release of IE3 with JScript (MS implem. of JS)
SUPINFO International University http://www.supinfo.com
Introduction
History
1996
1997
1999
Release of JavaScript 1.1 and Netscape 3
Release of JavaScript 1.2
Release of Netscape 4
Appearance of the term: DHTML
Release of Internet Explorer 5 with JavaScript 1.5
SUPINFO International University http://www.supinfo.com
Introduction
History
2000
2002
2005
2006
2008
2010
JavaScript 1.5
First Mozilla release
JavaScript 1.6
JavaScript 1.7
JavaScript 1.8
JavaScript 1.8.5
SUPINFO International University http://www.supinfo.com
Introduction
Libraries
Many libraries :
jQuery Ext JS Prototype Dojo Etc
SUPINFO International University http://www.supinfo.com
Introduction
Community
SUPINFO International University http://www.supinfo.com
Introduction
Community
https://github.com/languages/JavaScript
SUPINFO International University http://www.supinfo.com
Introduction
JavaScript Everywhere
SUPINFO International University http://www.supinfo.com
Questions ?
SUPINFO International University http://www.supinfo.com
Discover JavaScript language
BASIC NOTIONS
SUPINFO International University http://www.supinfo.com
Basic notions
Hello World!
Hello world example:
<!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <script type="text/javascript"> alert('Hello world!'); </script> </body> </html>
SUPINFO International University http://www.supinfo.com
Basic notions
Implementation of JavaScript code
Two places to declare JavaScript code:
In HTML file directly between <script> markers:
<script type="text/javaScript"> var name = "Grima"; </script>
In an external script file:
<script type="text/javaScript" src="script.js"></script>
SUPINFO International University http://www.supinfo.com
Basic notions
Syntax rules and basics
An instruction ends up properly with a semicolon:
<script type="text/javaScript"> Instruction_1;
Instruction_2; Instruction_3;
</script>
Possible to put on the same line several instructions
SUPINFO International University http://www.supinfo.com
Basic notions
Syntax rules and basics
We create a single line comment with //, multilines between /* and */
<script type="text/javascript"> // Single line comment /* Multi line comment */ </script>
SUPINFO International University http://www.supinfo.com
Basic notions
Syntax rules and basics
To display text on the console: console.log()
<script type="text/javascript"> // Displays Hello Universe! console.log("Hello Universe!"); </script>
SUPINFO International University http://www.supinfo.com
Basic notions
Syntax rules and basics
To display text on a web page: document.write()
<script type="text/javascript"> // Add Hello World! inside the page document.write("Hello World!"); </script>
SUPINFO International University http://www.supinfo.com
Basic notions
Syntax rules and basics
To display a message through a dialog box: window.alert(message)
window.alert("My message is great!"); // Also works alert("My message is great!");
SUPINFO International University http://www.supinfo.com
Basic notions
Syntax rules and basics
To get a value with a prompting box: window.prompt(text, default_value)
var returnValue = window.prompt("Question", "Text"); // Also works returnValue = prompt("Question", "Text");
SUPINFO International University http://www.supinfo.com
Basic notions
Variables
Case sensitive: myvariable myVariable
We assign a value to a variable by setting its name on the left of the assignment operator ( = ), and the value on the right
SUPINFO International University http://www.supinfo.com
Basic notions
Variables
Explicit declaration with var keyword
<script type="text/javascript"> var name = "Estelle"; </script>
A variable's name:
Can not begin by a number Must contain only alphanumerical characters. Can not be a reserved word (var, for)
SUPINFO International University http://www.supinfo.com
Basic notions
Variables
Implicit declaration without var
<script type="text/javascript"> name = "Doug"; </script>
SUPINFO International University http://www.supinfo.com
Basic notions
Variables
Concatenation: Combine string value(s) with other types
Operator +
var max_age = 18; var message = "Not allowed under " + max_age + " years old";
SUPINFO International University http://www.supinfo.com
Basic notions
Variables
Weak typing Type of a variable defines format of its content Obtain type of a variable: typeof
var myVar1 = "I am a string !"; var myVar2 = "I am really a string ?"; myVar2 = 100; document.write(typeof myVar1); // Will display "string" document.write(typeof myVar2); // Will display "number"
SUPINFO International University http://www.supinfo.com
Basic notions
Operators
Mathematic operators:
Symbol = Example var salary = 2800; Explanation Affectation
+
* / %
salary = salary + 2800
salary = salary 2800 salary = salary * 2800 salary = salary / 2800 salary = salary % 2800
Operation or Concatenation
Substraction Multiplication Division Modulo
SUPINFO International University http://www.supinfo.com
Basic notions
Operators
Comparison operators:
Symbol == === != !== Example Returns Explanation Equals Exactly equals (value and type) Not equals Not exactly equals (value and type)
(given salary = 2800)
salary == 2800 salary == "2800"
salary === "2800" salary === 2800 salary != 2800 salary !== "2800"
true true
false true false true
SUPINFO International University http://www.supinfo.com
Basic notions
Operators
Comparison operators:
Symbol
>
(given salary = 2800)
Example
salary > 2800
Returns
false
Explanation
Greater than
>=
<= <
salary >= 2800
salary <= 2800 salary < 2800
true
true false
Greater than or equals
Lower than or equals Lower than
SUPINFO International University http://www.supinfo.com
Basic notions
Operators
Logic operators:
Symbol && Example age == 18 && salary > 2800 Explanation AND
||
^ >> <<
age == 18 || salary > 2800
age == 18 ^ salary > 2800 salary >> age salary << age
OR
Exclusive OR Bitwise shift right Bitwise shift left
SUPINFO International University http://www.supinfo.com
Basic notions
Operators
Misc operators:
Symbol += Example age += 18; Explanation Addition (number) or concatenation (string)
new
delete
var array = new Array();
delete array;
Object instanciation
Object destruction
SUPINFO International University http://www.supinfo.com
Basic notions
Conditional statements
Conditional test: if else if else
if( expression1 ) { // If "expression1" is evaluated to true, then this // block is executed } else if ( expression2 ) { // Otherwise, if "expression2" is evaluated to true, // this block is executed } else { // Otherwise, this code block is executed }
SUPINFO International University http://www.supinfo.com
Basic notions
Conditional statements
Case test: switch
switch(myVar) { case "case1": // if(myVar === "case1") break; case "case2": // if(myVar === "case2") break; default: // else - Default code to execute break; }
SUPINFO International University http://www.supinfo.com
Basic notions
Arrays
Contain several data sequences Many ways to create an array:
By creating an Array object By using square-brackets [] (adviced)
Support all JavaScript data types
SUPINFO International University http://www.supinfo.com
Basic notions
Arrays
Creation of Arrays
var fruitBasket1 = new Array("Apples", "Bananas", "Pears"); var fruitBasket2 = [ "Oranges", "Bananas", "Strawberries"];
var fruitBasket3 = [];
var apple = fruitBasket1[0]; fruitBasket3.push(apple);
SUPINFO International University http://www.supinfo.com
Basic notions
Loops
Conditional loop: while
// It loops 40 times var myVariable = 40; while( myVariable > 0 ) { myVariable = myVariable 1;
SUPINFO International University http://www.supinfo.com
Basic notions
Loops
Conditional loop: do while
Same as while First test after the first execution of loops block
var myVariable = 0;
// Loop will execute once even if the test returns false do { myVariable -= 1; } while (myVariable > 0);
SUPINFO International University http://www.supinfo.com
Basic notions
Loops
Iterative loop: for
Specify (or not):
Initial state Iteration condition Iteration instruction
var a; for (a = 0; a < 100; a += 1){ // Loop will display Blabla 100 times. document.write("<p>Blabla</p>"); }
SUPINFO International University http://www.supinfo.com
Basic notions
Loops
Execute an operation once per array element:
The current element is represented by the param of the anonymous function
var myArray = ["Apple", "Strawberry"]; myArray.forEach( function(element) { console.log(element + "/");
});
SUPINFO International University http://www.supinfo.com
Questions ?
SUPINFO International University http://www.supinfo.com
Basic notions
Exercise (1/3)
Youre going to design your first JavaScript app:
A Guess the Number Game!
Initialize a variable named numberToFind with a random number between 0 and 100 Initialize another variable named remainingAttempts with the integer value 7
SUPINFO International University http://www.supinfo.com
Basic notions
Exercise (2/3)
Until the user doesnt find the numberToFind value and has remaining attempt, ask him to choose a number
If the number is the numberToFind value
Display a popup to the user to notify him he won
If the number is not the numberToFind value
Display a popup to the user to notify him if the number to find is greater or not
SUPINFO International University http://www.supinfo.com
Basic notions
Exercise (3/3)
SUPINFO International University http://www.supinfo.com
Discover JavaScript language
FUNCTIONS & SCOPE
SUPINFO International University http://www.supinfo.com
Functions & Scope
Functions
Instruction unit Declared with function keyword Can take values or references called arguments
function myFunction(myParam1, myParam2) { // Some code to execute }
SUPINFO International University http://www.supinfo.com
Functions & Scope
Functions
Called with its name followed by brackets: functionName(); functionName(arguments); Can send back a value with return keyword Returned value can be use by the caller
SUPINFO International University http://www.supinfo.com
Functions & Scope
Functions
Example:
function howOld(year){ var currentYear = new Date().getFullYear(); return currentYear - year; } // someValue will contain 22 (if current year is 2012) var someValue = howOld(1990); // Will display Bryan is 42 years old (if 2012) console.log("Bryan is " + howOld(1970) + " years old");
SUPINFO International University http://www.supinfo.com
Functions & Scope
Variable scope
Local:
Reachable only in the function where it's defined
Global:
Reachable in the whole document
function = scope
Explicit declaration inside function = local variable Implicit declaration = global variable
SUPINFO International University http://www.supinfo.com
Functions & Scope
Variable scope
Variables declared with var keyword inside a function are local variables of the function Otherwise, without var keyword, they are considered as global variables
Declared variable outside function are also global variables
SUPINFO International University http://www.supinfo.com
var myVar = "I am global\n"; function writeGlobal(){ console.log(myVar); } function setGlobal_writeLocal(newValue){ myVar = newValue; var myVar = "I am local\n"; console.log(myVar); }
Quizz
writeGlobal(); setGlobal_writeLocal("I am still global\n"); writeGlobal(); // What displays the console ?
SUPINFO International University http://www.supinfo.com
Functions & Scope
Variable scope
Be careful:
Variable declarations with var are always interpreted before the function execution
SUPINFO International University http://www.supinfo.com
Functions & Scope
Function Expressions
JavaScript supports also function expressions
Functions with or without name (anonymous) Can be used to contain functionality for short-term use
var values = [2, 6, 3];
var displaySquare = function(x) { console.log(x * x); }
values.forEach(displaySquare);
SUPINFO International University http://www.supinfo.com
Functions & Scope
Functional
JavaScript is also a functional language ! First-class functions:
Can be assigned to variables or stored in data structures Can be passed as arguments to other functions Can be returned as the values from other functions
SUPINFO International University http://www.supinfo.com
Functions & Scope
Fn expression VS Fn declaration
Function declarations are evaluated before any instructions in the same context Function expressions are evaluated after all the instructions preceding it
SUPINFO International University http://www.supinfo.com
Questions ?
SUPINFO International University http://www.supinfo.com
Discover JavaScript language
EVENTS
SUPINFO International University http://www.supinfo.com
Events
Presentation
When occurs:
User interaction Action in the execution context
Properties of objects that depends on them May call functions
SUPINFO International University http://www.supinfo.com
Events
Standard Event Attributes
Start a treatment according to the actions of the user (click, mouse move, etc.)
Managed by the event Handler
object
HTML tag that possesses events Available event of the object
event
<input type="button" value="push me" onclick="alert('you click the button');"/>
Arguments
Available arguments of the object
SUPINFO International University http://www.supinfo.com
action
Action associated to the event
Events
Standard Event Attributes
Event onLoad
Description Page is completely loaded
onUnload
onClick onDblclick onMouseover onMouseout
Browser leaves current page
User clicks on an element User double clicks on an element Mouse flies over an element Mouse leaves an element
SUPINFO International University http://www.supinfo.com
Events
Standard Event Attributes
Event onFocus
Description An input field gets focus
onBlur
onChange onSelect onSubmit
An input field loses focus
User modifies content of an input field User selects content of an input field User submits a form
SUPINFO International University http://www.supinfo.com
Questions ?
SUPINFO International University http://www.supinfo.com
Events
Exercises (1/2)
Youre going to play with event handler! Create a page containing only one HTML button Create a new JS file
With two functions inside:
goToGoogle(): redirect the user to the google website moveButton(): move the button inside the window without outpassing page bounds
SUPINFO International University http://www.supinfo.com
Events
Exercises (2/2)
SUPINFO International University http://www.supinfo.com
Discover JavaScript language
DOM INTERACTIONS
SUPINFO International University http://www.supinfo.com
DOM
Introduction
Document Object Model W3C Standard
Whole of standardized objects for HTML Standardized tools to access and manipulate HTML documents
Independent of the language or the platform
SUPINFO International University http://www.supinfo.com
DOM
Introduction
Simplified arborescence:
window document
html body form
input img
SUPINFO International University http://www.supinfo.com
DOM
Access Elements
Access to all the structure of an HTML page We will be able to dynamically:
Access HTML elements Access, Modify and delete attributes and values Create, modify and delete elements Organize elements into a hierarchy
SUPINFO International University http://www.supinfo.com
DOM
Access Elements
Access elements by their ID:
Return an unique element
document.getElementById(id);
Access elements by their name:
Return a JavaScript array containing all homonyms
document.getElementsByName(name);
SUPINFO International University http://www.supinfo.com
DOM
Access Elements
Access elements by their tag name:
Return a JavaScript array containing all elements with the specified tag
document.getElementsByTagName(tagName);
SUPINFO International University http://www.supinfo.com
DOM
Access Elements
Example:
<img id="img1" name="theImage" src="test.png" /> <script type="text/javascript">
var img = document.getElementById("img1");
var elements = document.getElementsByName("theImage"); console.log(elements[0] === img); // true elements = document.getElementsByTagName("img"); console.log(elements[0] === img); // true </script>
SUPINFO International University http://www.supinfo.com
DOM
Access Elements
Access to all child nodes of an element:
element.childNodes;
Access to the parent node:
element.parentNode;
SUPINFO International University http://www.supinfo.com
DOM
Manipulate Attributes
Access to the attributes of an element:
element.getAttribute("attribut");
Modify the attributes of an element:
element.setAttribute("attribut", "valeur");
SUPINFO International University http://www.supinfo.com
DOM
Manipulate Values
Access to the text of an element:
element.firstChild.nodeValue;
Modify the text of an element:
element.firstChild.nodeValue = "texte";
SUPINFO International University http://www.supinfo.com
DOM
Other manipulations
Create an element
var e = document.createElement('p');
Modify the element
e.style.textAlign = 'center';
SUPINFO International University http://www.supinfo.com
DOM
Other manipulations
Add the element to the parent
parent.appendChild(e);
Delete an element
var e = document.getElementById("deleteMe"); e.parentNode.removeChild(e);
SUPINFO International University http://www.supinfo.com
DOM
Other manipulations
Add an element before an other one
element.parentNode.insertBefore(new_element,element);
Contender new_element element
SUPINFO International University http://www.supinfo.com
Accessing Elements
<div id="content"> <h1>Hello world!</h1> <p> Its my <strong>awesome</strong> page! </p> </div> <script type="text/javascript"> var divEl = document.getElementById("content"); var strongEl = divEl.childNodes[1].childNodes[1]; </script>
SUPINFO International University http://www.supinfo.com
Questions ?
SUPINFO International University http://www.supinfo.com
DOM
Exercise
Youre going to add JavaScript code to your contact form to validate user inputs! Create a new JS file.
Declare a function named validateForm() which validate your form inputs
All fields have to be filled Names must not contain numbers E-mail format has to be validated with RegExp
SUPINFO International University http://www.supinfo.com
Discover JavaScript language
INTRODUCTION TO OBJECT MODELING
SUPINFO International University http://www.supinfo.com
Introduction to object modeling
Presentation
JavaScript is an Object Oriented Programming language that uses Prototypes
Well see more about OOP next year but there are some basic concepts we have to see during this course
SUPINFO International University http://www.supinfo.com
Introduction to object modeling
Presentation
Objects in JavaScript are mutable keyed collections
number, string, boolean, null and undefined are primitive types
Arrays are objects
SUPINFO International University http://www.supinfo.com
Introduction to object modeling
Presentation
An object contains properties A property has a name and a value
A property name can be any string A property value can be any JavaScript value
Strings Arrays Functions!
SUPINFO International University http://www.supinfo.com
Introduction to object modeling
Presentation
There are several ways to declare an object Were going to see just one during this course! Thats called : Object Literals
SUPINFO International University http://www.supinfo.com
Introduction to object modeling
Object Literals
Convenient notation for creating new objects A pair of curly braces surrounding zero or more name/value pairs:
var barney = { "firstName": "Barney", "lastName": "Stinson", "saySmthg": function() { console.log("Its gonna be..."); } }
SUPINFO International University http://www.supinfo.com
Introduction to object modeling
Object Literals
Quotes around property names are optional if the name is a legal JavaScript name
Property values can be other object literals
SUPINFO International University http://www.supinfo.com
Introduction to object modeling
Object Literals
Example:
var trip = { departure: { city: "Paris", country: "France" }, arrival: { city: "Montreal", country: "Canada" }, price: 890 }
SUPINFO International University http://www.supinfo.com
Introduction to object modeling
Object Literals
To access a property:
var firstName = barney.firstName;
var lastName = barney["lastName"];
To call a method:
barney.saySmthg(); barney.["saySmthg"]();
SUPINFO International University http://www.supinfo.com
Introduction to object modeling
Object Literals
To create new instances based on an existing object, you can clone it:
var anotherBarney = Object.create(barney); anotherBarney.saySmthg = function() { console.log("... Legendary!"); }; barney.saySmthg(); anotherBarney.saySmthg();
SUPINFO International University http://www.supinfo.com
Introduction to object modeling
The new operator
You can also in some specific case use the new operator to create new instances
Well see more about how to define objects with it in a next course
var anArray = new Array(); // It works! var newBarney = new barney(); // It doesnt work because // barney is an object literal
SUPINFO International University http://www.supinfo.com
Introduction to object modeling
Standard objects
Main objects provided by the language:
Type Array Math Date RegExp Represent a data array Provide mathematics functions Represent a date A useful type to use regular expressions Description
SUPINFO International University http://www.supinfo.com
Introduction to object modeling
Standard objects: Math
Math object
Properties: mathematical constants Methods: mathematical functions
var var var var nqpi = Math.round(Math.PI); // 3 logE = Math.log(Math.E); // 1 al = Math.random(); // ? al2 = Math.floor(Math.random() * 10);
SUPINFO International University http://www.supinfo.com
Introduction to object modeling
Standard objects: Date
Date object
Represents a date/hour Provide some useful functions
var var var var now = new Date(); // today unix = new Date(0); // 1970-01-01 date1 = new Date("Day Mth dd YYYY hh:mm:ss"); date2 = new Date("YYYY","MM","DD","hh","mm","ss","ms");
var timestamp = Date.now();
SUPINFO International University http://www.supinfo.com
Introduction to object modeling
Standard objects: RegExp
RegExp object
Allow to manipulate regular expressions Can be created by two ways
var regex = /PATTERN/<g|i|gi>; regex = new RegExp("PATTERN",<"g"|"i"|"gi">);
Use modifiers:
"g" for "global" "i" for "insensitive"
SUPINFO International University http://www.supinfo.com
Introduction to object modeling
Standard objects: RegExp
RegExp object:
Patterns also have functions:
test(str) to check if there is a match exec(str) to return matched string parts
var str = "cdbBdbsbz; var re = /d(b+)(d)/ig; var match = re.test(str); console.log(match); // Display: true var result = re.exec(str); console.log(result.toString()); // Display: dbBd,bB,d
SUPINFO International University http://www.supinfo.com
Questions ?
SUPINFO International University http://www.supinfo.com
Discover JavaScript language
CLAIRVOYANCE!
SUPINFO International University http://www.supinfo.com
Clairvoyance
Presentation
This interactive service will tell to people their magic number (between 0 and 9), from their firstname You will also propose a service called "Love Meter" that will, from magic Numbers, find a compatibility level between a couple
SUPINFO International University http://www.supinfo.com
Clairvoyance
Magic Number
To find the magic number, you will use the addition of products of each letter and a coefficient (index of the letter in the word) as shown in the next slide
SUPINFO International University http://www.supinfo.com
Clairvoyance
Magic Number
Example : Jim
j: 106^1 = 106 --> 1 + 0 + 6 = 7 i: 105^2 = 11025 --> 1 + 1 + 0 + 2 + 5 = 9 m: 109^3 = 1295029 --> 1 + 2 + 9 + 5 + 0 + 2 + 9 = 28
--> 2 + 8 = 10 --> 1 + 0 = 1
TOTAL : 7 + 9 + 1 = 17 1 + 7 = 8
SUPINFO International University http://www.supinfo.com
Clairvoyance
Magic Number
To get the value of a letter, you have to use charCodeAt method on a string
Example : "tatito".charCodeAt(3);
-> gives 105
To proceed the operation 9 power 2 (9^2) in JavaScript, we use : Math.pow(9,2)
SUPINFO International University http://www.supinfo.com
Clairvoyance
Magic Number
To calculate the compatibility, the user have to insert two names
Then find the magic number and compares it :
High : if the gap between the numbers is < 3 Medium : if the gap is between 3 and 6 (included) Low : otherwise
SUPINFO International University http://www.supinfo.com
Clairvoyance
Bonus
Add styles and colors to your webpage ;-)
SUPINFO International University http://www.supinfo.com
SUPINFO International University http://www.supinfo.com
