Javascript

JavaScript
JavaScript is the world's most popular programming language.
JavaScript is the programming language of the Web.
JavaScript is easy to learn.
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
This tutorial covers every version of JavaScript:
 The Original JavaScript ES1 ES2 ES3 (1997-1999)

 The First Main Revision ES5 (2009)
 The Second Revision ES6 (2015)
 The Yearly Additions (2016, 2017 ... 2021, 2022)
What can JavaScript do?

JavaScript can change HTML content
JavaScript can change HTML attributes
JavaScript can change CSS style
JavaScript can hide HTML elements
JavaScript can show hidden HTML elements
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" = "Hello
JavaScript!"'>Click Me!</button>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attribute values.</p>
<p>In this case JavaScript changes the value of the src (source) attribute of an
image.</p>
<button on
the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button off
the light</button>
</body>
</html>
JavaScript Display Possibilities

JavaScript can "display" data in different ways:
 Writing into an HTML element, using innerHTML.

 Writing into the HTML output using document.write().
 Writing into an alert box, using window.alert().
 Writing into the browser console, using console.log().
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>
<h2>My First Web Page</h2>

<p>My First Paragraph.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>A <b>JavaScript program</b> is a list of <b>statements</b> to be executed by a
computer.</p>
<p id="demo"></p>
<script>
let x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4
document.getElementById("demo").innerHTML =
"The value of z is " + z + ".";
</script>
</body>
</html>
JavaScript syntax is the set of rules, how JavaScript programs are
constructed:
// How to create variables:

var x;
let y;
// How to use variables:

x = 5;
y = 6;
let z = x + y;
JavaScript Values
The JavaScript syntax defines two types of values:
 Fixed values
 Variable values
Fixed values are called Literals.
Variable values are called Variables.
JavaScript Literals
The two most important syntax rules for fixed values are:
1. Numbers are written with or without decimals:

!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Number can be written with or without decimals.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 10.50;
</script>
</body>
</html>
JavaScript Functions and Events
A JavaScript function is a block of JavaScript code, that can be executed when
"called" for.
For example, a function can be called when an event occurs, like when the user
clicks a button.
You will learn much more about functions and events in later chapters.
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.
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:
Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" it</button>
</body>
</html>
External JavaScript
Scripts can also be placed in external files:
External file: myScript.js

document.getElementById("demo").innerHTML = "Paragraph changed.";
}
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 a <script> tag:
Example
<script src="myScript.js"></script>
You can place an external script reference in <head> or <body> as you like.
The script will behave as if it was located exactly where the <script> tag is
located.
External scripts cannot contain <script> tags.

External JavaScript Advantages
Placing scripts 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
To add several script files to one page - use several script tags:
Example
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
External References
An external script can be referenced in 3 different ways:
 With a full URL (a full web address)

 With a file path (like /js/)
 Without any path
This example uses a full URL to link to myScript.js:
<!DOCTYPE html>
<html>
<body>
<h2>Demo External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Demo External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
</body>
</html>
JavaScript Statements
Example
<!DOCTYPE html>
<html>
<body>
<p>A <b>JavaScript program</b> is a list of <b>statements</b> to be executed by a

computer.</p>
<p id="demo"></p>
<script>
"The value of z is " + z + ".";
</script>
</body>
</html>
JavaScript Programs
A computer program is a list of "instructions" to be "executed" by a computer.
In a programming language, these programming instructions are

called statements.
A JavaScript program is a list of programming statements.

In HTML, JavaScript programs are executed by the web browser.
JavaScript Statements
JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
This statement tells the browser to write "Hello Dolly." inside an HTML element
with id="demo":
Example
document.getElementById("demo").innerHTML = "Hello Dolly.";
Most JavaScript programs contain many JavaScript statements.
The statements are executed, one by one, in the same order as they are
written.
JavaScript programs (and JavaScript statements) are often called JavaScript

code.
Semicolons ;
Semicolons separate JavaScript statements.
Add a semicolon at the end of each executable statement:
Examples
let a, b, c; // Declare 3 variables
a = 5; // Assign the value 5 to a
b = 6; // Assign the value 6 to b
c = a + b; // Assign the sum of a and b to c
<!DOCTYPE html>
<html>
<body>
<p>JavaScript statements are separated by semicolons.</p>
<p id="demo1"></p>
<script>
let a, b, c, d, e, f;
a = 5;
b = 6;
c = a + b;
d=a*b;
e=a-b;
f=a/b;
document.getElementById("demo1").innerHTML = c;
document.getElementById("demo1").innerHTML = d;
document.getElementById("demo1").innerHTML = e;
document.getElementById("demo1").innerHTML = f;
</script>
</body>
</html>
When separated by semicolons, multiple statements on one line are allowed:
a = 5; b = 6; c = a + b;
On the web, you might see examples without semicolons.

Ending statements with semicolon is not required, but highly recommended.
<!DOCTYPE html>
<html>
<body>
<p>Multiple statements on one line are allowed.</p>
<p id="demo1"></p>
<script>
let a, b, c;
a = 5; b = 6; c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>
</body>
</html>
JavaScript White Space

JavaScript ignores multiple spaces. You can add white space to your script to
make it more readable.
The following lines are equivalent:
let person = "Hege";

let person="Hege";
A good practice is to put spaces around operators ( = + - * / ):
let x = y + z;
JavaScript Line Length and Line Breaks

For best readability, programmers often like to avoid code lines longer than 80
characters.
If a JavaScript statement does not fit on one line, the best place to break it is
after an operator:
Example
"Hello Dolly!";
JavaScript Code Blocks

JavaScript statements can be grouped together in code blocks, inside curly
brackets {...}.
The purpose of code blocks is to define statements to be executed together.
One place you will find statements grouped together in blocks, is in JavaScript
functions:
Example
document.getElementById("demo1").innerHTML = "Hello Dolly!";
document.getElementById("demo2").innerHTML = "How are you?";
}
<!DOCTYPE html>
<html>
<body>
<p>JavaScript code blocks are written between { and }</p>
<button type="button" Me!</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
document.getElementById("demo1").innerHTML = "Hello Dolly!";
document.getElementById("demo2").innerHTML = "How are you?";
}
</script>
</body>
</html>
Keyword Description
var Declares a variable

let Declares a block variable
const Declares a block constant
if Marks a block of statements to be executed on a condition
switch Marks a block of statements to be executed in different cases
for Marks a block of statements to be executed in a loop
function Declares a function
return Exits a function
try Implements error handling to a block of statements
JavaScript keywords are reserved words. Reserved words cannot be used as

names for variables.
vb

Javascript

Uploaded by

Copyright:

Available Formats

Javascript

Uploaded by

Document Information

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

Uploaded by

Copyright:

Available Formats

JavaScript

JavaScript is the world's most popular programming language.

JavaScript is the programming language of the Web.

JavaScript is easy to learn.

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

This tutorial covers every version of JavaScript:

 The Original JavaScript ES1 ES2 ES3 (1997-1999)

What can JavaScript do?

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

JavaScript Display Possibilities

 Writing into an HTML element, using innerHTML.

<h2>My First Web Page</h2>

// How to create variables:

// How to use variables:

Fixed values are called Literals.

Variable values are called Variables.

1. Numbers are written with or without decimals:

<p>Number can be written with or without decimals.</p>

JavaScript in <head> or <body>

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

External file: myScript.js

JavaScript files have the file extension .js.

External scripts cannot contain <script> tags.

 It separates HTML and code

 With a full URL (a full web address)

This example uses a full URL to link to myScript.js:

<p>A <b>JavaScript program</b> is a list of <b>statements</b> to be executed by a

In a programming language, these programming instructions are

A JavaScript program is a list of programming statements.

Values, Operators, Expressions, Keywords, and Comments.

Most JavaScript programs contain many JavaScript statements.

JavaScript programs (and JavaScript statements) are often called JavaScript

Add a semicolon at the end of each executable statement:

<p>JavaScript statements are separated by semicolons.</p>

When separated by semicolons, multiple statements on one line are allowed:

On the web, you might see examples without semicolons.

<p>Multiple statements on one line are allowed.</p>

JavaScript White Space

The following lines are equivalent:

let person = "Hege";

A good practice is to put spaces around operators ( = + - * / ):

JavaScript Line Length and Line Breaks

JavaScript Code Blocks

The purpose of code blocks is to define statements to be executed together.

<p>JavaScript code blocks are written between { and }</p>

<button type="button" Me!</button>

var Declares a variable

const Declares a block constant

if Marks a block of statements to be executed on a condition

switch Marks a block of statements to be executed in different cases

for Marks a block of statements to be executed in a loop

function Declares a function

return Exits a function

try Implements error handling to a block of statements

JavaScript keywords are reserved words. Reserved words cannot be used as

You might also like