JavaScript:
JavaScript Can Change HTML Content
One of many JavaScript HTML methods is getElementById().
Example 1:-
<!DOCTYPE html>
<html>
<body>
<p id="demo">JavaScript</p>
<button type="button" = "Hello JavaScript!"'>Click
Me!</button>
</body>
</html>
JavaScript accepts both double and single quotes:
Example 2:-
[Link]('demo').innerHTML = 'Hello JavaScript';
JavaScript Can Change HTML Styles (CSS):-
Example 1:-
<!DOCTYPE html>
<html>
<body>
<p id="demo">JavaScript </p>
<button type="button" Me!</button>
</body>
</html>
JavaScript Can Hide HTML Elements:-
Example 1:
<!DOCTYPE html>
<html>
<body>
<p id="demo">JavaScript</p>
<button type="button" Me!</button>
</body>
</html>
JavaScript Can Show HTML Elements:-
Example 1:
<!DOCTYPE html>
<html>
<body>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" Me!</button>
</body>
</html>
The <script> Tag:
In HTML, JavaScript code is inserted between <script> and </script> tags.
Example 1:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>
JavaScript in <head>:
Example 1:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
[Link]("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>
JavaScript in <body>:-
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph.</p>
<button type="button" it</button>
<script>
function myFunction() {
[Link]("demo").innerHTML = "Paragraph changed.";
</script>
</body>
</html>
External JavaScript:-
External file: [Link]
Js file:
function myFunction() {
[Link]("demo").innerHTML = "Paragraph changed.";
html file:
<!DOCTYPE html>
<html>
<body>
<p id="demo">A Paragraph.</p>
<button type="button" it</button>
<p>This example links to "[Link]".</p>
<p>(myFunction is stored in "[Link]")</p>
<script src="[Link]"></script>
</body>
</html>
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="[Link]"></script>
<script src="[Link]"></script>
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 [Link]().
Writing into an alert box, using [Link]().
Writing into the browser console, using [Link]().
[Link] innerHTML:-
Example1:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
Using [Link]():-
For testing purposes, it is convenient to use [Link]():
Example 1:
<!DOCTYPE html>
<html>
<body>
<script>
[Link](5 + 6);
</script>
</body>
</html>
Using [Link]() after an HTML document is loaded, will delete all existing HTML:
Example1:
<!DOCTYPE html>
<html>
<body>
<button type="button" + 6)">Try it</button>
</body>
</html>
[Link] [Link]():
Example1:
<!DOCTYPE html>
<html>
<body>
<script>
[Link](5 + 6);
</script>
</body>
</html>
In JavaScript, the window object is the global scope object. This means that variables, properties, and methods by
default belong to the window object. This also means that specifying the window keyword is optional:
ExAMPLE2:
<!DOCTYPE html>
<html>
<body>
<script>
alert(5 + 6);
</script>
</body>
</html>
[Link] [Link]():
Example1:
<!DOCTYPE html>
<html>
<body>
<script>
[Link](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 [Link]() method in the browser to print the content of the current
window.
Example1:-
<!DOCTYPE html>
<html>
<body>
<h2>The [Link]() Method</h2>
<p>Click the button to print the current page.</p>
<button this page</button>
</body>
</html>
JavaScript Statements:
JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
JavaScript 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:
Example1 :
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Number can be written with or without decimals.</p>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = 10;
</script>
</body>
</html>
2. Strings are text, written within double or single quotes:
Example 1:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Strings can be written with double or single quotes.</p>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = "John Doe";
</script>
</body>
</html>
JavaScript Variables:-
In a programming language, variables are used to store data values.
JavaScript uses the keywords var, let and const to declare variables.
Example1:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>In this example, x is defined as a variable.
Then, x is assigned the value of 6:</p>
<p id="demo"></p>
<script>
let x;
x = 6;
[Link]("demo").innerHTML = x;
</script>
</body>
</html>
4 Ways to Declare a JavaScript Variable:
Using var
Using let
Using const
Using nothing
Example1:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
[Link]("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
Cannot be Redeclared:
Variables defined with let can not be redeclared.
With let you can not do this:
let x = "John Doe";
let x = 0;
With var you can:
var x = "John Doe";
var x = 0;
Block Scope:-
let x = 2;
// x can NOT be used here
Variables declared with the var keyword can NOT have block scope.
Variables declared inside a { } block can be accessed from outside the block.
Example
var x = 2;
// x CAN be used here
Redeclaring Variables:-
Redeclaring a variable using the var keyword can impose problems.
Redeclaring a variable inside a block will also redeclare the variable outside the block:
Example:-
var x = 10;
// Here x is 10
var x = 2;
// Here x is 2
// Here x is 2
Redeclaring a variable using the let keyword can solve this problem.
Redeclaring a variable inside a block will not redeclare the variable outside the block:
Example:-
let x = 10;
// Here x is 10
let x = 2;
// Here x is 2
// Here x is 10
JavaScript Const:-
Variables defined with const cannot be Redeclared.
Variables defined with const cannot be Reassigned.
Variables defined with const have Block Scope.
Cannot be Reassigned
A const variable cannot be reassigned:
Example:-
const PI = 3.141592653589793;
PI = 3.14; // This will give an error
PI = PI + 10; // This will also give an error
Must be Assigned
JavaScript const variables must be assigned a value when they are declared:
Correct
const PI = 3.14159265359;
Incorrect
const PI;
PI = 3.14159265359;
When to use JavaScript const?
Always declare a variable with const when you know that the value should not be changed.
Use const when you declare:
A new Array
A new Object
A new Function
Constant Objects and Arrays
The keyword const is a little misleading.
It does not define a constant value. It defines a constant reference to a value.
Because of this you can NOT:
Reassign a constant value
Reassign a constant array
Reassign a constant object
But you CAN:
Change the elements of constant array
Change the properties of constant object
Constant Arrays
You can change the elements of a constant array:
Example
// You can create a constant array:
const cars = ["Saab", "Volvo", "BMW"];
// You can change an element:
cars[0] = "Toyota";
// You can add an element:
[Link]("Audi");
But you can NOT reassign the array:
Example
const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"]; // ERROR
Constant Objects
You can change the properties of a constant object:
Example
// You can create a const object:
const car = {type:"Fiat", model:"500", color:"white"};
// You can change a property:
[Link] = "red";
// You can add a property:
[Link] = "Johnson";
But you can NOT reassign the object:
Example
const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"}; // ERROR
JavaScript Operators:-
JavaScript Assignment
The Assignment Operator (=) assigns a value to a variable:
// Assign the value 5 to x
let x = 5;
// Assign the value 2 to y
let y = 2;
// Assign the value x + y to z:
let z = x + y;
JavaScript Addition
The Addition Operator (+) adds numbers:
let x = 5;
let y = 2;
let z = x + y;
JavaScript Multiplication
The Multiplication Operator (*) multiplies numbers:
Multiplying
let x = 5;
let y = 2;
let z = x * y;
Types of JavaScript Operators:
There are different types of JavaScript operators:
Arithmetic Operators
Assignment Operators
Comparison Operators
String Operators
Logical Operators
Bitwise Operators
Ternary Operators
Type Operators
JavaScript Arithmetic Operators:-
Operator Description
+ Addition
- Subtraction
* Multiplication
** Exponentiation (ES2016)
/ Division
% Modulus (Division Remainder)
++ Increment
-- Decrement
JavaScript Assignment Operators:-
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
JavaScript Comparison Operators:-
== 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 String Comparison:-
Example1:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let text1 = "A";
let text2 = "B";
let result = text1 < text2;
[Link]("demo").innerHTML =result;
</script>
</body>
</html>
JavaScript String Addition:-
Example1:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let text1 = "John";
let text2 = "Doe";
let text3 = text1 + " " + text2;
[Link]("demo").innerHTML = text3;
</script>
</body>
</html>
JavaScript Logical Operators:-
&& logical and
|| logical or
! logical not
Example1:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let x = 6;
let y = 3;
[Link]("demo").innerHTML =
(x < 10 && y > 1) + "<br>" +
(x < 10 && y < 1);
</script>
</body>
</html>
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
Conditional (Ternary) Operator:-
variablename = (condition) ? value1:value2
Example1:
<!DOCTYPE html>
<html>
<body>
<input id="age" value="18" />
<button it</button>
<p id="demo"></p>
<script>
function myFunction() {
let age = [Link]("age").value;
let voteable = (age < 18) ? "Too young":"Old enough";
[Link]("demo").innerHTML = voteable + " to vote.";
</script>
</body>
</html>
JavaScript Data Types:-
JavaScript has 8 Datatypes
1. String
2. Number
3. Bigint
4. Boolean
5. Undefined
6. Null
7. Symbol
8. Object
The Object Datatype
The object data type can contain:
1. An object
2. An array
3. A date
// Numbers:
let length = 16;
let weight = 7.5;
// Strings:
let color = "Yellow";
let lastName = "Johnson";
// Booleans
let x = true;
let y = false;
// Object:
const person = {firstName:"John", lastName:"Doe"};
// Array object:
const cars = ["Saab", "Volvo", "BMW"];
// Date object:
const date = new Date("2022-03-25");
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).
Example1:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
return p1 * p2;
let result = myFunction(4, 3);
[Link]("demo").innerHTML = result;
</script>
</body>
</html>
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.
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:
// Function is called, the return value will end up in x
let x = myFunction(4, 3);
function myFunction(a, b) {
// Function returns the product of a and b
return a * b;
