JavaScript - A Second Look

7/28/2019 JavaScript - A Second Look

http://slidepdf.com/reader/full/javascript-a-second-look 1/184

JavaScript: Second

LookWhat you might be missing…

Deliver Solutions, Deliver Careers, Deliver Results



Agenda

•

Overview• Variables

• Objects

• Functions• Arrays

•

Intro to DOM?• Browser Objects

• Querying DOM

• ManipulatingDOM

• Event Handling

• Consuming Data



Who I am … • MCPD, SharePoint 2010

• MCITP, SharePoint 2010

• Certified Master Candidate, SharePoint

• Passionate about writing code

… in all forms

• Passionate about SharePoint…



B.E.L.T.

•

Blog: blogs.askcts.com •Email: [email protected]

•

LinkedIn: in/coryloriot •Twitter: @coryloriot

http://blogs.askcts.com/

mailto:[email protected]

http://www.linkedin.com/in/coryloriot

https://twitter.com/coryloriot






mailto:[email protected]

http://blogs.askcts.com/



Who is CTS?• IT professional services firm•

Established in 1993• 200+ employees• 33 active clients in various industries• $27M Revenue – 2012

Mobile



clients



awards


http://slidepdf.com/reader/full/javascript-a-second-look 8/184© 2012 Computer Technology Solutions, Inc.

askcts.com

Rayne [email protected](404) 419-0856

• .NET / GIS Developer

• SharePoint Developer



Lets Start Learning JavaScript



Overview – Brief History

•

1995 – Browser Client Scripting Langua• 1997 – Formalized to ECMAScript

• 2009 – Node.js moves JavaScript to Ser

Processing• 2012 – Microsoft moves JavaScript to C

Application Development – out of the b



Overview - Characteristics• Not Object Oriented

•

Though it does have characteristics, you could never implemof OOP Design Principles• Prototype-based language

• Object Emulation, no Inheritance (more on this in a few slide• Dynamic

• You can append properties to any object, because there is nobject declaration

• Weakly-Typed• You initialize variables as the “Variant” or “var” type, which is

base for all type.• Context determines the type and applicability of operators t



Overview - Characteristics• First Class functions

• All functions operate as pointers on a stack, just object, and follow the same rules as any object iJavaScript

• For instance, you can add a property to a functiothere can be good reasons for doing so

• K&R style syntax, with many of the same construct• if … else • try { } catch {}• switch { case: }



What the heck?• Prototype-based programming is a style of object-oriented pro

which classes are not present, and behavior reuse (known as inclass-based languages) is performed via a process of cloning eobjects that serve as prototypes. This model can also be knownprototype-oriented or instance-based programming. Delegatiolanguage feature that supports prototype-based programming

• The first prototype-oriented programming language was Self dDavid Ungar and Randall Smith in the mid-1980s to research toobject-oriented language design. Since the late 1990s, the clasparadigm has grown increasingly popular. Some current prototlanguages are ECMAScript (and its implementations JavaScript,Flash's ActionScript 1.0), Cecil, NewtonScript, Io, MOO, REBOL,



Why?• Advocates of prototype-based programming often argue

based languages encourage a model of development thafirst on the taxonomy and relationships between classes.• In contrast, prototype-based programming is seen as enc

the programmer to focus on the behavior of some set of and only later worry about classifying these objects into aobjects that are later used in a fashion similar to classes.

• As such, many prototype-based systems encourage the aprototypes during run-time, whereas only very few class-object-oriented systems allow classes to be altered duringexecution of a program.



Code First …

•

JavaScript lets you build as you go… • A nice modular design may include JS f

build on each other, adding properties methods to “base” or prototype classesneeded to extend the functionality and changing needs



Agenda

• Overview

• Variables

• Objects

•

Functions• Arrays

• Intro to DOM?

• Browser Objects

• Querying DOM

•

ManipulatingDOM

• Event Handling

• Consuming Data



Variables• As mentioned… they are weakly typed

• Store information for the duration of thlife in the browser, or in Windows Apps,the “screen”

• Common types:• String, number, Boolean, array, object

undefined



If Programming is the “Force” …



Strongly Typed Languages

• C

• C++

• Java

•

C#• … etc.



Weakly-Typed Languages

• JavaScript

• VBScript

• … etc.

• … C#?



Variable Declaration

• var myVar;

• var myVar = “”;

• var myVar = 1;

•

var myVar = { 1, 2, 3, 4 };



Variable Naming Rules1. Cannot start with numbers2. Cannot have mathematical or logical operators in them (+ - % / < 3. Cannot use punctuation except for “_” character ( . , : ; )

• myVar.ForFun would assume a ForFun child property of myVar and undefined

4. Must not contain spaces5. Cannot use JS keywords (window document string )6. Case Sensitive …

• Once you make myVar, don‟t assign to MyVar or myVAR … they arething

• And no … there is no Option Explicit on the web … but there is “useECMAScript 5 specification

• Simply add “use strict” as a string at the top of your code, or in you



A moment for “Implicit Globals• An implicit global is a variable that is used, but not declar

current scope• Var x = 10; function f () { x++; }• f() assumes the existence of x because it is not declare

• Dangers?• Yes, large projects with many code files can share impli

without realizing• If the implicit global is not declared, you get a reference

• Is it ok to use?• Yes. Just dangerous.



And… back to Variables

• Variables can be anything at any time

• Be careful how you use them

• If you are concerned with making mista

strict



Agenda

• Overview

• Variables

• Objects

•

Functions• Arrays

• Intro to DOM?

• Browser Objects

• Querying DOM

•

ManipulatingDOM

• Event Handling

•

Consuming Data



Objects

• Most of the advanced functionality in JSrequires an understanding of how classdefinitions work



Objects

• A few concepts

• Dynamic property creation

• Object Initializer Syntax

•

JSON – JavaScript Object Notation



Objects


• If you have an object, and you want ita new property, just add the propertygive it a value

• Not a structured approach

b



Objects


var obj = { };

obj.newProp = “my new prop”;

Ob



Objects• Object Initializer Syntax

• Provide properties during the initializathe object

• Allows quotes on the property names

• Allows for methods (anonymous funcassigned to a property)

• This is a structured approach

Obj



Objects• Object Initializer Syntax

var obj = {

prop: “my prop”,

func: function () { … } };

obj.prop = “z”;

obj.func();

Obj JSON



Objects - JSON

• JSON

• Same concept as Object Initializer

• Does not allow for methods in the de

•

Requires quotes around the property • Structured and standards compliant

Obj t JSON



Objects - JSON

• JSON

var obj = {

“prop”: “my prop”

};

obj.prop = “z”;

Obj t JSON



Objects - JSON• Commonly used as a return value to se

information from a web service call orasynchronous post back

• You would assign this to an object to us

modifying the DOM

{ “prop”: “my prop”; };

Obj t



Objects

• So… JSON isn‟t really scary after all.

• But learning how to use it effectively is gmake more sense in the session on DOManipulation

A d



Agenda

• Overview

• Variables

• Objects

•

Functions• Arrays

• Intro to DOM?

• Browser Objects

• Querying DOM

•

ManipulatingDOM

• Event Handling

•

Consuming Data

F ti



Functions

• Function are objects, so they can be stovariables

• First class citizens in JavaScript

F ti B i Ch t i ti



Functions – Basic Characteristic• Callable behaviors

• They can be declared in one place, containfunctionality, and be invoked in multiple plac• Implemented as objects

• Everything is an object in JS, but function is t

object that can be invoked (which gets interewhen we get to classes)• Pass as pointers to variables, or as argument

functions

F nctions A fe t pes



Functions – A few types• Declared (static) functions are the tradition

format• function x () { alert(„Hello World‟); };

• Anonymous functions are nice for single umethods, or for event handling• var y = function () { alert(„Hello World‟);

• Immediate functions are self executing anofunctions

Functions Arguments



Functions – Arguments

• Arguments are not only defined by the sig

of the function, but by the function call• This is the nature of a prototype language

have to assume the calling point could giv

anything• “arguments” is a keyword/object that cont

array of all the arguments passed to the fu

Passing functions as paramete



Passing functions as paramete

• Remember the order of execution

• If you pass a function using the (), it will exthe function, and pass the return value as argument

• If you don‟t add the (), it passes the functiowhich can then be executed by reference

• This follows the Dependency Injection p

Functions vs Methods



Functions vs. Methods• Standard Definition, a function does something

returns a value, a method does something but return a value• In JS, that definition is wrong. There are only fu

and they may or may not implicitly return anyt(although technically there is always a return va

• So… what is a method? • A method is an anonymous or declared func

is the property of an object … it may or may return something

Extension Functions/Properties



Extension Functions/Properties• Modifying objects to include new function

all existing “instances” of the object • Remember, there are no class definitions

classes that are cloned.

•

So you have to modify the definition of tcloned object

• If you just add a property to the base, it not affect existing instances, or future in

Extension Properties



Extension Properties

• We can extend our own objects

• We can extend objects that belong to tsystem, such as Window and Documen

• We can extend type based objects, suchstring and number




Extension Functions/Properties• Why?

•

What if you needed a means to perform a unifooperation on a type, such as reversing the contestring.

• You would normally write a method, and pass th• What if you could add the reverse method to ev

• var myString = “Hello, World”; • myString.reverse();

• Wouldn‟t that be easier?




Extension Functions/Properties• How?

•

The prototype object is implicit to every objelanguage, and everything in the language is object.

• Example:• string.prototype.reverse = function () { };

• Call the prototype object on the object you wmodify, then use the „.‟ operator to append thproperty/method name. use the gets operatdefine the functionality or default value.

Function Scoping



Function Scoping

• Closest thing to encapsulation that Java

has available

• Basic guideline, variables created insidemethod cannot be utilized outside that

• Use this as a means to manage accessibvariables and functions

Function Scoping



Function Scoping• Different scopes

•

Global Scope• Objects declared outside any other scopes are

accessible to the tighter scopes

• Function scope• Objects declared within or passed as argument

treated as global to all child scopes• Block scope

• Objects declared within a block are only accessthat block

Function Scoping



Function Scoping

• Don‟t confuse scope with the following ke

in C#• public, private, protected

• There is no way to grant outside entities a

objects that are internally scoped• Well, almost no way, you can return it

• This grants access to the value, not to th

Function Scoping



Function Scoping

• Functions within functions are scoped o

that function• Functions still follow the rules though, a

immediate function will still execute

immediately when it is reached in the fucall.

Function Scoping



Function Scoping• Why?

• Function scoping is the closest thing JavaScriencapsulation.

• If you are building a very large program, utilscoping can simplify your code so that you d

bombard developers with the complexity of y• For instance jQuery does a lot more under th

than we see through the available functions.

Function Scoping



Function Scoping

• How?

• Simply add properties and methods infunction

• Anything declared inside the functioninaccessible outside the function

Function Scoping



Function Scopingvar x = 2000;

function get_value() {

var y = 13; // y is inacces

// outside this

return y;

}

var z = x + y; // y is undefin

var z = x + get_value(); // z == 2013

Function Scoping



Function Scoping• Why this is cool…

• The contents of the initial function don‟t be empty, and has access to members oprototype (yes, even before the prototypdefined)

• Works like a constructor and doesn‟t “miscellaneous” variables out there as paobject

Module Pattern



Module Pattern

• Setting a var to the return value of an imm

function.• Interesting pattern, allows you to define an

immediate function that returns an object

functionality from the immediate function• Basically a constructor and object definitio

Module Pattern



Module Patternvar obj = (function() {

var a = 1, b = 2, c = 3;

return {x: a,y: b,

product: function() {

return a*b*c;

}};

})();

// all of these will workalert(obj.x);

alert(obj.y);

alert(obj.product());

Agenda



Agenda

• Overview

• Variables

• Objects

• Functions

• Arrays

• Intro to DOM?

• Browser Objects

• Querying DOM

• ManipulatingDOM

• Event Handling

•

C i D t

Arrays



Arrays• What is an array?

• An object that has multiple values thaaccessible through an indexer

• In JS, arrays are always arrays of objec

of a single type necessarily• Because everything is an object in JS,

anything can go in an array, even func

Arrays



Arrays• Important Notes:

• JS Arrays use a zero-base indexer, therefore, ary[0] is thelement, and ary[1] is the second.

• However … the length() method returns arrays using nocounting practice, so an array with 5 elements will retuthe length(), but the last element will be ary[4].

• If you overflow the boundaries of the array, you will get

• If you are iterating through the array, don‟t use the <= to the length, use the < operator

Arrays



Arrays• How to declare an array:

var ary = [ 1, 2, 3, 4 ];

• How to use the array:for (var i = 0; i < ary.length{

alert(ary[i]);

}

Multi-Dimensional Arrays



Multi Dimensional Arrays

• An “Array of Arrays” is the best way to t

• You create an array which has elementsare arrays

• If the child elements do not all have the

length, this is called a Jagged Array

Multi-Dimensional Arrays



u t e s o a ays• How to declare:var ary = [ [1, 2], [2, 3], [4, 5] ];

• How to use the array:for (var i = 0; i < ary.length; i++) {

for (var x = 0; x < ary.length[i]; x

alert(ary[i][x]);}

}

Arrays



y

• The latest version of ECMAScript has ne

features for arrays, to make them develfriendly

• Everyone say it… Thank you ECMA …

Arrays



y• Three kinds of methods on an array:

• Mutators–

modify the contents and structure of• pop, push, reverse, shift, sort, splice, unshift

• Accessors – do not modify the array, and return representation of the array• concat, join, slice, indexOf, lastIndexOf

•

Iterators – provide a method as an argument to executed against every element in the array (as it is called)• forEach, every, some, filter, map, reduce, reduceRigh

Arrays



y• Methods are either mutable or immutable

•

Mutable methods will modify the contents ofin place• Immutable methods will not modify the array

but return a new instance of the array• Mutators – Mutable• Accessors – Immutable• Iterators – Mutable to the Elements of the array

to the array itself

Array methods



y• Mutators

•

pop• push• reverse• shift• sort• splice• unshift

pop()



p p()• Removes the last element of the array

• Returns the value for that element• Sounds like a Stack (LIFO) method

var fib = [ 0, 1, 1, 2, 3, 5, 8, 13 alert(fib.pop()); // returns 13

// fib = [ 0, 1, 1, 2, 3, 5, 8 ];

push()



p ()

• Adds new elements to the end of an ar

• Returns the new length of the array

• Works to make the array into a stack or

var fib = [ 0, 1, 1, 2, 3, 5, 8, 13

alert(fib.push(21)); // returns 9

reverse()



• Reverse the items in the array in the exa

opposite order as the original.

var fib = [ 0, 1, 1, 2, 3, 5, 8, 13 ];

alert(people.reverse());// fib == [ 13, 8, 5, 3, 2, 1, 1, 0 ];

shift()



• Removes the first element of the array

• Returns the value for that element• Sounds like a queue (FIFO) method

var fib = [ 0, 1, 1, 2, 3, 5, 8, 13 alert(fib.shift()); // returns 0

// fib = [1, 1, 2, 3, 5, 8, 13 ];

sort()



• Sorts the items in alphabetical order asc

var people = [“John”,“Aaron”,“Zoe”,“Ca

alert(people.sort().reverse());

// people == [“Aaron”,“Carol”,“John”,“

sort().reverse()



• Sorts the items in alphabetical order

descending

var people = [“John”,“Aaron”,“Zoe”,“Ca

alert(people.sort().reverse());// people == [“Zoe”,“John”,“Carol”,“Aa

sort (fn(a, b))



• Numbers sorted alphabetically don‟t work well, sincomes before 5, but alphabetically 40 would also c

before 5• Because it‟s literally comparing the ASCII numbe

first character• You can resolve this, by passing a function to the s

method, which feels a lot like a lambda in Linq…

var numbers = [ 10, 4, 2, 1, 66, 0];

alert(numbers.sort(function(a, b) { return a-b;}

// numbers == [ 0, 1, 2, 4, 10, 66 ];

sort (fn(a, b))



• What about descending?

• Simply reverse a and b in the calculatio

var numbers = [ 10, 4, 2, 1, 66, 0];

alert(numbers.sort(function(a, b) {

return b-a;

});

// numbers == [ 66, 10, 4, 2, 1, 0 ];

splice (index , remove , […])



• Inserts elements into the array starting at the index provid• If remove is > 0, then it will overwrite that many elements

increasing the size of the array• The return value is an array of items removed from the ar

length of remove • Last arguments are the items to insert into the array, as m

like, just separate them by commas as below

var numbers = [ 10, 4, 2, 1, 66, 0 ];

alert(numbers.splice(2, 2, 7, 8, 12)); // returns [2,

// numbers == [ 10, 4, 7, 8, 12, 66, 0 ];

unshift()



• Adds an element to the beginning of the a•

Kind of like the reverse of shift that pops frfront• Returns the new length of the array

var fib = [ 1, 1, 2, 3, 5, 8, 13 ];alert(fib.unshift(0)); // returns 8

// fib = [ 0, 1, 1, 2, 3, 5, 8, 13 ]

Array Methods



• Accessors• concat• join

• slice

• indexOf

• lastIndexOf

concat()



• Merges the contents of multiple arrays, taking array objecparameters

• Arrays are appended into the calling array in the order thas arguments and the return value is the resulting array

var ary1 = [ 1, 2, 3 ];

var ary2 = [ 4, 5, 6 ];

var aryN = [ 7, 8, 9 ];var mrg = ary1.concat(ary2, aryN);

// mrg == [1, 2, 3, 4, 5, 6, 7, 8, 9 ];

join() || toString()



• Joins all of the elements in the array into astring, comma separated

• Important to remember, it does not add thtogether, it concatenates them. Even whenare numbers

var fib = [ 0, 1, 1, 2, 3, 5, 8, 13 ];

alert(fib.join()); // == 0,1,1,2,3,5,8,1

alert(fib.toString()); // == 0,1,1,2,3,5

indexOf()



• Search the array for an element and ret

index location (zero-based) of the first iin the array

• Great for finding that lost element …

var fib = [ 0, 1, 1, 2, 3, 5, 8, 13

alert(fib.indexOf(1)); // == 1 (seco

lastIndexOf()



• Search the array backwards for an elem

return the index location (zero-based) olast instance in the array

var fib = [ 0, 1, 1, 2, 3, 5, 8, 13 alert(fib.lastIndexOf(1)); // == 2 (

slice(start, end)



• Extracts selected elements in a sequence f

array• Note: it will go from the start index to the

index, not including the end

• Returns an array of the selected elements

var fib = [ 0, 1, 1, 2, 3, 5, 8, 13 ];

alert(fib.slice(2, 4)); // returns [1, 2

Array Methods



• Iterators•

forEach• every• some• filter• map• reduce• reduceRight

To start



• The typical method signature for an iter

as follows:function(element, index, array){}

• But that doesn‟t mean we have to use athem, as long as we know how to use thright. (and we can use arguments to picthe other two if we need them)

function(e){}

forEach()



• Calls a function for every element in the a

•

Possible to change the contents of the elethe array in place

function doIt (element, index, array){

alert(element + “ @ “ + index); }

ary.forEach(doIt);

every()



• Returns true value to specify if all conte

the array meet a given condition in the function, otherwise false

function checkIt (el){

return el >= 10;

}

ary.every(checkIt);

some()



• Returns true value to specify if any cont

the array meet a given condition in the function, otherwise false


return el >= 10;

}

ary.some(checkIt);

filter()



• Returns a new array containing all of the e

that meet the specified criteria• Like the select keyword in Linq


return el >= 10;}

ary.filter(checkIt);

map()



• Projects a new list of whatever return type is specified out from the res• Like the select keyword in Linq, projecting an “anonymous type”

function get_as_class(el, idx){

if (el >= 10) {

return {

Nice: el,

Loc: idx,

f: function() {}

};}

}

var x = ary.map(get_as_class);

reduce()



• Iterate the elements of the array, performing an operationprevious and next elements, returning a value that is com

until the end of the array.• Iterates from the beginning to the end• Allows for an argument to specify the initial value

var startAt = 10;

function x (prev, next, index, array) {return prev + next;

};

ary.reduce(x, startAt);

reduceRight()



• Iterate the elements of the array, performing an opon the previous and next elements, returning a val

compounded until the end of the array.• Iterates from the end to the beginning• Allows for an argument to specify the initial value• This could be useful for flattening a multi-dimensio

ary.reduceRight(function (a, b) {

return a.concat(b);

});

Agenda



• Overview

• Variables• Objects

• Functions

• Arrays

• Intro to DOM?

• Browser Objects• Querying DOM

• Manipulating

DOM• Event Handling

• Consuming Data

What is the DOM?



• Document Object Model

• A model, representing the HTML Doc• Similar to XML DOM?

• No… exactly the same, pretty much

• C# .Net XPath is a congruent topic

What is the DOM?



• Time for a good question, and an impo

note• What is the difference between HTML

XML?

What is the DOM?HTML



• HTML• HyperText Markup Language

• The language of the web, interpreted by browsers• Static pre-defined elements with very few rules for stru

• XML• eXtensible Markup Language• Universal data modeling language• Utilizes a hierarchy of nodes to represent a parent-child

relationship• Allows only one root node• Requires all attributes to operate in key=value pairs

What is the DOM?



• XHTML

• eXtensible HyperText Markup Languag• Follows more rigid rules for documen

components

• Capable of parsing with an XML DOM

What is the DOM?



• Important Note:

• You should always structure your docuas XHTML because they will be easierparse and find information using Java

and the DOM

What is the DOM?O l t thi



• One last thing …

•

You might hear the term DHTML• This stands for Dynamic HTML

• Literally: JavaScript DOM Manipulation to adremove elements from the DOM which may

not have existed in the Response from the se• We will learn more about this concept in this

Agenda



• Overview

• Variables• Objects

• Functions

• Arrays

• Intro to DOM?

• Browser Objects• Querying DOM

• Manipulating


• Consuming Data

Browser Objectsd



• window

• document• location

• navigator

• history

• screen

Browser Objects• window



• window• Represents the browser to JavaScript• Allows for full manipulation of the window

• Resize it• Create new windows• Redirect the browser

• If the document contains <frame> or <iframelements, the browser has one window objeceach



Browser Objects• window: Common properties



• window: Common properties• pageXOffset/pageYOffset

• Get or set the number of pixels the scrollbars hin the horizontal or vertical direction from the sdocument

• screenLeft/screen && screenTop/screen•

Get or set the number of pixels that the browserelation to the left and top edges of the primar

• status• Get or set the status bar text on the browser

Browser Objects• window: Common functions



window: Common functions• alert(s)

•

Provides a modal dialog to the screen with a message anbutton

• blur()/focus()• Remove or Set focus on the window (bring the browser w

the front or send it to the back

• clearInterval(id)/setInterval(f, n)• set () specifies a function that will execute every N millise

no defined end• clear () stops the interval defined by set()




window: Common functions• clearTimeOut(id)/setTimeOut(f, n)

•

set () specifies a function that will execute only once aftemilliseconds have passed• clear() stops the set() from execution if before the N milli

• close()• Closes the window object it‟s called on

• confirm(s)• Displays a dialog box with OK and Cancel options• Returns the result of true if OK or false if Cancel




window: Common functions• moveBy(x, y)/moveTo(x, y)

•

By: moves in relation to current position• To: moves to a specific location on the screen (regardless

location)

• open(url, name, specs, replace)• Creates a new browser window, allowing arguments to s

functionality available in the window, and the URL for tha

• print()• Calls the print function on the browser




window: Common functions• prompt(s)

•

Displays a dialog with a message and an field to retrieve returns the value provided by the user

• resizeBy(w, h)/resizeTo(w, h)• Resizes the browser window to the specified width and h• By: will only move the bottom right to change the size of

• scrollBy(x, y)/scrollTo(x, y)• By: will move the scroll bar the specified number of pixel

the current scroll location in the document• To: will move the scroll bar to the specified point in the d

directly, regardless of the current position

Browser Objects• document



• document

• JS representation of the HTML documloaded into the browser

• Provides access to all HTML elements

page• All the properties of node included

Browser Objects• document: Common properties



p p• anchors

•

Collection of <a name=“*”> elements in the document• body

• Returns the <body> element in the document

• cookie• Returns all the key/value pairs in the document

•

domain• The DNS name of the server that provided the documen

• forms• Collection of <form> elements in the document

Browser Objects• document: Common properties



p p• images

•

Collection of <img> elements in the document• links

• Collection of <a href =“*”> and <area> elements in the d

• referrer• The url of the document that loaded the current docume

•

title• Gets or sets the title of the document from the <title /> e

• url• Returns the full url of the document from the address ba

Browser Objects• document.readyState



document.readyState• Returns a value based on the current status o

document• uninitialized - Has not started loading yet• loading - Is loading• interactive - Has loaded enough and the user c

with it• complete - Fully loaded

• Not W3C Compliant, but supported by all mbrowsers

Browser Objects• document: Common functions



document: Common functions• close()/open(mimetype, replace)

• Open or close an output stream to collect ofrom .write() or .writeln()

• write(s)/writeln(s)• Provide new content for output to the docu

specified by the most recent .open() comma• writeln() adds a newline character at the and

string

Browser Objects• location



• location

• Contains information about the curren• Not W3C compliant, but supported in

major browsers

Browser Objects• location: Common properties

h h



• hash• Returns the anchor portion of a URL

• host/hostname/port• host: returns the host and port of the URL• hostname: only returns the host• port: only returns the port

• href • Returns the entire URL with query string

• protocol• Returns the protocol, HTTP/HTTPS

• search• Returns the query string of the URL

Browser Objects• location: Common functions



• assign(url)•

Loads a new document in place of the current one• Updates history by appending the new document

• reload(force)• Causes the browser to reload the document with the init• force == true: performs a get operation on the current U

• replace(url)• Loads a new document in place of the current one• Replaces the current document in the history (can‟t hit th

button)

Browser Objects• navigator



navigator

•Contains information about the browsas current state and platform

• Not W3C compliant, but supported b

major browsers

Browser Objects• navigator: Common properties



g p p• appCodeName

• The class id (namespace) name of the browser• appName

• The common name of the browser

• appVersion• The version number of the browser

• cookieEnabled• Determines if cookies are enabled in the brows

Browser Objects• navigator: Common properties



g p p• onLine

• Returns true if the browser is online or false• platform

• Returns the platform for which the browser compiled

• userAgent• Returns the user-agent string sent by the br

the server

Browser Objects• navigator: functions



navigator: functions

•

javaEnabled()• Returns true if the browser allows Java ex

or false if not

•

taintEnabled()• Returns true if the browser allows data ta

false if not

Browser Objects• history



history

•

Accesses the browser history• Allows you to move backward and fo

the history

• Not W3C compliant, but supported bmajor browsers

Browser Objects• history: Properties and Functions

l h



• length•

Total number of items in the browser history• back()

• Loads the previous URL in the history

• forward()• Loads the next (if any) URL in the history

• go(n)• Loads a specific URL in the history based on the N i

provided

Browser Objects• screen



screen

•

Provides information about the user dworkspace

• Not W3C Compliant, but supported b

major browsers



Agenda• Overview • Intro to DOM?



•

Variables• Objects

• Functions

• Arrays

•

Browser Objects• Querying DOM

• Manipulating


• Consuming Data

Querying the DOM• Kind of like CSS Selectors:



•

Select by ID• Select by Type (tag name)

• Select by Class

• Select by Attribute

Querying the DOM• Why Query the DOM?



• The information provided in HTML is essa document

• Forms provide users with the ability to ainformation to this document

• It can be useful to retrieve values from thto provide immediate feedback or changdocument dynamically

Querying the DOM• In order to manipulate the DOM with



p

JavaScript, you have to find what you alooking for…

Querying the DOM• getElementById( id )

S l t i l l t i th DOM th t h



• Selects a single element in the DOM that has

provided ID• Every element in the DOM must have a unique

• Returns an object with attributes relative to telement

•

For instance:• <div id=“myElement” /> • var el = document.getElementById(“myEleme

Querying the DOM• getElementsByTagName( type )



g y g yp

•

Selects all elements of a type in the D• Returns a NodeList of the objects mee

criteria

•For instance:• var paragraphs = document.getElementsByTagNa

Querying the DOM• querySelector( query )

S l t th fi t i t f l t th t



• Selects the first instance of element that

the query• Returns the instance of that element

• For instance:• var typeSelector= document.querySelector (“p”);

• var idSelector = document.querySelector (“#myElement”); • var classSelector = document.querySelector (“.rowitem”); • var attrSelector = document.querySelector (“input[type=„radio‟]

Querying the DOM• querySelectorAll( query )



•

Selects all instances of items that matcquery

• Returns staticNodeList meeting the cr



Querying the DOM• staticNodeList



•

Array of HTML/XML Nodes in the DO• Static content, only contains nodes as

last query

•

Items are listed in the order they appethe DOM

Agenda• Overview • Intro to DOM?



•


• Functions

• Arrays

•


• Manipulating


• Consuming Data

DOM Manipulation• What is it?



•

Now that we have found what we wanhave to decide what to do with it.

• Allows us to add and remove elementthe DOM dynamically (DHTML)

• Allows us to modify elements and chastyles

DOM Manipulation• Why?

Ultimatel beca se e can right?



• Ultimately, because we can… right?

• Simple idea:• Add the value of two input boxes and place the

div … so that they can‟t modify it directly

• Complex:• Iterate over the <tr> of a <table> summing the

multiple columns, then add a new <tfoot> elemrow showing the totals in the correct columns

DOM Manipulation• Before we can manipulate the DOM we ha

know a few more properties but to start le



know a few more properties, but to start le

some terminology (sorry)• Node - Everything in the document is a

• Attribute Node – inside of an element node

•

Element Node – in HTML, these are tags <h• Text Node – any text inside of an element n

• Comment Node - 

DOM Manipulation• Node Relationships

• Root Node outermost element node <htm



• Root Node – outermost element node <htm

• Parent Node – element node that contains oelement nodes

• Child Node – element node that has a parenevery node except the Root

• Sibling Node – element nodes that exist at thlevel, like <head> and <body> in the <html

DOM Manipulation• Properties

• className



• className• Gets or sets the class attribute directly

• innerHTML• Gets or sets the contents of an element nod

including all child elements

• innerText• Gets or sets the Text Node Contents of an e

node

DOM Manipulation• Properties

t l *



• style.*• Very nearly every single CSS property th

applied to an Element or Text Node has corresponding property on the Style Obj

•

In order words, it won‟t fit on the slide • http://www.w3schools.com/jsref/dom_ob

p

DOM Manipulation• Methods

• el.appendChild (el)

http://www.w3schools.com/jsref/dom_obj_style.asp







• Add a new child node to the element

• el.removeChild (el)• Remove the specified child node

• el.replaceChild (orig, new)• Replaces the original element with the new element

• el.insertBefore (new, existing)• Inserts the element before the child node

• el.createAttribute (attr)• Creates an attribute on the element

DOM Manipulation• Methods

• el.createElement (s)C t l t d f th DOM t b t d t d



• Creates an element node for the DOM to use, but does not ad

DOM• Use appendChild() to add the new element into the DOM

• el.createTextNode (s)• Creates a text node for the DOM to use, but does not add it to

• el.getAttribute (s)• Gets the value of the specified attribute node for the element n

its called• el.setAttribute (s, v)

• Sets the attribute to the specified value for the element node ocalled

DOM Manipulation• Changing the DOM can mean many different t

• Changing HTML content



• Changing HTML content

• Changing CSS styles• Changing HTML attributes

• Creating new HTML elements

•

Removing existing HTML elements• Changing event(handlers) – this happens in t

section



DOM Manipulation• Changing HTML Content<div id=“dynamic”>I am Static</div>



div id dynamic I am Static /div

<p id=“myP”></p> <script>

var el = document.getElementById(“dynamic

el.innerHTML = “I am Dynamic”;

var myP = document.getElementById(“myP”);

myP.innerText = “Need some content here”;

</script>

DOM Manipulation• Changing CSS Styles



•

We saw the className property, and the fastest, simplest way to change it

• Don‟t forget about transitions and animawhen you do this!

• You can also use the .style.property tomore granular control





DOM Manipulation• Changing or Adding HTML Attributes<input type=“text” id=“dynamic” value=



<input type= text id= dynamic value=

textbox” />

<script>

var el = document.getElementById(“dyna

el.setAttribute(“type”, “button”);

</script>

DOM Manipulation• Creating new HTML Elements

• Create the element using createElement



g

createTextNode(s)• Use the appendChild (el) to add it into a

element node• It‟s important to note that you can add a

nodes as you like, and nest them, but evyou have to add the parent to a node elthat is structured into the DOM

DOM Manipulation• Creating new HTML Elements<div id=“dynamic” />



<script>var el = document.getElementById(“dynamic”);

var p = document.createElement(“p”);

var txt = document.createTextNode(“Hola, Mund

p.appendChild(txt);el.appendChild(p)

</script>

DOM Manipulation• Removing HTML Elements



•

Use the removeChild(el) on the parento remove the element



Agenda• Overview

•

• Intro to DOM?

•



•


• Functions

•Arrays

•


• Manipulating


• Consuming Data



Event Handling• Common Events

• onclick• Triggered when the user clicks the element



Triggered when the user clicks the element

• onload/onunload• Triggered when the user enters or leaves the page and o

the window object

• onchange• Triggered on input fields when the value changes

•

onmouseover/onmousemove/onmouseout• Triggered when the mouse moves over the element, or l

element

Event Handling• Common Events

• onmousedown/onmouseup• Triggered when the user clicks the mouse button down, a



Triggered when the user clicks the mouse button down, a

it• onkeydown/onkeypress/onkeyup

• Triggered when the user presses and releases a key on th

• onfocus/onblur• Triggered when the control focus is given or taken away

input field• onsubmit

• Triggered when the user submits the form

Event Handling• Just for reference, when you attachEven

addEventListener, remove the “on” port



addEventListener, remove the on port

the events

Event Handling• Declarative events

•



•

Defined by the element node as an atas part of the original response

• Programmatic/Dynamic Events

•

Added to the element node to defineadditional or new functionality



Event Handling• Programmatic/Dynamic Events

• Different ways to add events



y• Set it directly

• Add an event listener

• Different ways to remove events• Set it to null• Remove the event listener

Event Handling• Setting event directly

• el onEvent = function () { }



el.onEvent function () { }

• Set onEvent to an anonymous function

• el.onEvent = null;

• Clear the onEvent delegate



Event Handling• Adding an event listener

• Allows you to add multiple events into



y p

array of functions that execute in ordethe event triggers

• Using anonymous functions does not

you to remove the event, you have tothe element

Agenda• Overview

• Variables

• Intro to DOM?

• Browser Objects



Variables

• Objects

• Functions

•

Arrays

Browser Objects

• Querying DOM

• Manipulating


• Consuming Data

Consuming Data• This is a very big topic, and I want to do justice, but … I need to just hit the highl



• Implications of Consuming data• Retrieving it from somewhere

(XMLHTTPRequest)

• Recognizing the type of data (JSON, X• Parsing and using the data

Consuming Data• XMLHTTPRequest

• According to W3C Schools it‟s “the develope



dream” • Update a web page without reloading the pa

• Request data from a server after the page ha

• Receive data from a server after the page ha

• Send data to a server in the background



Consuming Data• XDomainRequest

• Similar to the XMLHTTPRequest



• All the same properties and methods will see below

• Only available in IE 8+, not in any oth

browsers• Attempts cross-domain async web ca

Consuming Data• Why are cross-domain calls such a big deal?

• In computing, the same origin policy is animportant security concept for a number of brow



programming languages, such as JavaScript. Thepermits scripts running on pages originating fromsame site – a combination of scheme, hostnamenumber – to access each other's methods and pwith no specific restrictions, but prevents access

methods and properties across pages on differesites. Same origin policy also appliesto XMLHttpRequest and to robots.txt.

Consuming Data• XMLHTTPRequest Methods

• abort()



• Cancel the current request for the object• getAllResponseHeaders()

• Returns all header information as a string, dby CRLF

• getResponseHeader(header)• Returns specific header information

Consuming Data• XMLHTTPRequest Methods

• open(method, url, isAsync, uname, pwd)• Specifies the type of request, the URL, if the request



handled asynchronously or not, and other optional a request

• send(postdata)• Sends the request off to the server.• Passes the postdata when the method of open() is p

• setRequestHeader(header, value)• Adds a key/value pair to the header to be sent

Consuming Data• XMLHTTPRequest Properties

• readyState



• Holds the status of the XMLHttpRequest. Chfrom 0 to 4:• 0: request not initialized

• 1: server connection established

•

2: request received• 3: processing request

• 4: request finished and response is ready

Consuming Data• XMLHTTPRequest Properties

• responseText• Returns the response data as a string

•



•

responseXML• Returns the response data as XML DOM, works for HTM

• status• Returns the status-number (e.g. "404" for "Not Found" o

"OK")

•

statusText• Returns the status-text (e.g. "Not Found" or "OK")



Consuming Data• XMLHTTPRequest Events

• onreadystatechanged = (function(){})• Stores a function to be called automatically eac



yreadyState property changes

• ontimeout()*• Raised when there is an error that prevents the

completion of the request.

The stars mean you need to use the addEventLismethod to handle these events

Consuming Data• How does this fit together?

• Create an instance of XMLHTTPRequest

var xhr = new XMLHTTPRequest();



• If you are going to work asynchronously, set a function for thonreadystatechanged that checks the readyState property asomething with the result

xhr.onreadystatechanged(function() {

if (xhr.readyState == 4 && xhr.status == 200) {document.getElementById(“mygooglediv”).innerHMTL = xhr.resp

}

});


• Open (prep) the connection to the server.



xhr.open(“get”, “https://www.google.com/search?q=xmlhttprequest”,xhr.open(“post”, “https://www.google.com/search”, true);

• AND … send it!

xhr.send(null); xhr.send(“q=xmlhttprequest”);


• Just in case you missed in, the onreadystatechan



the response from the server as text, and appenthe inside of a div

Consuming Data• So now, how do you figure out if it‟s HTML

JSON?• Check the “Content-Type” header:



• application/json• application/xml• text/html• text/xml• text/plain this one is evil because it means nothing and e

•

Trust the source to be the right type (if you own it, yoknow what to expect)• Use jQuery or other to determine the type for you

Demo• Let‟s build a JS One-Page App!



Conclusion• JavaScript is a first class citizen in the Application Dev

world

•



Has the power an functionality of a language like C#• Syntactically similar to C#

• It‟s really hard to recap everything we discussed, suff

it‟s and awesome language, and we have just hit the iceberg



© 2012 Computer Technology Solutions, Inc.

askcts.com

Rayne Hoover

[email protected](404) 419-0856

• .NET / GIS Developer• SharePoint Developer

Documents

JavaScript - A Second Look