JAVA SCRIPT NOTES
KETAN MITTAL
181361
CS-46
What is JavaScript?
• JavaScript is a programming language for use in HTML pages
• Invented in 1995 at Netscape Corporation (LiveScript)
• JavaScript has nothing to do with Java
• JavaScript programs are run by an interpreter built into the user's
web browser
What can JavaScript Do?
• JavaScript can dynamically modify an HTML page
• JavaScript can react to user input
• JavaScript can validate user input
• JavaScript can be used to create cookies
• JavaScript is a full-featured programming language
• JavaScript user interaction does not require any communication with
the server
Pros and Cons of JavaScript
• Pros: – Allows more dynamic HTML pages, even complete web
applications
• Cons: – Requires a JavaScript-enabled browser – Requires a client
who trusts the server enough to run the code the server provides
JavaScript Variables
• JavaScript has variables that you can declare with the optional var
keyword
• Variables declared within a function are local to that function
• Variables declared outside of any function are global variables var
myname = "Pat Morin";
JavaScript Operators and Constructs
• JavaScript has most of the operators we're used to from C/Java –
Arithmetic (+, - , * , /, %) – Assignment (= , += , -= , *= /= , %= , ++, --) –
Logical (&&, ||, !) – Comparison (, <= , >= , ==)
• Note: + also does string concatentation
• Constructs: – if, else, while, for, switch, case
JavaScript Functions
• JavaScript lets you define functions using the function keyword
• Functions can return values using the return keyword
JavaScript Events
• JavaScript can be made to respond to user events
• Common Events: – onload and onunload : when a page is first visited
or left – onfocus, onblur, onchange : events pertaining to form
elements – onsubmit : when a form is submitted – onmouseover,
onmouseout : for "menu effects"
Note: Comments in JavaScript are delimited with // and /* */ as in Java and C++
JavaScript Objects
• JavaScript is object-oriented and uses the same method-calling syntax
as Java
• Some basic objects are built-in to JavaScript
– String
– Date
– Array
– Boolean
– Math
JavaScript Strings
• A String object is created every time you use a string literal (just like in
Java)
• Have many of the same methods as in Java – charAt, concat, indexOf,
lastIndexOf, match, replace, search, slice, split, substr, substring,
toLowerCase, toUpperCase, valueOf
• There are also some HTML specific methods – big, blink, bold, fixed,
fontcolor, fontsize, italics, link, small, strike, sub, sup
• Don't use the HTML methods (use CSS instead) – This is the worst
kind of visual formatting
JavaScript Dates
• The Date class makes working with dates easier
• A new date is initialized with the current date
• Dates can be compared and incremented
var myDate = new Date();
myDate.setFullYear(2007,2,14);
var today = new Date();
var nextWeek = today + 7;
if (nextWeek > today)
alert("You have less than one week left");
The JavaScript Math Class
• The Math class encapsulates many commonly used mathematical
entities and formulas
• These are all class methods – abs, acos, asin, atan, atan2, ceil, cos,
exp, floor, log, max, min, pow, random, round, sin, sqrt, tan
• These are all class methods – E, LN2, LN10, LOG2E, LOG10E, PI,
SQRT1_2, SQRT2
JavaScript and the DOM
• The Document Object Model (DOM) is a specification that determines
a mapping between programming language objects and the elements
of an HTML document
• Not specific to JavaScript
HTML DOM Objects
• Environment objects – Window, Navigator, Screen, History, Location,
Document
• HTML objects – Anchor, Area, Base, Body, Button, Event, Form,
Frame, Frameset, Iframe, Image, Checkbox, FileUpload, Hidden,
Password, Radio, Reset, Submit, Text, Link, Meta, Object, Option,
Select, Style, Table, TableCell, TableRow, TextArea
HTML DOM:
Document
• The Document object represents an HTML document and can be
used to access all documents in a page
• A Document contains several collections – anchors, forms, images,
links
• Has several properties – body, cookie, domain, lastModified, referrer,
title, URL
• Has several useful methods – getElementById, getElementsByName,
getElementsByTagName, write, writeln, open, close
HTML DOM:
Document
• An instance of Document is already created for you, called document.
function changeF()
var cText = document.getElementById("c");>C
var fText = document.getElementById("f");>F
...
} C
HTML DOM:
Form Elements
• One of the most common uses of JavaScript is for form validation
• Several HTML DOM classes encapsulate form elements – Form,
Button, Checkbox, Hidden, Password, Text, Radio, Reset, Submit,
Textarea
• Warning: Using JavaScript is not a substitute for validating form data
in CGI scripts
HTML DOM:
The Document Tree
• Accessing elements and changing their properties lets us do simple
things like form validation, data transfer etc
• HTML DOM lets us do much more
• We can create, delete, and modify parts of the HTML document
• For this we need to understand the Document Tree
HTML DOM: The Document Tree
Navigating the Document Tree
• With JavaScript we can navigate the document tree
• document.getElementById(), getElementsByName(), and
getElementsByTagName() return nodes in the document tree
• Information can be obtained from:
– nodeName
– The tag name
– nodeValue
– The text of a text node
– nodeType
– The kind of node
