Web Programming(OET)

UNIT IV
JAVASCRIPT

What is JavaScript ?

* JavaScript is a high-level, interpreted programming language primarily used for front-end web development.

* It allows you to make web pages interactive by adding dynamic behavior, such as handling user input, manipulating the
Document Object Model (DOM), and creating visually appealing effects.

There are following uses or Applications of JavaScript:

How to create Javascript

1|Page
 Web Programming(OET)

Java Script Objects

* A JavaScript object is a collection of key-value pairs.

* Each key is a string (property name), and each value can be of any data type.

* Objects represent real-world entities with properties and behavior

// Numbers:
let length = 16;
let weight = 7.5;

// Strings:
let color = "Yellow";

2|Page
 Web Programming(OET)

let lastName = "Johnson";

3|Page
 Web Programming(OET)

4|Page
 Web Programming(OET)

5|Page
 Web Programming(OET)

Methods
Property Management Methods
// Adding or changing an object property
Object.defineProperty(object, property, descriptor)

// Adding or changing object properties

Object.defineProperties(object, descriptors)

// Accessing a Property
Object.getOwnPropertyDescriptor(object, property)

// Accessing Properties
Object.getOwnPropertyDescriptors(object)

// Returns all properties as an array

6|Page
 Web Programming(OET)

Object.getOwnPropertyNames(object)

// Accessing the prototype

Object.getPrototypeOf(object)

Events

* An event is an action or occurrence that happens within a web page, such as a mouse click, key press, page load, or form
submission.

* JavaScript can "listen" for these events and execute specific code in response.

Functions

Data Types

7|Page
 Web Programming(OET)

Literals
* A literal is a direct representation of a value within your JavaScript code.

Examples:

* String literal: "Hello, world!"

* Number literal: 42

* Boolean literal: true, false

* Array literal: [1, 2, 3]

* Object literal: { name: "John", age: 30 }

Variables

Variables are Containers for Storing Data.

JavaScript Variables can be declared in 4 ways:

• Automatically

• Using var

• Using let

• Using const

8|Page
 Web Programming(OET)

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 : It is considered good programming practice to always declare variables before use.

From the examples you can guess:

 x stores the value 5

 y stores the value 6
 z stores the value 11

9|Page
 Web Programming(OET)

Type Casting in JavaScript

* Type casting (also known as type conversion) is the process of converting a value from one data type to another.
JavaScript provides built-in functions for this:

 Number(): Converts a value to a number.

 String(): Converts a value to a string.
 Boolean(): Converts a value to a boolean.

10 | P a g e
 Web Programming(OET)

Array

If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this:

let car1 = "Saab";

let car2 = "Volvo";
let car3 = "BMW";

Define Array in JavaScript

* An array is an ordered collection of values.

* Each value (or element) in an array has a specific index (position).

* Arrays can hold values of different data types.

11 | P a g e
 Web Programming(OET)

12 | P a g e
 Web Programming(OET)

Dialog Boxes
13 | P a g e
 Web Programming(OET)

Dialogue boxes are a kind of popup notification, this kind of informative functionality is used to show success,
failure, or any particular/important notification to the user.
JavaScript uses 3 kinds of dialog boxes:

 Alert
 Prompt
 Confirm

These dialog boxes can be of very much help in making our website look more attractive.
Alert Box: An alert box is used on the website to show a warning message to the user that they have entered the
wrong value other than what is required to fill in that position. Nonetheless, an alert box can still be used for
friendlier messages. The alert box gives only one button “OK” to select and proceed.

Example

functionWarning()
{
alert ("Warning danger you have not filled everything");
console.log ("Warning danger you have not filled everything");
}

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 on the OK button,
the window method confirm() will return true. If the user clicks on the Cancel button, then confirm() returns
false and will show null.

Example:

functionConfirmation()
{
varVal = confirm("Do you want to continue ?");
if(Val == true) {
console.log(" CONTINUED!");
returntrue;
} else{
console.log("NOT CONTINUED!");
returnfalse;
}
}

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 the OK button, the window method prompt() will return the entered value from the text
box. If the user clicks the Cancel button, the window method prompt() returns null.
Example:
functionValue(){
varVal = prompt("Enter your name : ", "Please enter your name");
console.log("You entered : "+ Val);
14 |}P a g e
 Web Programming(OET)

Operators
* An operator is a symbol that performs a specific operation on one or more operands.

>

15 | P a g e
 Web Programming(OET)

16 | P a g e
 Web Programming(OET)

-------------****--------------

17 | P a g e
 Web Programming(OET)

Unit-4

Javascript

Questions

2M
1. Define Javascript.
2. Write Javascript syntax.
3. Write the uses of Javascript.
4. What is an event in Javascript?
5. Define Literal in JavaScript.
6. What is Type casting in JavaScript?
7. Define Array in JavaScript.
8. Mention the different types of dialog boxes.
9. Define Javascript object.
10. Define Operator in JavaScript.

5M
1. Explain Dialog boxes in Javascript.

2. Write a note on
i)Data type in Javascript
ii)Variables
3. Explain the Applications of JavaScript.

4. Explain about Javascript object.

10M
1. Explain different Object properties in JavaScript.

2. Define Operator. Explain operations in JavaScript.

3. Define an Array. Explain different Array methods.

18 | P a g e