Scribd
Upload
1 views37 pages

JAVASCRIPT

The document provides an overview of HTML, CSS, and JavaScript, focusing on their fundamental concepts, syntax, and usage in web development. It emphasizes the importance of JavaScript as a core technology for web developers, detailing its capabilities to manipulate HTML content, styles, and attributes. Additionally, it covers JavaScript's history, versions, and methods for including scripts in web pages, along with examples demonstrating its functionality.

Uploaded by

subhashhajare45
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1 views37 pages

JAVASCRIPT

The document provides an overview of HTML, CSS, and JavaScript, focusing on their fundamental concepts, syntax, and usage in web development. It emphasizes the importance of JavaScript as a core technology for web developers, detailing its capabilities to manipulate HTML content, styles, and attributes. Additionally, it covers JavaScript's history, versions, and methods for including scripts in web pages, along with examples demonstrating its functionality.

Uploaded by

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

No.

of
Unit-II HTML, CSS & JAVASCRIPT COs
Hours

HTML: Tags and Attributes, Fonts, Colors and hyperlinks, formatting


tags, Images, Tables.

CSS: CSS Properties, CSS Styling, Types, Box Model, Creating page Layout
08 CO2
and Site Designs.

Javascript: JavaScript Basic Syntax, Embedding JavaScript, JavaScript


built-in function, validation.

JavaScript
JavaScript is the world's most popular programming language.
JavaScript is the programming language of the Web.
JavaScript is easy to learn.
Example
<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"onclick="document.getElementById('demo').innerHTML = Date()"> Click me to display
Date and Time.</button>
<p id="demo"></p>
</body>
</html>
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
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, 2018)
 How do I get JavaScript?
You don't have to get or download JavaScript.
 Where can I download JavaScript?
JavaScript is already running in your browser on your computer, on your tablet, and on
your smart-phone.
 Is JavaScript Free?
JavaScript is free to use for everyone.
JavaScript Introduction
JavaScript Can Change HTML Content
One of many JavaScript HTML methods is getElementById().
The example below "finds" an HTML element (with id="demo"), and changes the element
content (innerHTML) to "Hello JavaScript":
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello
JavaScript!"'>Click Me!</button>
</body>
</html>
JavaScript accepts both double and single quotes:
JavaScript Can Change HTML Attribute Values
In this example JavaScript changes the value of the src (source) attribute of
an <img> tag:
<!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 onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
</body>
</html>
JavaScript Can Change HTML Styles (CSS)
Changing the style of an HTML element, is a variant of changing an HTML attribute:
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>
</body>
</html>
JavaScript Can Hide HTML Elements
Hiding HTML elements can be done by changing the display style:
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
</body>
</html>
Or
document.getElementById("demo").style.display = "block";

JavaScript and Java are completely different languages, both in concept and design.
JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in
1997.
ECMA-262 is the official name of the standard. ECMAScript is the official name of the
language.
JavaScript is the default scripting language in HTML.
JavaScript Where To USE
The <script> Tag
In HTML, JavaScript code is inserted between <script> and </script> tags.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</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.
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" 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:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
Placing scripts at the bottom of the <body> element improves the display speed, because
script interpretation slows down the display.
External JavaScript
Scripts can also be placed in external files:
External file: myScript.js
function myFunction() {
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:

JavaScript Output
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:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
Changing the innerHTML property of an HTML element is a common way to display data
in HTML.
Using document.write()
For testing purposes, it is convenient to use document.write():
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Using document.write() after an HTML document is loaded, will delete all existing
HTML:
The document.write() method should only be used for testing.
Using alert()
You can use an alert box to display data:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>
Using console.log()
For debugging purposes, you can call the console.log() method in the browser to display
data.
Example
<!DOCTYPE html>
<html>
<body>

<script>
console.log(5 + 6);
</script>
</body>
</html>
JavaScript Print

JavaScript does not have any print object or print methods.


You cannot access output devices from JavaScript.
The only exception is that you can call the window.print() method in the browser to print
the content of the current window.
Example
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>
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, 2018)
Commonly Asked Questions
 How do I get JavaScript?
 Where can I download JavaScript?
 Is JavaScript Free?
You don't have to get or download JavaScript.
JavaScript is already running in your browser on your computer, on your tablet, and on your smart-
phone.
JavaScript is free to use for everyone.
JS Introduction
This page contains some examples of what JavaScript can do.
JavaScript Can Change HTML Content
One of many JavaScript HTML methods is getElementById().
The example below "finds" an HTML element (with id="demo"), and changes the element content (innerHTML)
to "Hello JavaScript":
Example
document.getElementById("demo").innerHTML = "Hello JavaScript";
JavaScript accepts both double and single quotes:
Example
document.getElementById('demo').innerHTML = 'Hello JavaScript';

JavaScript Can Change HTML Attribute Values


In this example JavaScript changes the value of the src (source) attribute of an <img> tag:
The Light Bulb

Turn on the light Turn off the light

JavaScript Can Change HTML Styles (CSS)


Changing the style of an HTML element, is a variant of changing an HTML attribute:
Example
document.getElementById("demo").style.fontSize = "35px";
JavaScript Can Hide HTML Elements
Hiding HTML elements can be done by changing the display style:
Example
document.getElementById("demo").style.display = "none";
JavaScript Can Show HTML Elements
Showing hidden HTML elements can also be done by changing the display style:
Example
document.getElementById("demo").style.display = "block";

JS Where to
The <script> Tag
In HTML, JavaScript code is inserted between <script> and </script> tags.
Example
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
Old JavaScript examples may use a type attribute: <script type="text/javascript">.
The type attribute is not required. JavaScript is the default scripting language in 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" 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:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";}
</script>
</body>
</html>
Placing scripts at the bottom of the <body> element improves the display speed, because script interpretation
slows down the display.

External JavaScript
Scripts can also be placed in external files:
External file: myScript.js
function myFunction() {
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:
Example
<script src="https://www.google.com/myScript.js"></script>
This example uses a file path to link to myScript.js:
Example
<script src="/js/myScript.js"></script>
This example uses no path to link to myScript.js:
Example
<script src="myScript.js"></script>
JS Output
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:
Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>


<p>My First Paragraph</p>

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

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
Changing the innerHTML property of an HTML element is a common way to display data in HTML.

Using document.write()
For testing purposes, it is convenient to use document.write():
Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>


<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>
Using document.write() after an HTML document is loaded, will delete all existing HTML:
Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>


<p>My first paragraph.</p>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

</body>
</html>
The document.write() method should only be used for testing.

Using window.alert()
You can use an alert box to display data:
Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>


<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
You can skip the window keyword.
In JavaScript, the window object is the global scope object, that means that variables, properties, and methods by
default belong to the window object. This also means that specifying the window keyword is optional:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
alert(5 + 6);
</script>
</body>
</html>

Using console.log ()
For debugging purposes, you can call the console.log() method in the browser to display data.
You will learn more about debugging in a later chapter.
Example
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
JavaScript Print
JavaScript does not have any print object or print methods.
You cannot access output devices from JavaScript.
The only exception is that you can call the window.print() method in the browser to print the content of the
current window.
Example
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>
JS Statements
Example
let x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4

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.
Semi colons;
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
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.
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
document.getElementById("demo").innerHTML =
"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
function myFunction() {
document.getElementById("demo1").innerHTML = "Hello Dolly!";
document.getElementById("demo2").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

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.
JS Syntax
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:
10.50

1001
2. Strings are text, written within double or single quotes:
"John Doe"

'John Doe'

JavaScript Variables
In a programming language, variables are used to store data values.
JavaScript uses the keywords var, let and const to declare 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:
let x;
x = 6;

JavaScript Operators
JavaScript uses arithmetic operators ( + - * / ) to compute values:
(5 + 6) * 10
JavaScript uses an assignment operator ( = ) to assign values to variables:
let x, y;
x = 5;
y = 6;
JavaScript Expressions
An expression is a combination of values, variables, and operators, which computes to a value.
The computation is called an evaluation.
For example, 5 * 10 evaluates to 50:
5 * 10
Expressions can also contain variable values:
x * 10
The values can be of various types, such as numbers and strings.
For example, "John" + " " + "Doe", evaluates to "John Doe":
"John" + " " + "Doe"

JavaScript Keywords
JavaScript keywords are used to identify actions to be performed.
The let keyword tells the browser to create variables:
let x, y;
x = 5 + 6;
y = x * 10;
The var keyword also tells the browser to create variables:
var x, y;
x = 5 + 6;
y = x * 10;
In these examples, using var or let will produce the same result.
You will learn more about var and let later in this tutorial.

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:
let x = 5; // I will be executed

// x = 6; I will NOT be executed


You will learn more about comments in a later chapter.

JavaScript Identifiers / Names


Identifiers are JavaScript names.
Identifiers are used to name variables and keywords, and functions.
The rules for legal names are the same in most programming languages.
A JavaScript name must begin with:
 A letter (A-Z or a-z)
 A dollar sign ($)
 Or an underscore (_)
Subsequent characters may be letters, digits, underscores, or dollar signs.
Note
Numbers are not allowed as the first character in names.
This way JavaScript can easily distinguish identifiers from numbers.

JavaScript is Case Sensitive


All JavaScript identifiers are case sensitive.
The variables lastName and lastname, are two different variables:
let lastname, lastName;
lastName = "Doe";
lastname = "Peterson";
JavaScript does not interpret LET or Let as the keyword let.
JavaScript and Camel Case
Historically, programmers have used different ways of joining multiple words into one variable name:
Hyphens:
first-name, last-name, master-card, inter-city.
Hyphens are not allowed in JavaScript. They are reserved for subtractions.
Underscore:
first_name, last_name, master_card, inter_city.
Upper Camel Case (Pascal Case):
First Name, Last Name, Master Card, Inter City.
Lower Camel Case:
JavaScript programmers tend to use camel case that starts with a lowercase letter:
First Name, last Name, master Card, inter City.

JavaScript Character Set


JavaScript uses the Unicode character set.
Unicode covers (almost) all the characters, punctuations, and symbols in the world.
JS Comments
JavaScript comments can be used to explain JavaScript code, and to make it more readable.
JavaScript comments can also be used to prevent execution, when testing alternative code.
Single Line Comments
Single line comments start with //.
Any text between // and the end of the line will be ignored by JavaScript (will not be executed).
This example uses a single-line comment before each code line:
Example
// Change heading:
document.getElementById("myH").innerHTML = "My First Page";

// Change paragraph:
document.getElementById("myP").innerHTML = "My first paragraph.";
This example uses a single line comment at the end of each line to explain the code:
Example
let x = 5; // Declare x, give it the value of 5
let y = x + 2; // Declare y, give it the value of x + 2

Multi-line Comments
Multi-line comments start with /* and end with */.
Any text between /* and */ will be ignored by JavaScript.
This example uses a multi-line comment (a comment block) to explain the code:
Example
/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";
It is most common to use single line comments.
Block comments are often used for formal documentation.

Using Comments to Prevent Execution


Using comments to prevent execution of code is suitable for code testing.
Adding // in front of a code line changes the code lines from an executable line to a comment.
This example uses // to prevent execution of one of the code lines:
Example
//document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";
This example uses a comment block to prevent execution of multiple lines:
Example
/*
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";
*/
JS Variables
4 Ways to Declare a JavaScript Variable:
 Using var
 Using let
 Using const
 Using nothing
What are Variables?
Variables are containers for storing data (storing data values).
In this example, x, y, and z, are variables, declared with the var keyword:
Example
var x = 5;
var y = 6;
var z = x + y;
In this example, x, y, and z, are variables, declared with the let keyword:
Example
let x = 5;
let y = 6;
let z = x + y;
In this example, x, y, and z, are undeclared variables:
Example
x = 5;
y = 6;
z = x + y;
From all the examples above, you can guess:
 x stores the value 5
 y stores the value 6
 z stores the value 11

When to Use JavaScript var?


Always declare JavaScript variables with var,let, orconst.
The var keyword is used in all JavaScript code from 1995 to 2015.
The let and const keywords were added to JavaScript in 2015.
If you want your code to run in older browser, you must use var.

When to Use JavaScript const?


If you want a general rule: always declare variables with const.
If you think the value of the variable can change, use let.
In this example, price1, price2, and total, are variables:
Example
const price1 = 5;
const price2 = 6;
let total = price1 + price2;

The two variables price1 and price2 are declared with the const keyword.
These are constant values and cannot be changed.
The variable total is declared with the let keyword.
This is a value that can be changed.

Just Like Algebra


Just like in algebra, variables hold values:
let x = 5;
let y = 6;
Just like in algebra, variables are used in expressions:
let z = x + y;
From the example above, you can guess that the total is calculated to be 11.
Note
Variables are containers for storing values.
JavaScript Identifiers
All JavaScript variables must be identified with unique names.
These unique names are called identifiers.
Identifiers can be short names (like x and y) or more descriptive names (age, sum, totalVolume).
The general rules for constructing names for variables (unique identifiers) are:
 Names can contain letters, digits, underscores, and dollar signs.
 Names must begin with a letter
 Names can also begin with $ and _ (but we will not use it in this tutorial)
 Names are case sensitive (y and Y are different variables)
 Reserved words (like JavaScript keywords) cannot be used as names
Note
JavaScript identifiers are case-sensitive.

The Assignment Operator


In JavaScript, the equal sign (=) is an "assignment" operator, not an "equal to" operator.
This is different from algebra. The following does not make sense in algebra:
x=x+5
In JavaScript, however, it makes perfect sense: it assigns the value of x + 5 to x.
(It calculates the value of x + 5 and puts the result into x. The value of x is incremented by 5.)
Note
The "equal to" operator is written like == in JavaScript.

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 a number in quotes, it will be treated as a text string.
Example
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';

Declaring a JavaScript Variable


Creating a variable in JavaScript is called "declaring" a variable.
You declare a JavaScript variable with the var or the let keyword:
var carName;
or:
let carName;
After the declaration, the variable has no value (technically it is undefined).
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:
let 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":
Example
<p id="demo"></p>

<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
Note
It's a good programming practice to declare all variables at the beginning of a script.

One Statement, Many Variables


You can declare many variables in one statement.
Start the statement with let and separate the variables by comma:
Example
let person = "John Doe", carName = "Volvo", price = 200;
A declaration can span multiple lines:
Example
let person = "John Doe",
carName = "Volvo",
price = 200;

Value = undefined
In computer programs, variables are often declared without a value. The value can be something that has to be
calculated, or something that will be provided later, like user input.
A variable declared without a value will have the value undefined.
The variable carName will have the value undefined after the execution of this statement:
Example
let carName;

Re-Declaring JavaScript Variables


If you re-declare a JavaScript variable declared with var, it will not lose its value.
The variable carName will still have the value "Volvo" after the execution of these statements:
Example
var carName = "Volvo";
var carName;
Note
You cannot re-declare a variable declared with let or const.
This will not work:
let carName = "Volvo";
let carName;

JavaScript Arithmetic
As with algebra, you can do arithmetic with JavaScript variables, using operators like = and +:
Example
let x = 5 + 2 + 3;
You can also add strings, but strings will be concatenated:
Example
let x = "John" + " " + "Doe";
Also try this:
Example
let x = "5" + 2 + 3;

Note
If you put a number in quotes, the rest of the numbers will be treated as strings, and concatenated.
Now try this:
Example
let x = 2 + 3 + "5";

JavaScript Dollar Sign $


Since JavaScript treats a dollar sign as a letter, identifiers containing $ are valid variable names:
Example
let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;

Using the dollar sign is not very common in JavaScript, but professional programmers often use it as an alias for
the main function in a JavaScript library.
In the JavaScript library jQuery, for instance, the main function $ is used to select HTML elements. In
jQuery $("p"); means "select all p elements".

JavaScript Underscore (_)


Since JavaScript treats underscore as a letter, identifiers containing _ are valid variable names:
Example
let _lastName = "Johnson";
let _x = 2;
let _100 = 5;

Using the underscore is not very common in JavaScript, but a convention among professional programmers is to
use it as an alias for "private (hidden)" variables.
Question 1.
Create a variable called carName, assign the value Volvo to it.

var =" ";


Answer
carName Volvo
var =" ";
Question 2.
Create a variable called x, assign the value 50 to it.

var =
Answer
X 50
var =
Question 3.
Display the sum of 5 + 10, using two variables: x and y.
var = ;
var y = 10;
document.getElementById("demo").innerHTML = x y;
Answer
X 5
var = ;
var y = 10;
+
document.getElementById("demo").innerHTML = x y;
Question 4.
Create a variable called z, assign x + y to it, and display the result in an alert box.

var x = 5;
var y = 10;
= x + y;
(z);
Answer
var x = 5;
var y = 10;
Var Z
= x + y;
alert
(z);
Question 5.
On one single line, declare three variables with the following names and values:
firstName = "John"
lastName = "Doe"
age = 35

var = "John" lastName = = ;


Answer
firstName , age 35
var = "John" lastName = = ;
JS Operators
Example
Assign values to variables and add them together:
let x = 5; // assign the value 5 to x
let y = 2; // assign the value 2 to y
let z = x + y; // assign the value 7 to z (5 + 2)
The assignment operator (=) assigns a value to a variable.
Assignment
let x = 10;
The addition operator (+) adds numbers:
Adding
let x = 5;
let y = 2;
let z = x + y;
The multiplication operator (*) multiplies numbers.
Multiplying
let x = 5;
let y = 2;
let z = x * y;
JavaScript Arithmetic Operators
Arithmetic operators are used to perform arithmetic on numbers:
Operator Description

+ Addition

- Subtraction

* Multiplication

** Exponentiation (ES2016)

/ Division

% Modulus (Division Remainder)

++ Increment

-- Decrement

JavaScript Assignment Operators


Assignment operators assign values to JavaScript variables.
Operator Example Same As

= x=y x=y

+= x += y x=x+y

-= x -= y x=x-y

*= x *= y x=x*y

/= x /= y x=x/y

%= x %= y x=x%y

**= x **= y x = x ** y
The addition assignment operator (+=) adds a value to a variable.
Assignment
let x = 10;
x += 5;
JavaScript String Operators
The + operator can also be used to add (concatenate) strings.
Example
let text1 = "John";
let text2 = "Doe";
let text3 = text1 + " " + text2;
The result of text3 will be:
John Doe
The += assignment operator can also be used to add (concatenate) strings:
Example
let text1 = "What a very ";
text1 += "nice day";
The result of text1 will be:
What a very nice day
When used on strings, the + operator is called the concatenation operator.

Adding Strings and Numbers


Adding two numbers, will return the sum, but adding a number and a string will return a string:
Example
let x = 5 + 5;
let y = "5" + 5;
let z = "Hello" + 5;

The result of x, y, and z will be:


10
55
Hello5
If you add a number and a string, the result will be a string!

JavaScript Comparison Operators


Operator Description

== equal to

=== equal value and equal type

!= not equal

!== not equal value or not equal type

> greater than

< less than

>= greater than or equal to

<= less than or equal to

? ternary operator

JavaScript Logical Operators


Operator Description

&& logical and

|| logical or

! logical not

JavaScript Type Operators


Operator Description

typeof Returns the type of a variable

instanceof Returns true if an object is an instance of an object type


JavaScript Bitwise Operators
Bit operators work on 32 bits numbers.
Any numeric operand in the operation is converted into a 32 bit number. The result is converted back to a
JavaScript number.
Operator Description Example Same as Result Dec

& AND 5&1 0101 & 0001 0001 1

| OR 5|1 0101 | 0001 0101 5

~ NOT ~5 ~0101 1010 10

^ XOR 5^1 0101 ^ 0001 0100 4

<< left shift 5 << 1 0101 << 1 1010 10

>> right shift 5 >> 1 0101 >> 1 0010 2

>>> unsigned right shift 5 >>> 1 0101 >>> 1 0010 2


The examples above uses 4 bits unsigned examples. But JavaScript uses 32-bit signed numbers.
Because of this, in JavaScript, ~ 5 will not return 10. It will return -6.
~00000000000000000000000000000101 will return 11111111111111111111111111111010

Question 1.
Multiply 10 with 5, and alert the result:

alert(10 5);
Answer
*
alert(10 5);
Question 2.
Divide 10 by 2, and alert the result:

alert(10 2);
Answer
/
alert(10 2);
Question 3.
Alert the remainder when 15 is divided by 9.

alert(15 9);
Answer
%
alert(15 9);
Question 4.
Use the correct assignment operator that will result in x being 15 (same as x = x + y).

x = 10;
y = 5;
x y;
Answer
x = 10;
y = 5;
+=
x y;
Question 5.
Use the correct assignment operator that will result in x being 50 (same as x = x * y).

x = 10;
y = 5;
x y;
Answer
x = 10;
y = 5;
*=
x y;
JS Arithmetic
JavaScript Arithmetic Operators
Arithmetic operators perform arithmetic on numbers (literals or variables).
Operator Description

+ Addition

- Subtraction

* Multiplication

** Exponentiation (ES2016)

/ Division

% Modulus (Remainder)

++ Increment

-- Decrement

Arithmetic Operations
A typical arithmetic operation operates on two numbers.
The two numbers can be literals:
Example
let x = 100 + 50;
or variables:
Example
let x = a + b;
or expressions:
Example
let x = (100 + 50) * a;

Operators and Operands


The numbers (in an arithmetic operation) are called operands.
The operation (to be performed between the two operands) is defined by an operator.
Operand Operator Operand

100 + 50
Adding
The addition operator (+) adds numbers:
Example
let x = 5;
let y = 2;
let z = x + y;

Subtracting
The subtraction operator (-) subtracts numbers.
Example
let x = 5;
let y = 2;
let z = x - y;

Multiplying
The multiplication operator (*) multiplies numbers.
Example
let x = 5;
let y = 2;
let z = x * y;

Dividing
The division operator (/) divides numbers.
Example
let x = 5;
let y = 2;
let z = x / y;

Remainder
The modulus operator (%) returns the division remainder.
Example
let x = 5;
let y = 2;
let z = x % y;
In arithmetic, the division of two integers produces a quotient and a remainder.
In mathematics, the result of a modulo operation is the remainder of an arithmetic division.

Incrementing
The increment operator (++) increments numbers.
Example
let x = 5;
x++;
let z = x;

Decrementing
The decrement operator (--) decrements numbers.
Example
let x = 5;
x--;
let z = x;

Exponentiation
The exponentiation operator (**) raises the first operand to the power of the second operand.
Example
let x = 5;
let z = x ** 2; // result is 25
x ** y produces the same result as Math.pow(x,y):
Example
let x = 5;
let z = Math.pow(x,2); // result is 25

Operator Precedence
Operator precedence describes the order in which operations are performed in an arithmetic expression.
Example
let x = 100 + 50 * 3;
Is the result of example above the same as 150 * 3, or is it the same as 100 + 150?
Is the addition or the multiplication done first?
As in traditional school mathematics, the multiplication is done first.
Multiplication (*) and division (/) have higher precedence than addition (+) and subtraction (-).
And (as in school mathematics) the precedence can be changed by using parentheses:
Example
let x = (100 + 50) * 3;
When using parentheses, the operations inside the parentheses are computed first.
When many operations have the same precedence (like addition and subtraction), they are computed from left to
right:
Example
let x = 100 + 50 - 3;

JavaScript Operator Precedence Values


Pale red entries indicates ECMAScript 2015 (ES6) or higher.
Value Operator Description Example

21 () Expression grouping (3 + 4)

20 . Member person.name

20 [] Member person["name"]

20 () Function call myFunction()

20 new Create new Date()

18 ++ Postfix Increment i++

18 -- Postfix Decrement i--

17 ++ Prefix Increment ++i

17 -- Prefix Decrement --i


17 ! Logical not !(x==y)

17 typeof Type typeof x

16 ** Exponentiation (ES2016) 10 ** 2

15 * Multiplication 10 * 5

15 / Division 10 / 5

15 % Division Remainder 10 % 5

14 + Addition 10 + 5

14 - Subtraction 10 - 5

13 << Shift left x << 2

13 >> Shift right x >> 2

13 >>> Shift right (unsigned) x >>> 2

12 < Less than x<y

12 <= Less than or equal x <= y

12 > Greater than x>y

12 >= Greater than or equal x >= y

12 in Property in Object "PI" in Math

12 instanceof Instance of Object instanceof Array

11 == Equal x == y

11 === Strict equal x === y

11 != Unequal x != y

11 !== Strict unequal x !== y


10 & Bitwise AND x&y

9 ^ Bitwise XOR x^y

8 | Bitwise OR x|y

7 && Logical AND x && y

6 || Logical OR x || y

5 ?? Nullish Coalescing x ?? y

4 ?: Condition ? "Yes" : "No"

3 += Assignment x += y

3 /= Assignment x /= y

3 -= Assignment x -= y

3 *= Assignment x *= y

3 %= Assignment x %= y

3 <<= Assignment x <<= y

3 >>= Assignment x >>= y

3 >>>= Assignment x >>>= y

3 &= Assignment x &= y

3 ^= Assignment x ^= y

3 |= Assignment x |= y

2 yield Pause Function yield x

1 , Comma 5,6
Question 1.
Multiply 10 with 5, and alert the result:

alert(10 5);
Answer
*
alert(10 5);
Question 2.
Divide 10 by 2, and alert the result:

alert(10 2);
Answer
/
alert(10 2);
Question 3.
Alert the remainder when 15 is divided by 9.

alert(15 9);
Answer
%
alert(15 9);
Question 4.
Use the correct assignment operator that will result in x being 15 (same as x = x + y).

x = 10;
y = 5;
x y;
Answer
x = 10;
y = 5;
+=
x y;
Question 5.
Use the correct assignment operator that will result in x being 50 (same as x = x * y).

x = 10;
y = 5;
x y;
Answer
x = 10;
y = 5;
*=
x y;
JS Assignments
JavaScript Assignment Operators
Assignment operators assign values to JavaScript variables.
Operator Example Same As

= x=y x=y

+= x += y x=x+y

-= x -= y x=x-y

*= x *= y x=x*y

/= x /= y x=x/y

%= x %= y x=x%y

<<= x <<= y x = x << y

>>= x >>= y x = x >> y

>>>= x >>>= y x = x >>> y


&= x &= y x=x&y

^= x ^= y x=x^y

|= x |= y x=x|y

**= x **= y x = x ** y
The **= operator is a part of ECMAScript 2016.

Assignment Examples
The = assignment operator assigns a value to a variable.
Assignment
let x = 10;
The += assignment operator adds a value to a variable.
Assignment
let x = 10;
x += 5;
The -= assignment operator subtracts a value from a variable.
Assignment
let x = 10;
x -= 5;
The *= assignment operator multiplies a variable.
Assignment
let x = 10;
x *= 5;
The /= assignment divides a variable.
Assignment
let x = 10;
x /= 5;
The %= assignment operator assigns a remainder to a variable.
Assignment
let x = 10;
x %= 5;
Question 1.
Multiply 10 with 5, and alert the result:

alert(10 5);
Answer
*
alert(10 5);
Question 2.
Divide 10 by 2, and alert the result:

alert(10 2);
Answer
/
alert(10 2);
Question 3.
Alert the remainder when 15 is divided by 9.

alert(15 9);
Answer
%
alert(15 9);
Question 4.
Use the correct assignment operator that will result in x being 15 (same as x = x + y).

x = 10;
y = 5;
x y;
Answer
x = 10;
y = 5;
+=
x y;
Question 5.
Use the correct assignment operator that will result in x being 50 (same as x = x * y).

x = 10;
y = 5;
x y;
Answer
x = 10;
y = 5;
*=
x y;
JS Data types
JavaScript variables can hold different data types: numbers, strings, objects and more:
let length = 16; // Number
let lastName = "Johnson"; // String
let 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:
let x = 16 + "Volvo";
Does it make any sense to add "Volvo" to sixteen? Will it produce an error or will it produce a result?
JavaScript will treat the example above as:
let x = "16" + "Volvo";
When adding a number and a string, JavaScript will treat the number as a string.
Example
let x = 16 + "Volvo";
Example
let x = "Volvo" + 16;
JavaScript evaluates expressions from left to right. Different sequences can produce different results:
JavaScript:
let x = 16 + 4 + "Volvo";
Result:
20Volvo
JavaScript:
let x = "Volvo" + 16 + 4;
Result:
Volvo164
In the first example, JavaScript treats 16 and 4 as numbers, until it reaches "Volvo".
In the second example, since the first operand is a string, all operands are treated as strings.
JavaScript Types are Dynamic
JavaScript has dynamic types. This means that the same variable can be used to hold different data types:
Example
let x; // Now x is undefined
x = 5; // Now x is a Number
x = "John"; // Now x is a String

JavaScript Strings
A string (or a text string) is a series of characters like "John Doe".
Strings are written with quotes. You can use single or double quotes:
Example
let carName1 = "Volvo XC60"; // Using double quotes
let carName2 = 'Volvo XC60'; // Using single quotes
You can use quotes inside a string, as long as they don't match the quotes surrounding the string:
Example
let answer1 = "It's alright"; // Single quote inside double quotes
let answer2 = "He is called 'Johnny'"; // Single quotes inside double quotes
let answer3 = 'He is called "Johnny"'; // Double quotes inside single quotes
You will learn more about strings later in this tutorial.

JavaScript Numbers
JavaScript has only one type of numbers.
Numbers can be written with, or without decimals:
Example
let x1 = 34.00; // Written with decimals
let x2 = 34; // Written without decimals
Extra large or extra small numbers can be written with scientific (exponential) notation:
Example
let y = 123e5; // 12300000
let z = 123e-5; // 0.00123
You will learn more about numbers later in this tutorial.

JavaScript Booleans
Booleans can only have two values: true or false.
Example
let x = 5;
let y = 5;
let z = 6;
(x == y) // Returns true
(x == z) // Returns false
Booleans are often used in conditional testing.
You will learn more about conditional testing later in this tutorial.

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):
Example
const cars = ["Saab", "Volvo", "BMW"];
Array indexes are zero-based, which means the first item is [0], second is [1], and so on.
You will learn more about arrays later in this tutorial.

JavaScript Objects
JavaScript objects are written with curly braces {}.
Object properties are written as name:value pairs, separated by commas.
Example
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

The object (person) in the example above has 4 properties: firstName, lastName, age, and eyeColor.
You will learn more about objects later in this tutorial.

The typeof Operator


You can use the JavaScript typeof operator to find the type of a JavaScript variable.
The typeof operator returns the type of a variable or an expression:
Example
typeof "" // Returns "string"
typeof "John" // Returns "string"
typeof "John Doe" // Returns "string"
Example
typeof 0 // Returns "number"
typeof 314 // Returns "number"
typeof 3.14 // Returns "number"
typeof (3) // Returns "number"
typeof (3 + 4) // Returns "number"
You will learn more about typeof later in this tutorial.

Undefined
In JavaScript, a variable without a value, has the value undefined. The type is also undefined.
Example
let car; // Value is undefined, type is undefined
Any variable can be emptied, by setting the value to undefined. The type will also be undefined.
Example
car = undefined; // Value is undefined, type is undefined

Empty Values
An empty value has nothing to do with undefined.
An empty string has both a legal value and a type.
Example
let car = ""; // The value is "", the typeof is "string"
Question 1.
Use comments to describe the correct data type of the following variables:

let length = 16; //


let lastName = "Johnson"; //
const x = {
firstName: "John",
lastName: "Doe"
}; //
Answer
Number
let length = 16; //
String
let lastName = "Johnson"; //
const x = {
firstName: "John",
lastName: "Doe"
Object
}; //

JS 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).
Example
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: {}
function name(parameter1, parameter2, parameter3) {
// code to be executed}
Function parameters are listed inside the parentheses () in the function definition.
Function arguments are the values received by the function when it is invoked.
Inside the function, the arguments (the parameters) behave as local variables.
A Function is much the same as a Procedure or a Subroutine, in other programming languages.

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":
Example
Calculate the product of two numbers, and return the result:
let 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
}

The result in x will be:


12

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.
Example
Convert Fahrenheit to Celsius:
function toCelsius(fahrenheit) { return (5/9) * (fahrenheit-32);}
document.getElementById("demo").innerHTML = toCelsius(77);
The () Operator Invokes the Function
Using the example above, toCelsius refers to the function object, and toCelsius() refers to the function result.
Accessing a function without () will return the function object instead of the function result.
Example
function toCelsius(fahrenheit) {return (5/9) * (fahrenheit-32);}
document.getElementById("demo").innerHTML = toCelsius;

Functions Used as Variable Values


Functions can be used the same way as you use variables, in all types of formulas, assignments, and calculations.
Example
Instead of using a variable to store the return value of a function:
let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";
You can use the function directly, as a variable value:
let text = "The temperature is " + toCelsius(77) + " Celsius";
You will learn a lot more about functions later in this tutorial.

Local Variables
Variables declared within a JavaScript function, become LOCAL to the function.
Local variables can only be accessed from within the function.
Example
// code here can NOT use carName

function myFunction() { let carName = "Volvo"; // code here CAN use carName}
// code here can NOT use carName
Since local variables are only recognized inside their functions, variables with the same name can be used in
different functions.
Local variables are created when a function starts, and deleted when the function is completed.
Question 1.
Execute the function named myFunction.
function myFunction() {
alert("Hello World!");
}
;
Answer
function myFunction() {
alert("Hello World!");
}
myFunction()
;
Question 2.
Create a function called "myFunction".

alert("Hello World!");

Answer
function myFunction() {

alert("Hello World!");
}

Question 3.
Make the function return "Hello".
function myFunction() {
" ";
}
document.getElementById("demo").innerHTML = myFunction();
Answer
function myFunction() {
return Hello
" ";
}
document.getElementById("demo").innerHTML = myFunction();
Question 4.
Make the function display "Hello" in the inner HTML of an element with the ID "demo".
function myFunction() {
document. ("demo"). = "Hello";
}
Answer
function myFunction() {
getElementByI innerHTML
document. ("demo"). = "Hello";
}
JS Exercises

Exercises
We have gathered a variety of JavaScript exercises (with answers) for each JavaScript Chapter.
Try to solve an exercise by editing some code, or show the answer to see what you've done wrong.
Count Your Score
You will get 1 point for each correct answer. Your score and total score will always be displayed.
Question 1.
Create a variable called carName, assign the value Volvo to it.

var =" ";


Answer
carName Volvo
var =" ";
Question 2.
Create a variable called x, assign the value 50 to it.
var =
Answer
Create a variable called x, assign the value 50 to it.
X 50
var =
Question 3.
Display the sum of 5 + 10, using two variables: x and y.
var = ;
var y = 10;
document.getElementById("demo").innerHTML = x y;
Answer
X 5
var = ;
var y = 10;
+
document.getElementById("demo").innerHTML = x y;
Question 4.
Create a variable called z, assign x + y to it, and display the result in an alert box.
var x = 5;
var y = 10;
= x + y;
(z);A
Answer
var x = 5;
var y = 10;
Var Z
= x + y;
Alert
(z);
Question 5.
On one single line, declare three variables with the following names and values:
First Name = "John"
last Name = "Doe"
age = 35
var = "John" last Name = = ;
Answer
firstName , age 35
var = "John" last Name = = ;

You might also like