Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
21 views

Java Script

Uploaded by

deysoham16
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

Java Script

Uploaded by

deysoham16
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

JavaScript Tutorial

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
JavaScript accepts both double and single quotes:

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

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:

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";

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 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>

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>

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=" 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>

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:

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. This 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>
JavaScript Statements
Example
let x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4

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.
Our Reserved Words Reference lists all JavaScript keywords.
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.
JavaScript Syntax
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 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
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.
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):
FirstName, LastName, MasterCard, InterCity.
Lower Camel Case:
JavaScript programmers tend to use camel case that starts with a lowercase letter:
firstName, lastName, masterCard, interCity.
JavaScript Variables
Variables are Containers for Storing Data
JavaScript Variables can be declared in 4 ways:
 Automatically
 Using var
 Using let
 Using const
In this first example, x, y, and z are undeclared variables.
They are automatically declared when first used:
Example
x = 5;
y = 6;
z = x + y;
Note
The var keyword was used in all JavaScript code from 1995 to 2015.
The let and const keywords were added to JavaScript in 2015.
The var keyword should only be used in code written for older browsers.
Example using let
let x = 5;
let y = 6;
let z = x + y;
When to Use var, let, or const?
1. Always declare variables
2. Always use const if the value should not be changed
3. Always use const if the type should not be changed (Arrays and Objects)
4. Only use let if you can't use const
5. Only use var if you MUST support old browsers.

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;

JavaScript Operators
Operator Description
+ Addition
- Subtraction
* Multiplication
** Exponentiation
/ Division
Modulus (Division
%
Remainder)
++ Increment
-- Decrement

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
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 String Addition


The + can also be used to add (concatenate) strings:
Example
let text1 = "John";
let text2 = "Doe";
let text3 = text1 + " " + text2;

JavaScript Logical Operators


Operator Description

&& logical and

|| logical or

! logical not

JavaScript Type Operators


Operator Description

typeof Returns the type of a variable

Returns true if an object is an instance of an object


instanceof
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 Decimal

& 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
>>> 5 >>> 1 0101 >>> 1 0010 2
shift

JavaScript Data Types


JavaScript has 8 Datatypes

String
Number
Bigint
Boolean
Undefined
Null
Symbol
Object

The Object Datatype


The object data type can contain both built-in objects, and user defined objects:
Built-in object types can be:
objects, arrays, dates, maps, sets, intarrays, floatarrays, promises, and more.

JavaScript Functions
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 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:

// 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;
}

Why Functions?

With functions you can reuse code

You can write code that can be used many times.

You can use the same code with different arguments, to produce different results.

The () Operator

The () operator invokes (calls) the function:


Example

Convert Fahrenheit to Celsius:

function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}

let value = toCelsius(77);

JavaScript Strings
Strings are for storing text

Strings are written with quotes

Using Quotes

A JavaScript string is zero or more characters written inside quotes.

Example
let text = "John Doe";

Quotes Inside 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";
let answer2 = "He is called 'Johnny'";
let answer3 = 'He is called "Johnny"';

Template Strings

Templates were introduced with ES6 (JavaScript 2016).

Templates are strings enclosed in backticks (`This is a template string`).

Templates allow single and double quotes inside a string:

Example
let text = `He's often called "Johnny"`;
String Length

To find the length of a string, use the built-in length property:

Example
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = text.length;
Escape Characters
Because strings must be written within quotes, JavaScript will misunderstand this
string:
let text = "We are the so-called "Vikings" from the north.";
The string will be chopped to "We are the so-called ".
To solve this problem, you can use an backslash escape character.

The backslash escape character (\) turns special characters into string characters:

Code Result Description

\' ' Single quote

\" " Double quote

\\ \ Backslash

Examples
\" inserts a double quote in a string:
let text = "We are the so-called \"Vikings\" from the north.";
Six other escape sequences are valid in JavaScript:

Code Result
\b Backspace
\f Form Feed
\n New Line
\r Carriage Return

\t Horizontal Tabulator

\v Vertical Tabulator
Do not create Strings objects.
The new keyword complicates the code and slows down execution speed.
String objects can produce unexpected results:
When using the == operator, x and y are equal:
let x = "John";
let y = new String("John");
When using the === operator, x and y are not equal:
let x = "John";
let y = new String("John");
Note the difference between (x==y) and (x===y).
(x == y) true or false?
let x = new String("John");
let y = new String("John");
(x === y) true or false?
let x = new String("John");
let y = new String("John");
Comparing two JavaScript objects always returns false.
Basic String Methods
Javascript strings are primitive and immutable: All string methods produces a new
string without altering the original string.
String toUpperCase()
String length String toLowerCase()
String charAt() String concat()
String charCodeAt() String trim()
String at() String trimStart()
String [ ] String trimEnd()
String slice() String padStart()
String substring() String padEnd()
String substr() String repeat()
String Search Methods String replace()
String Templates String replaceAll()
String split()

JavaScript if, else, and else if


Conditional Statements
Very often when you write code, you want to perform different actions for different
decisions.

You can use conditional statements in your code to do this.

In JavaScript we have the following conditional statements:

 Use if to specify a block of code to be executed, if a specified condition is true


 Use else to specify a block of code to be executed, if the same condition is
false
 Use else if to specify a new condition to test, if the first condition is false
 Use switch to specify many alternative blocks of code to be executed
 The switch statement is described in the next chapter.
The if Statement
 Use the if statement to specify a block of JavaScript code to be executed if a
condition is true.

Syntax
 if (condition) {
// block of code to be executed if the condition is true
}

The else Statement


Use the else statement to specify a block of code to be executed if the condition is
false.

if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}

Example
If the hour is less than 18, create a "Good day" greeting, otherwise "Good evening":

if (hour < 18) {


greeting = "Good day";
} else {
greeting = "Good evening";
}

The else if Statement


Use the else if statement to specify a new condition if the first condition is false.

Syntax
if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}
JavaScript Switch Statement
The switch statement is used to perform different actions based on different
conditions.

The JavaScript Switch Statement

Use the switch statement to select one of many code blocks to be executed.

Syntax
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}

Example

The getDay() method returns the weekday as a number between 0 and 6.

(Sunday=0, Monday=1, Tuesday=2 ..)

This example uses the weekday number to calculate the weekday name:

switch (new Date().getDay()) {


case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}

The result of day will be:

Thursday

The break Keyword

When JavaScript reaches a break keyword, it breaks out of the switch block.

This will stop the execution inside the switch block.

It is not necessary to break the last case in a switch block. The block breaks (ends)
there anyway.

Note: If you omit the break statement, the next case will be executed even if the
evaluation does not match the case.

The default Keyword

The default keyword specifies the code to run if there is no case match:

Example

The getDay() method returns the weekday as a number between 0 and 6.

If today is neither Saturday (6) nor Sunday (0), write a default message:

switch (new Date().getDay()) {


case 6:
text = "Today is Saturday";
break;
case 0:
text = "Today is Sunday";
break;
default:
text = "Looking forward to the Weekend";
}

The result of text will be:

Looking forward to the Weekend

The default case does not have to be the last case in a switch block:

Example
switch (new Date().getDay()) {
default:
text = "Looking forward to the Weekend";
break;
case 6:
text = "Today is Saturday";
break;
case 0:
text = "Today is Sunday";
}

Different Kinds of Loops

JavaScript supports different kinds of loops:

 for - loops through a block of code a number of times


 for/in - loops through the properties of an object
 for/of - loops through the values of an iterable object
 while - loops through a block of code while a specified condition is true
 do/while - also loops through a block of code while a specified condition is
true

The For Loop

The for statement creates a loop with 3 optional expressions:

for (expression 1; expression 2; expression 3) {


// code block to be executed
}

Expression 1 is executed (one time) before the execution of the code block.

Expression 2 defines the condition for executing the code block.


Expression 3 is executed (every time) after the code block has been executed.

Example
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}

JavaScript While Loop


Loops can execute a block of code as long as a specified condition is true.

The While Loop

The while loop loops through a block of code as long as a specified condition is true.

Syntax
while (condition) {
// code block to be executed
}

Example

In the following example, the code in the loop will run, over and over again, as long
as a variable (i) is less than 10:

Example
while (i < 10) {
text += "The number is " + i;
i++;
}

The Do While Loop

The do while loop is a variant of the while loop. This loop will execute the code block
once, before checking if the condition is true, then it will repeat the loop as long as
the condition is true.

Syntax
do {
// code block to be executed
}
while (condition);
Example

The example below uses a do while loop. The loop will always be executed at least
once, even if the condition is false, because the code block is executed before the
condition is tested:

Example
do {
text += "The number is " + i;
i++;
}while (i < 10);

JavaScript Popup Boxes


JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box.
Alert Box
An alert box is often used if you want to make sure information comes through to the
user.
When an alert box pops up, the user will have to click "OK" to proceed.
Syntax
window.alert("sometext");
The window.alert() method can be written without the window prefix.
Example
alert("I am an alert box!");

Confirm Box
A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to
proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box
returns false.

Syntax
window.confirm("sometext");
The window.confirm() method can be written without the window prefix.
Example
if (confirm("Press a button!")) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}

Prompt Box
A prompt box is often used if you want the user to input a value before entering a
page.
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to
proceed after entering an input value.
If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the
box returns null.

Syntax
window.prompt("sometext","defaultText");
The window.prompt() method can be written without the window prefix.

Example
let person = prompt("Please enter your name", "Harry Potter");
let text;
if (person == null || person == "") {
text = "User cancelled the prompt.";
} else {
text = "Hello " + person + "! How are you today?";
}

Line Breaks
To display line breaks inside a popup box, use a back-slash followed by the character
n.

Example
alert("Hello\nHow are you?");
Example 1:
<html>
<head>
<title> javascript validtion </title>
<script>
function myFunction() {
var x,test;
x=t1.value;
if (isNaN(x) || x < 1 || x > 10)
text = "Input not valid";
else
text = "Input OK";
document.getElementById("demo").innerHTML = text;
}
</script>
</head>
<body>
<h2>JavaScript Validation</h2>
Please input a number between 1 and 10:
<input type="text" id="t1" name="t1" size=10>
<button type="button" onclick="myFunction()">Click Me</button>
<p id="demo"></p>
</body>
</html>
Example 2:
<html>
<head>
<title> javascript validtion(username and passwrd) </title>
<script>
function myFunction() {
var x,y,test;
x=t1.value;
y=t2.value;
if (x==null || x==""){
alert("Name can't be blank");
return false;
}else if(y.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
</head>
<body>
<h2>JavaScript Validation</h2>
User Name:<input type="text" id="t1" name="t1" size=10><br>
Passward: <input type="password" id="t2" name="t2" size=10><br>
<button type="button" onclick="myFunction()">Click Me</button>
</body>
</html>
Example 3:
<html>
<head>
<title> javascript validtion </title>
<script>
function myFunction() {
var x,y;
x=t1.value;
y=t2.value;
if(x==y)
{
alert("password same");
return True;
}
else
{
alert("password not same");
return false;
}
}
</script>
</head>
<body>
<h2>JavaScript Validation</h2>
Passward: <input type="password" id="t1" name="t1" size=10><br>
Re-type Passward: <input type="password" id="t2" name="t2" size=10><br>
<button type="button" onclick="myFunction()">Click Me</button>
</body>
</html>
Example 4:
<html>

<head>

<title> javascript validtion </title>

<script>

function myFunction() {

var x;

x=t1.value;

var atposition=x.indexOf("@");

var dotposition=x.lastIndexOf(".");

if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){

alert("Please enter a valid e-mail address ");

return false;

</script>

</head>

<body>

<h2>JavaScript Validation</h2>

Email: <input type="text" id="t1" name="t1" size=10><br>

<button type="button" onclick="myFunction()">Click Me</button>

</body>

</html>

You might also like