JavaScript and the DOM MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University

Size: px

Start display at page:

Download "JavaScript and the DOM MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University"

Bryan Powers
5 years ago
Views:

1 JavaScript and the DOM MIS 2402 Konstantin Bauman Department of MIS Fox School of Business Temple University

2 Exam 2 Date: 11/06/18 four weeks from now! JavaScript, jquery 1 hour 20 minutes Use class workstations You can use Google Preparations: Read Book, do exercises and challenges

3 Let s talk about Chapter 6 What DOM short for? What s a node? What property lets us manipulate the HTML inside a tag? 3

4 Agenda Introduce the DOM and the node interface Identify some commonly used DOM nodes Identify some commonly used node properties Use simple node properties and the click event to manipulate an HTML form Use an array to work with a collection of nodes 4

5 The code for a web page <!DOCTYPE html> <html> <head> <title>join List</title> </head> <body> <h1>please join our list</h1> <form id=" _form" name=" _form" action="join.html" method="get"> <label for=" _address"> Address:</label> <input type="text" id=" _address" name=" _address"> <span id=" _error">*</span><br> </form> </body> </html> 5

6 The DOM for the web page All this is contained in a document node This node would contain attribute nodes of id and name The above depicts nodes of type element and text. 6

7 Nodes and Properties The DOM nodes that are commonly used Document Element Attr Text Some of the properties of the Node interface nodevalue parentnode childnodes firstchild lastchild nextelementsibling Let s see an example of this (See dom_1.html in dom.zip) 7

Some Node Methods Common methods of the Document and Element interfaces getelementsbytagname(tagname) getelementsbyname(name) getelementsbyclassname(classnames) Common

8 Some Node Methods Common methods of the Document and Element interfaces getelementsbytagname(tagname) getelementsbyname(name) getelementsbyclassname(classnames) Common methods of the Element interface hasattribute(name) getattribute(name) setattribute(name, value) removeattribute(name) Let s see an example of this (See dom_2.html in dom.zip) 8

9 Don t miss this! Step 1 Select some elements to work with Step 2 Take some action on each element In the very near future we ll discover that this common 2- step task has been made easier by something called jquery! But this is what we have for now 9

innerhtml and other shortcuts If navigating to child node and then to node value to manipulate the content of a tag seems cumbersome you re instinct is correct!

10 innerhtml and other shortcuts If navigating to child node and then to node value to manipulate the content of a tag seems cumbersome you re instinct is correct! We can be thankful for maturing HTML standards for giving us shortcuts like the innerhtml property that are a little easier to work with. Let s see an example of this (See dom_3.html in dom.zip) 10

11 More HTML DOM properties that are nice Element Property Attribute all id The id attribute title classname The title attribute The class attribute. To set multiple class names, separate the names with spaces. tagname The name of the tag, like div, h1, h2, a, or img. <a> href The href attribute img src The src attribute alt The alt attribute input disabled The disabled attribute 11

12 How the DOM HTML specification can simplify your code How to get and set an img tag src attribute with the DOM core specification var imageelement = $("image"); alert(imageelement.getattribute(src)); imageelement.setattribute(src, "lures.jpg"); How to get and set the same attribute with the DOM HTML specification var imageelement = $("image"); alert(imageelement.src); imageelement.src = "lures.jpg"; 12

A word of caution It s important to remember that the world wide web began in 1990. HTML, JavaScript and CSS have all be evolving over the past three decades.

13 A word of caution It s important to remember that the world wide web began in HTML, JavaScript and CSS have all be evolving over the past three decades. That means there are a lot of ideas that build on each other. Industry standards have been added and refined over that 30 year period. It also means that there s always more that one way to do any task. Next class, we ll be introducing jquery a JavaScript library that was created to simplify common tasks. When we do that, we ll need to exercise some judgement about when we can use pure JavaScript and when we can use one of the shortcut methods jquery gives us. 13

14 Let s see what we can build 14

Chapter 6 How to script the DOM with JavaScript

Chapter 6 How to script the DOM with JavaScript Murach's JavaScript and jquery, C6 2012, Mike Murach & Associates, Inc. Slide 1 Objectives Applied 1. Use the properties and methods of the Node, Document,