EECS1012. Net-centric Introduction to Computing. Lecture JavaScript DOM

Size: px

Start display at page:

Download "EECS1012. Net-centric Introduction to Computing. Lecture JavaScript DOM"

Kristin McDowell
6 years ago
Views:

1 EECS 1012 Net-centric Introduction to Computing Lecture JavaScript DOM Acknowledgements Contents are adapted from web lectures for Web Programming Step by Step, by M. Stepp, J. Miller, and V. Kirst. Slides have been ported to PPT by Dr. Xenia Mountrouidou. These slides have been edited for, York University. The contents of these slides may be modified and redistributed, please give appropriate credit. M.S. Brown, EECS York University 1 (Creative Commons) Michael S. Brown, 2017.

2 2 A bit more on JavaScript

3 Array length 3 function myfunction { } var a = ["apple", "banana", "kiwi", "cherry", "orange"]; var len = a.length; // variable len will be 5 Like JS strings, arrays have a built in length property we can access using the ".length" operator In PHP, you needed to call the function count($array) to get its size

4 Variable "scope" 4 function myfunction { var a = 10; /* these variables are only valid inside this var b = 20; function. we say their scope is limited var c = a * b; to this function. We call this local scope. */ } function myfunction2 { var a = 100; /* variable a here is a different a than the the function above. Variable b and c are undefined in this function. */ } Variables can have two types of "scope". Local scope means a variable is only available inside a function Global scope means a variable is available in all functions (see next slide)

5 JS code and global variables 5 /* Code is run as soon as loaded these variables are created */ var classname = ""; /* This is a global variable */ var intcounter = 0; /* This is another global variable */ function myfunction { var Name = document.getelementbyid("header1"); Name.innerHTML += classname; /* classname can be used in any function */ int Counter++; /* intcounter can be used here */ } JS code is run immediately when the file is loaded Variables defined outside functions are consider "Global" variables. These variables can be used by any function. There values will be remembers between function calls.

6 Loading multiple JS files 6 Like CSS, you can load multiple JS files in your header <!DOCTYPE html> <html> <head> <script src=" type="text/javascript"></script> <script src="example.js" type="text/javascript"></script> </head> <body>... </body> </html> This is a URL to a JS file. The second is a local JS file.

7 Multiple JS functions 7 Your JS files can have multiple functions function fun1() { /* function 1 and its code */ statements; statements; } function fun2() { /* function2 and its code */ statements; statements; } function fun3() { /* function3 and its code */ statements; statements; }

8 8 Global DOM objects

9 Global DOM objects 9 Web browser provide six global objects that you can access in your JavaScript code These objects can be used to control the browsers and get information about the current webpage (and history)

10 The six global DOM objects 10 name document history location navigator screen window description current HTML page and its content list of pages the user has visited URL of the current HTML page info about the web browser you are using info about the screen area occupied by the browser the browser window In our class, we will mainly use the document object, however, it is good to be aware of these other global objects. They are discussed briefly in the following slides. EECS 1012

11 The location object 11 the URL of the current web page properties: host, hostname, href, pathname, port, protocol, search methods: assign, reload, replace EECS 1012

12 The screen object 12 information about the client's display screen properties: availheight, availwidth, colordepth, height, pixeldepth, width EECS 1012

13 The history object 13 the list of sites the browser has visited in this window properties: length methods: back, forward, go sometimes the browser won't let scripts view history properties, for security EECS 1012

14 The document object 14 the current web page and the elements inside it properties: anchors, body, cookie, domain, forms, images, links, referrer, title, URL useful methods: getelementbyid() getelementsbyname() getelementsbytagname() EECS 1012

15 The window object 15 the entire browser window; the top-level object in DOM hierarchy technically, all global code and variables become part of the window object properties: document, history, location, name important method onload This method is called when the entire HTML document has completed loading

16 16 Unobtrusive JavaScript

Obtrusive event handlers 17 <button id="ok" onclick="okayclick();">ok</button> HTML We directly link "onlick" to our // called when OK button is clicked JS function "okayclick()".

17 Obtrusive event handlers 17 <button id="ok" onclick="okayclick();">ok</button> HTML We directly link "onlick" to our // called when OK button is clicked JS function "okayclick()". function okayclick() { This is considered "obtrusive". alert("booyah"); } JS this is bad style (HTML is cluttered with JS code) it requires the person writing the HTML code to know the JS code in advance GOAL: remove all JavaScript code from the HTML body

18 Why unobtrusive JavaScript? 18 Why do we want unobtrusive JS Code? allows separation of web site into 3 major categories: content (HTML) - what is it? presentation (CSS) - how does it look? behavior (JavaScript) - how does it respond to user interaction? EECS 1012

19 Attaching an event handler in JavaScript code 19 // where element is a DOM element object element.event = function; JS /* Example */ var button = document.getelementbyid("ok"); button.onclick = okayclick; /* <- LOOK: no() after func name*/ JS it is possible to attach event handlers to elements' DOM objects in your JavaScript code notice that you do not put parentheses after the function's name this is better style than attaching them in the HTML Where should we put the above code?

20 Remember: When does JS code run? 20 <head> <script src="myfile.js" type="text/javascript"></script> </head> <body>... </body> HTML // global code start running as soon as it is linked var x = 3; function f(n) { return n + 1; } function g(n) { return n - 1; } x = f(x); your file's JS code runs the moment the browser loads the script tag any variables are declared immediately any functions are declared but not called, unless your global code explicitly calls them JS

21 When does my code run? 21 <head> <script src="myfile.js" type="text/javascript"></script> </head> <body>... </body> HTML // global code start running as soon as it is linked var x = 3; function f(n) { return n + 1; } function g(n) { return n - 1; } x = f(x); at this point in time, the browser has not yet read your page's body EECS 1012 none of the DOM objects for tags on the page have been created JS

22 A failed attempt at being unobtrusive 22 <head> <script src="myfile.js" type="text/javascript"></script> </head> <body> <div><button id="ok">ok</button></div> HTML // global code var button = document.getdocumentbyid("ok"); button.onclick = okayclick; problem: global JS code runs the moment the script is loaded script in head is processed before page's body has loaded no elements are available yet or can be accessed yet via the DOM!! JS

23 Solution: the window.onload event 23 // this will run once the page has finished loading function functionname() { element.event = functionname1; element.event = functionname2;... } window.onload = functionname; // global code we want to attach our event handlers right after the page is done loading there is a global event called window.onload event that occurs at that moment in window.onload handler we attach all the other handlers to run when events occur JS

24 An unobtrusive event handler 24 <! look, no JavaScript! --> <button id="ok">ok</button> HTML // called when page loads; sets up event handlers function pageload() { var button = document.getelementbyid("ok"); button.onclick = okayclick; } function okayclick() { alert("booyah"); } In this example, we assign the event "okayclick" using JS code, instead of the HTML page. This is considered unobtrusive. window.onload = pageload; // global code JS EECS 1012

25 Common unobtrusive JS errors 25 window.onload = pageload(); /* remember - don't put the () */ window.onload = pageload; okbutton.onclick = okayclick(); okbutton.onclick = okayclick; JS Remember, when we assign in the names of function, don't use the (), only the function name. window.onload = pageload; /* <- the L is not capital */ window.onload = pageload; JS also, event names are all lowercase, not capitalized like other variables EECS 1012

26 Anonymous functions 26 /* look, no name! we call this an anonymous function */ function() { statements; } JS JavaScript allows you to declare anonymous functions quickly creates a function without giving it a name can be stored as a variable, attached as an event handler, etc. EECS 1012

27 Anonymous function example 27 /* the example below is an anonymous function, notice there is no name given to this function. However, the function is only called once when the "window.onload" even occurs, so it is OK we don't give it name */ window.onload = function() { var okbutton = document.getelementbyid("ok"); okbutton.onclick = okayclick; }; function okayclick() { alert("booyah"); } We set window.onload = to an anonymous function. JS EECS 1012

28 Revisit example from last lecture 28 The HTML code below has an explicit link to "onclick" in it (i.e. obtrusive JS) <input id="num1" type="text" size="3"> + <input id="num2" type="text" size="3"> = <span id="answer"></span> <br> <button onclick="compute();">compute!</button> function compute() { var input1 = document.getelementbyid("num1"); var input2 = document.getelementbyid("num2"); var answer = document.getelementbyid("answer"); var result = input1.value + input2.value; answer.innerhtml = result; } This example is considered obtrusive, because we had to define the onlick event in the HTML. This means the HTML page needs to know about the JS file and function names, etc.

29 Unobtrusive version 29 <input id="num1" type="text" size="3"> + <input id="num2" type="text" size="3"> = <span id="answer"></span> <br> <button id="compute">compute!</button> window.onload = pageload; function pageload() { var computebutton = document.getelementbyid("compute"); computebutton.onclick = compute; } function compute() { var input1 = document.getelementbyid("num1"); var input2 = document.getelementbyid("num2"); var answer = document.getelementbyid("answer"); var result = input1.value + input2.value; answer.innerhtml = result; } This is unobtrusive, only have to put an "id" for this button. The onclick event is linked from JS.

30 Version 2 with anonymous function 30 <input id="num1" type="text" size="3"> + <input id="num2" type="text" size="3"> = <span id="answer"></span> <br> <button id="compute">compute!</button> window.onload = function () { var computebutton = document.getelementbyid("compute"); computebutton.onclick = compute; } function compute() { var input1 = document.getelementbyid("num1"); var input2 = document.getelementbyid("num2"); var answer = document.getelementbyid("answer"); var result = input1.value + input2.value; answer.innerhtml = result; } This is unobtrusive, only have to put an "id" for this button. The onclick event is linked from JS. Here, the pageload() function has been replaced with an anonymous function.

31 Recap unobtrusive JS 31 Unobtrusive JS is general approach to JS programming that tries to avoid having JS code inside the HTML page When possible, try to write JS code in an unobtrusive manner Use the "windows.onload" event to assign all the event handlers

32 32 The DOM tree

33 The document object model 33 The DOM models the HTML elements as a "tree" structure A tree is a type of data structure common in computer science to organize data Consider the next slide's HTML code

34 Consider the following HTML page 34 <!DOCTYPE html> <html> <head> <title> Page Title </title> <meta name="description" content="a really great web site"> <meta charset="utf-8"> </head> <body> <h1> This is a heading </h1> <p> A paragraph with a <a href= link </a>.</p> <ul> <li>a list item</li> <li>another item</li> <li>a third item</li> </ul> </body> </html>

35 The DOM tree 35 This is the "tree" representation of the HTML page on the previous slide. EECS 1012

36 Tree terminology 36 Items in tree are called "nodes". Like a family tree, we have the notion of a "parent" and "child" nodes. For example, body is the parent of h1, p, and ul. h1, p, ul are child nodes of body. EECS 1012 The nodes at the end of the tree are called "leafs"

37 Types of DOM nodes 37 <p> This is a paragraph of text with a <a href="/path/page.html">link in it</a>. </p> HTML element nodes (HTML tag) can have children and/or attributes text nodes (text in a block element) attribute nodes (attribute/value pair) EECS 1012 text/attributes are children in an element node cannot have children or attributes not usually shown when drawing the DOM tree

38 Types of DOM nodes 38 <p> This is a paragraph of text with a <a href="/path/page.html">link in it</a>. </p> HTML Consider the DOM of a node. This is a "mini-tree" considering on the <p> element. It has three direct children: (1) a text node, (2) another element (link), and (3) another text node. (1) (2) (3) EECS 1012

39 Traversing the DOM tree 39 name(s) firstchild, lastchild *children nextsibling, previoussibling parentnode description start/end of this node's list of children array of all this node's children neighboring nodes with the same parent the element that contains this node We will do an example with the *children property. EECS 1012

40 DOM tree traversal example 40 <html> <head> <title> My page</title> <meta charset="utf-8"> <script src="dom_example1.js" type="text/javascript"></script> </head> <body> <h1>this is a Header</h1> <div id="mydiv"> <p> First paragraph </p> <p> Second paragraph </p> <p> Third paragraph </p> </div> <button id="button"> Click </button> </body> </html>

41 DOM tree traversal example 41 <body> <h1> This is a header </h1> <div id="mydiv"> <p> First paragraph </p> <p> 2 nd paragraph </p> <p> Third paragraph </p> <button> EECS 1012

42 DOM tree traversal example 42 <body> <h1> This is a header </h1> DOM Tree html <div id="mydiv"> title meta body <p> First paragraph </p> <p> 2 nd paragraph </p> h1 div <p> Third paragraph </p> p p p <button> This is drawn without the "text" elements, but each "p" has a text element that we can access using "innerhtml".

43 DOM tree traversal example 43 function walk() { var divelement = document.getelementbyid("mydiv"); var childelements = divelement.children; alert("mydiv element has " + childelements.length + " children"); for(var i=0; i < childelements.length; i++) { alert(childelements[i].innerhtml); } } returns an array with the children of div Gets the div element Loops through the array and prints (using alert) the innerhtml of the paragraph div p p p

44 Note: tree access 44 In the previous example, since we started with var divelement = document.getelementbyid("mydiv"); Our access to the DOM tree starts at div. As a result, we only had access to the "descendants" of div, not the full DOM tree div p p p You will see this word "descendants" in JS documentation

45 Selecting groups of DOM objects 45 methods in document and other DOM objects for accessing descendants: name getelementsbytagname getelementsbyname description returns array of descendants with the given tag, such as "div" returns array of descendants with the given name attribute (mostly useful for accessing form controls) EECS 1012

46 Getting all elements of a certain type 46 // all Paras is an array of element objects var allparas = document.getelementsbytagname("p"); // we loop trough all elements and change their background // to "yellow" for (var i = 0; i < allparas.length; i++) { allparas[i].style.backgroundcolor = "yellow"; } JS <body> <p>this is the first paragraph</p> <p>this is the second paragraph</p> <p>you get the idea...</p> </body> HTML EECS 1012 In tis example, we use the document object, so the descendants are all elements in the HTML page with tag name "p". This results

47 Previous code explained 47 var allparas = document.getelementsbytagname("p"); This will find all the DOM element objects that are <p> elements in the HTML page and return them as an array. This array is assigned to the variable "allparas". array index allparas = [ Paragraph, Paragraph, Paragraph ] Object (0) Object (1) Object (2) <body> <p>this is the first paragraph</p> <p>this is the second paragraph</p> <p>you get the idea...</p> </body> HTML

48 Previous code explained 48 Paragraph Object [i] allparas[i].style.backgroundcolor = "yellow"; allparas is an array of element objects. allparas[i] access the ith element in the array..style accesses the style component of the element object..backgroundcolor accesses the backgroundcolor property of the style component. Changes the background to yellow. So, this statement is accessing a single element object. The element accessed depends on the value of the variable i. <body> </body> <p>this is the first paragraph</p> <p>this is the second paragraph</p> <p>you get the idea...</p>

49 Combining with getelementbyid() 49 var addressdiv = document.getelementbyid("address"); var addrparas = addressdiv.getelementsbytagname("p"); for (var i = 0; i < addrparas.length; i++) { addrparas[i].style.backgroundcolor = "yellow"; } JS <p>this won't be returned!</p> <div id="address"> <p>1234 Street</p> <p>atlanta, GA</p> </div> HTML In this example, only the paragraphs contained within "addressdiv" are called. This is because "getelementsbytagname("p") is called from the div element. EECS 1012

50 50 Creating and Deleting Elements

51 Creating new nodes 51 name document.createelement("tag") document.createtextnode("text") description creates and returns a new empty DOM node representing an element of that type creates and returns a text node containing given text // create a new <h2> node var newheading = document.createelement("h2"); newheading.innerhtml = "This is a heading"; newheading.style.color = "green"; JS merely creating a node does not add it to the page you must add the new node as a child of an existing element on the page...

52 Modifying the DOM tree 52 name appendchild (node) insertbefore(new, old) removechild(node) replacechild(new, old) description places given node at end of this node's child list places the given new node in this node's child list just before old child removes given node from this node's child list replaces given child with new node var div = document.getelementbyid("mydiv"); var p = document.createelement("p"); p.innerhtml = "A paragraph!"; div.appendchild(p); /* append ads JS EECS 1012 This would add a new paragraph to div with id=mydiv.

53 Example adding items 53 <html> <head> <title> My page</title> <meta charset="utf-8"> <script src="dom_example5.js" type="text/javascript"></script> </head> <body> <p>to Do List</p> <input type="text" id="texttoadd" size="20"><br> <button id="button"> Click to Add Item</button> <ol id="list"> </ol> </body>

Example adding items 54 window.onload = function() { /* This finds the button and sets the onclick function */ var button = document.getelementsbytagname("button"); button[0].

54 Example adding items 54 window.onload = function() { /* This finds the button and sets the onclick function */ var button = document.getelementsbytagname("button"); button[0].onclick = insertitem; } function insertitem() { var todolist = document.getelementbyid("list"); /* get list element */ var texttoadd = document.getelementbyid("texttoadd"); /* get text input element */ if (texttoadd.value!= "") /* if text input value isn't empty */ { var newli = document.createelement("li"); /* create a new li element */ newli.innerhtml = texttoadd.value; /* set the innerhtml to the text input value */ todolist.appendchild(newli); /* add this to the DOM tree */ /* by appending to the list object */ } }

55 Example delete items 55 <html> <head> <title> My page</title> <meta charset="utf-8"> <script src="dom_example4.js" type="text/javascript"></script> </head> <body> <p>to Do List</p> <button id="button"> Click Remove Item</button> <ol id="mylist"> <li> Study </li> <li> Call mom </li> <li> Pay rent </li> <li> Return library book </li> </ol> </body>

Example deleting items 56 window.onload = function() { /* attaches the deletelistitem function to the button */ var button = document.getelementsbytagname("button"); button[0].

56 Example deleting items 56 window.onload = function() { /* attaches the deletelistitem function to the button */ var button = document.getelementsbytagname("button"); button[0].onclick = deletelistitem; } function deletelistitem() { var mylist = document.getelementbyid("mylist"); /* get list element */ var pars = mylist.getelementsbytagname("li"); /* get all li elements in the list element */ if (pars.length > 0) /* pars (array of li elements) is not 0 */ { mylist.removechild(pars[0]); /* remove the first li element from the */ } /* list element */ }

57 57 Prototype Library

58 Problem with JavasScript 58 JavaScript is a powerful language, but it has many flaws DOM can be clunky to use the same code doesn't work the same way on some browsers as a result, some developers have created a "library" (set of JS functions) call the "Prototype" library

59 Prototype Library 59 <script src=" type="text/javascript"></script> Prototype JS library adds many useful features to JS Makes DOM easier to use improves event-driven programming works the same across many browsers To use the Prototype library, link to it as shown above Note this access the JS file as a URL

60 Prototype framework 60 <script src=" ototype.js " type="text/javascript"></script> JS the Prototype JavaScript library adds many useful features to JavaScript: EECS 1012 many useful extensions to the DOM added methods to String, Array, Date, Number, Object improves event-driven programming many cross-browser compatibility fixes makes Ajax programming easier (seen later)

61 The $ function 61 $("id") returns the DOM object representing the element with the given id short for document.getelementbyid("id") often used to write more concise DOM code: JS $("footer").innerhtml = $("username").value; JS EECS 1012

62 Example with prototype 62 <html> dom_example6.html <head> <script src=" " type="text/javascript"></script> <script src="dom_example6.js" type="text/javascript"></script> </head> <body> <h1>the Amazing Adder</h1> <div> <input id="num1" type="text" size="3"> + <input id="num2" type="text" size="3"> = <span id="answer"></span> <br> <button onclick="compute();">compute!</button> </div> </body> </html> dom_example6.js function compute() { var num1 = $("num1").value; var num2 = $("num2").value; $("answer").innerhtml = parseint( num1 ) + parseint( num2 ); }

63 Prototype 63 HTML (note: this example is obtrusive HTML.. but the purpose of this example is to who the prototype library in JS) <input id="num1" type="text" size="3"> + <input id="num2" type="text" size="3"> = <span id="answer"></span> <br> <button onclick="compute();">compute!</button> Using the $("element_id") we have function compute() { much more compact JS code. It is var num1 = $("num1").value; also easier to make the connection var num2 = $("num2").value; back to the HTML page. $("answer").innerhtml = parseint( num1 ) + parseint( num2 ); } $("id") is equivalent to calling document.getelementbyid("id").

64 Recap 64 The DOM gives JS access to the underlying webpage The DOM tree is used to describe the HTML page This gives us the ability to modify, create, and delete elements in the tree (i.e. HTML page) The prototype library makes accessing document elements "cleaner" We will use the prototype library more in the next lecture on "events".

EECS1012. Net-centric Introduction to Computing. Lecture JavaScript DOM

EECS1012. Net-centric Introduction to Computing. Lecture JavaScript DOM EECS 1012 Net-centric Introduction to Computing Lecture JavaScript DOM Acknowledgements Contents are adapted from web lectures for Web Programming Step by Step, by M. Stepp, J. Miller, and V. Kirst. Slides