C5 Javascript


Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

C5 Javascript

  1. 1. Client-side Scripting Languages Introduction to Javascript
  2. 2. Plan of the course <ul><li>Javascript – Why, When, What </li></ul><ul><li>How to include Javascript in HTML </li></ul><ul><li>Javascript syntax </li></ul><ul><li>Document Object Model </li></ul><ul><li>Examples </li></ul>
  3. 3. Javascript – Why, When, What <ul><li>At first we had only simple text + links + images pages </li></ul><ul><li>“ live” pages were required by the market </li></ul><ul><li>Netscape invented “LiveScript” in 1995 </li></ul><ul><li>Later renamed to Javascript </li></ul><ul><li>Javascript – run on browsers, access dynamically to the html page </li></ul><ul><li>The language was (is) interpreted usually in different way by the browsers </li></ul>
  4. 4. Include Javascript into HTML <ul><li>Script inclus in pagina html </li></ul><ul><ul><li><script type=”text/javascript”> </li></ul></ul><ul><ul><li>//cod script </li></ul></ul><ul><ul><li></script> </li></ul></ul><ul><li>Script inclus intr-un fisier exterior </li></ul><ul><ul><li><script src=”fisier_sursa.js”></script> </li></ul></ul>
  5. 5. When does the code run <ul><li>If the script tag is included in the <head> tag </li></ul><ul><ul><li>The script is executed when the page is loaded – before actually rendering it </li></ul></ul><ul><li>If the script is included in the body page </li></ul><ul><ul><li>The script is executed when the markup is found </li></ul></ul>
  6. 6. Javascript Syntax <ul><li>Very similar with C & Java </li></ul><ul><li>No types for variables </li></ul><ul><ul><li>Declare variables using the term var </li></ul></ul><ul><ul><li>var x=5, y=7; </li></ul></ul><ul><li>Functions are declared using the function keyword </li></ul><ul><ul><li>function sum(x,y) </li></ul></ul><ul><ul><li>{ var rez=x+y; return rez;} </li></ul></ul><ul><li>Calling functions is the same as in C/Java </li></ul><ul><ul><li>var suma=sum(2,5); </li></ul></ul>
  7. 7. Javascript objects <ul><li>Objects have </li></ul><ul><ul><li>methods (functions) </li></ul></ul><ul><ul><li>Properties </li></ul></ul><ul><li>Example </li></ul><ul><ul><li>var student={nume: &quot;ion&quot;, an:2, note:{mate:9, pc:8}}; </li></ul></ul><ul><ul><li>alert(student.nume +&quot;<br>&quot; ); </li></ul></ul><ul><ul><li>alert(student.an +&quot;<br>&quot;); </li></ul></ul><ul><ul><li>var nota </li></ul></ul><ul><ul><li>var student={nume: &quot;ion&quot;, an:2, note:{mate:9, pc:8}}; </li></ul></ul>
  8. 8. Javascript predefined objects <ul><li>Math </li></ul><ul><ul><li>http://www.w3schools.com/jsref/jsref_obj_math.asp </li></ul></ul><ul><li>String </li></ul><ul><ul><li>http://www.w3schools.com/jsref/jsref_obj_string.asp </li></ul></ul><ul><li>Array </li></ul><ul><ul><li>http://www.w3schools.com/jsref/jsref_obj_array.asp </li></ul></ul><ul><li>Date </li></ul><ul><ul><li>http://www.w3schools.com/jsref/jsref_obj_date.asp </li></ul></ul>
  9. 9. Examples <ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>function printValue() //declare a function </li></ul><ul><li>{ </li></ul><ul><li>var x=Math.random()*10; //compute the value of x as a random value between 0 and 10 </li></ul><ul><li>alert(x); //display an alert containing the value of x </li></ul><ul><li>var y=&quot;a random text&quot;; //create a variable of type string </li></ul><ul><li>alert(y.length); //display an alert containing the length of y </li></ul><ul><li>//!!! length is a property and not a method </li></ul><ul><li>alert(y.substr(0,5)); //compute and display as an alert the substring of y between the first and the 5 th character </li></ul><ul><li>alert(x+&quot; &quot;+y.length+“ “+y.substr(5,y.length)); </li></ul><ul><li>//display as an alert the string formed by x, length of y and the substring formed from the 5 th character of y until the last one </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul>
  10. 10. Javascript example - followup <ul><li>String concatenation operator “+” </li></ul><ul><li>The alert is used for displaying information during development. NOT to be used in applications </li></ul><ul><li>Objects can have methods like y.substr(0,5) and properties like y.length </li></ul><ul><li>All types of variables are declared using var </li></ul>
  11. 11. Events <ul><li>HTML elements can detect when the user interacts with them </li></ul><ul><li>Examples of interactions </li></ul><ul><ul><li>Mouse over (mouse out) </li></ul></ul><ul><ul><li>Click </li></ul></ul><ul><ul><li>Key pressed </li></ul></ul><ul><ul><li>Blur </li></ul></ul><ul><ul><li>change </li></ul></ul><ul><li>We can add javascript code to handle every interaction </li></ul>
  12. 12. Events examples <ul><li><script type=“text/javascript”> </li></ul><ul><li>function youClicked(element) </li></ul><ul><li>{this.innerHTML=&quot;you clicked this element&quot;;} </li></ul><ul><li>function youMousedOver() </li></ul><ul><li>{alert(&quot;mouse over detected&quot;); } </li></ul><ul><li></script> </li></ul><ul><li><h1 onclick=&quot;alert('youclicked');youClicked( this );&quot; onmouseover=&quot;youMousedOver()&quot;> Introduction dans la programmation web</h1> </li></ul>
  13. 13. Javascript Events <ul><li>Why we need and what is the “this” pointer </li></ul>Html element User interacts event1 event2 Event1 associated javascript function In order for this function to be able to modify the element with which the user interacted we need to pass it a reference to the object “this” is the reference to the object on which the event is handled
  14. 14. DOM <ul><li>DOM=Document Object Model </li></ul><ul><li>DOM = a way to access the elements of a HTML page </li></ul>
  15. 15. DOM <ul><li>The DOM tree contains nodes which can be </li></ul><ul><ul><li>Html elements </li></ul></ul><ul><ul><li>Text </li></ul></ul><ul><li>The tree elements can be accessed </li></ul><ul><ul><li>By traversing the tree (See Data structures course) </li></ul></ul><ul><ul><li>By accessing them directly by name (getElementsByTagName) </li></ul></ul><ul><ul><li>By accessing them directly by id (getElementById) </li></ul></ul><ul><ul><li>Addressing them directly (as in an array) </li></ul></ul><ul><li>The root of the DOM tree is the document </li></ul>
  16. 16. Methods and properties <ul><li>document.write(“text”) </li></ul><ul><ul><li>Adds the “text” to the given page </li></ul></ul><ul><ul><li>If the page is finished loading it rewrites it </li></ul></ul><ul><ul><li>Example </li></ul></ul><ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul></ul><ul><ul><ul><li>function printValue() </li></ul></ul></ul><ul><ul><ul><li>{ </li></ul></ul></ul><ul><ul><ul><li>var x=Math.random()*10; </li></ul></ul></ul><ul><ul><ul><li>alert(x); </li></ul></ul></ul><ul><ul><ul><li>var y=&quot;a random text&quot;; </li></ul></ul></ul><ul><ul><ul><li>alert(y.length); </li></ul></ul></ul><ul><ul><ul><li>alert(y.substr(0,5)); </li></ul></ul></ul><ul><ul><ul><li>alert(x+&quot; &quot;+y.length+&quot;!!!&quot;+y.substr(5,y.length)); </li></ul></ul></ul><ul><ul><ul><li>document.write(x+&quot; &quot;+y.length+&quot;!!!&quot;+y.substr(5,y.length)); </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li></script> </li></ul></ul></ul>
  17. 17. DOM Methods and properties <ul><li>getElementsByTagName </li></ul><ul><ul><li>Returns an array of elements with a given name </li></ul></ul><ul><ul><li>The we need to know the position of the element we need to modify inside the array </li></ul></ul><ul><ul><li>function modifySecondH1() </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>var headersArray=document.getElementsByTagName(&quot;h1&quot;); //retrieves all the elements whose names are h1 </li></ul></ul><ul><ul><li>//elements’ numbering in the array starts at 0 </li></ul></ul><ul><ul><li>headersArray[1].innerHTML=Math.random()*5; } </li></ul></ul>
  18. 18. DOM Methods and properties <ul><li>document.getElementById </li></ul><ul><ul><li>The most used method to access an element of a html page </li></ul></ul><ul><ul><li>We have to be careful to set ids for the elements </li></ul></ul><ul><ul><li>function modifyFirstH1() </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>//retrieve the element with the id h1id1 </li></ul></ul><ul><ul><li>var h1Element=document.getElementById(&quot;h1id1&quot;); </li></ul></ul><ul><ul><li>//set the HTML value for the document </li></ul></ul><ul><ul><li>h1Element.innerHTML=&quot;new title&quot;; </li></ul></ul><ul><ul><li>} </li></ul></ul>
  19. 19. DOM objects methods and properties <ul><li>Direct access to the element </li></ul><ul><li>Predefined collections </li></ul><ul><ul><li>Forms </li></ul></ul><ul><ul><li>Links </li></ul></ul><ul><ul><li>Images </li></ul></ul><ul><li>document.forms[0].username.value – accesses the first form in the document and sets the value property for the username input </li></ul>
  20. 20. Example – using javascript to validate forms <ul><li>When a form is submitted we need to validate it first on the client-side </li></ul><ul><li>The form should be validated before submitting </li></ul><ul><li>The event should be added to the submit button </li></ul><ul><li>For example we want to check if 2 passwords have the same value and if the username is longer than 4 characters </li></ul>
  21. 21. Validate forms with Javascript – example (I) <ul><li>function validateForm(){ </li></ul><ul><li>var usernameElement=document.getElementById(&quot;username&quot;); </li></ul><ul><li>var passwordElement=document.getElementById(&quot;password&quot;); </li></ul><ul><li>var rePasswordElement=document.getElementById(&quot;repassword&quot;); </li></ul><ul><li>if(passwordElement.value!=rePasswordElement.value || passwordElement.value.length==0) </li></ul><ul><li>{alert(&quot;please make sure the password is entered the same twice&quot;);return;} </li></ul><ul><li>if (usernameElement.value.length<4) </li></ul><ul><li>{alert(&quot;please make sure the username is longer than 4 letters&quot;);return; } </li></ul><ul><li>document.forms[0].submit(); </li></ul><ul><li>} </li></ul>
  22. 22. Example of form validation with Javascript (II) <ul><li><form action=&quot;script.php&quot; method=&quot;POST&quot;> </li></ul><ul><li>nom d'utilisateur<input type=&quot;text&quot; id=&quot;username&quot; /><br/> </li></ul><ul><li>mot de passe<input type=&quot;password&quot; id=&quot;password&quot; /> <br/> </li></ul><ul><li>mot de passe encore une fois <input id=&quot;repassword&quot; type=&quot;password&quot;> <br/> </li></ul><ul><li><input type=&quot;button&quot; value=&quot;send&quot; onclick=&quot;validateForm();&quot;/> </li></ul><ul><li></form> </li></ul>
  23. 23. Javascript debugging <ul><li>Firebug – extension for Firefox </li></ul><ul><ul><li>Allows debugging of scripts </li></ul></ul><ul><ul><li>Step by step execution </li></ul></ul><ul><ul><li>Adding breakpoints </li></ul></ul><ul><ul><li>Watch expressions </li></ul></ul><ul><ul><li>Visualize the DOM tree </li></ul></ul>
  24. 24. Javascript debugging example