JavaScript Notes

JavaScript Tutorial
JavaScript is the programming language of the Web.

All modern HTML pages are using JavaScript.
JavaScript is easy to learn.
This tutorial will teach you JavaScript from basic to advanced.
Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
JavaScript Introduction
JavaScript is the most popular programming language in the world.
This page contains some examples of what JavaScript can do.
JavaScript Can Change HTML Content

One of many HTML methods is document.getElementById().
This example "finds" the HTML element with id="demo", and changes its
content (innerHTML):
document.getElementById("demo").innerHTML = "Hello JavaScript";

JavaScript Can Change HTML Styles (CSS)
Changing the style of an HTML element, is a variant of changing an HTML
attribute:
document.getElementById("demo").style.fontSize = "25px";
JavaScript Can Validate Data

JavaScript is often used to validate input:
Please input a number between 1 and 10
Submit
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Can Validate Input</h1>
<p>Please input a number between 1 and 10:</p>
<input id="numb" type="number">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// Get the value of the input field with id="numb"

x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10

if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
JavaScript and Java are completely different languages, both in concept and
design.
JavaScript can be placed in the <body> and the <head> sections of an

HTML page.
The <script> Tag

In HTML, JavaScript code must be inserted between <script> and </script>
tags.
Example
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
Older examples may use a type attribute: <script type="text/javascript">.

The type attribute is not required. JavaScript is the default scripting language in HTM
JavaScript Functions and Events

A JavaScript function is a block of JavaScript code, that can be executed
when "asked" for.
For example, a function can be executed when an event occurs, like when
the user clicks a button.
JavaScript in <head> or <body>

You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an HTML

page, or in both.
Keeping all code in one place, is always a good habit.
JavaScript in <head>
In this example, a JavaScript function is placed in the <head> section of an
HTML page.
The function is invoked (called) when a button is clicked:

<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
JavaScript in <body>
In this example, a JavaScript function is placed in the <body> section of an
HTML page.
The function is invoked (called) when a button is clicked:

<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
External JavaScript
Scripts can also be placed in external files.
External scripts are practical when the same code is used in many different
web pages.
JavaScript files have the file extension .js.
To use an external script, put the name of the script file in the src (source)
attribute of the <script> tag:
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
External JavaScript Advantages

Placing JavaScripts in external files has some advantages:
 It separates HTML and code.

 It makes HTML and JavaScript easier to read and maintain
 Cached JavaScript files can speed up page loads.
JavaScript Output
avaScript does not have any built-in print or display functions.
JavaScript Display Possibilities

JavaScript can "display" data in different ways:
 Writing into an alert box, using window.alert().

 Writing into the HTML output using document.write().
 Writing into an HTML element, using innerHTML.
 Writing into the browser console, using console.log().
Using window.alert()
You can use an alert box to display data:.
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>

<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Using document.write()
For testing purposes, it is convenient to use document.write():
<!DOCTYPE html>
<html>
<body>

<script>
document.write(5 + 6);
</script>
</body>
</html>
Using document.write() after an HTML document is fully loaded, will delete

all existing HTML:
<!DOCTYPE html>
<html>
<body>

<button onclick="document.write(5 + 6)">Try it</button>
</body>
</html>
The document.write() method should be used only for testing.
Using innerHTML
To access an HTML element, JavaScript can use
the document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property defines
the HTML content:
<!DOCTYPE html>
<html>
<body>

<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
In our examples, we often use the innerHTML method (writing into an

HTML element).
JavaScript Syntax
JavaScript Programs
A computer program is a list of "instructions" to be "executed" by the
computer.
In a programming language, these program instructions are
called statements.
JavaScript is a programming language.
JavaScript statements are separated by semicolon.

var x = 5;
var y = 6;
var z = x + y;
JavaScript Variables
In a programming language, variables are used to store data values.
JavaScript uses the var keyword to define variables.
An equal sign is used to assign values to variables.
In this example, x is defined as a variable. Then, x is assigned (given) the

value 6:
var x;
x = 6;
JavaScript Keywords
JavaScript keywords are used to identify actions to be performed.
The var keyword tells the browser to create a new variable:

var x = 5 + 6;
var y = x * 10;
JavaScript Comments
Not all JavaScript statements are "executed".
Code after double slashes // or between /* and */ is treated as

a comment.
Comments are ignored, and will not be executed:

var x = 5; // I will be executed
// var x = 6; I will NOT be executed
JavaScript is Case Sensitive

All JavaScript identifiers are case sensitive.
The variables lastName and lastname, are two different variables.

lastName = "Doe";
lastname = "Peterson";
JavaScript does not interpret VAR or Var as the keyword var.
It is common, in JavaScript, to use camelCase names.

You will often see names written like lastName (instead of
lastname).
JavaScript Code Blocks

JavaScript statements can be grouped together in code blocks, inside curly
brackets {...}.
The purpose of code blocks this is to define statements to be executed

together.
One place you will find statements grouped together in blocks, are in
JavaScript functions:
document.getElementById("demo").innerHTML = "Hello Dolly.";
document.getElementById("myDIV").innerHTML = "How are you?";
}
JavaScript Keywords
JavaScript statements often start with a keyword to identify the JavaScript
action to be performed.
Here is a list of some of the keywords you will learn about in this tutorial:
Keyword Description
break Terminates a switch or a loop
continue Jumps out of a loop and starts at the top

debugger Stops the execution of JavaScript, and calls (if available)
the debugging function
do ... Executes a block of statements, and repeats the block,

while while a condition is true
for Marks a block of statements to be executed, as long as a

condition is true
function Declares a function
if ... else Marks a block of statements to be executed, depending on a

condition
return Exits a function
switch Marks a block of statements to be executed, depending on

different cases
try ... Implements error handling to a block of statements

catch
var Declares a variable
JavaScript keywords are reserved words. Reserved words cannot be

used as names for variables.
JavaScript Data Types

JavaScript variables can hold numbers like 100, and text values like "John
Doe".
In programming, text values are called text strings.
JavaScript can handle many types of data, but for now, just think of numbers
and strings.
Strings are written inside double or single quotes. Numbers are written
without quotes.
If you put quotes around a number, it will be treated as a text string.
var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';
Declaring (Creating) JavaScript Variables

Creating a variable in JavaScript is called "declaring" a variable.
You declare a JavaScript variable with the var keyword:

var carName;
After the declaration, the variable is empty (it has no value).
To assign a value to the variable, use the equal sign:

carName = "Volvo";
You can also assign a value to the variable when you declare it:
var carName = "Volvo";
In the example below, we create a variable called carName and assign the
value "Volvo" to it.
Then we "output" the value inside an HTML paragraph with id="demo":

<p id="demo"></p>
<script>
var carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>

String, Number, Boolean, Array, Object.

JavaScript variables can hold many data types: numbers, strings, arrays,
objects and more:
var length = 16; // Number
var lastName = "Johnson"; // String
var cars = ["Saab", "Volvo", "BMW"]; // Array
var x = {firstName:"John", lastName:"Doe"}; // Object
The Concept of Data Types

In programming, data types is an important concept.
To be able to operate on variables, it is important to know something about

the type.
Without data types, a computer cannot safely solve this:

var x = 16 + "Volvo"
Does it make any sense to add "Volvo" to sixteen? Will produce an error or a
result?
JavaScript will treat it as:

var x = "16" + "Volvo"
If one operand is a string, JavaScript will treat all operands as

strings.
JavaScript Arrays
JavaScript arrays are written with square brackets.
Array items are separated by commas.
The following code declares (creates) an array called cars, containing three
items (car names):
var cars = ["Saab", "Volvo", "BMW"];
JavaScript Functions
A JavaScript function is a block of code designed to perform a particular
task.
A JavaScript function is executed when "something" invokes it (calls it).
function myFunction(p1, p2) {
return p1 * p2; // the function returns the product of
p1 and p2
}
JavaScript Function Syntax
A JavaScript function is defined with the function keyword, followed by
a name, followed by parentheses ().
Function names can contain letters, digits, underscores, and dollar signs
(same rules as variables).
The parentheses may include parameter names separated by

commas: (parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside curly brackets: {}

functionName(parameter1, parameter2, parameter3) {
code to be executed
}
Function parameters are the names listed in the function definition.
Function arguments are the real values received by the function when it is
invoked.
Inside the function, the arguments are used as local variables.
A Function is much the same as a Procedure or a Subroutine, in other programming
Function Invocation
The code inside the function will execute when "something" invokes (calls)
the function:
 When an event occurs (when a user clicks a button)

 When it is invoked (called) from JavaScript code
 Automatically (self invoked)
You will learn a lot more about function invocation later in this tutorial.
Function Return
When JavaScript reaches a return statement, the function will stop
executing.
If the function was invoked from a statement, JavaScript will "return" to
execute the code after the invoking statement.
Functions often compute a return value. The return value is "returned" back
to the "caller":
Calculate the product of two numbers, and return the result:
var x = myFunction(4, 3); // Function is called, return value
will end up in x
function myFunction(a, b) {
return a * b; // Function returns the product of a
and b
}
Why Functions?
You can reuse code: Define the code once, and use it many times.
You can use the same code many times with different arguments, to produce
different results.
Convert Fahrenheit to Celsius:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(32);
The () Operator Invokes the Function

Using the example above, toCelsius refers to the function object, and
toCelcius() refers to the function result.
Accessing a function without () will return the function definition:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;
JavaScript Events
HTML events are "things" that happen to HTML elements.

When JavaScript is used in HTML pages, JavaScript can "react" on these
events.
HTML Events
An HTML event can be something the browser does, or something a user
does.
Here are some examples of HTML events:
 An HTML web page has finished loading

 An HTML input field was changed
 An HTML button was clicked
Often, when events happen, you may want to do something.
JavaScript lets you execute code when events are detected.
HTML allows event handler attributes, with JavaScript code, to be added to

HTML elements.
With single quotes:
<some-HTML-element some-event='some JavaScript'>
With double quotes:
<some-HTML-element some-event="some JavaScript">
In the following example, an onclick attribute (with code), is added to a

button element:
<button onclick='getElementById("demo").innerHTML=Date()'>The time
is?</button>
In the example above, the JavaScript code changes the content of the
element with id="demo".
In the next example, the code changes the content of it's own element
(using this.innerHTML):
<button onclick="this.innerHTML=Date()">The time is?</button>
JavaScript code is often several lines long. It is more common to see

event attributes calling functions:
<button onclick="displayDate()">The time is?</button>

Common HTML Events
Here is a list of some common HTML events:
Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML element
onmouseout The user moves the mouse away from an HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page
What can JavaScript Do?

Event handlers can be used to handle, and verify, user input, user actions,
and browser actions:
 Things that should be done every time a page loads

 Things that should be done when the page is closed
 Action that should be performed when a user clicks a button
 Content that should be verified when a user input data
 And more ...
Many different methods can be used to let JavaScript work with events:
 HTML event attributes can execute JavaScript code directly

 HTML event attributes can call JavaScript functions
 You can assign your own event handler functions to HTML elements
 You can prevent events from being sent or being handled
 And more ...
You will learn a lot more about events and event handlers in the HTML
DOM chapters.
JavaScript Forms
JavaScript Form Validation
HTML form validation can be done by a JavaScript.
If a form field (fname) is empty, this function alerts a message, and returns
false, to prevent the form from being submitted:
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
}
The function can be called when the form is submitted:
<form name="myForm" action="demo_form.asp" onsubmit="return

validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
HTML Form Validation

HTML form validation can be performed automatically by the browser:
If a form field (fname) is empty, the required attribute prevents this form
from being submitted:
<form action="demo_form.asp" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
HTML form validation does not work in Internet Explorer 9 or

earlier.
Data Validation
Data validation is the process of ensuring that computer input is clean,
correct, and useful.
Typical validation tasks are:
 has the user filled in all required fields?

 has the user entered a valid date?
 has the user entered text in a numeric field?
Most often, the purpose of data validation is to ensure correct input to a

computer application.
Validation can be defined by many different methods, and deployed in many

different ways.
Server side validation is performed by a web server, after input has been
sent to the server.
Client side validation is performed by a web browser, before input is sent

to a web server.
HTML Constraint Validation

HTML5 introduced a new HTML validation concept called constraint
validation.
HTML constraint validation is based on:
 Constraint validation HTML Input Attributes

 Constraint validation CSS Pseudo Selectors
 Constraint validation DOM Properties and Methods
Constraint Validation HTML Input Attributes

Attribute Description
disabled Specifies that the input element should be disabled
max Specifies the maximum value of an input element

min Specifies the minimum value of an input element
pattern Specifies the value pattern of an input element
required Specifies that the input field requires a element
type Defines the minimum value of an input element

JavaScript Notes

Uploaded by

Copyright:

Available Formats

JavaScript Notes

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JavaScript Notes

Uploaded by

Copyright:

Available Formats

JavaScript Tutorial

JavaScript is the programming language of the Web.

Why Study JavaScript?

1. HTML to define the content of web pages

2. CSS to specify the layout of web pages

3. JavaScript to program the behavior of web pages

JavaScript Can Change HTML Content

document.getElementById("demo").innerHTML = "Hello JavaScript";

JavaScript Can Validate Data

<h1>JavaScript Can Validate Input</h1>

<p>Please input a number between 1 and 10:</p>

<input id="numb" type="number">

<button type="button" onclick="myFunction()">Submit</button>

// Get the value of the input field with id="numb"

// If x is Not a Number or less than one or greater than 10

JavaScript can be placed in the <body> and the <head> sections of an

The <script> Tag

Older examples may use a type attribute: <script type="text/javascript">.

JavaScript Functions and Events

JavaScript in <head> or <body>

Scripts can be placed in the <body>, or in the <head> section of an HTML

The function is invoked (called) when a button is clicked:

The function is invoked (called) when a button is clicked:

<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

JavaScript files have the file extension .js.

External JavaScript Advantages

 It separates HTML and code.

JavaScript Display Possibilities

 Writing into an alert box, using window.alert().

<h1>My First Web Page</h1>

<h1>My First Web Page</h1>

Using document.write() after an HTML document is fully loaded, will delete

<h1>My First Web Page</h1>

The document.write() method should be used only for testing.

<h1>My First Web Page</h1>

In our examples, we often use the innerHTML method (writing into an

JavaScript is a programming language.

JavaScript statements are separated by semicolon.

JavaScript uses the var keyword to define variables.

An equal sign is used to assign values to variables.

In this example, x is defined as a variable. Then, x is assigned (given) the

The var keyword tells the browser to create a new variable:

Code after double slashes // or between /* and */ is treated as

Comments are ignored, and will not be executed:

// var x = 6; I will NOT be executed

JavaScript is Case Sensitive

The variables lastName and lastname, are two different variables.

JavaScript does not interpret VAR or Var as the keyword var.

It is common, in JavaScript, to use camelCase names.

JavaScript Code Blocks

The purpose of code blocks this is to define statements to be executed

break Terminates a switch or a loop

continue Jumps out of a loop and starts at the top

do ... Executes a block of statements, and repeats the block,

for Marks a block of statements to be executed, as long as a

function Declares a function