JavaScript 2. Jef De Smedt Beta VZW

Size: px

Start display at page:

Download "JavaScript 2. Jef De Smedt Beta VZW"

Dorthy Crawford
5 years ago
Views:

1 JavaScript 2 Jef De Smedt Beta VZW

2 Overview Introduction Basic elements of JavaScript Arrays Window object Document Object Model Forms Events Objects

3 Recap JavaScript is a scripting language that is browser specific EcmaScript is a standard language which only describes the language, not how to access the elements in the browser JavaScript can access the browser using the window-object Window is the default object in a browser We can access the HTML page with window.document (or, since window is default, just document) The document object uses the Document Object Model (DOM)

4 Recap: the document object Access the HTML elements in JavaScript => Document Object Model (DOM) <html><head></head><body><ol><li>one</li><li>two</li></ol></body></html> html head Child element Parent element body ol li one Text element li one The DOM-tree

5 Recap: the text of an element <!DOCTYPE html> <html> <head> <title>copy values</title> </head> <body> <h1 id="heading">title</h1> <div id="body"></div> <script> var elh1 = document.getelementbyid("heading"); var elbody = document.getelementbyid("body"); elbody.textcontent = elh1.textcontent; </script> </body> </html>

6 Recap: the value attribute (some) Elements have textnode children The text of an <input>-element is not a textnode <input type= text id= name name= name value= John /> <!DOCTYPE html> <html> <head> <title>value attribute</title> </head> <body> <h1 id="heading">john</h1> <input type="text" id="name" name="name" value="nobody"/> <script> var elh1 = document.getelementbyid("heading"); var elname = document.getelementbyid("name"); elname.value = elh1.textcontent; </script> </body> </html> Quite often attributes can be accessed as properties A more generic way is using setattribute and getattribute. elname.setattribute("value", elh1.textcontent);

7 Recap: Clicking on a button <!DOCTYPE html> <html> <head> <title>onclick attribute</title> <script> function SayHi() { </script> </head> <body> alert("hi all"); <h1 id="heading">john</h1> <button id="btn2" onclick="sayhi();">say hi</button> </body> </html> A function is executed when it is called, not when it is read by the browser JavaScript code to execute the function.

8 Recap: Onclick property vs Onclick attribute Instead of using the HTML onclick attribute we can also use the JavaScript onclick property (compare to: HTML value attribute and JavaScript value property) <body> <form> Name: <input type="text" id="txtname"/> <input id="btn" type="button" value="say hi"/> <div id="result"></div> <script> var btn = document.getelementbyid("btn"); btn.onclick = SayHi; </script> </form> </body>

9 Exercise edit Edit field with button. There is also a div below the edit field When the user enters a name and clicks on the button A greeting should appear. The greeting is time dependent: Before 13:00: good morning 13:00 and later: good afternoon

10 Exercise Select 2 select elements, 2 buttons and a list with names When an element is selected and you click on the button > the selected element is moved from left to right Of course this should also work for the toleft button. Extra: when no item is selected, the corresponding button should be disabled

11 Why use btn.onclick instead of < onclick= >? We want to separate the JavaScript code from the HTML code Compare to styles: in most cases you should not use the style attribute in HTML Clear separation between HTML and JavaScript is one of the principles of unobtrusive JavaScript: the site should still work without JavaScript Let us look at an example

12 The obtrusive way This will not work if JavaScript is disabled and there is no way to make it work: <a href="javascript:window.open(' _principles_of_unobtrusive_javascript')">w3c Article</a> The following will work if JavaScript is disabled but it is a maintenance nightmare <a href=" ve_javascript" onclick="window.open(' les_of_unobtrusive_javascript');return false;">w3c Article</a>

13 The unobtrusive way <a class="newwindow" href=" pt">w3c Article</a> <script> var anchors = document.getelementsbyclassname("newwindow"); for (var i=0; i<anchors.length;i++) { anchors[i].onclick = OpenWindow; function OpenWindow(){ window.open(this.href); return false; </script> return false: Do not execute the default behavior (=follow link) The keyword this refers to the <a>-element

14 HTML Forms and JavaScript JavaScript can be used to check form input We need a way to check the fields (HTML5 has many ways to check input, we will use the JavaScript approach here) We need a way to prevent submitting the form We need a way to show an error We can check fields by finding them in the DOM-tree We can prevent submitting a form by having a function return false (prevents default action) We can show an error by changing the css-class of an element

15 Finding elements When we have a class required <form method="get" action=" id="bingform"> <label for="q">search</label> <input type="text" name="q" id="q" class="required"/> <input type="submit" value="submit"/> </form> we can find all the required child elements of a form using getelementsbyclassname: form.getelementsbyclassname( required );

16 Prevent submitting a form The default action for a form is submitting When an eventhandler returns false, the default action will not be executed var f=document.getelementbyid("bingform"); f.onsubmit = checkrequired; function checkrequired() { if (checks_are_ok){ return true; else{ return false;

17 Combined with getelementsbyclassname function checkrequired() { var requiredelements = this.getelementsbyclassname("required"); for (var i=0;i<requiredelements.length;i++) { var val = requiredelements[i].value; if (val === null val.trim() === "") { return false; return true; Because checkrequired is added to the form, this refers to the form.

18 Show error by changing css-class <style>.hideerror{ display:none;.showerror{ display:inline; color: red; </style> We have to change the class from hideerror to showerror in case of an error <form method="get" action=" id="bingform"> <div> <label for="q">search</label> <input type="text" name="q" id="q" class="required"/> <span class="hideerror">field is required</span> </div> <input type="submit" value="submit"/> </form>

19 Show error by changing css-class Most HTML-attributes are accessible as JavaScript properties (value, href, ) However class is a reserved word in JavaScript =>.classname element.classname = showerror ; But how do we find the span-element? requiredelements[i].nextelementsibling.classname= showerror ; nextelementsibling returns the next element with the same parent. (nextsibling would return the next node with the same parent => textnode.)

20 What if there is more than one class.classname is a space separated list of classnames element.classname overwrites the existing css-classes In this example that is OK (we want to change hideerror into showerror ) In modern browsers we can use classlist: var error = requiredelements[i].nextelementsibling; if (val === null val.trim() === "") { error.classlist.remove("hideerror"); error.classlist.add("showerror"); return false;

Altering a form before submitting When we want to search Bing.com for videos, we have to change the URL: http://bing.

21 Altering a form before submitting When we want to search Bing.com for videos, we have to change the URL: Let us try searching in videos using a checkbox We do not add a name because we do not want to send the checkbox to Bing <div> <label><input type="checkbox" id="invideos"/>search in videos</label> </div>

22 Altering a form before submitting We can change the HTML action attribute by changing the.action property in JavaScript var invideo = document.getelementbyid("invideos"); if (invideo.checked){ this.action += "/videos"; Refers to the form

23 Anonymous functions When a function is used in only one place, we do not really have to give it a name => anonymous function f.onsubmit = function() { var requiredelements = this.getelementsbyclassname("required"); for (var i=0;i<requiredelements.length;i++) { var val = requiredelements[i].value; if (val === null val.trim() === "") { return false;

24 Searching google Because there are no French websites in the Netherlands, this combination should give an error Every other combination should be OK Possible values: languages(all, French, Dutch), countries(all, France, Belgium, Netherlands)

25 Summary: finding elements document.getelementbyid( id ): returns one element document.getelementsbytagname( input ): returns all input elements in a document element.getelementsbyclassname( class ): returns a collection of all element children with a certain class form.elements.nameditem( name_or_id ): returns an element with name or id (IE: no name) in a form

26 Advanced events The onclick, onsubmit, on events are one way to work with events There is also the addeventlistener function Disadvantage Does not work in older versions of IE (<9) and Opera (<7): attachevent Advantages Can also add eventhandlers to textnodes, the window object, XMLHttpRequest object, Can add multiple handlers for the same event Can also react to event capturing

27 Capturing and bubbling <!DOCTYPE html> <html> <head> </head> Div is a child of body(in z- <body id="body"> order body sits behind div) <div id="div"> Paragraph is a child of div (div sits behind paragraph) <p id="paragraph">text</p> </div> </body> </html>

28 Capturing and bubbling <script> var body = document.getelementbyid("body"); var para = document.getelementbyid("paragraph"); var div = document.getelementbyid("div"); body.addeventlistener("click", function() { alert("body is clicked(bubbling)"); ); body.addeventlistener("click", function() { alert("body is clicked(capturing)");, true); para.addeventlistener("click", function() { alert("paragraph is clicked(capturing)");, true); para.addeventlistener("click", function(){ alert("paragraph is clicked(bubbling)"); ); div.addeventlistener("click", function(){ alert("div is clicked(bubbling)"); ); div.addeventlistener("click", function() { alert("div is clicked(capturing)");, true); </script> Adds capturing and bubbling eventhandlers to body, div and paragraph. Order of alerts: 1. Body is clicked (capturing) 2. Div is clicked(capturing) 3. Paragraph is clicked(capturing) 4. Paragraph is clicked(bubbling) 5. Div is clicked(bubbling) 6. Body is clicked(bubbling) usecapture parameter (default is false)

29 Capturing and bubbling (more general) <script> var body = document.getelementbyid("body"); var para = document.getelementbyid("paragraph"); var div = document.getelementbyid("div"); body.addeventlistener("click", showclick); function showclick(event){ var element = this.localname; var phase = ""; switch(event.eventphase) { case event.capturing_phase: phase="capturing"; break; case event.bubbling_phase: phase="bubbling"; break; case event.at_target: phase="at target"; break; alert("element: "+element + " in phase: "+phase); </script> Function is owned by body, div or para => this Paragraph is at target (no capture or bubble)

30 AddEventListener remarks We can also remove event listeners: removeeventlistener In IE 8 en Opera 6: attachevent Possible cross browser solution: if (x.addeventlistener) { x.addeventlistener("click", myfunction); else if (x.attachevent) { x.attachevent("onclick", myfunction); IE 8: no event argument => window.event

31 Window.onload vs DOMContentLoaded Up till now we put our script at the end of the DOM-tree => DOM tree is loaded We can also use an event to execute a JavaScript function when the page is loaded: onload-event This event also exists for the window object Because the window object always exists we can put our script in the <head> element The onload event happens when the page is completely loaded (DOM-tree, images, styles, )

32 Window.onload vs DOMContentLoaded <!DOCTYPE html> <html> <head> <title>onload event</title> <script> "use strict"; window.onload = function(){ var para = document.getelementbyid("para"); para.innerhtml="i can write JavaScript"; </script> </head> <body> <p id="para"></p> </body> </html>

33 Window.onload vs DOMContentLoaded DOMContentLoaded event occurs when the DOM-tree is fully loaded It comes before window.onload => JavaScript code will run sooner It is defined on the document object

34 Window.onload vs DOMContentLoaded <!DOCTYPE html> <html> <head> <title>onload event</title> <script> "use strict"; document.addeventlistener("domcontentloaded", function(){ var para = document.getelementbyid("para"); para.innerhtml="i am first"; ); </script> </head> <body> <p id="para"></p> </body> </html>

35 Object oriented JavaScript JavaScript is not an object oriented programming language like Java, C++, C#, Objective C, Python, Ruby, PHP, ) JavaScript has no classes but uses prototypes JavaScript makes no difference between objects and namespaces

36 JavaScript namespaces Let us assume we want to create a library in JavaScript that can be used to do mathematical calculations: "use strict"; var PI= ; function CircleCircumference(radius){ return 2 * PI * radius; function CircleArea(radius) { return PI * radius * radius;

37 JavaScript namespaces We can use this library in an HTML page: <!DOCTYPE html> <html> <head> <title>namespaces</title> <script src="mathlib.js"></script> <script> "use strict"; document.addeventlistener("domcontentloaded", function() { var radius = 3; var circumference = CircleCircumference(radius); document.write("a circle with radius " + radius + " has circumference " + circumference); ); </script> </head> <body> </body> </html>

38 JavaScript namespaces This works and gives the result: A circle with radius 3 has circumference However when we add one line: <html> <head> <title>namespaces</title> <script src="mathlib.js"></script> <script src="movielib.js"></script> <script> We get this result: A circle with radius 3 has circumference NaN

39 JavaScript namespaces This is because of the contents of movielib.js: "use strict"; var PI = "Irrfan Khan"; This statement overwrites the value of PI We can create the variable in a namespace MyMovie "use strict"; var MyMovie = {PI:"Irrfan Khan";

40 JavaScript namespaces We can do the same thing for the Math variable "use strict"; var MyMath = {PI: ; function CircleCircumference(radius){ return 2 * MyMath.PI * radius; To refer to PI in the MyMath namespace we use the dot notation.

41 JavaScript objects We define an object in the same way: var p1 = {FirstName:John, LastName:Lennon; var p2 = {FirstName:George, LastName:Martin; We could say that p1 and p2 are persons but there is no such thing as a Person class => not all person-object will have the same properties

42 Factory method Using a factory method we can create objects with the same properties easier function personfactory(firstname, lastname){ var p = {Firstname: firstname, Lastname: lastname; return p; var person = personfactory( John, Lennon ); This is what the new operator does

43 JavaScript constructor with new operator We can make objects uniform by using a function: function Person(firstname, lastname){ this.firstname = firstname; this.lastname = lastname; var p1 = new Person( John, Lennon ); document.write(p1.firstname); // John Using the new-operator we create a new object Next the function Person is called This refers to the newly created object => every object created using the Person function has a FirstName and a LastName

44 JavaScript object methods Every person object gets its own FirstName and LastName When we look at the object p1 (console.dir) we see the following: The special property proto is copied from the prototype property of the Person function. It is shared by all objects that are instantiated by new Person() When we use the dot operator the JavaScript engine looks for the item on the object itself. If it is not found, it will look for the item in proto

45 JavaScript object methods We can add a function to the prototype property of Person: Person.prototype.GetFullName = function() { return this.firstname + " " + this.lastname; This method is now available for all Person-objects (new Person()) When we write var name= p1.getfullname(); The engine will first look for the function on the object itself. If it is not found it will look for the function in proto

46 Ecmascript 6 (not in Internet Explorer):class The class keyword does exactly the same thing class Person{ constructor(firstname, lastname){ this.firstname = firstname; this.lastname = lastname; GetFullname(){ return this.firstname + " " + this.lastname; let p = new Person("John", "Lennon"); console.log(p.getfullname());

47 What does new do? 1. It creates a new Object 2. It copies the prototype of the constructor function to the new Object 3. It invokes the constructor function on the object together with the arguments

48 What does new do? function Person(firstname, lastname){ this.firstname = firstname; this.lastname = lastname; var p = new Person("John", "Doe"); console.log(p.firstname); This is the same as this function Person(firstname, lastname){ this.firstname = firstname; this.lastname = lastname; var p2 = Object.create(Person.prototype); Person.apply(p2, ["Mary", "Doe"]); console.log(p2.firstname); p2 becomes this in the Person function

49 JavaScript object methods this in GetFullName() refers to the namespace/object in which the function is executed = > p1 When we execute console.dir(p1) we see the following: If we were to add GetFullName() to p1 (p1.getfullname= ) that would take precedence over proto.getfullname (prototypical inheritance)

50 The JavaScript function object Every function is an object and has a prototype The prototype has a call() function to use the function with an object (which we will never do) function GetFullName2(){ return this.firstname + " " + this.lastname; document.write(getfullname2.call(p1) + "<br>"); By calling call(p1) we set p1 as the this object.

51 Closures JavaScript has two variable scopes: global and (function) local Global or window scope (name is available everywhere in the script): var name="john"; Every variable declared in a function is only available in the function: function DoSomething() { var number = 42; JavaScript does not have block scope when we use var while(i<10){ var j = 5; i++; document.write(j); J is known outside of block. If this while-statement is used at the top-level (global) scope, j becomes part of the window object.

52 Intermezzo: remember hoisting The code while(i<10){ var j = 5; i++; Is the same as var j; while(i<10){ j = 5; i++; Conclusion: variables are hoisted on the global and function level

53 Closures The lifetime of a function scoped variable is equal to the execution time of the function: function DoSomething(){ var i; document.write(i); DoSomething(); Variable i exists only during the execution of this statement.

54 Intermezzo: inner functions In JavaScript functions can be nested A nested function has access to the local variables of its parent function function outerfunction() { var i=42; function innerfunction() { document.write(i); variable i is accessible in the inner function

55 Closures Closure defines a local variable with a lifetime that exceeds the execution time of the function When a variable in a parent function is used in an inner function, the variable remains available to the inner function even after the parent function has finished executing But maybe we better take a look at an example

56 Closures <script> "use strict"; var add = function(){ var counter=0; return function() { counter++; (); add(); add(); </script> document.write(counter + "<br>"); Mind the call-operator, Richard! (minding the call operator, dear) The variable add is not equal to the anonymous function, but to the returnvalue of this function. The returnvalue is also a function. This inner function refers to counter which is defined in the outer function. Every time we call add(), we are in fact calling the inner function. The variable counter is initialized once (during the execution of the parent function). The variable will remain accessible to the inner function. Output: 1 2

57 Closure in an object oriented way(module design pattern) obj has a private member variable (state) We can get the value using GetCounter() We can change the value using Increment() var obj = function() { var counter = 0; return { GetCounter: function() {return counter;, Increment: function() {counter++; (); obj.increment(); document.write(obj.getcounter());

58 Be carefull with closures In the next example all invocations of the id() function will return 3 function uniqueidcreator(people){ var ID=1; for (var i=0;i<people.length;i++){ people[i]["id"] = function(){ return ID + i; return people; var people = [{name:"john",id:0, {name:"paul", id:0]; var peoplewithid = uniqueidcreator(people); for(var i=0;i<people.length;i++){ console.log(people[i].name + ": " + people[i].id());

59 Solution: immediately invoked functions The next example returns the right result function uniqueidcreator(people){ var ID=1; for (var i=0;i<people.length;i++){ people[i]["id"] = function(j){ return function(){ return ID + j; (i);//immediately invoking the function return people; var people = [{name:"john",id:0, {name:"paul", id:0]; var peoplewithid = uniqueidcreator(people); for(var i=0;i<people.length;i++){ console.log(people[i].name + ": " + people[i].id());

60 Let to the rescue!!! function uniqueidcreator(people){ var ID=1; for (let i=0;i<people.length;i++){ people[i]["id"] = function(){ return ID + i; return people; var people = [{name:"john",id:0, {name:"paul", id:0]; var peoplewithid = uniqueidcreator(people); for(var i=0;i<people.length;i++){ console.log(people[i].name + ": " + people[i].id()); Let will create a new scope for each iteration, effectively creating an unique value that will not change afterwards.

61 TypeScript A better JavaScript

62 Purpose JavaScript was originally intended to be a scripting language for simple tasks It is difficult to write big programs in such a language This gave rise to alternatives: Coffeescript, Dart, TypeScript TypeScript differs from the other two in that a normal JavaScript program also is a valid TypeScript program.

63 Typed variables let isdone: boolean = false; let decimal: number = 6; let color: string = "blue"; let list: number[] = [1, 2, 3]; enum Color {Red, Green, Blue let c: Color = Color.Green; let notsure: any = 4; function warnuser(): void { alert("this is my warning message"); In Typescript we can define the type of a variable. The Typescript compiler will check the type. Important: when you have an error in your types, the compiler will still emit JavaScript code. let somevalue: any = "this is a string"; let strlength: number = (<string>somevalue).length; //Type assertions (casting)

64 Functions Named function Argument type function add(x: number, y: number): number { return x + y; Anonymous function Return type let myadd = function(x: number, y: number): number { return x + y; ; Functions are also typed in typescript. For each of the arguments we define the type and we also add the returntype

65 Generics function identity<t>(arg: T): T { return arg; let output = identity<string>("mystring"); When we have a typed language like TypeScript, it is useful to have generics. In this example the variable output will be of type string

66 Interfaces: Duck typing If it walks like a duck and quacks like a duck, it is a duck We don t implement an interface. Typescript checks whether all elements of the interface are available interface LabelledValue { label: string; A LabelledValue is an Object that has a label function printlabel(labelledobj: LabelledValue) { console.log(labelledobj.label); let myobj = {size: 10, label: "Size 10 Object"; printlabel(myobj); myobj has a label, so we can use it with printlabel printlabel takes an argument of type LabelledValye

67 Classes class Greeter { greeting: string; constructor(message: string) { this.greeting = message; greet() { return "Hello, " + this.greeting; let greeter = new Greeter("world"); console.log(greeter.greet()); A class has a constructor function that will be used to initialise the object. It is transpiled into the following JavaScript code. "use strict"; var Greeter = */ (function () { function Greeter(message) { this.greeting = message; Greeter.prototype.greet = function () { return "Hello, " + this.greeting; ; return Greeter; ()); var greeter = new Greeter("world"); console.log(greeter.greet());

68 Inheritance class Animal { move(distanceinmeters: number = 0) { console.log(`animal moved ${distanceinmetersm.`); class Dog extends Animal { bark() { console.log('woof! Woof!'); Formatted string When a class extends another class it inherits the methods of the base class. const dog = new Dog(); dog.bark(); dog.move(10); dog.bark();

JavaScript. Jef De Smedt Beta VZW

JavaScript. Jef De Smedt Beta VZW JavaScript Jef De Smedt Beta VZW Getting to know Beta VZW: Association founded in 1993 Computer courses for the unemployed and for employees www.betavzw.org(dutch) Cevora VZW/Cefora ASBL 09:00u-12:30u