DIG3716 Final
Checkbox
"checked" property is true or false; if true, you can access value of checkbox if false, there will be no value
Trends to watch: Big/Huge Hero Images
-often an image w/ little text, at top of website -borrowed term from print design -replace sliders -can be elaborate & illustrated or simple; slightly blurred
JavaScript Events
Browsers trigger events to fire when some state change happens; functions can be associated with events and will wait to execute until an event is fired
DOM Reminders
Changes don't take place in real-time, not being saved between page loads/refreshes
Text Input(text, textarea, password, hidden)
Must set name attribute, so you can access the value ***Value also becomes an associative index in "elements" array document.form_name.elements["field_name"].value
DOM Level 2
Nov 2000 DOM Core
var headers = document.getElementsByTagName("h1"); var one_header = headers [1]; Which header does one_header contain?
Second h1
Definition Lists <dd>
define the inputs
Definition Lists <dt>
define the labels
Definition Lists <dl>
define the list of labels and inputs
Listener Callback Function
name of a function to call when the specified event is fired; callback function is where you put JavaScript code that modifies the DOM!
Default click event on <a> element
navigation; mouse-over = underline!
\n
new line character
Setters - set a new attribute for newElement
newElement.setAttribute('attribute_name', 'attribute_value'); newElement.appendChild(newTextNode);
Default mouse over event received by <li> element
nothing
+
one or more of the previous character
When to call validateText();
onsubmit onfocus onblur
?
previous character is optional
DOM can change the content or display on a page without
refreshing the page
document.getElementByTagName("element_name");
returns an object containing a set of elements whose name matches the method argument (and every child of those elements) set ==array
element.getAttribute("attribute_name");
returns an object containing a string value of the attribute matching the method argument in specified element.
document.getElementById("element_id");
returns an object containing the element whose id matches the method argument (and every child of that element)
DOM getters
set of methods that return objects that represent parts of the model (document.getElementbyId,TagName,getAttribute)
\s
single whitespace (space, tab, newline etc)
DOM (Object)
special data type that's available in some languages. combine data and functions that can modify that data
\t
tab character
var headers = document.getElementsByTagName("h1"); var one_header = headers [1]; Children of headers?
text; first, second, and third h2 all siblings
Why doesn't HTTP request for page defined by action attribute not work for us?
this will cause a refresh, no server-side code, our data is lost
Input Attributes
type - text, textarea, radio, checkbox, button, submit name - input identifier for HTML-DOM value - default value of the form before any user interaction
Getters Example
var headers = document.getElementsByTagName("h1"); var one_header = headers [1];
Setters - create new element
var newElement = document.createElement('elementName');
Setters - create a new text node
var newTextNode = document.createTextNode('text');
Setters Example (JavaScript)
var para = document.createElement("p"); var paraText = document.createTextNode("This is some text"); para.appendChild(paraText); para.setAttribute("class","blue"); content.appendChild(para);
Radio button JavaScript
var radio_buttons = document.form_name.elements['radio_button_field_name']; for (var x=0; v<radio_buttons.length; x++){ if (radio_buttons[x].checked){ alert("This button is checked and the value is"+ radio_buttons[x].value); }else{ alert("This button is not checked); }}
when data is returned it must be stored in a
variable
<legend>
where you can label your form with a name
\b
word boundary (start or end of a word)
\w
word character
You want to execute DOM script after the page had already loaded because
you may get incomplete results or none at all
*
zero or more of the previous character
Trends to watch: Retro
-making site original & unique -cleaner style -what's vintage is modern and new again
DOM Level 3
April 2004 Improvements, most current form
Event Listener
code in browser that understands when events fire, can be programmed to call a function
DOM (Model)
conceptual map that represents all elements & attributes in currently loaded document
DOM def
-A platform - and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents -API (Application Programming Interface) -provides an easily readable map as an object to pieces that make up a webpage
Remove default click event behavior of <a>
-Create an event listener that listens for 'click and calls a callback function -In callback function declaration pass in the event object -Call the preventDefault() method of the event object in the listener function
DOM History
-DHTML of late 90's -HTML to markup content as a webpage -CSS to style the presentation of HTML -JavaScript to change styles after page loaded -Browsers mostly compatible at time
Trends to watch: Flat Design
-No more gradients or shadows -Strong focus on color -Layout interactive but w/out exquisitely refined graphics (example: Iphone interface)
Trends to watch: Typography
-One of the most difficult to tackle -Young but will continue to be a part of web design
Event types
-User-triggered (click, mouseover, mouseout, focus, blur, key down, key up, key press) -Browser-triggered (about, resize, load, unload, submit) -Server-triggered (message, open, error)
Load Event Listener window.addEventListener('load',init,false);
-When listening for the load event, add a listener to the window object NOT document object -Will execute callback function init as soon as the page finishes loading
Trends to watch: User Experience/User Interface
-all users are looking for simplicity, easy navigation & usability according to device -focus on user & user will focus on you
Trends to watch: One Page Layouts
-challenge you to edit away what's unnecessary -move away from quirky navigation & become more minimal -like business cards (one-stop-shop) -more about personal profiles, less corporate
Trends to watch: Change of Perspective - Parallax
-change in perspective to more realistic view -may involve move toward side-shot aerial -play around w/ different perspectives
Trends to watch: CSS3 and HTML5 instead of Flash
-interactivity on mobile -faster loading -interactive design will make a comeback
Trends to watch: Social Media Features
-share buttons & other -impossible to find a website without them -social & web design seem to be even more linked in the future -your biggest fans become your greatest asset
onsubmit
-will wait until the user clicks submit before validating -if valid, form should submit -if invalid, form should return some kind of error showing which fields won't validate correctly
Setters Example CSS
.blue{ color:#00f; font-size:2 em; }
HTML Styling Forms
1. Tables 2. Paragraphs 3. Divs 4. definition lists
Form Behavior
1. User enters data into input fields 2. User hits submit 3. Data gets formatted as query string 4. HTTP request for page defined by action attribute 5. Query string set with HTTP request
Keeping track of errors
1. create an error array w/ no elements 2. validate like normal 3. test (if invalid push() into error array, if valid don't push() anything) 4. after error array is full loop through and "turn on" error messages for each field that corresponds to the field names stored in error array; use pop()
Setters Example (HTML)
<div id="content"> </div>
Form Elements
<form>,<input/>,<label>,<fieldset>,<legend>,<fieldset>
Checking if a certain character is there
<input type="text" name="myInput"/> var user_data = document.myForm.myInput.value; if (user_data.indexOf('!') != -1){ alert("! is there!"); }
Checking if user entered data
<input type="text" name="myInput"/> var user_data=document.myForm.myInput.value; if (user_data != null) && (user_data.length>0){ alert("Data is there!"); }
Radio button
Come in groups that share the same attribute, but can all have different values; multi-dimensional array!
Dom is hierarchical tree
DOM looks at the loaded document as tree w/ nodes Pieces of map are nodes, 3 types: Element Nodes - element name(div, p, body, h1) Attribute Nodes - attribute name (href, src, class, id) Text Nodes - text content (<p></p>
DOM Level 4
DRAFT...
DOM continued
Defines every object and element on a web page; hierarchical structure; accesses page elements apply style to page elements
var post = document.getElementById("post"); what if you didn't select post?
It would default to body
Form Attributes
action - path to server-side code to process form method - server-side approach to processing form data (GET or POST) name - form identifier for HTML - DOM
Method
action(writing text to page document, submitting form) example: document.write() or form1.submit()
.
any character except newline
\d
any digit (same as [0-9]
\D
anything but a digit
\B
anything but a word boundary
Property
attribute (background color, date web page was modified, src file) example: document.bgcolor
var headers = document.getElementsByTagName("h1"); var one_header = headers [1]; Parents of headers?
body
DOM (Document)
browser turns all page data into an object labeled document on page load
Object
browser window, submit button, web page document
appendChild()
called from a parent element to allow adding a child element defined by the method argument
DOM Core - Setters
change what is in the DOM; inserting or modifying elements, attributes, content
Getters only work if
document is fully loaded
Access value Text Input (JavaScript)
document.form_name.field_name.value
DOM Level 0
early implementation (1996) HTML-DOM
getAttribute() can only be called on a specific
element (not the document object!)
nodeValue
element.firstChild.nodeValue; -returns a string containing the value of specified -element; can only be accessed for text nodes!
onfocus
execute a callback function when the user gives focus to a field (text position bar in the field)
onblur
execute a callback function when the user removes focus from a field
DOM Level 1
first standardized implementation of DOM
DOM tree can traversed with
firstChild, lastChild, parentNode, previousSibling, and nextSibling properties
Where is design going?
focusing on overall presentation
Label Attributes
for - should match the id of the <input/> tag you want the label to apply
Prevent Default Example
function showLikeBar(event){ event.preventDefault(); **by adding 'event' you can change the default
Default focus event received by <input> element
highlight the field, add blinking |
Checkbox JavaScript
if(document.form_name.elements['checkbox_field_name'].checked){ alert('checked'); }else{ alert('unchecked!'); }
[^a-zA-Z]
matches anything except a letter
push()
method of the array object, appends items to the end of the array and returns the new length
pop()
method of the array object, removes last element in the array and returns it
document.addEventListener('click',myFunction,false); why doesn't the function name have parentheses after them?
myFunction is just a reference to the function and will wait patiently for the event to fire before executing; myFunction() would be evaluated immediately and replaced with whatever myFunction() returns