Scribd
Upload
146 views23 pages

Principles of Web Development: Javascript and HTML

The document provides information about principles of web development with JavaScript and HTML. It contains 2 sections - Section A discusses concepts of JavaScript like data types, conditional and looping statements with examples. Section B provides programs to perform arithmetic operations, find odd-even numbers, and larger of two numbers using JavaScript. It also differentiates for, while, and do-while loops.

Uploaded by

Kashis Singh
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
146 views23 pages

Principles of Web Development: Javascript and HTML

The document provides information about principles of web development with JavaScript and HTML. It contains 2 sections - Section A discusses concepts of JavaScript like data types, conditional and looping statements with examples. Section B provides programs to perform arithmetic operations, find odd-even numbers, and larger of two numbers using JavaScript. It also differentiates for, while, and do-while loops.

Uploaded by

Kashis Singh
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/ 23

PRINCIPLES OF WEB DEVELOPMENT

Document on

JAVASCRIPT and HTML

DOCUMENTED BY:-

AMAN RAJ (BFT/17/2152)

1|Page
CONTENTS

S NO. TOPIC

1. Section A 5-15

1.1 Introduction To Javascript 5-6

1. 2 Difference Between Javascript 7


And HTML

1.3 Data Types In Javascript 8-10

1.4 Conditional And Looping 11-16


Statements In Javascript With
Examples
2. Section B 17-22

2.1 Write A Program In Javascript To 17-18


Perform The Following Arithmetic
Operations Add, Subtract,
Multiply, Divide

2.2 Write A Program In Javascript To 19-20


Find Odd And Even
2.3 20-21
Write A Program In Javascript To
Find The Larger Of Two Numbers
2.4 Differentiate Between With 21-22
Suitable Examples, For Loop,
While Loop, Do While Loop

2|Page
CERTIFICATE

This is to certify that Aman Raj, student of Semester-V, Bachelor of Fashion


Technology, NIFT Patna, has worked under my guidance and supervision. This
Assignment has the requisite standard and to the best of my knowledge, no part
of it has been reproduced from any other project, monograph, report or book.

Mr. Neeraj Kumar


Department of fashion technology
Nift Patna

3|Page
ACKNOWLEDGEMENT

We would like to express our gratitude to the department Of Fashion Technology,


NIFT Patna for giving us the opportunity to make this project. Hearty, thanks to
our faculty Mr. Jayant Kumar for mentoring us throughout the project module
and also helping and guiding us in our research work.

4|Page
1. SECTION A
1.1WHAT IS JAVASCRIPT?

JavaScript is a programming language that can be included on web pages to make


them more interactive. You can use it to check or modify the contents of forms,
change images, open new windows and write dynamic page content. You can even
use it with CSS to make DHTML (Dynamic Hyper Text Markup Language). This
allows you to make parts of your web pages appear or disappear or move around
on the page.

JavaScript is a very powerful client-side scripting language. JavaScript is used


mainly for enhancing the interaction of a user with the webpage. JavaScript is also
being used widely in game development and Mobile application development.

 The basic part of a script is a variable, literal or object-

 A variable is a word that represents a piece of text, a number, a boolean true


or false value or an object.

 A literal is the actual number or piece of text or boolean value that the
variable represents.

5|Page
 An object is a collection of variables held together by a parent variable, or a
document component.
 The next most important part of a script is an operator. Operators assign
literal values to variables or say what type of tests to perform.
 The next most important part of a script is a control structure. Control
structures say what scripts should be run if a test is satisfied.

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>

Output

-My First JavaScript


Click me to display Date and Time

Wed Oct 23 2019 08:27:30 GMT+0530 (India Standard Time)

6|Page
1.2.Difference Between JavaScript and HTML

Both JavaScript and HTML are high-level programming languages used in


conjunction with each other to create web pages.

S No. JavaScript HTML


1. JavaScript is a scripting .HTML has different types of elements
language to make the static to represent different forms of data to
HTML content as dynamic. be displayed on web pages

2 JavaScript provides dynamic HTML requires CSS to format and


functionality by integrating into display the data properly in a structured
HTML code. format

3. It can’t be embedded inside It can be embedded inside HTML.


JavaScript.
4. It requires JS engine to run the It requires any web browser to display
code the static content.
5. It supports content in few It is supported by all browsers.
browsers depending on the
functionalities.
6. JavaScript has different inbuilt HTML has different types of tags such
functions to define and as Header tags, paragraph tags, line
manipulate the data in the form break tags, horizontal lines, content
of objects which is of prototypal centering etc.,
based inheritance in object-
oriented programming.
7. JavaScript provides the HTML just provides what the web page
functionality of how to display should display rather how
the data based on the user’s
requirement.
8. JavaScript controls the display HTML contains different types of data
of these data formats on a web types support such as title, header,
page based on the footer, content, audio, video, images
functionalities and requirements and anchor tags to display on a web
designed. page

7|Page
1.3. JavaScript Data Types
There are majorly two types of languages. First, one is Statically typed
language where each variable and expression type is already known at compile
time. Once a variable is declared to be of a certain data type, it cannot hold values
of other data types. .Example: C, C++, Java.
In JavaScript there are two different kinds of data: primitives, and objects. A primitive is simply a
data type that is not an object, and has no methods.

In JS, there are six primitive data types:

 Boolean

 Number

 String

 Null

 Undefined

 Symbol

Data types and its syntax

 Boolean
A boolean represents only one of two values: true, or false. Think of a boolean as
an on/off or a yes/no switch.
var boo1 = true;
var boo2 = false;

8|Page
 Number

There is only one type of Number in JavaScript. Numbers can be written with or
without a decimal point. A number can also be +Infinity, -Infinity, and NaN (not a
number).
var num1 = 32;
var num2 = +Infinity;

 String

Strings are used for storing text. Strings must be inside of either double or single
quotes. In JS, Strings are immutable (they cannot be changed).
var str1 = 'hello, it is me';
var str2 = "hello, it's me";

 Null

Null has one value: null. It is explicitly nothing.


var nothing = null;

 Undefined

A variable that has no value is undefined.


var testVar;
console.log(testVar); // undefined

 Symbol

Symbols are new in ES6. A Symbol is an immutable primitive value that


is unique. For the sake of brevity, that is the extent that this article will cover
Symbols.
const mySymbol = Symbol('mySymbol');

 Objects?
Objects are not a primitive data Type.

9|Page
An object is a collection of properties. These properties are stored in key/value
pairs. Properties can reference any type of data, including objects and/or primitive
values.

For example:
<script>
var person = {
name: "Peter",
age: 28,
gender: "Male",
displayName: function() {
alert(this.name);
}
};

document.write(person.name + "<br>"); // Prints: Peter


document.write(person.age + "<br>"); // Prints: 28
document.write(person.gender); // Prints: Male
console.log(person);
</script>
Result:
Peter
28
Male

10 | P a g e
1.4. JavaScript Looping

 Looping

Very often when you write code, you want the same block of code to run a number
of times. You can use looping statements in your code to do this.

In JavaScript we have the following looping statements:

 while - loops through a block of code while a condition is true


 do...while - loops through a block of code once, and then repeats the loop
while a condition is true
 for - run statements a specified number of times

1.For loop

The 'for' loop is the most compact form of looping. It includes the following three
important parts −
 The loop initialization where we initialize our counter to a starting value.
The initialization statement is executed before the loop begins.
 The test statement which will test if a given condition is true or not. If the
condition is true, then the code given inside the loop will be executed,
otherwise the control will come out of the loop.
 The iteration statement where you can increase or decrease your counter.

 Note-You can put all the three parts in a single line separated by
semicolons.

Syntax-
for (initialization; condition; iteration) {

statements; // Do stuff if for loop condition is true

Example-

11 | P a g e
for (i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
Output-
JavaScript For Loop

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4

1. 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++;
}

12 | P a g e
Output-

JavaScript While Loop

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9

2. do…while loop

Syntax:

do

block of code to be executed

} while (condition)

The do…while loop is very similar to while loop. The only difference is that in
do…while loop, the block of code gets executed once even before checking the
condition.

Example-

13 | P a g e
var text = "";
var i = 0;
do {
text += "The number is " + i;
i++;
}
while (i < 5);

Output-

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4

Different Types of Conditional Statements

Conditional statements are used to decide the flow of execution based on different
conditions. If a condition is true, you can perform one action and if the condition is
false, you can perform another action.

The if/else statement executes a block of code if a specified condition is true. If the
condition is false, another block of code can be executed.

The if/else statement is a part of JavaScript's "Conditional" Statements, which are


used to perform different actions based on different conditions.

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

14 | P a g e
Use else if to specify a new condition to test, if the first condition is false

Use switch to select one of many blocks of code to be executed

If statement

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
}

If…Else statement

Syntax:

if (condition)

lines of code to be executed if the condition is true

else

lines of code to be executed if the condition is false

15 | P a g e
we can use If….Else statement if we have to check two conditions and execute a
different set of codes.

If…Else If…Else statement

Syntax:

if (condition1)

lines of code to be executed if condition1 is true

else if(condition2)

lines of code to be executed if condition2 is true

else

lines of code to be executed if condition1 is false and condition2 is false

we can use If….Else If….Else statement if we want to check more than two
conditions.

16 | P a g e
2.Section B
2.1 Write a program in JavaScript to following arithmetic Operators.

<!doctype html>
<html>
<head>
<CENTER><BOLD> <h1><font color = "Black"> JAVASCRIPT
PROGRAM </font></h1> </BOLD></CENTER>
</BR></BR></BR></BR>
<script>
function add()
{
var a,b,c;
a=Number(document.getElementById("first").value);
b=Number(document.getElementById("second").value);
c=a+b;
document.getElementById("answer1").value=c;
}
function sub()
{
var a,b,c;
a=Number(document.getElementById("1st").value);
b=Number(document.getElementById("2nd").value);
c=a-b;
document.getElementById("answer2").value=c;
}
function multiply()
{
var a,b,c;
a=Number(document.getElementById("1").value);
b=Number(document.getElementById("2").value);
c=a*b;
document.getElementById("answer3").value=c;
}

17 | P a g e
function divide()
{
var a,b,c;
a=Number(document.getElementById("one").value);
b=Number(document.getElementById("two").value);
c=a/b;
document.getElementById("answer4").value=c;
}
</script>
</head>

<body>
<body bgcolor = "Salmon">
<font color = "#cc66ff"><bold> 1.ADD </br> </font>
Enter the first number: <input id="first">
Enter the second number: <input id="second">
<button onclick="add()"> Addition </button>
<input id="answer1">
<br> <br>
<font color = "Yellow"> 2.SUBTRACT </br> </font>
Enter the first number: <input id="1st">
Enter the second number: <input id="2nd">
<button onclick="sub()"> Subtraction </button>
<input id="answer2">
<br><br>
<font color = " Red"> 3.MULTIPLY </br> </font>
Enter the first number: <input id="1">
Enter the second number: <input id="2">
<button onclick="multiply()"> Product </button>
<input id="answer3">
<br><br>
<font color = " Violet"> 4.DIVIDE </br> </font>
Enter the first number: <input id="one">
Enter the second number: <input id="two">
<button onclick="divide()"> Division </button>
18 | P a g e
<input id="answer4">
<br></br></br><br>
</body>
</html>

2.2 WAP in JS to find odd and Even


<!doctype html>

<html>

<head>

<script>

function odd_even(){

var no;

no=Number(document.getElementById("no_input").value);

if(no%2==0)

alert("Even Number");

else

alert("Odd Number");

}
19 | P a g e
</script>

</head>

<body>

Enter Any Number:<input id="no_input"><br />

<button onclick="odd_even()">Click me</button>

</body>

</html>

OUTPUT-

Enter Any Number:

Click Me

2.3 WAP in JS to find the largest of two numbers


We will create a function to return the larger of two numbers when given numbers
as parameters to them. The basic logic behind this program is that we check if one
is greater than other, than simply return the first one otherwise, of course another
number will be greater.

function largest(a, b) {

if(a > b)

return a;

else if(a === b)

return 0;

20 | P a g e
else

return b;

var first = 10;

var second = 50;

console.log(largest(first, second));

Output
5

2.4 Differentiate between for loop, while loop, do..while loop giving
suitable examples-

S For loop While loop Do while loop


NO.
1. Syntax: Syntax: Syntax: Do { .
For(initialization; While(condition), { . Statements; }
condition: updating), { . Statements; . } While(condition);
Statements; }
2. It is known as entry It is known as entry
It is known as exit
controlled loop controlled loop.
controlled loop.
3. If the condition is not If the condition is not
Even if the
true first time than true first time than
condition is not true
control will never enter control will never enter
for the first time the
in a loop in a loop. control will enter in
a loop.
4. There is no semicolon; There is no semicolon; There is semicolon;
21 | P a g e
after the condition in the after the condition in the after the condition
syntax of the for loop. syntax of the while loop. in the syntax of the
do while loop.
5. Initialization and Initialization and Initialization and
updating is the part of updating is not the part updating is not the
the syntax. of the syntax. part of the syntax

22 | P a g e
REFERENCES:-

 https://www.guru99.com/introduction-to-javascript.html

 https://www.geeksforgeeks.org/difference-between-while-and-do-while-loop-in-c-c-java/

 https://www.w3resource.com/javascript/operators/arithmetic-addition-subtraction-
multiplication-division.php

 https://www.educba.com/html-vs-javascript/

23 | P a g e

You might also like