- 60 Views
- Uploaded on

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

**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:

- 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

- 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.

Classes

- 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

- 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

- 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

- 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

- 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

- 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

- 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 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.

Timers

- “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

- 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:

- 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.

Node

- 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.

Document

- 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

- 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

- 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.

Download Presentation

Connecting to Server..