Scribd
Upload
4 views51 pages

SIA JavaScript

JavaScript is a widely-used programming language essential for web development, enabling dynamic behavior on web pages. It includes concepts such as identifiers, comments, variables, functions, and event handling, allowing developers to create interactive applications. The document provides syntax examples and explanations for various JavaScript functionalities, including displaying data, using built-in and user-defined functions, and handling events.

Uploaded by

janvigajera17
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
4 views51 pages

SIA JavaScript

JavaScript is a widely-used programming language essential for web development, enabling dynamic behavior on web pages. It includes concepts such as identifiers, comments, variables, functions, and event handling, allowing developers to create interactive applications. The document provides syntax examples and explanations for various JavaScript functionalities, including displaying data, using built-in and user-defined functions, and handling events.

Uploaded by

janvigajera17
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/ 51

JavaScript Introduction:

- JavaScript is the world's most popular programming language.


- JavaScript was initially created to “make web pages alive”.
- The programs in this language are called scripts. They can be written right in
a web page’s HTML and run automatically as the page loads.
- JavaScript is very different from another language called Java.

Why Study JavaScript?


- JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages

JavaScript 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 _.
● Names are case sensitive (y and Y are different variables).
● Reserved words (like JavaScript keywords) cannot be used as names.

JavaScript Comments:
- JavaScript comments can be used to explain JavaScript code, and to make it
more readable.
● 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).

● Multi-line Comments:
- Multi-line comments start with /* and end with */.
- Any text between /* and */ will be ignored by JavaScript.

JavaScript Where To:


- In HTML, JavaScript code is inserted between <script> and </script> tags.
- 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 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().
● Writing into an alert box, using alert().

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.

Syntax:
document.getElementById("id").innerHTML;

Example 1:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
document.getElementById("demo").innerHTML = “Hello Skywin”;
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Example 2:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
document.getElementById("demo").innerHTML = 5 + 6;
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Using document.write():
- For testing purposes, it is convenient to use document.write().

Syntax:
document.write()

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
document.write(5 + 6);
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Using window.alert():
- It displays the content using an alert box.

Syntax:
window.alert()

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
window.alert(5 + 6);
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Using console.log():
- It is used for debugging purposes.

Syntax:
console.log();
Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
console.log(5 + 6);
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Using alert():
- 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:
alert("sometext");

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
alert(“Hello”);
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

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

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
if (confirm("Are you Sure Delete this Item?")) {
document.write("Delete Item");
}
else {
document.write("No Delete");
}
}
</script>
</head>

<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

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

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var a,b;
a=prompt("Enter Value for A :",0);
b=prompt("Enter Value for B :",0);
alert("Sum = ",+(parseInt(a)+parseInt(b)));
}
</script>
</head>

<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

JavaScript Variables:
- Variables are containers for storing data (storing data values).
- An equal sign is used to assign values to variables.
- JavaScript Variables Types:
● Local variable:
- A JavaScript local variable is declared inside block or function.
- It is accessible within the function or block only.
Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function local1() {
var data=200; //local variable
document.getElementById("demo").innerHTML =data;
}
function local2() {
var data=200; //local variable
document.getElementById("test").innerHTML =data;
}
</script>
</head>
<body>
<p id="demo"></p>
<p id="test"></p>
<button type="button" onclick="local1();">local1</button>
<button type="button" onclick="local2();">local2</button>
</body>
</html>

● Global variable:
- A JavaScript global variable is accessible from any function.
- A variable declared outside the function is known as global
variable.

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var data=200; //global variable
function global1() {
document.getElementById("demo").innerHTML =data;
}
function global2() {
document.getElementById("test").innerHTML =data;
}
</script>
</head>
<body>
<p id="demo"></p>
<p id="test"></p>
<button type="button" onclick="global1();">global1</button>
<button type="button" onclick="global2();">global2</button>
</body>
</html>

- We can declare variables in JavaScript in three ways:


● JavaScript var keyword:
- Users can declare the two variables with the same name using
the var keyword.
- Also, the user can reassign the value into the var variable.

Syntax:
var variable_name = value;

Example:
var demo = “Hello Skywin”;
var demo = “Hiii Skywin”;

● JavaScript let keyword:


- Users can not declare the two variables with the same name
using the let keyword.
- Also, the user can reassign the value into the let variable.

Syntax:
let variable_name = value;

Example:
let demo = “Hello Skywin”;
let demo = “Hiii Skywin”; // Throw Error
demo = “Hiii Skywin”; // No Error

● JavaScript const keyword:


- Users can not declare the two variables with the same name
using the const keyword.
- Also, the user can not reassign the value into the const
variable.

Syntax:
const const_name = value;

Example:
const demo = "Hello Skywin";
const demo = "Hiii Skywin"; // Throw Error
demo = "Hiii Skywin"; // Throw Error

JavaScript Functions:
- A function is a set of statements that take inputs, do some specific
computation, and produce output.
- The idea is to put some commonly or repeatedly done tasks together and
make a function so that instead of writing the same code again and again
for different inputs, we can call that function.
- Advantage of JavaScript function:
- There are mainly two advantages of JavaScript functions.
● Code reusability: We can call a function several times so it
saves coding.
● Less coding: It makes our program compact. We don’t need to
write many lines of code each time to perform a common task.
- Types of Functions:
- There are two types of functions in JavaScript like other programming
languages such as c, c++, and java etc.
● Built-in Function (Library Functions)
● User Defined Functions

1. Built-in Function (Library Functions):


- Functions that are provided by JavaScript itself as part of the scripting
language, are known as built-in functions.
- JavaScript provides a rich set of the library that has a lot of built-in
functions.
- For Example: alert(), prompt(), parseInt(), etc.

2. User Defined Functions:


- JavaScript allows us to define our own functions as per our
requirement.
- Types of User Defined Functions:
● No argument and No Return value
● With argument and No Return value
● With argument and With Return value

1. No argument and No Return value:


- Default function in JavaScript that does not have arguments.

Syntax:
function name() {
// code to be executed
}

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
alert(“Hello”);
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

2. With argument and No Return value:


- We can call functions by passing arguments.
Syntax:
function name(parameter1, parameter2, parameter3, …) {
// code to be executed
}

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(num) {
alert(num*num);
}
</script>
</head>
<body>
<button type="button" onclick="test(10);">Click Here</button>
</body>
</html>

3. With argument and With Return value:


- We can call a function that returns a value and use it in our
program.

Syntax:
function name(parameter1, parameter2, parameter3, …) {
return code…
}

Example 1:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(num1, num2) {
return alert(num1*num2);
}
</script>
</head>
<body>
<button type="button" onclick="test(10,20);">Click Here</button>
</body>
</html>

Example 2:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(num) {
return num*num;
}
</script>
</head>
<body>
<script type="text/javascript">
var ans = test(10);
document.write(ans);
</script>
</body>
</html>

JavaScript Events:
- HTML events are "things" that happen to HTML elements.
- When JavaScript is used in HTML pages, JavaScript can "react" on these
events.
- Here are some examples of HTML events:
● An HTML web page has finished loading
● An HTML input field was changed
● An HTML button was clicked
- Often, when events happen, you may want to do something.
- JavaScript lets you execute code when events are detected.
- HTML allows event handler attributes, with JavaScript code, to be added to
HTML elements.

Syntax:
<HTML-element Event-Type = "Action to be performed">

onclick():
- When mouse click on an element.
- This is a mouse event and provokes any logic defined if the user clicks
on the element it is bound to.

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
document.getElementById("demo").innerHTML = “Hello
Skywin”;
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

ondblclick():
- The ondblclick event occurs when the user double-clicks on an HTML
element.

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
document.getElementById("demo").innerHTML = “Hello
Skywin”;
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" ondblclick="test();">Click Here</button>
</body>
</html>

onfocus():
- The onfocus event occurs when an element gets focus.
- The onfocus event is often used on input fields.

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var a =
document.getElementById("demo").style.backgroundColor =
"yellow";
}
</script>
</head>
<body>
<input type="text" id="demo" onfocus="test();">
</body>
</html>

onload():
- The onload event occurs when an object has been loaded.
Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
document.getElementById("demo").innerHTML = "Hello
Skywin";
}
</script>
</head>
<body onload="test();">
<p id="demo"></p>
</body>
</html>

onchange():
- The onchange event occurs when the value of an HTML element is
changed.

Example 1:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var a = document.getElementById("demo").value;
alert("Changed Value = " + a);
}
</script>
</head>
<body>
<input type="text" id="demo" onchange="test();" value="Hello">
</body>
</html>

Example 2:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var a = document.getElementById("myselect").value;
document.getElementById("demo").innerHTML = "You
selected: " + a;
}
</script>
</head>
<body>
<select onchange="test()" id="myselect">
<option value="Course">Graphic Designing</option>
<option value="Course">Wed Designing</option>
<option value="Course">Web Developing</option>
<option value="Course">Digital Marketing</option>
</select>
<p id="demo"></p>
</body>
</html>

onsubmit():
- The onsubmit event occurs when a form is submitted.

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
alert("Form was submitted”);
}
</script>
</head>
<body>
<form onsubmit="test()">
<input type="text" name="username">
<input type="submit">
</form>

</body>
</html>

onreset():
- The onreset event occurs when a form is reset.

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
alert("Form was reset”);
}
</script>
</head>
<body>
<form onreset="test()">
<input type="text" name="username">
<input type="reset">
</form>

</body>
</html>

JavaScript String Function:


- JavaScript strings are for storing and manipulating text.
- A JavaScript string is zero or more characters written inside quotes.

String Length:
- The length property returns the length of a string

Syntax:
string.length
Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
var str1 = “Hello Skywin”;
document.write(str1.length);
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click
Here</button>
</body>
</html>
Output:

String toLowerCase():
- Javascript String toLowerCase() method converts the entire string to
lowercase.
- This method does not affect any of the special characters, digits, and
the alphabet that is already in lowercase.
Syntax:
string.toLowerCase()

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
var str1 = “Hello Skywin”;
document.write("Normal Text:"+str1);
document.write("LowerCase Text:"+
str1.toLowerCase());
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>
Output:

String toUpperCase():
- JavaScript String toUpperCase() method converts the entire string to
Uppercase.
- This method does not affect any of the special characters, digits, and
the alphabets that are already in the upper case.

Syntax:
string.toUpperCase()

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
var str1 = “Hello Skywin”;
document.write(str1.toUpperCase());
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>
Output:

String link():
- This method creates an HTML hypertext link that requests another
URL.
- The link() method returns a string embedded in an <a> tag

Syntax:
string.link(“href name”)

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
var str1 = “Hello Skywin”;
document.write(str1.link("https://www.sky
winitacademy.com/"));
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Output:

String concat():
- The concat() method joins two or more strings.
- The concat() method does not change the existing strings.
- The concat() method returns a new string.

Syntax:
first_string.concat(second_string)

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
var str1 = “Hello Skywin”;
var str2 = “IT Academy”;
document.write(str1.concat(str2));
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

String replace():
- The replace() method searches a string for a value or a regular
expression.
- The replace() method returns a new string with the value(s) replaced.
- The replace() method does not change the original string.

Syntax:
string.replace(“search value”, “new value”)

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
var str1 = “Hello Skywin”;
document.write(str1.replace(“Hello”, “Hiii”));
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

String charAt():
- The charAt() method returns the character at a specified index
(position) in a string.
- The index of the first character is 0, the second 1, ...

Syntax:
string.charAt(index)

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
var str1 = “Hello Skywin”;
document.write(str1.charAt(6));
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

String indexOf():
- The indexOf() method returns the position of the first occurrence of a
value in a string.
- The indexOf() method returns -1 if the value is not found.
- The indexOf() method is case sensitive.

Syntax:
string.indexOf(“search value”)

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
var str1 = “Hello Skywin”;
document.write(str1.indexOf(“k”));
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

String lastIndexOf():
- The lastIndexOf() method returns the index (position) of the last
occurrence of a specified value in a string.
- The lastIndexOf() method searches the string from the end to the
beginning.
- The lastIndexOf() method returns the index from the beginning
(position 0).
- The lastIndexOf() method returns -1 if the value is not found.
- The lastIndexOf() method is case sensitive.

Syntax:
string.lastIndexOf(“search value”)
Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
var str1 = “Hello Skywin Hello”;
document.write(str1.lastIndexOf(“H”));
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

String match():
- The match() method returns an array with the matches.
- The match() method returns null if no match is found.

Syntax:
string.match(“search value”)

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var str1 = “Hello Skywin”;
var mystr = str1 .match("Hello");
if(mystr != null) {
document.write("Match String");
}
else {
document.write("No Match String");
}
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

String search():
- The search() method returns the index (position) of the first match.
- The search() method returns -1 if no match is found.
- The search() method is case sensitive.
Syntax:
string.search(“search value”)

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
var str1 = “Hello Skywin”;
var mystr = str1.search(“Skywin”);
if(mystr != -1) {
document.write("Found");
}
else {
document.write("No Found");
}
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>
String slice():
- The slice() method extracts a part of a string.
- The slice() method returns the extracted part in a new string.
- The slice() method does not change the original string.
- The start and end parameters specify the part of the string to extract.
- The first position is 0, the second is 1, …
- A negative number selects from the end of the string.

Syntax:
string.slice(start index, end index)

Example 1:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
var str1 = “Hello Skywin”;
document.write(str1.slice(2, 7));
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Example 2:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
var str1 = “Hello Skywin”;
document.write(str1.slice(4));
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

String substring():
- The substring() method extracts characters, between two positions,
from a string, and returns the substring.
- The substring() method extracts characters from start to end.
- The substring() method does not change the original string.
- If start is greater than end, arguments are swapped: (5, 1) = (1, 5).
- Start or end values less than 0, are treated as 0.

Syntax:
string.substring(start index, end index)

Example 1:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
var str1 = “Hello Skywin”;
document.write(str1.substring(1, 5));
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Example 2:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
var str1 = “Hello Skywin”;
document.write(str1.substring(2));
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

String substr():
- The substr() method extracts a part of a string.
- The substr() method begins at a specified position, and returns a
specified number of characters.
- The substr() method does not change the original string.
- To extract characters from the end of the string, use a negative start
position.

Syntax:
string.substr(start index, length)

Example 1:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
var str1 = “Hello Skywin”;
document.write(str1.substr(2, 4));
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Example 2:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
var str1 = “Hello Skywin”;
document.write(str1.substr(3));
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>
JavaScript Array:
- An array is a special variable, which can hold more than one value.
- An array can hold many values under a single name, and you can access the
values by referring to an index number.

Syntax:
var array_name = [item1, item2, ...];

Access the Full Array:


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var sia = ["Hello", "Skywin", "IT", "Academy"];
document.getElementById("demo").innerHTML = sia;
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Accessing Array Elements:


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var sia = ["Hello", "Skywin", "IT", "Academy"];
document.getElementById("demo").innerHTML = sia[1];
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Changing an Array Element:


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var sia= ["Hello", "Skywin", "IT", "Academy"];
sia[0] = "Hiii";
document.getElementById("demo").innerHTML = sia;
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

JavaScript Array Function:


Array length:
- The length property returns the length (size) of an array.

Syntax:
array_name.length;

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var sia = ["Hello", "Skywin", "IT", "Academy"];
document.getElementById("demo").innerHTML = sia.length;
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

concat():
- The JavaScript method concat() joins two or more strings. It does not
change the existing strings.

Syntax:
array_name1.concat(array_name2);

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var sia1 = ["Hello", "Skywin", "IT", "Academy"];
var sia2 = ["In", "Surat"];
document.getElementById("demo").innerHTML =
sia1.concat(sia2);
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

join():
- It joins the elements of an array as a string.

Syntax:
array_name.join(separator);

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var sia = ["Hello", "Skywin", "IT", "Academy"];
document.getElementById("demo").innerHTML = sia.join("
and ");
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

push():
- The push() method adds a new element to an array (at the end).

Syntax:
array_name.push(“value”);

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var sia = ["Hello", "Skywin", "IT", "Academy"];
sia.push("In Surat");
document.getElementById("demo").innerHTML = sia;
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

reverse():
- The reverse() method reverses the order of the elements in an array.
- The reverse() method overwrites the original array.

Syntax:
array_name.reverse();

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var sia = ["Hello", "Skywin", "IT", "Academy"];
sia.reverse();
document.getElementById("demo").innerHTML = sia;
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

sort():
- The sort() sorts the elements of an array.
- The sort() overwrites the original array.
- The sort() sorts the elements as strings in alphabetical and ascending
order.

Syntax:
Ascending order: array_name.sort();
Descending order: array_name.sort().reverse();

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var sia = ["Hello", "Skywin", "IT", "Academy"];
sia.sort();
document.getElementById("demo").innerHTML = sia;
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

JavaScript Math Function:


- The JavaScript Math is a built-in object that provides properties and
methods for mathematical constants and functions to execute
mathematical operations.
- The Math functions consist of methods and properties.

Math.abs():
- It returns the absolute (positive) value of the given number.

Syntax:
Math.abs(value)

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
document.write(Math.abs(-5));
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Output:
5

Math.ceil():
- It returns the largest integer for the given number.

Syntax:
Math.ceil(fractional number)

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
document.write(Math.ceil(2.3));
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Output:
3

Math.floor():
- It returns the lowest integer for the given number.

Syntax:
Math.floor(value)

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
document.write(Math.floor(2.3));
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Output:
2

Math.pow():
- It returns the value of x to the power of y.

Syntax:
Math.pow(base number(x), exponent number(y))

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
document.write(Math.pow(2, 3));
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Output:
8

Math.random():
- It returns a random number between 0 (inclusive), and 1 (exclusive).
Syntax:
Math.random()

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
document.write(Math.random());
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Output:
0.10215778389795593

Math.max():
- The max() method is used to display the highest value of the given
arguments.

Syntax:
Math.max(val1, val2………valn)

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
document.write(Math.max(2, 3, 8, 1, 0, 7));
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Output:
8

Math.min():
- The min() method is used to display the lowest value of the given
arguments.

Syntax:
Math.min(val1, val2………valn)

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
document.write(Math.min(2, 3, 8, 1, 0, 7));
}
</script>
</head>
<body>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Output:
0

JavaScript Date Methods:


- The JavaScript date object can be used to get year, month and day. You can
display a timer on the webpage by the help of JavaScript date object.
- You can use different Date constructors to create a date object. It provides
methods to get and set day, month, year, hour, minute and seconds.

Get Date Methods:


Date():
- Date() returns a date object with the current date and time.

Syntax:
Date();

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var a = new Date();
document.getElementById("demo").innerHTML = a;
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Output:
Thu Aug 24 2023 12:29:23 GMT+0530 (India Standard Time)

getDate():
- The getDate() method returns the day of a date as a number (1-31).

Syntax:
getDate();

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var a = new Date();
var b = a.getDate();
document.getElementById("demo").innerHTML = b;
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Output:
25

getFullYear():
- The getFullYear() method returns the year of a date as a four digit
number.

Syntax:
getFullYear();

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var a = new Date();
var year= a.getFullYear();
document.getElementById("demo").innerHTML = year;
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Output:
2023

getMonth():
- The getMonth() method returns the month of a date as a number
(0-11).
- In JavaScript, January is month number 0, February is number 1, ...
- Finally, December is month number 11.

Syntax:
getMonth();

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var a = new Date();
var month = a.getMonth();
document.getElementById("demo").innerHTML =
month;
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Output:
7

getHours():
- The getHours() method returns the hours of a date as a number
(0-23).

Syntax:
getHours();

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var a = new Date();
var hrs= a.getHours();
document.getElementById("demo").innerHTML = hrs;
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Output:
13

getMinutes():
- The getMinutes() method returns the minutes of a date as a number
(0-59).

Syntax:
getMinutes();

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var a = new Date();
var min= a.getMinutes();
document.getElementById("demo").innerHTML = min;
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Output:
10

getSeconds():
- The getSeconds() method returns the seconds of a date as a number
(0-59).

Syntax:
getSeconds();

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var a = new Date();
var sec= a.getSeconds();
document.getElementById("demo").innerHTML = sec;
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Output:
25

getMilliseconds():
- The getMilliseconds() method returns the milliseconds of a date as a
number (0-999).

Syntax:
getMilliseconds();

Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var a = new Date();
var msec= a.getMilliseconds();
document.getElementById("demo").innerHTML = msec;
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Output:
288

toLocaleDateString() (25/10/2023):
- The date.toLocaleDateString() method converts a date to a string.

Syntax:
toLocaleDateString(locales, options);

Parameters: This method accepts two parameters as mentioned


above and described below:

● locales: This parameter is an array of locale strings that contain


one or more language or locale tags. Note that it is an optional
parameter. If you want to use the specific format of the
language in your application then specify that language in the
locales argument.
● Options: It is also an optional parameter and contains
properties that specify comparison options. Some properties
are localeMatcher, timeZone, weekday, year, month, day, hour,
minute, second, etc.

Return values: It returns a date as a string value in a specific format


that is specified by the locale.

Example 1:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var a = new Date();
var options = {weekday: "long",
year: "numeric",
month: "short",
day: "numeric"
};
var formattedDate =
a.toLocaleDateString("en-US", options);
document.getElementById("demo").innerHTML =
formattedDate;
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Output:
Thursday, Nov 2, 2023

Example 2:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var a = new Date();
var options = { weekday: "short",
year: "numeric",
month: "long",
day: "numeric"
};
var formattedDate =
a.toLocaleDateString(undefined, options);
document.getElementById("demo").innerHTML =
formattedDate;
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="test();">Click Here</button>
</body>
</html>

Output:
Thu, 2 November, 2023

JavaScript Methods:

Methods Description

parseInt() The parseInt method parses a value as a string and


returns the integer.

toString() It provides a string representing the particular object.

location.reload() The reload() method reloads the current document.

window.setInterval() The setInterval() method calls a function at specified


intervals (in milliseconds).

LocalStorage:
- LocalStorage is a data storage type of web storage.
- The localStorage object allows you to save key/value pairs in the browser.
- The localStorage object stores data with no expiration date.
- The data is not deleted when the browser is closed, and is available for
future sessions.

Syntax:
window.localStorage

Or

localStorage

Save Data to Local Storage:


- This method is used to add the data through key and value to
localStorage.

Syntax:
localStorage.setItem(key, value);

Example:
localStorage.setItem("city", "Surat");

Read Data from Local Storage:


- It is used to fetch or retrieve the value from the storage using
the key.

Syntax:
var variable_name = localStorage.getItem(key);

Example:
var ct = localStorage.getItem("city");

Remove Data from Local Storage:


- It removes an item from storage by using the key.

Syntax:
localStorage.removeItem(key);

Example:
localStorage.removeItem("city");

Remove All (Clear Local Storage):


- It is used to clear all the storage.

Syntax:
localStorage.clear();

Example:
localStorage.clear()
Parameters:

Parameter Description

key Required. The name of a key.

value Required. The value of the key.

You might also like