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

Java Script

Uploaded by

mahimasharma9930
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
24 views

Java Script

Uploaded by

mahimasharma9930
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

1

Java Script

NAME:- PRINCY VERMA

STD :- FY(BSC)IT

ROLL NO :- 24

SUBJECT :- WEBAPPLICATION
DEVELOPMENT

1
2

Introduction to JavaScript for


Beginners
Welcome to the world of JavaScript, one of the most
popular programming languages used in web
development! Whether you're just starting your journey

into programming or looking to expand your skills,


JavaScript is an excellent JavaScript is a versatile and
dynamic scripting language primarily used for client-
side web development. It allows you to add
interactivity, functionality, and behavior to websites,
making them more engaging and user-friendly. In
addition to web development, JavaScript is also used in
server-side development (Node.js), mobile app
development (React Native, Ionic), game development
(Phaser, Three.js),

2
3

When most people get interested in web development,


they start with good old HTML and CSS. From there,
they move on to JavaScript, which makes sense,
because, these three elements together form the
backbone of web development JavaScript is the third
element. Once you’ve created your structure (HTML)
and your aesthetic vibe (CSS), JavaScript makes your
site dynamic (automatically updateable).

Why Learn JavaScript?


Wide Adoption: JavaScript is supported by all modern
web browsers and is used by millions of developers
worldwide, making it an essential skill for anyone
interested in web development.

3
4

Versatility: JavaScript can be used for both front-end


and back-end development, allowing you to build full-
stack applications using a single language.

Abundance of Resources: There are countless tutorials,


documentation, forums, and online courses available to
help you learn JavaScript, making it accessible to
beginners and experienced developers alike.

High Demand: With the increasing demand for web


developers, proficiency in JavaScript opens up a wide
range of career opportunities in the tech industry

Java script fundamentals

Variables and Data Types:


Variables are containers for storing data values.
Data types include strings, numbers, booleans, arrays,
objects, and more.
Variables can be declared using var, let, or const.
Functions:
Functions are reusable blocks of code that perform a
specific task.
They can be declared using the function keyword or as
arrow functions () => {}.

4
5

Functions can take parameters and return values .


control Flow:
Control flow refers to the order in which statements
are executed in a program.
Conditional statements like if, else if, and else allow you
to execute code based on certain conditions.
Loops like for, while, and do-while are used to repeat
code until a condition is met

DOM Manipulation:
The Document Object Model (DOM) represents the
structure of an HTML document as a tree of objects.
JavaScript can manipulate the DOM to add, remove, or
modify HTML elements, attributes, and styles.
DOM methods like get Element ById query Selector,
append Child, and add Event Listener are commonly
used for DOM manipulation.

Event Handling:-
Events are actions or occurrences that happen in the
browser, such as clicking a button or submitting a form.

5
6

Event handling involves responding to these events by


executing JavaScript code.
Event listeners are used to listen for specific events on
HTML elements and trigger corresponding functions.

Asynchronous Programming:-
Asynchronous programming allows JavaScript to
execute multiple tasks simultaneously without blocking
the main thread.
Callbacks, promises, and async/await are common
techniques used for asynchronous programming.
Asynchronous tasks include fetching data from servers,
waiting for user input, and performing animation

Variables and data types:-


var name = "John";
var age = 30;
var isStudent = true;
var fruits = ["apple", "banana", "orange"];
var person = { first Name: "John", last Name: "Doe" };

6
7

function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("John")); // Output: Hello, John!

Loops:-
for (var i = 0; i < 5; i++) {
console.log(i);
}

var fruits = ["apple", "banana", "orange"];


fruits.fo rEach(function(fruit) {
console.log(fruit);
});

1. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
7
8

<title>To-Do List</title>
</head>
<body>
<h1>To-Do List</h1>
<form id="taskForm">
<input type="text" id="taskInput"
placeholder="Enter task...">
<button type="submit">Add Task</button>
</form>
<ul id="taskList"></ul>

<script>
document. GetElement
ById('taskForm') .addEventListener('submit',
function(event) {
event.preventDefault(); // Prevent form submission

var taskInput =
document.getElementById('taskInput').value;
if (taskInput.trim() !== '') {
addTask(taskInput); // Call addTask function
8
9

document.getElementById('taskInput').value = ''; //
Clear input field
}
});

function addTask(taskText) {
var taskList = document.getElementById('taskList');
var li = document.createElement('li');
li.textContent = taskText;
taskList.appendChild(li);
}
</script>
</body>
</html>
2. Implement functionality to mark tasks as completed
when they are clicked:
document.getElementById('taskList').addEventListener(
'click', function(event) {
if (event.target.tagName === 'LI') {
event.target.classList.toggle('completed'); // Toggle
completed class

9
10

}
});
3.document.getElementById('taskList').addEventListene
r('click', function(event) {
if (event.target.tagName === 'BUTTON') {
event.target.parentElement.remove(); // Remove
parent element (li) of the clicked button
}
});

Explanation:
Adding Tasks: We listen for the form submission event
and prevent the default form submission behavior.
Then, we get the value of the task input, check if it's
not empty, and call the addTask function to add the
task to the list.

10
11

Marking Tasks as Completed: We listen for click events


on the task list (ul) and check if the clicked element is
an li. If it is, we toggle the completed class to mark the
task as completed or uncompleted.

Removing Tasks: Similarly, we listen for click events on


the task list and check if the clicked element is a
button. If it is, we remove the parent li element (the
task) from the list.

11

You might also like