lecture 8 javascript and the dom n.
Skip this Video
Loading SlideShow in 5 Seconds..
How to Create Your Own Website PowerPoint Presentation
Download Presentation
How to Create Your Own Website

Loading in 2 Seconds...

play fullscreen
1 / 20

How to Create Your Own Website - PowerPoint PPT Presentation

  • Uploaded on

Lecture 8: Javascript and the DOM. How to Create Your Own Website. Today’s Lecture:. Javascript programming: Math functions (random numbers, powers, square roots, etc.) String functions (substrings, upper and lower case transformations, etc.)

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'How to Create Your Own Website' - moesha

Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
today s lecture
Today’s Lecture:
  • Javascript programming:
    • Math functions (random numbers, powers, square roots, etc.)
    • String functions (substrings, upper and lower case transformations, etc.)
    • Timer functions (performing actions periodically).
    • Arrays.
  • The DOM Tree revisited.
    • “Elements” and “Nodes”.
    • Getting all tags by name.
    • Manipulating event actions from within Javascript.
on functions
On Functions
  • We’ve said that functions were blocks of code that both:
    • Mapped input to output.
    • Allowed you to perform complex tasks many times without needing to copy and paste the entire function body.
  • E.g. Complexaction could be 100 lines long, but you can call it 3 times as follows: complexaction(4); complexaction(5); complexaction(6);
  • In addition to functions that we can write, Javascript comes with many of its own built-in.
  • Javascript functions are organized based on their functionality.
    • Math functions are grouped together, string processing functions are grouped, etc.
    • They were organized by the designers of the language based on what they did.
  • These groups are called classes. There are 7 in Javascript:
    • Array: Functions for representing and manipulating arrays: entire sets of objects.
    • Boolean: Functions for representing logical (true/false) statements.
    • Date: Functions for representing and manipulating dates.
    • Math: Mathematical functions for generating and manipulating numbers.
    • Number: Functions for converting numbers from one form to another and for getting special numbers like infinity.
    • String: Functions for representing and manipulating text data.
    • XMLHttpRequest: Used for an advanced technique called AJAX. We won’t discuss it, but you’re ready to learn it.
  • These are common to all object-oriented programming languages.
  • There are two ways to access the functions inside:
    • The “static context” (used to access functions in the Math class): Enter the class name, a “.” (dot), and the function, in that order.
      • Math.round(5.7); //Returns 6.
    • Through a “constructor”: Declare a variable (called an object) using var and set it equal to “new Class”. Call the functions on that variable. (Used with all classes other than Math).
      • For example, var d = new Date(); alert(d.getMonth());
  • See http://www.w3schools.com/jsref for an overview of the functions in these classes.
the math class
The Math Class
  • Contains functions primarily for manipulating and generating numbers. All are accessed statically (e.g. Math.random()).
    • random(): generates a random number between 0 and 1.
    • round(x): rounds x to the nearest integer.
    • min(x,y), max(x,y): returns the smaller (or larger) of x and y.
    • pow(x,y): computes x to the yth power (i.e. x^y).
    • sqrt(x): computes the square root of x.
    • floor(x), ceil(x): rounds x down or up, respectively.
    • sin(x), cos(x), tan(x), asin(x), acos(x), atan(x): Standard trigonometric functions.
    • log(x), exp(x): Natural logarithm of x and e^x, respectively.
  • Also contains some constants:
    • Math.E: Euler’s number (the e in e^x), approx. 2.71828.
    • Math.PI: Pi, approx. 3.14159.
    • Several others related to natural logarithms (Math.LN2, Math.LN10):
      • Useful to compute logs in arbitrary bases, since log_b(x) = log(x) / log(b).
the number class
The Number Class
  • Converts a number between different representations. Used through objects.
  • Not commonly used. toFixed(d) most useful.
  • Creating: var num5 = new Number(5);
  • Functions:
    • num5.toExponential(d): returns the exponential (scientific) notation for the number, with d decimals of the base shown.
    • num5.toFixed(d): returns the number in standard notation with d decimals shown. If the number has more decimals than d, it will be rounded:
      • e.g.: num5.toFixed(2) returns “5.00”, new Number(13.37).toFixed(1) returns “13.4”.
    • toPrecision(p): returns the number with p significant digits, including those before the decimal point.
    • toString(): converts the number to a string. Not usually needed, since Javascript is weakly typed.
      • A trick: toString(b) will represent the number in base b.
  • Constants: (More commonly used than functions)
    • Number.MAX_VALUE: Largest possible number representable in Javascript.
    • Number.MIN_VALUE: Smallest possible (negative) number representable in Javascript.
    • Number.NaN: A special “not a number” value, often encountered as the result of dividing by 0.
    • Number.NEGATIVE_INFINITY: Represents negative infinity.
    • Number.POSITIVE_INFINITY: Represents infinity.
the boolean class
The Boolean Class
  • This is next to useless. It’s used as an object and has one useful function:
    • toString(): returns the string “true” if the condition is true, “false” if it’s not.
the string class
The String Class
  • This class manipulates text data and is very often used. Access is through objects.
  • Creation:
    • var txt = new String(“text”); //OR
    • var txt = “text”;
  • Functions: (These return new strings rather than modifying them in place)
    • txt.toUpperCase(): Converts all letters to uppercase.
    • txt.toLowerCase(): Converts all letters to lowercase.
    • txt.indexOf(query, start): Returns the position that the string represented by query was found in txt (or -1 if not found). The start parameter is optional, and represents the position in txt to start from.
    • txt.replace(findstr, replacestr): Replaces all occurrences of findstr in txt with replacestr.
    • txt.substring(startpos, endpos): Extracts the part of the string between startpos and endpos (positions are 0 for the first character, 1 for the second, etc.)
      • endpos is optional. If omitted, it is treated as the end of the string.
    • txt.split(separator): Splits the string into an array of smaller strings, delimited by the specified separator.
  • Also a large number of functions that will wrap text in HTML tags:
    • txt.link(url): turns txt into a hyperlink pointing to url.
    • txt.bold(), txt.italic(), txt.big(), txt.small(), etc.
the date class
The Date Class
  • Used to manipulate date and time values. Used through objects.
  • Creation:
    • var now = new Date();
    • (Default date is today at the current time).
  • Functions: (Most get functions have a corresponding set function)
    • now.getDate(): Returns the day of the month (1-31).
    • now.setDate(d): Sets the day of month to d (1-31).
    • now.getMonth(): Gets the month of the year (0-11).
    • now.setMonth(m): Sets the month to m (0-11).
    • now.getFullYear(): Gets the 4-digit year.
    • now.setFullYear(y), etc.: You get the idea.
    • now.getDay(): Gets the day of the week (0-6, Sunday is 0).
    • getHours(), getMinutes(), getSeconds(), getMilliseconds()
    • now.toLocaleString(): Returns a string representation of the date in local time.
    • now.toUTCString(): Returns a string representation of the date in UTC time.
    • now.getTimezoneOffset(): Returns the number of minutes between the local timezone and UTC.
  • Arrays are collections of values stored in a single variable.
  • Why would you want to do this?
    • Because writing:
      • x0 = 0;
      • x1 = 1;
      • x2 = 2;
      • x5000 = 5000;
    • Can be tiring.
  • The number of elements an array holds is known as its size.
  • An array of size 10 is created using: vararr = new Array(10);
  • Arrays in Javascript can be expanded on the fly, so saying arr[20] later on will increase the array size to fit 21 elements.
  • Why 21 and not 20? Array indices begin at 0 and end at size-1.
  • Each value in an array is known as an array element.
  • arr[0] (element 0) holds one value, arr[1] holds another, etc.
  • Each element can be individually assigned to and retrieved, just like any other variable.
  • For example, here’s how we do what we did before:
    • for (x = 0; x < 5000; x++)
      • arr[x] = x; //Variables can be used as array indices too, which is what makes this so powerful.
the array class
The Array Class
  • The array class provides functions for manipulating arrays, called using objects.
  • This is called directly on array objects:
    • arr.sort(); //arr is the array from last slide.
  • Functions:
    • arr.concat(arr2,arr3,…): Appends all arrays passed to this function to the end of arr.
    • arr.push(newelem): Adds an element to the end of the array, increasing the size by 1. Can take multiple elements.
    • arr.pop(): Returns the last element in the array and removes it, reducing the size by 1. Watch out for empty arrays.
    • arr.unshift(newelem): Like push, but adds to the beginning of the array, shifting up.
    • arr.shift(): Like pop, but removes from the beginning of the array, shifting down.
      • If it doesn’t matter where the elements go, prefer push() and pop() to unshift() and shift() - they’re faster.
    • arr.reverse(): Reverses the order of elements in the array.
    • arr.sort(): Very useful. Puts the elements in ascending order.
    • arr.join(separator): Turns the array into a string, with each element delimited by separator.
  • Variables:
    • One very useful variable: arr.length. This sets or returns the size of the array.
  • “Global” functions: not in any class.
  • Allows you to call a function periodically.
    • These can be standard functions or functions you’ve written yourself.
    • You can also enter in short code fragments.
  • Times are specified in milliseconds; i.e. 1000 = 1s.
  • Two types: one-shot and recurring.
    • setTimeout(“alert(‘3 seconds have elapsed.’)”, 3000);
      • setTimeout sets a one-shot timer.
      • It pops up “3 seconds have elapsed” only once, 3 seconds after the code is called.
    • vartimerref = setInterval(“alert(‘Ding!’)”, 5000);
      • setInterval sets a recurring timer.
      • It pops up “Ding!” once every 5 seconds until the page is closed or until the timer is cleared.
      • Make sure to store the result in a variable, so you can clear it later.
    • clearInterval(timerref);
      • This cancels a timer set using setInterval.
      • The argument is the timer returned from setInterval.
the dom again
The DOM, again
  • In addition to the standard Javascript classes, every type of element on a page can be thought of as a class as well.
  • Documents themselves, form fields, links, frames, buttons, objects, images… all have corresponding classes!
  • And like the standard classes, these all have functions and fields.
    • There are far too many of these to cover all of them.
    • But there are fortunately some “rules” that they follow.
  • All elements inherit from the Node and Element classes.
    • This means that they can use all of the functions and variables defined in those two classes.
    • Be careful; while most Node functions are supported by every browser, many of the Element functions are IE-specific.
  • Many of the variables correspond to attribute names of the corresponding tags; e.g. the Anchor class (<a> tag) has a variable called “href”, which can be retrieved or set and which contains the destination of the link.
  • All elements additionally have a “style” variable, which itself contains variables corresponding to CSS rules:
    • E.g. elem.style.backgroundColor, elem.style.borderStyle, elem.style.display
illustrated dom
Illustrated DOM:
  • Say we have the following page:
  • <html>
    • <head>
      • <title>DOM Test</title>
    • </head>
    • <body>
      • <ul>
        • <li>A list.</li>
        • <li>Of items.</li>
      • </ul>
      • <p>And a paragraph.</p>
    • </body>
  • </html>
  • The DOM tree of this page models the HTML and will look like this:
  • Window (node representing the browser window)
    • Document (the current HTML document)
      • HTMLElement (<html>)
        • Head (<head>)
          • Title (<title>)
            • TextNode (“DOM Test”)
        • Body (<body>)
          • ul (<ul>)
            • li (<li>)
              • TextNode (“A list.”)
            • li (<li>)
              • TextNode (“Of items.”)
          • p (<p>)
            • TextNode (“And a paragraph.”)
  • You can view this tree on live webpages using the Firebug add-on’s DOM tab.
  • The Node class contains common functionality to all classes in the DOM tree; i.e. all elements of the page.
  • All elements allow the following functions:
    • appendChild(childnode): adds a new node as a child of the current one, effectively nesting an HTML tag (or text!) inside of this one. Adds after all existing children.
    • insertBefore(childnode, oldnode): Same, but adds before oldnode.
    • removeChild(childnode): removes an existing child node, effectively removing a nested HTML tag.
    • replaceChild(newnode, oldnode): replaces an existing child node with a new node.
    • hasChildNodes(): returns true if child nodes exist, false otherwise.
  • And have the following fields:
    • childNodes: An array of all direct children of this node.
    • firstChild, lastChild: Convenient access to the first and last children.
    • parentNode: This node’s parent (goes “up” the tree).
    • previousSibling: The node before this one on the same level, if one exists.
    • nextSibling: The node after this one on the same level, if one exists.
    • nodeName: The name of the element. For HTML elements, this is the name of the tag (without the <>s; e.g. “p”, “ul”, “li”).
    • ownerDocument: Gets the Document node that this node is a descendent of.
  • Primary use is in locating and creating elements.
  • Functions:
    • getElementById(id): Very commonly used. Retrieves a reference to a node by its ID attribute.
    • getElementsByName(name): Returns an array of nodes with the specified name attribute. Useful on pages with forms.
    • getElementsByTagName(tag): Actually in the Element class. Gets all elements with the given tag name (e.g. “p”).
    • createElement(tagname): Creates a new element with the specified tag name (e.g. “p”).
      • This does not insert the new element into the document; call appendChild or insertBefore on the new parent node with the new element to do that.
    • write(html): Inserts arbitrary HTML into the page.
setting events
Setting Events
  • HTML events (onmouseover, onmouseout, onclick, onsubmit, etc.) are attributes as well.
  • Thus they can be modified in script.
  • This is performed as follows:
    • Write a function: e.g., “function myfunc() { }”
    • Set the desired event to the name of the function, without quotes and without ().
    • e.g. mybutton.onclick = myfunc;
  • This will call the function myfunc whenever the button referenced by mybutton is clicked.
next time
Next Time
  • Coding Review: Manipulating the DOM using Javascript.
    • Creating new page elements “on the fly” using createElement and appendChild.
    • Removing and reordering elements.
    • Manipulating all elements of a certain type (i.e. all links that point to MP3 files).
  • After that, the final lecture (Lecture 10) will integrate everything we have done.