Week 11 - Powernet America

bootlessbwakInternet and Web Development

Nov 12, 2013 (3 years and 9 months ago)

348 views

AJAX, JAVASCRIPT, ACTIONSCRIPT
&
DOM MANIPULATION

Scripts

Agenda


JavaScript: What it is and isn't


JavaScript: Uses


What is the DOM?


What is AJAX?


jQuery

FTW!


Manipulating page elements (the DOM) in sweet ways


Simplified AJAX


Other Coolness


Pluggability


jQuery

in
myPlymouth


What is ActionScript?

Before We Start!


Important tools to have


Use Firefox


Firebug


JS Debugging FTW


Web Developer Toolbar (handy)


A sexy text editor (Like Dreamweaver)


JS: What it is and isn’t


NOT

Java despite its name


ECMAScript

(The language is widely used on the web, especially in the form of its three
best
-
known dialects, JavaScript, ActionScript, and JScript.)


More than form validation


Client
-
Side
Scripting Language


Dynamic


Weakly Typed


Object
-
Oriented (Prototype
-
Based)


DOM Event Tool

JavaScript Sandbox


Scripts run in a “sandbox”


Can only perform web
-
related actions, not File
-
System actions


Constrained by a “Same Origin Policy”




JavaScript Basics


What JavaScript is:


Extension of HTML


An object
-
based scripting language


What JavaScript isn’t:


Java


A full object
-
oriented prog. environment


What JavaScript enables:


Interactivity

What is JavaScript?


JavaScript ≠ Java



Developed by Netscape



Purpose: to Create Dynamic websites



Widely Used

What Can JavaScript Do?


Accept Input


Text fields, check boxes, buttons, etc.


Process Data


Make decisions, manipulate variables


Produce Output


Messages, status lines, windows…


Why?


HTML doesn’t do much

What Can
JavaScripts

Do?


Modify Pages on the Fly


Change text, replace images, special effects


Offer Selections to the User


Drop down menus, check boxes, buttons


Manipulate Windows


Open windows, write to them, close them


BUT: no reading or writing to user’s disk

How JS Works in HTML


<SCRIPT> … </SCRIPT>



<!
--





//
--
>



;

Putting JavaScript into Pages


Direct Insertion


Inside <head> tags (deferred script)


Within <body> (immediate script)


Embedded inline


Inside other HTML tags (as attribute values)


External references


In external .js files (as deferred functions)

<html>

<head>

<title>JavaScript Page</title>

<script LANGUAGE=“JavaScript”>

<!
--

actual JavaScript follows below


alert (“Welcome to the Test Site!”)
;


// ending the script
--
>

</script>

</head>

<body> Content of the Page </body>

</html>

Scripts


Objects


Things on a page


Attributes


Properties of objects


Methods


Actions taken by objects


Statements


Lines of assembled components


Functions


Reusable groups of statements

Scripts


Objects


Img, form, checkbox, button, textarea


Attributes


Height, width, src, href, bgcolor, name


Methods


Onclick, focus, alert, getDate(), scroll


Statements


Document.myimage.src=“somepic.jpg”


Functions


Function doSomething()


{


…… statements …..


}

Event Handlers


Special methods assoc.with certain objects.


Called automatically when events occur


You specify what happens


onClick, onMouseDown, onMouseUp


onFocus, onBlur, onKeyPress


onLoad, onUnload, onSubmit

Object Hierarchy


Fully
-
qualified location of an Object


Allows multiple instances of similar objects


Avoids duplication of object names


Window

Document

Form

Object


Property or method



Value or action


Document.form1.button3.value=“Click me”

Programming JavaScript


Variables


Named elements that can change value


Data types


Integer, floating
-
point, boolean, string


Operators


Assignment, comparison, boolean, string


Control statements


Conditions, loops


Keywords


Reserved words with special meaning

Programming JavaScript


Variables


Howdy, numberRight, score, Ralph


Data types


12, 987.654, true/false, “Texas Tech”


Operators


>=, ==, +=, ||, <, >, etc.


Control statements


If, if….else, for, etc.


Keywords


Var, true, false, int, const, new, return

Programming Rules


Case matters


Quotes (or not) matter


Matching braces matter


Use indenting and semicolons

<script language=“javascript”>

Function msgBox(boxText)


{


Alert(boxText);


}

</script>

Variables

<script language=“JavaScript”>


<!
--

definition of variables

var num_car= 25;

var passenger_per_car= 3;


//calculation of total number of people

var total_passenger= num_car * passenger_per_car


Alert(total_passenger);


// end of script
--
>


</script>


Arrays

var score = new Array(3);


score[0] = 35

score[1] = 56

score[2] = 10


Alternative

: var score = new Array(35,56,10);


sum=score[0]+score[1]+score[2];


alert(sum) ;



JavaScript in Action

ROLLOVER BUTTONS


<script language="javascript" src="/js_scripts/rollover.js"></script>

-----------------------------------------------------------

<script language = "JavaScript">

<!
--

Hide from non
-
JavaScript Browsers

if (document.images){

button1 = new Image()

button1.src = "../assets/images/picture1.gif"

button2 = new Image()

button2.src = "../assets/images/picture2.gif"

}

//
--
>

</script>



JavaScript in Action

FORMS


function IsFormComplete(FormName)

{ var x = 0

var FormOk = true


while ((x < document.forms[FormName].elements.length) &&
(FormOk))


{ if (document.forms[FormName].elements[x].value == '')


{ alert('Please enter the
'+document.forms[FormName].elements[x].name +' and try again.')


document.forms[FormName].elements[x].focus()


FormOk = false }


x ++ }

return FormOk }

JavaScript in Action

PLUG
-
IN DETECTION


WM_easyDetect('flash');

WM_easyDetect('quicktime');

WM_easyDetect('shockwave');

WM_easyDetect('realaudio');


var hasFlash = WM_easyDetect('flash');

if(hasFlash) { window.location = 'flashversion.html'; }

else { window.location = 'noflashversion.html'; }

Questions?

What is the DOM?


DOM == Document Object Model







The DOM is
hierarchical

<html>

<head>


<title>Example JS Page</title>

</head>

<body>


<form id=“some_form”>


<input type=“text” name=“bork”/>


<input type=“submit” value=“Go”/>


</form>

</body>

</html>

Finding DOM Elements


document.getElementById()


returns a specific element



document.getElementByTag()


returns an array of elements


DOM Element Attributes


nodeName


nodeValue


nodeType


parentNode


childNodes


firstChild


lastChild


previousSibling


nextSibling


attributes


ownerDocument


1 = an HTML element


2 = an element attribute


3 = text


8 = an HTML comment


9 = a document


10 = a document type
definition

DOM Attributes

Node Types

Manipulating the DOM


Dynamically creating and adding elements


document.createElement


appendChild

Events


Click


Dblclick


Mousedown


Mouseup


Mouseover


Mousemove


Mouseout


Keypress


Keydown


Keyup



Select


Change


Submit


Reset


Focus


Blur



Load


Unload


Abort


Error


Resize


Scroll


Mouse

Keyboard

Frame/Object

Form

AJAX


AJAX

(Asychronous Javascript and XML)


Gives you the ability to load content
dynamically
!


Loading content on demand


Possible usability Issues


Possible performance
problems
and
benefits


Limitation
: No AJAX calls beyond the
sandbox.


Note: The way around this is with XSS (Cross Site Scripting)…which can be
dangerous if done poorly.

WAIT!!!!!!!!!!!!!

Things can actually be a bit easier.

How much? Let me show you JQuery and ActionScript.

Questions?

What is jQuery?


jQuery is a sweet JavaScript Library


Use FlexiGrid, because it is light weight and follows the
jQuery mantra of running with the least amount of
configuration.


Focuses on simplicity


Get it at:
http://jquery.com



Check out the docs at:
http://docs.jquery.com



Finding Elements


Say goodbye to document.getElementById()
and document.getElementByTag()



Say hello to: $()


Uses CSS Selectors to find elements and returns
them as an array of elements.

Finding Elements With $

$(‘a’)


$(‘.class’)


$(‘#id’)


$(‘.content div’)


$(‘input[name=bork]’)


$(‘input:first’)

Questions?

What is ActionScript?


ActionScript is an object
-
oriented programming (OOP)
language that is designed specifically for Web site animation.


ActionScript is a sophisticated version of the script language
introduced in Flash 3.


ActionScript makes it possible for developers to create
onscreen environments (such as games, tutorials, and e
-
commerce applications) that can respond to user input
through the keyboard or mouse.


ActionScript is an
event
-
based

language: just as is the case in
real life, actions are triggered by events.

Conclusion


Where do you get help?


Ask.com, google.com, etc.


“free javascript code”, “javascript
window”,“javascript help”, etc.


Books



Idiot’s Guide, Bible of JavaScript

THE END

Any Questions?