http://a3nm.net/work/teaching/ Fabian M. Suchanek With material from a course by Antoine Amarilli Javascript
JavaScript by Example JavaScript Generalities Other Technologies Overview 2
• Nécessité d'avoir un comportement dynamique  côté client ,   sans interagir avec le serveur.  •  Cas simples  : validation de formulaire, ouverture de menus...      • pour aller au-delà de ce que permettent HTML et CSS ;      • par compatibilité avec les vieux navigateurs ;      • ou, il y a quelques années, par nécessité.  •  Cas complexes  : écrire des applications complètes   pour le navigateur pour remplacer les applications client.  • Quelques  technologies  généralement plus isolées   du reste de la page : Flash, Java, Silverlight, etc. • Solution  la plus répandue  : langage  JavaScript  (ECMAScript).   Attention, rien à voir avec Java.  Motivation 3
• Netscape wanted a  lightweight programming language   that would appeal to non-professionals (like M$’s Visual Basic) • Originally named  Mocha  and  LiveScript ,   then renamed  JavaScript  to benefit from the   boom of the programming language  Java • Released in 1995, implemented in Netscape browser • Became very popular, adopted in 1996 in Microsoft  Internet Explorer • In order to avoid trademark issues, Microsoft named their   implementation  JScript  — but it’s the same thing! • Standardized in 1997 as  ECMAScript   in the  ECMA-262 specification • Current version of the specification:  December 1999 • Today, JavaScript is one of the  most used  programming languages • “JavaScript” is still trademarked by  Oracle History of JavaScript 4
    <html>        <head>          <script>             function maFonction() {               document.getElementById("monElement").style.color="red";             }          </script>        </head>          <body>             <span onmouseover ="maFonction()"  id ="monElement" >               venir ici!           </span> ... Try it out! 5 (Reload the page in the browser after each modification) important
“Active” element id of the active element any name, as long as it’s the same Explained 6     <html>        <head>          <script>             function maFonction() {               document.getElementById("monElement").style.color="red";             }          </script>        </head>          <body>             <span onmouseover ="maFonction()"  id ="monElement" >               venir ici!           </span> ...
Event that we target. Also try: onclick, ondblclick, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup Explained 7     <html>        <head>          <script>             function maFonction() {               document.getElementById("monElement").style.color="red";             }          </script>        </head>          <body>             <span onmouseover ="maFonction()"  id ="monElement" >               venir ici!           </span> ...
<span onmouseover='maFonction();'>   click here </span> • Mouse events:   onclick, ondblclick, onmousedown, onmousemove   onmouseover, onmouseout, onmouseup • Key events:   onkeydown, onkeyup, onkeypress • Frame events:   onload, onresize, onscroll Events 8
    <html>        <head>          <script>             function maFonction() {               document.getElementById("monElement").style.color="red";             }             </script>        </head>          <body>             <span onmouseover ="maFonction()"  id ="monElement" >               venir ici!           </span> Function that will be executed any name, as long as it’s the same Explained 9
Implementation of the function. Retrieve the active element Explained 10     <html>        <head>          <script>             function maFonction() {               document.getElementById("monElement").style.color="red";             }             </script>        </head>          <body>             <span onmouseover ="maFonction()"  id ="monElement" >               venir ici!           </span>
An HTML document has a tree structure - the  DOM tree . <!DOCTYPE html> <html>   <head>     <title>This appears...</title>   </head>   <body>      <h1>Disneyland...</h1>      <h1>Legoland...</h1>   </body> </html> Tree structure is shown by indentation 11 Reminder: DOM Tree html head body title h1 h1 This appears... Disneyland Legoland
document.body The HTML  DOM  (document object model) is a standard for how to get, change, add, or delete HTML elements. [w3schools] 12 JavaScript accesses DOM Tree html head body title id="foo" h1 h1 This appears... Disneyland Legoland document.documentElement document.getElementById("foo")
We can  navigate  from one node to another by node methods: 13 DOM Navigation h1 body html div p p span firstChild previousSibling div nextSibling parentNode lastChild
    <html>        <head>          <script>             function maFonction() {               document.getElementById("monElement").style.color="red";             }          </script>        </head>          <body>             <span onmouseover ="maFonction()"  id ="monElement" >               venir ici!           </span> Change its properties Explained 14
    <html>        <head>          <script>             function maFonction() {               var maVariable=document.getElementById("monElement");               maVariable.style.color="red";             }          </script>        </head>   A variable is a container for a value. Variables 15
If  n  is a variable that contains an HTML node, then •  n.nodeName  is the name of the tag (BODY...) •  n.innerHTML  is whatever is inside the node •  n. attribute  is the attribute value var maVariable=document.getElementById("foo"); maVariable.innerHTML="Hello!" document.getElementById("foo").innerHTML="Hello!" document.getElementById("myImage").src="elvis.jpg" 16 What can we do with a node? Example:
    n.style.borderStyle = "solid"     n.style.borderWidth="3px"       n.style.visibility="hidden" If  n  is a variable that contains an HTML node, then •  n.nodeName  is the name of the tag (BODY...) •  n.innerHTML  is whatever is inside the node •  n. attribute  is the attribute value •  n.style  is the style of the node. •  n.style attribute  is the style attribute of that name (replace hyphens by camelCase) 17 Changing style Example: important
• JavaScript is  case sensitive ! • Whitespace does not matter • The semicolon at the end is optional,   unless you want to have two commands in one line • Comments start with  //   multi-line comments are in  /* ... */       <head>          <script>             // var iable=document.get...             /* Sometimes I believe the browser                ignores all my comments :-( */          </script>        </head> JavaScript Syntax 18
variable  is a named container for a value (like a  drawer ). • In JavaScript, variables are  declared   by  var  before use • Undeclared variables are automatically declared globally var monNoeud=document.getElementById("monId"); tonNoeud=document.getElementById("tonId"); var maValeur="Hello" var taValeur=7 (details) JavaScript Variables 19
• JavaScript can evaluate  arithmetic expressions  • For  Numbers :   +, *, /, -, %  • For  Strings :   +    =>  Anything mixed with a string becomes a string var x=1; function maFonction() {   x = x + 1;   document.getElementById("counter").innerHTML = x+" times"; } JavaScript Arithmetic 20
Code can be grouped into  functions :               function  showTruth() {                alert("Ron is a baby face");              }              ...              // Nothing happens unless we  call  the function              showTruth() Functions 21
              function  showTruth(myMessage) {                alert(myMessage);              }              ...              // Nothing happens unless we  call  the function              showTruth("Ron is a baby face") Functions can have arguments 22
var x=document.getElementById("monElement"); if(x.style.color=="red")   x.style.color="blue"; } else {   x.style.color="red"; } Any sequence of instructions here Any sequence of instructions here Other conditions:  >, <, <=, >= Conditional execution 23 Any condition here (note the double ==) important
Motivation 24 + ?
    <html>        <head>          <script>             function maFonction() {               alert("Hermione, he's not the right guy!");             }          </script>        </head>   Alerts 25
// Free partnership advice var x=prompt("Enter your name","type here") if(x=="Hermione") {   alert("Your dream partner: Harry") } else {   alert("Your dream partner: Ron") } Prompting 26
var x=prompt("Enter your partner's name","type here") while(x!="Harry") {   x=prompt("Try again","type here") } alert("Good choice!") JavaScript While 27
The execution can do a  counted loop  by    for(start; condition; end)             var myList=[ "smart", "good looking", "kind"]             for(var i=0; i<myList.length; i++) {                alert("Harry is "+myList[i])             } JavaScript For 28 for pro’s
JavaScript can  modify  the DOM tree: <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div>   <script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node);   var element=document.getElementById("div1"); element.appendChild(para); </script> [w3schools] 29 Adding nodes
JavaScript can  modify  the DOM tree: <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div>   <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child); </script> [w3schools] 30 Removing nodes
The  window  object represents the browser window:              var  w= window   •  w.innerHeight : the inner height of the browser window •  w.innerWidth : the inner width of the browser window •  w.open ( url title ): open a new window •  w.close (): close the window •  w.location.href : the URL of the current window      =>   w.window.location.assign ( URL ) to load new page •  w.history : the history of the browser page      =>   w.history.back() history.forward()         imitates back and forward buttons 31 The  Window  object
      <head>          <script src="myScript.js">          </script>        </head> alert("Hermione, see the writing on the wall!") External scripts 32 index.html myScript.js
function  vrf() {   v1 = document.getElementById("pw1").value;   v2 = document.getElementById("pw2").value;    if (v1 != v2) }     alert("Bad input");      return  false;   } } <form action="test.php" method="post" onsubmit="return vrf()">   <input type="password" name="pw1" id="pw1"><br>   <input type="password" name="pw2" id="pw2"><br>   <input type="submit"> </form> Try it! 33 Form validation
JavaScript by Example JavaScript Generalities Other Technologies Overview 34
Different names for the same thing: •  ECMAScript  : name of the standard •  JavaScript : name of the language for Mozilla •  JScript : name of the language Microsoft - they are all the same!   JavaScript is  •  Turing-complete , i.e., it can compute everything a computer   can compute •  interpreted , i.e., the code is read line after line by the browser •  dynamically typed , i.e., we don’t have to decide the type   of a variable •  reflective , i.e, it can evaluate its own code JavaScript Overview 35
• JavaScript is  object-oriented , but works through  prototypes   (existing objects are cloned) rather than classes  • Functions are   first class citizens :   anonymous functions, closures, functions are objects  • Supports   exceptions •  Object-oriented  syntax:      •  foo.a  for the field  a  of the object  foo     •  foo.b(arg)  to call the method (function)  b  of  foo       with the argument  arg . Object Orientation 36 for pro’s
IE . Chakra, proprietary, since IE9.  Firefox . SpiderMonkey, open, since 1996 Chrome . V8, launched with Chrome in 2008.   Used also by the last versions of Opera browser Safari . JavaScriptCore, rebaptized “SquirrelFish” in 2008. =>  Active research area: improving the  performance  !  =>  JavaScript can also be  complied , not only interpreted  Implementations of JavaScript 37
JavaScript DOM Tree Manipulation Other Technologies Overview 38
jQuery  is a JavaScript library (collection of methods) to simplify DOM tree manipulation.   • Started in  2006 . • Around  80kb . • Free and open ( MIT ). • Used by > 55% of the 10 millions most visited sites • Provides an abstraction layer over the particuliarities of   different browsers end>48 39 jQuery pas dans ce cours
<script src="jquery.js"></script>   // Hide all  .test  elements $(".test").hide()   $   // Make an element red on mouse down $("#p1").mousedown(function() {   $(this).css("background-color","red");  }); end>48 40 jQuery Example pas dans ce cours
• When we want to get new data from the server,   we usually  refresh  the page • This is  inefficient  and  disturbing • Idea: reload only the part of the page that changed  •  1996 : Microsoft introduces the  <iframe>  tag •  1999 : Microsoft introduces  ActiveX , which   allow reloading only part of a Web page • This was taken over by other browsers as  XMLHttpRequest • Microsoft now also support  XMLHttpRequest   This technique, together with CSS, HTML, and Javascript, is AJAX  (Asynchronous JavaScript and XML) - a framework that allows reloading  only part of the page .   Extensively used and popularized by  Google . end>48 41 AJAX pas dans ce cours
var  r = new XMLHttpRequest(); r.open('get', 'send-ajax-data.php'); r.onreadystatechange =  function () {     // Ready state 4 means the request is done     if(xhr.readyState == 4) {         // 200 is a successful return         if(xhr.status == 200) {             alert(xhr.responseText);  } } } // Launch the request xhr.send(null); The most important functionality of AJAX is a JavaScript object of type  XMLHttpRequest , which sends an asynchronous request to the server. Try it out! [wikipedia] end>48 42 AJAX Example pas dans ce cours
Flash  is a software platform that allows user interaction and multimedia display in a browser.   • Launched in  1996  by Macromedia.  • For a long time  the only means  (with Java) to have   sound, videos, interactive games, etc. in the browser • Some pages are  only in Flash • Also used for  animated comic strips , and PC  games   • Used by  17 %  of the top 10 millions sites. • Lost 5 % between September 2012 an September 2013  •  95 - 99 %  of PCS support it (Source : The Tangled Web, 2012.) • In practice, used for non-HTML5-compatible browsers (source) Flash 43 pas dans ce cours
• Development environment  not free . • Official client is  free but proprietary   • Several  free clients  are in development, but none is yet working • GNU/Linux are still  badly supported .   • Historically, numerous  security holes • Became  less important  with HTML5  • Essentially  not supported  (yet?) on mobile phones • Pages in Flash are  hard to index  for search engines   and  hard to access  for people with special needs,   older browsers, or non-vanilla devices end>48 Disadvantages of Flash 44 pas dans ce cours
Java  is a complete object-oriented programming language. • Compiled to  bytecode • Very popular; very heavy.  • Java applications can run in a browser since 1995  • Java applications run in a  sandbox :   no access to the hard drive or devices  •  No support  on smartphones.  • Used by  0.1%  of the top 10 million sites •   80%  of clients support it end>48 Java 45 pas dans ce cours
Microsoft has developed its own formats: VBScript : antiquity, unlucky competitor of JavaScript ActiveX : Started in 1996, ancestor of AJAX, supported only by   Internet Explorer. Did not take off,  disabled by default  since IE 9.  XBAP  Microsoft NET's equivalent of Java.    Did not take off,  disabled by default  since IE 9.  Silverlight       • Launched in   2006 , similar to  Flash     •  Proprietary  implementation for Windows and Mac OS      •  No support  on smartphones.      • Free implementation  Moonlight  was abandoned.      • Used by 0.2% of the top 10 million sites     • Supported by 65 % of clients end>48 Microsoft 46 pas dans ce cours
WebGL API : JavaScript to make  3D  accelerated by GPU NaCl Google  Native Client, execution of   native code  in the browser,   not popular, Chrome only   SVG+JavaScript : Manipulating  vector graphics  with JavaScript.    <canvas> : HTML5 region in the page where JavaScript can  paint .   Not vector graphics, used for  video games  instead of Flash  Example Example The Future 47 pas dans ce cours
•  JavaScript  allows   • manipulating elements of the DOM tree   • reacting to user actions •  AJAX  allows reloading only part of a page •  Java, Flash  and  Microsoft formats  are other means   to use interaction and multimedia content JavaScript Summary 48 important pas dans ce cours: