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