INLEDANDE WEBBPROGRAMMERING MED JAVASCRIPT INTRODUCTION TO WEB PROGRAMING USING JAVASCRIPT

Size: px

Start display at page:

Download "INLEDANDE WEBBPROGRAMMERING MED JAVASCRIPT INTRODUCTION TO WEB PROGRAMING USING JAVASCRIPT"

Deborah Aleesha Burke
5 years ago
Views:

1 INLEDANDE WEBBPROGRAMMERING MED JAVASCRIPT INTRODUCTION TO WEB PROGRAMING USING JAVASCRIPT ME152A L4: 1. HIGHER ORDER FUNCTIONS 2. REGULAR EXPRESSIONS 3. JAVASCRIPT - HTML 4. DOM AND EVENTS

2 OUTLINE What did we learn so far? Higher order functions Regular expressions HTML with JavaScript DOM Events

3 WHAT DID WE LEARN SO FAR? Objects Three different ways of creating objects? JavaScript prototype?

4 HIGHER-ORDER FUNCTIONS Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions. Hides the details (complexity) Enables composition We can focus on the process (not details)

5 HIGHER-ORDER FUNCTIONS (EXAMPLES) functions that create new functions. functions that change other functions.

6 JSON JavaScript Object Notation (JSON) - pronounced Jason Widely used as a data storage and communication format on the Web. JSON is similar to JavaScript s way of writing arrays and objects, with a few restrictions. All property names have to be surrounded by double quotes, and only simple data expressions are allowed no function calls, variables, or anything that involves actual computation. Comments are not allowed in JSON.

7 JSON (CONT D) JavaScript gives us two functions JSON.stringify - takes a JavaScript value and returns a JSON-encoded string JSON.parse takes such a string and converts it to the value it encodes.

8 HIGHER-ORDER FUNCTION: FILTER EXAMPLE filter in this example is a so-called higher-order function.

9 HIGHER-ORDER FUNCTION: MAP EXAMPLE map is a higher-order function just like filter is

10 REGULAR EXPRESSIONS A regular expression is a sequence of characters that forms a search pattern. When you search for data in a text, you can use this search pattern to describe what you are searching for. A regular expression can be a single character, or a more complicated pattern. Regular expressions can be used to perform all types of text search and text replace operations.

11 REGULAR EXPRESSIONS Syntax /pattern/modifiers; Example var pattern = /javascript/i; Example explained: /javascript/i is a regular expression. javascript/i is a pattern (to be used in a search). i is a modifier (modifies the search to be case-insensitive).

12 REGULAR EXPRESSIONS: USING STRING METHODS The search() method uses an expression to search for a match, and returns the position of the match. The replace() method returns a modified string where the pattern is replaced.

13 REGULAR EXPRESSIONS (CONT D)

14 REGULAR EXPRESSIONS (CONT D) There are also RegExp Object properties Quantifiers Metacharacters

15 JAVASCRIPT AND HTML

16 BROWSER A web browser is an application that retrieves, presents and travers information resources on WWW (World Wide Web) Without web browsers, there would be no JavaScript. Various browser vendors The World Wide Web (not to be confused with the Internet as a whole) is a set of protocols and formats that allow us to visit web pages in a browser. Hypertext Transfer Protocol (HTTP), allows computers to request documents over the network Each document on the Web is named by a Uniform Resource Locator (URL), which looks something like this:

17 HTML HTML, which stands for Hypertext Markup Language, is the document format used for web pages. An HTML document contains text, as well as tags that give structure to the text, describing things such as links, paragraphs, and headings.

18 HTML AND JAVASCRIPT the most important HTML tag is <script> <button> tag has an onclick attribute

19 THE DOCUMENT OBJECT MODEL (DOM) The DOM is a W3C (World Wide Web Consortium) standard. "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. What is the HTML DOM? is a standard object model and programming interface for HTML. It defines: The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements

20 THE HTML DOM TREE OF OBJECTS

21 DOCUMENT STRUCTURE

22 HTML DOM METHODS The HTML DOM can be accessed with JavaScript (and with other programming languages). In the DOM, all HTML elements are defined as objects. A property is a value that you can get or set (like changing the content of an HTML element). A method is an action you can do (like add or deleting an HTML element).

23 EXAMPLE: getelementbyid getelementbyid is a method, while innerhtml is a property.

24 FINDING HTML ELEMENTS

25 CHANGING HTML ELEMENTS

26 ADDING AND DELETING ELEMENTS

27 ADDING EVENTS HANDLERS

28 FINDING HTML OBJECTS

29 FINDING HTML ELEMENTS Finding HTML elements by id var myelement = document.getelementbyid("intro"); Finding HTML elements by tag name var x = document.getelementsbytagname("p"); Finding HTML elements by class name var x = document.getelementsbyclassname("intro"); Finding HTML elements by CSS selectors var x = document.queryselectorall("p.intro"); Finding HTML elements by HTML object collections var x = document.forms["frm1"]; var text = ""; var i; for (i = 0; i < x.length; i++) { text += x.elements[i].value + "<br>"; } document.getelementbyid("demo").innerhtml = text;

30 CHANGING HTML CONTENT <html> <body> <p id="p1">hello World!</p> <script> document.getelementbyid("p1").innerhtml = "New text!"; </script> </body> </html> changes the content of a <p> element <!DOCTYPE html> <html> <body> <h1 id="header">old Header</h1> <script> var element = document.getelementbyid("header"); element.innerhtml = "New Header"; </script> </body> </html> changes the content of an <h1> element

31 CHANGING THE VALUE OF AN ATTRIBUTE <!DOCTYPE html> <html> <body> <img id="myimage" src="smiley.gif"> <script> document.getelementbyid("myimage").src = "landscape.jpg"; </script> </body> </html>

32 CHANGING THE STYLE <html> <body> <p id="p2">hello World!</p> <script> document.getelementbyid("p2").style.color = "blue"; </script> <p>the paragraph above was changed by a script.</p> </body> </html>

33 HTML DOM NAVIGATION According to the W3C HTML DOM standard, everything in an HTML document is a node: The entire document is a document node Every HTML element is an element node The text inside HTML elements are text nodes Every HTML attribute is an attribute node All comments are comment nodes

34 NODE RELATIONSHIPS The nodes in the node tree have a hierarchical relationship to each other. The terms parent, child, and sibling are used to describe the relationships. In a node tree, the top node is called the root (or root node) Every node has exactly one parent, except the root (which has no parent) A node can have a number of children Siblings (brothers or sisters) are nodes with the same parent

35 NODE RELATIONSHIPS (CONT D) <html> <head> <title>dom Tutorial</title> </head> <body> <h1>dom Lesson one</h1> <p>hello world!</p> </body> </html> From the HTML above you can read: <html> is the root node <html> has no parents <html> is the parent of <head> and <body> <head> is the first child of <html> <body> is the last child of <html> <head> has one child: <title> <title> has one child (a text node): "DOM Tutor <body> has two children: <h1> and <p> <h1> has one child: "DOM Lesson one" <p> has one child: "Hello world!" <h1> and <p> are siblings

36 NAVIGATING BETWEEN NODES You can use the following node properties to navigate between nodes with JavaScript: Child Nodes and Node Values <html> <body> parentnode childnodes[nodenumber] firstchild lastchild nextsibling previoussibling <h1 id="intro">my First Page</h1> <p id="demo">hello!</p> <script> var mytext = document.getelementbyid("intro").childnodes[ 0].nodeValue; document.getelementbyid("demo").innerhtml = mytext; </script> </body> </html>

37 DOM ROOT NODES There are two special properties that allow access to the full document: <html> <body> document.body - The body of the document document.documentelement - The full document <p>hello World!</p> <div> <p>the DOM is very useful!</p> <p>this example demonstrates the <b>document.body</b> property.</p> </div> <script> alert(document.body.innerhtml); </script> </body> </html>

38 nodename + nodevalue + nodetype The nodename property specifies the name of a node. nodename is read-only nodename of an element node is the same as the tag name nodename of an attribute node is the attribute name nodename of a text node is always #text nodename of the document node is always #document The nodetype property returns the type of node. nodetype is read only. The nodevalue property specifies the value of a node. nodevalue for element nodes is undefined nodevalue for text nodes is the text itself nodevalue for attribute nodes is the attribute value The most important nodetype s are:

39 CREATING NEW HTML ELEMENTS (NODES)

40 REMOVING EXISTING HTML ELEMENTS To replace an element to the HTML DOM, use the replacechild() method

41 HTML DOM NODE LIST The getelementsbytagname() method returns a node list. A node list is an array-like collection of nodes. The following code selects all <p> nodes in a document: The length property defines the number of nodes in a node list:

42 USING EVENTS The HTML DOM allows you to execute code when an event occurs. Events are generated by the browser when "things happen" to HTML elements: When a user clicks the mouse When a web page has loaded When an image has been loaded When the mouse moves over an element When an input field is changed When an HTML form is submitted When a user strokes a key

43 USING EVENTS: changing style by onclick <!DOCTYPE html> <html> <body> <h1 id="id1">my Heading 1</h1> <button type="button" onclick="document.getelementbyid('id1').style.color = 'red'"> Click Me!</button> </body> </html>

44 USING EVENTS: a function is called from the event handler <!DOCTYPE html> <html> <body> <h1 onclick="changetext(this)">click on this text!</h1> <script> function changetext(id) { id.innerhtml = "Ooops!"; } </script> </body> </html>

45 HTML EVENT ATTRIBUTES

46 THE onchange EVENT

47 THE onmouseover AND onmouseout EVENTS

48 THE onmousedown, onmouseup AND onclick EVENTS

49 HANDLING EVENTS: addeventlistener The addeventlistener() method attaches an event handler to the specified element. The addeventlistener() method attaches an event handler to an element without overwriting existing event handlers. You can add many event handlers to one element. You can add many event handlers of the same type to one element, i.e two "click" events. You can add event listeners to any DOM object not only HTML elements. i.e the window object. The addeventlistener() method makes it easier to control how the event reacts to bubbling. When using the addeventlistener() method, the JavaScript is separated from the HTML markup, for better readability and allows you to add event listeners even when you do not control the HTML markup. You can easily remove an event listener by using the removeeventlistener() method.

50 addeventlistener: SYNTAX element.addeventlistener(event, function, usecapture); The first parameter is the type of the event (like "click" or "mousedown"). The second parameter is the function we want to call when the event occurs. The third parameter is a boolean value specifying whether to use event bubbling or event capturing. This parameter is optional. element.addeventlistener("click", function(){ alert("hello World!"); });

51 addeventlistener: ADD MANY EVENT HANDLERS TO THE SAME ELEMENT

52 addeventlistener: KEY PRESS

53 addeventlistener: DEBOUNCING

54 REFLECTION Higher order functions? Regular expressions? DOM? EVENTS?

55 THANK YOU QUESTIONS? Literature: Haverbeke, M. (2014). Eloquent JavaScript: A Modern Introduction to Programming. No Starch Press.

CSC Web Programming. JavaScript Browser Objects

CSC Web Programming. JavaScript Browser Objects CSC 242 - Web Programming JavaScript Browser Objects JavaScript Object Types User defined objects Native objects (Array, Math, Date, etc.) Host Objects provided by the browser The window object is a representation