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

Unit 4 Java Script 3

JavaScript Basics provides an overview of JavaScript including: - JavaScript is the programming language of HTML and the web that makes web pages dynamic. - It discusses JavaScript variables, conditional statements like if/else, loops like for/while, and arrays. - Arrays in JavaScript can hold multiple values and common array methods are described like push(), pop(), slice(), and splice().

Uploaded by

kall
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
15 views

Unit 4 Java Script 3

JavaScript Basics provides an overview of JavaScript including: - JavaScript is the programming language of HTML and the web that makes web pages dynamic. - It discusses JavaScript variables, conditional statements like if/else, loops like for/while, and arrays. - Arrays in JavaScript can hold multiple values and common array methods are described like push(), pop(), slice(), and splice().

Uploaded by

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

JavaScript Basics

JavaScrip
t
• For JavaScript, you should know the basic language i.e., HTML and CSS.
• JavaScript is the programming language of HTML and the web. It makes
web page dynamic. It is interpretated programming language with object
oriented capabilities.
INPAGE JS
External JS

test.js
Basic Structure

• Document.write() function is used to display the data on the webpage.


Linking more than one javascript file.
Variable
Rules for defining the variables-
Declaring variable
Declaring variable
• Valid variable Declaration Invalid Declaration
Direct variable initialisation
Good Practice is to write the var datatype for each variable
Multiple initialisation of a variable.
JavaScript Constant

• The const keyword was introduced in ES6 (2015)


• Variables defined with const cannot be Redeclared
• Variables defined with const cannot be Reassigned
Conditional Statements
There are three forms of if statement in JavaScript.

1.If Statement
2.If else statement
3.if else if statement

JavaScript If statement

It evaluates the content only if expression is true. The signature of JavaScript if statement is given below.
JavaScript If...else Statement

It evaluates the content whether condition is true of false. The syntax of JavaScript if-else statement is given
below.

<script>
var a=20;
if(a%2==0){
document.write("a is even number");
}
else
{
document.write("a is odd number");
}
</script>
JavaScript If...else if statement

It evaluates the content only if expression is true from several expressions. The signature of JavaScript if else if
statement is given below.
<script>
var a=20;
if(a==10){
document.write("a is equal to 10");
}
else if(a==15){
document.write("a is equal to 15");
}
else if(a==20){
document.write("a is equal to 20");
}
else{
document.write("a is not equal to 10, 15 or 20");
}
</script>
JavaScript Loops

The JavaScript loops are used to iterate the piece of code using for, while, do while or for-
in loops. It makes the code compact. It is mostly used in array.
There are four types of loops in JavaScript.

1.for loop
2.while loop
3.do-while loop
4.for-in loop
LOOPS in JAVASCRIPT
JavaScript while loop

The JavaScript while loop iterates the elements for the infinite number of times. It should be used if
number of iteration is not known. The syntax of while loop is given below.

<script>
var i=11;
while (i<=15)
{
document.write(i + "<br/>");
i++;
}
</script>
JavaScript do while loop

The JavaScript do while loop iterates the elements for the infinite number of times like while loop. But, code
is executed at least once whether condition is true or false. The syntax of do while loop is given below.

<script>
var i=21;
do
{
document.write(i + "<br/>");
i++;
}
while (i<=25);
</script>
JavaScript For loop

The JavaScript for loop iterates the elements for the fixed number of times. It should
be used if number of iteration is known. The syntax of for loop is given below.

<script>
for (i=1; i<=5; i++)
{
document.write(i + "<br/>")
}
</script>
ARRAYS in JAVASCRIPT
JavaScript Arrays

An array is a special variable, which can hold more than one value:
<html>
<body>
<h1>JavaScript Arrays</h1>

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

<script>
const cars = [ "Saab", "Volvo", "BMW"];
document.write(cars);
</script>

</body>
</html>
<html>
<body>
<h1>JavaScript Arrays</h1>

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

<script>
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
document.write(cars[0]);
</script>

</body>
</html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The toString() Method</h2>

<p>The toString() method returns an array as a comma separated


string:</p>

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

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write (fruits);
</script>

</body>
</html>
Array Properties
The following table lists the standard properties of the Array object.

The length property is always one more than the highest array index.
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>

<p>The length property returns the length of an array:</p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
document.write(size);
</script>

</body>
</html>
JavaScript Array Methods

Array length Array join()


Array toString() Array delete()
Array pop() Array concat()
Array push() Array flat()
Array shift() Array splice()
Array unshift() Array slice()
JavaScript Array toString()

The JavaScript method toString() converts an array to a string of (comma separated)


array values.

<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The toString() Method</h2>

<p>The toString() method returns an array as a comma separated string:</p>

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

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>

</body>
</html>
Join()
The join() method also joins all array elements into a string.
It behaves just like toString(), but in addition you can specify the separator:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The join() Method</h2>

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

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>

</body>
</html>
JavaScript Array pop()

The pop() method removes the last element from an array:

<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The pop() Method</h2>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>
JavaScript Array push()

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

<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>
JavaScript Array shift()

The shift() method removes the first array element and "shifts" all other elements to a lower index.
ARRAYS METHODS

The slice() method returns selected elements in an array, as a new array.


The splice() method is used to add or remove elements of an existing array and the return value will be
the removed items from the array.

You might also like