WT Notes by Matin

Web Technology
Unit 2 IMP : Client Side Technologies: JavaScript and DOM
1] Introduction to JavaScript : (Read )

 JavaScript is a high-level, interpreted programming language primarily used for client-side web
development.
 It allows you to make web pages interactive by manipulating the content and behavior of HTML and
CSS.
 JavaScript is a key component of web development, enabling dynamic and interactive user
experiences.
 JavaScript syntax is similar to other programming languages like C++ or Java
2]Write the JavaScript function for generating Fibonacci series

Code :
const N = parseInt(prompt('Enter the number of terms: '));
let fn1 = 0, fn2 = 1, nextFibonacci;
console.log('Fibonacci Series upto N terms is:');
for (let i = 1; i <= N; i++) {
console.log(fn1);
nextFibonacci = fn1 + fn2;
fn1 = fn2;
fn2 = nextFibonacci;
Output :
1
3] variables and data types, statements, operators, literals, functions,
objects, arrays, built in objects, JavaScript debuggers (Read ).
1. Variables and Data Types:
 Variables are used to store and manipulate data.
 Data types include numbers, strings, booleans, objects, etc.
2. Statements:
 JavaScript uses statements to control the flow of a program.
 Examples include if statements, for loops, and switch statements.
3. Operators:
 JavaScript supports various operators like arithmetic, assignment, comparison, and
logical operators.
4. Literals:
 Literals are direct representations of values in JavaScript code. Examples include
numeric literals, string literals, and boolean literals.
5. Functions:
 Functions are reusable blocks of code that can be defined and called with different
arguments.
 They play a crucial role in modularizing code.
6. Objects:
 Objects are collections of key-value pairs, representing entities.
 Object-oriented programming is a fundamental concept in JavaScript.
7. Arrays:
 Arrays are ordered collections of values, which can be of any data type.
 They provide a way to store and manipulate lists of items.
8. Built-in Objects:
 JavaScript has several built-in objects like Math, Date, String, Array, etc., that
provide useful functionality.
9. JavaScript Debuggers:
 Debuggers help developers identify and fix errors in their code.
 Modern browsers come with built-in developer tools that include debugging
features.
2
4] DOM (Document Object Model):
1. Introduction to Document Object Model:
 The DOM is a programming interface for web documents.
 It represents the structure of a document as a tree of objects, each corresponding to a

part of the document.
 The DOM has evolved through different levels (DOM Level 1, Level 2, etc.).
 Each level adds new features and improvements to the DOM..
2. The DOM represents an HTML document as a tree structure.
 This tree structure consists of nodes, where each node corresponds to an element,
attribute, or any other structural component within the document.
 Element nodes represent HTML or XML elements.
 Developers can traverse the DOM tree to access, modify, or delete nodes.
Document Object Model serves as a bridge between web documents and scripts, allowing developers to
create dynamic and interactive web pages
5] What is jQuery its features syntax and example :

 jQuery is a popular JavaScript library that simplifies DOM manipulation, event handling.
 Advantages of jQuery
 Cross-browser Compatibility :
jQuery abstracts away many of the differences between browsers, providing a
consistent interface.
 Simplified Syntax:
jQuery simplifies complex tasks into a concise syntax,. This makes code more readable
and easier to maintain.
 DOM Manipulation:
jQuery simplifies DOM manipulation, allowing developers to easily select and modify
elements, handle events, and update the document structure.
 Animation Effects:
jQuery provides built-in methods for creating animations and effects on web pages.
3
jQuery Syntax:
Basic syntax is: $(selector).action
Example :
Code :
<!DOCTYPE html>
<head>
<title>jQuery Example</title>
<script>
// jQuery code
$(document).ready(function ()
$("#exampleElement").text("Hello, jQuery!");
// Add a click event handler to a button

$("#myButton").click(function () {
alert("Button Clicked!");
});
});
</script>
</head>
<body>

<div id="exampleElement"></div>
<button id="myButton">Click me</button>
</body>
</html>
Output :
4
6] What is Angular JS? Explain Angular JS directives for data
binding with example
AngularJS is a JavaScript framework.

It can be added to an HTML page with a <script> tag.
It is designed to make both the development and testing of such applications easier
by providing a framework for client-side model-view-controller (MVC) and model-
view-viewmodel (MVVM) architectures.
Data-binding in AngularJS apps is the automatic synchronization of data between the model
and view components
AngularJS Directives
AngularJS directives are extended HTML attributes with the prefix ng-.
The ng-app directive initializes an AngularJS application.
The ng-init directive initializes application data.
The ng-model directive binds the value of HTML controls (input, select, textarea) to
application data
Example
Code
<!DOCTYPE html>
<html ng-app="">
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<p>Input something in the input box:</p>

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</body></html>
Output:
5
Features of Angular JS :
1. Two-way Data Binding:

 AngularJS provides two-way data binding, allowing automatic synchronization
between the model (JavaScript variables) and the view (HTML elements)..
2. Modular Development:
 AngularJS supports modular development through the use of modules.
3. Templates:
 AngularJS uses HTML templates to define the UI.
4. Controllers:
 Controllers in AngularJS define the behavior of the application. .
5. Animation Support:
 AngularJS has built-in support for animations.
6. Form Validation:
 AngularJS simplifies form validation by providing a set of directives and
services.
8] Write the JavaScript code for name, email and mobile number validation
in registration form.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Registration Form</title>
</head>
<body>
<h2>Registration Form</h2>
<form id="registrationForm" onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
6
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="mobile">Mobile Number:</label>
<input type="tel" id="mobile" name="mobile"><br>
<input type="submit" value="Register">
</form>
<script>
function validateForm() {
const name = document.getElementById('name').value.trim();
const email = document.getElementById('email').value.trim();
const mobile = document.getElementById('mobile').value.trim();
if (!name) {
alert("Please enter your name!");
return false;
if (!email) {
alert("Please enter your email!");
return false;
if (!mobile) {
alert("Please enter your mobile number!");
return false;
alert("Registration successful!\n\nName: " + name + "\nEmail: " + email + "\nMobile: " + mobile);
return true;
</script>
</body>
</html>
7
Output :
After clicking submit
***
I AM BATMAN

WT Notes by Matin

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WT Notes by Matin

Uploaded by

Copyright:

Available Formats

Web Technology

Unit 2 IMP : Client Side Technologies: JavaScript and DOM

1] Introduction to JavaScript : (Read )

 JavaScript syntax is similar to other programming languages like C++ or Java

2]Write the JavaScript function for generating Fibonacci series

let fn1 = 0, fn2 = 1, nextFibonacci;

console.log('Fibonacci Series upto N terms is:');

for (let i = 1; i <= N; i++) {

nextFibonacci = fn1 + fn2;

 The DOM is a programming interface for web documents.

 It represents the structure of a document as a tree of objects, each corresponding to a

 Each level adds new features and improvements to the DOM..

2. The DOM represents an HTML document as a tree structure.

5] What is jQuery its features syntax and example :

Basic syntax is: $(selector).action

// Add a click event handler to a button

AngularJS is a JavaScript framework.

<p>Input something in the input box:</p>

1. Two-way Data Binding:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Simple Registration Form</title>

<form id="registrationForm" onsubmit="return validateForm()">

<input type="text" id="name" name="name"><br>

<input type="email" id="email" name="email"><br>

<label for="mobile">Mobile Number:</label>

<input type="tel" id="mobile" name="mobile"><br>

<input type="submit" value="Register">

const name = document.getElementById('name').value.trim();

const email = document.getElementById('email').value.trim();

const mobile = document.getElementById('mobile').value.trim();

alert("Please enter your name!");

alert("Please enter your email!");

alert("Please enter your mobile number!");

After clicking submit

You might also like