Javascript: Client-Side Scripting: of Web Development and of Web Development and
Javascript: Client-Side Scripting: of Web Development and of Web Development and
Scripting
Chapter 6
WHAT IS JAVASCRIPT
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
What is JavaScript
SYNTAX
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
JavaScript Syntax
JavaScript’s reputation for being quirky not only stems from its strange way
of implementing object-oriented principles but also from some odd syntactic
gotchas:
• Everything is type sensitive, including function, class, and variable names.
• The scope of variables in blocks is not supported. This means variables
declared inside a loop may be accessible outside of the loop, counter to
what one would expect.
• There is a === operator, which tests not only for equality but type
equivalence.
• Null and undefined are two distinctly different states for a variable.
• Semicolons are not required, but are permitted (and encouraged).
• There is no integer type, only number, which means floating-point
rounding errors are prevalent even with values intended to be integers.
(x===9) is true
(x!==9) is false
The Boolean operators and, or, and not and their truth
tables are listed in Table 6.2. Syntactically they are
represented with && (and), || (or), and ! (not).
JAVASCRIPT OBJECTS
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
JavaScript Objects
Objects not Classes
The String class has already been used without us even knowing
it.
Constructor usage
var greet = new String("Good"); // long form constructor
var greet = "Good"; // shortcut constructor
Length of a string
alert (greet.length); // will display "4"
The Date class is yet another helpful included object you should
be aware of. It allows you to quickly calculate the current date
or create date objects for particular dates. To display today’s
date as a string, we would simply create a new object and use
the toString() method.
var d = new Date();
// This outputs Today is Mon Nov 12 2012 15:40:19 GMT-0700
alert ("Today is "+ d.toString());
Property Description
attributes Collection of node attributes
Method Description
createAttribute() Creates an attribute node
Property Description
className The current value for the class attribute of this HTML
element.
src Links to an external URL that should be loaded into the img,
page (as opposed to href which is a link to follow when input,
clicked) iframe,
script
value The value is related tot he value attribute of input tags. Input,
Often the value of an input field is user defined, and we textarea,
use value to get that user input. submit
function someHandler(e) {
// e is the event that triggered this handler.
}
Event Description
onclick The mouse was clicked on an element
ondblclick The mouse was double clicked on an element
onmousedown The mouse was pressed down over an element
onmouseup The mouse was released over an element
onmouseover The mouse was moved (not clicked) over an element
onmouseout The mouse was moved off of an element
onmousemove The mouse was moved while over an element
Event Description
onkeyup The user releases a key that was down (this happens last)
onchange Some <input>, <textarea> or <select> field had their value change.
This could mean the user typed something, or selected a new choice.
onreset HTML forms have the ability to be reset. This event is triggered when
that happens.
onselect When the users selects some text. This is often used to try and prevent
copy/paste.
onsubmit When the form is submitted this event is triggered. We can do some
pre-validation when the user submits the form in JavaScript before
sending the data on to the server.
Event Description
If you need to get a date from the user, use the HTML5
<input type="date”>