Scribd
Upload
8 views

Javascript

This document provides an overview of JavaScript, a programming language used for web development, highlighting its syntax, types, and typical applications. It discusses the capabilities and limitations of JavaScript, including its object-oriented nature and interaction with the Document Object Model (DOM). Additionally, it covers the creation and manipulation of objects, arrays, and functions within JavaScript.

Uploaded by

samuel asefa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
8 views

Javascript

This document provides an overview of JavaScript, a programming language used for web development, highlighting its syntax, types, and typical applications. It discusses the capabilities and limitations of JavaScript, including its object-oriented nature and interaction with the Document Object Model (DOM). Additionally, it covers the creation and manipulation of objects, arrays, and functions within JavaScript.

Uploaded by

samuel asefa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 17

Javascript

Jim Fawcett
CSE686 – Internet Programming
Summer 2010
What is Javascript?
 A programming language, supported by
modern browsers
 Script language with C-like syntax
 Intended to manipulate a webpage’s document
object
 Very loosely typed
 Supports:
 Primitive types like ints, booleans, doubles

 Strings and Arrays

 User Defined Objects

 Has built-in functions:


 eval, parseInt, parseFloat, alert, getAttribute,

setAttribute, …
Typical JavaScript
Applications
 Post a page, sent from some server,
back to the server with client supplied
data
 Validate Form fields on client side
 Alter the style of page elements based
on mouse events
 Hide, show, and move page elements
 Manage page scrolling
 Set and retrieve cookies
What JavaScript cannot do for
reasons of security
 Cannot read or write files to the filesystem
 IIS and IE provide filesystem objects that script
can use to do that.
 Cannot execute other programs
 Cannot establish communication with another
computer other than to download a page or
send mail.
 IE provides the File object that script can use to
upload and download files.
 Cannot read the browser history
 Cannot act on the DOM of another page that
did not come from the same server.
Javascript Types
 Most Objects are reference types:
 DOM object, user-defined object, array

 Other types are value types:


 String, Number, Boolean
 Literals, e.g., “a string”, 5, true

 Everything is either a literal or an object


Strings, Numbers, and
Booleans
 var s1 = “this is a literal string”;
 var s2 = new String(“this is a string
object”);
 var i = 3;
 var d = 3.1415927;
 var d2 = new Number(“34.2e-3”);
 var b1 = true; // note: not “true”
 var b2 = new Boolean(false);
JavaScript Objects
 All Objects are dictionaries, e.g.,
collections of name value pairs:
 var myObj = new Object();
 myObj.name = “myObj”; // usual way
 myObj[“date”] = new Date(); // dictionary
 document.write(myObj.name + “ “);
 document.write(myObj.date);
 function aFun() { … }
 myObj.myFun = aFun; // add member
func
Prototypes
 You can create a new object as a copy of an
existing object, the prototype:
 var YourObj = new myObj(“Jim”, new Date());
 You can add a property or method to a single
instance of some object:
 var myModObj = new myObj();
 myModObj.prop1 = someString;

 You can add a property or method to every


instance of an object like this:
 myModObj.prototype.prop2 = “some prop”;
Functions are Objects
 In JavaScript functions are also objects:
 Ordinary definition:
function myFun(x) { alert(x); }
myFun(“this is a message”);

 Anonymous definition:
var myFun = function(x) { alert(x); }

 Function constructor:
var myFun = new Function(“x”,
“alert(x);”);
Arrays
 Three ways to create Arrays:
 var array1 = new Array(1, 1.5, 0, -1);
 var array2 = [1, 4, 9, 16, 26];
 var array3 = new Object();
array3[“pig”] = “mammal”;
array3[“snake”] = “reptile”;
array3[“platypus”] = “marsupial”;
array4[“vulture”] = “bird”;
User-Defined Objects
 Two ways to create an object:
 var myFirstObj = new Object();
 myFirstObj.name = “my_object”
 myFirstObj.func = function() { … };

 And:
 function mySecondObj(name,func)
{
this.name = name;
this.func = function() {…};
}
DOM Objects - Document
 Document
 Element
 Text
 Comment
 Attr
…
 http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-
1590626202
 http://msdn.microsoft.com/library/default.asp?url=/workshop/
author/dom/domoverview.asp
 http://www.w3schools.com/htmldom/dom_obj_document.asp
DOM Methods (most used)
 ref = document.createElement(tagName)
 ref = document.createTextNode(text)
 ref = node.cloneNode(deep)
 ref = element.appendChild(newChild)
 ref = element.insertBefore(newNode,tagetNode)
 ref = element.removeChild(node)
 ref = element.replaceChild(newChild,oldChild)
 element.setAttribute(attributeName,attributeValue)
 attributeValue =
element.getAttribute(attributeName)
 element = document.getElementById(id)
 elements = document.getElementsByTagName(tag)
 boolean = element.hasChildNodes()
DOM Properties (XML only)
 Node properties
 Name = node.nodeName
 integer = node.nodeType

1: ELEMENT_NODE

2: ATTRIBUTE_NODE

3: TEXT_NODE

4: CDATA_SECTION_NODE

5: ENTITY_REFERENCE_NODE

6: ENTITY_NODE

7: PROCESSING_INSTRUCTION_NODE

8: COMMENT_NODE

9: DOCUMENT_NODE

10: DOCUMENT_TYPE_NODE

11: DOCUMENT_FRAGMENT_NODE

12: NOTATION_NODE
 Value = node.nodeValue
 nodeList = node.childNodes
 Ref = node.firstChild
 Ref = node.lastChild
 Ref = node.nextSibling
 Ref = node.parentNode
 Ref = node.previousSibling
Window Properties (partial
list)
 closed
 document
 frames[]
 location (url)
 name
 navigator
 parent
 screen
Window Methods (partial
list)
 Alert() – dialog box
 Close() – close window
 Confirm() – dialog box
 Focus() – set focus
 moveBy() – move relative to current position
 moveTo() – move to new screen location
 Open() – open new window
 Prompt() – dialog box
 setInterval() – execute code periodically
 setTimeout() – execute code after a specified
time
References
 ppk on Javascript, New Riders, 2007
 Learning JavaScript, Shelly Powers, O’Reilly, 2007
 Javascript, the Definitive Guide, David Flanagan,
O’Reilly, 2002
 DOM Scripting, Jeremy Keith, Apress, 2005
 Javascript & DHTML Cookbook, Danny
Goodman,O’Reilly, 2003
 HTML & XHTML, the Definitive Guide, Musciano &
Kennedy, O’Reilly, 2002
 Cascading Style Sheets, the Definitive Guide, Eric
Meyer, O’Reilly, 2000
 www.devguru.com

You might also like