Scribd
Upload
15 views12 pages

JAVA Script

JS

Uploaded by

kypgpsiwan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
15 views12 pages

JAVA Script

JS

Uploaded by

kypgpsiwan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 12

JAVA Script

JavaScript is a programming language used for creating dynamic content on websites. It is a


lightweight, cross-platform and single-threaded programming language. JavaScript is an interpreted
language that executes code line by line providing more flexibility. It is a commonly used
programming language to create dynamic and interactive elements in web applications. It is easy to
learn.

console.log ("Hello World! I Don't Give a Bug");

Why to learn JavaScript?

JavaScript is an essential programming language for web developers to learn as it grows rapidly.
JavaScript is responsible for behaviour of the web pages. By learning it, you will develop skills in web
development.

Key Features of JavaScript:

1. Versatility: JavaScript can be used to develop websites, games, mobile apps, and more.
2. Client and Server-Side: With frameworks like Node.js and Express.js, JavaScript is now used
for building server-side applications.
3. End-to-End Solutions: JavaScript enables developers to create complete solutions for various
problems.
4. Constant Evolution: JavaScript continually evolves with new features and standards.
5. Vibrant Community: A large community of users and mentors actively contributes to
JavaScript’s growth.

JavaScript is a lightweight, cross-platform, single-threaded, and interpreted compiled programming


language. It is also known as the scripting language for webpages. It is well-known for the
development of web pages, and many non-browser environments also use it.

JavaScript is a weakly typed language (dynamically typed). JavaScript can be used for Client-side
developments as well as Server-side developments. JavaScript is both an imperative and declarative
type of language. JavaScript contains a standard library of objects, like Array, Date, and Math, and a
core set of language elements like operators, control structures, and statements.

Client-side: It supplies objects to control a browser and its Document Object Model (DOM). Like if
client-side extensions allow an application to place elements on an HTML form and respond to user
events such as mouse clicks, form input, and page navigation. Useful libraries for the client side are
AngularJS, ReactJS, VueJS, and so many others.

Server-side: It supplies objects relevant to running JavaScript on a server. For if the server-side
extensions allow an application to communicate with a database, and provide continuity of
information from one invocation to another of the application, or perform file manipulations on a
server. The useful framework which is the most famous these days is node.js.

Imperative language – In this type of language we are mostly concerned about how it is to be done.
It simply controls the flow of computation. The procedural programming approach, object, oriented
approach comes under this as async await we are thinking about what is to be done further after the
async call.
Declarative programming – In this type of language we are concerned about how it is to be done;
basically, here logical computation requires. Her main goal is to describe the desired result without
direct dictation on how to get it as the arrow function does.

How to Link JavaScript File in HTML?

JavaScript can be added to HTML file in two ways:

Internal JS: We can add JavaScript directly to our HTML file by writing the code inside the <script>
tag. The <script> tag can either be placed inside the <head> or the <body> tag according to the
requirement.

External JS: We can write JavaScript code in other files having an extension.js and then link this file
inside the <head> tag of the HTML file in which we want to add this code.

<script>

// JavaScript Code

</script>

Applications of JavaScript

Web Development: Adding interactivity and behaviour to static sites JavaScript was invented to do
this in 1995. By using AngularJS that can be achieved so easily.

Web Applications: With technology, browsers have improved to the extent that a language was
required to create robust web applications. When we explore a map in Google Maps then we only
need to click and drag the mouse. All detailed view is just a click away, and this is possible only
because of JavaScript. It uses Application Programming Interfaces (APIs) that provide extra power to
the code. The Electron and React are helpful in this department.

Server Applications: With the help of Node.js, JavaScript made its way from client to server and
Node.js is the most powerful on the server side.

Games: Not only in websites, but JavaScript also helps in creating games for leisure. The
combination of JavaScript and HTML 5 makes JavaScript popular in game development as well. It
provides the EaseJS library which provides solutions for working with rich graphics.

Smartwatches: JavaScript is being used in all possible devices and applications. It provides a library
PebbleJS which is used in smartwatch applications. This framework works for applications that
require the Internet for their functioning.

Art: Artists and designers can create whatever they want using JavaScript to draw on HTML 5 canvas
and make the sound more effective also can be used p5.js library.

Machine Learning: This JavaScript ml5.js library can be used in web development by using machine
learning.

Mobile Applications: JavaScript can also be used to build an application for non-web contexts. The
features and uses of JavaScript make it a powerful tool for creating mobile applications. This is a
Framework for building web and mobile apps using JavaScript. Using React Native, we can build
mobile applications for different operating systems. We do not require to write code for different
systems. Write once use it anywhere!
Limitations of JavaScript

Security risks: JavaScript can be used to fetch data using AJAX or by manipulating tags that load
data such as <img>, <object>, <script>. These attacks are called cross-site script attacks. They inject
JS that is not part of the site into the visitor’s browser thus fetching the details.

Performance: JavaScript does not provide the same level of performance as offered by many
traditional languages as a complex program written in JavaScript would be comparatively slow. But
as JavaScript is used to perform simple tasks in a browser, so performance is not considered a big
restriction in its use.

Complexity: To master a scripting language, programmers must have a thorough knowledge of all
the programming concepts, core language objects, and client and server-side objects otherwise it
would be difficult for them to write advanced scripts using JavaScript.

Weak error handling and type checking facilities: It is a weakly typed language as there is no need
to specify the data type of the variable. So wrong type checking is not performed by compile.

JavaScript Syntax

console.log ("Basic Print method in JavaScript");

Client-side scripting:

Web browsers execute client-side scripting. It is used when browsers have all code. Source code is
used to transfer from webserver to user’s computer over the internet and run directly on browsers.
It is also used for validations and functionality for user events.

It allows for more interactivity. It usually performs several actions without going to the user. It
cannot be basically used to connect to databases on a web server. These scripts cannot access the
file system that resides in the web browser. Pages are altered on basis of the user’s choice. It can
also be used to create “cookies” that store data on the user’s computer.

JavaScript Variables

Variables are used to store data in JavaScript. Variables are used to store reusable values. The values
of the variables are allocated using the assignment operator (“=”).

Examples of JavaScript Variables

JavaScript Assignment Operator

JavaScript assignment operator is equal (=) which assigns the value of the right-hand operand to its
left-hand operand.

y = "Geek"

JavaScript is a dynamically typed language so the type of variables is decided at runtime. Therefore
there is no need to explicitly define the type of a variable. We can declare variables in JavaScript in
three ways:

1. JavaScript var keyword


2. JavaScript let keyword.
3. JavaScript const keyword
1. var test = 12
function foo(){
console.log(test);
}
foo();
2. var test1 = 12,
test2= 14,
test3 = 16
function foo(){
console.log(test1, test2, test3);
}
foo();
Syntax

// Declaration using var

var geek = "Hello Geek"

// Declaration using let

let $ = "Welcome"

// Declaration using const

const _example = "Gfg"

JavaScript Operators

JavaScript Operators are symbols used to perform specific mathematical, comparison, assignment,
and logical computations on operands. They are fundamental elements in JavaScript programming,
allowing developers to manipulate data and control program flow efficiently. Understanding the
different types of operators and how they work is important for writing effective and optimized
JavaScript code.
Conditional Statements in JavaScript

JavaScript conditional statements allow you to execute specific blocks of code based on conditions. If
the condition is met, a particular block of code will run; otherwise, another block of code will
execute based on the condition.

There are several methods that can be used to perform Conditional Statements in JavaScript.

Popup box available in JavaScript

In JavaScript, there are three types of popup boxes: alert, confirm, and prompt. The alert() displays a
simple message, the confirm() asks the user to accept or cancel, and the prompt() requests user
input with an optional default value.

There are three types of pop-up boxes in JavaScript:

1. Alert Box
2. Prompt Box
3. Confirm Box

Alert Box

An alert box in JavaScript is a popup window that displays a simple message to the user. It is
triggered by the alert() function and pauses code execution until the user clicks the “OK” button to
close it.

Syntax:

alert("your Alert here");

<script>

function geekAlert() {
alert("An Online Computer Science"

+ "Portal for Geeks");

</script>

Prompt Box

A prompt box in JavaScript is a popup window that asks the user for input. It is triggered by the
prompt() function, which displays a message and input field, allowing the user to provide a response
or cancel.

Syntax:

prompt("your Prompt here");

<script>

function geekPrompt() {

let x = prompt("Enter your mail here : ");

document.write("Your ID : " + x);

</script>

Confirm Box

It is a type of pop-up box that is used to get authorization or permission from the user. The user has
to press the ok or cancel button to proceed.

Syntax:

confirm("your query here");

<script>

function geekConfirm() {

var x;

if (confirm("Press a button!") == true) {

x = "OK pressed!";

} else {

x = "Cancel!";

document.getElementById("geek").innerHTML = x;
}

</script>

JavaScript Events

JavaScript Events are actions or occurrences that happen in the browser. They can be triggered by
various user interactions or by the browser itself.

Common events include mouse clicks, keyboard presses, page loads, and form submissions. Event
handlers are JavaScript functions that respond to these events, allowing developers to create
interactive web applications.

Syntax:

<HTML-element Event-Type = "Action to be performed">


JavaScript Form Validation

JavaScript Form Validation is a way to ensure that the data users enter into a form is correct before
it gets submitted. This helps ensure that things like emails, passwords, and other important details
are entered properly, making the user experience smoother and the data more accurate.

Steps for Form Validation in JavaScript

When we validate a form in JavaScript, we typically follow these steps:

Data Retrieval:

The first step is to get the user’s values entered into the form fields (like name, email, password,
etc.). This is done using document.forms.RegForm, which refers to the form with the name
“RegForm”.

Data Validation:

Name Validation: We check to make sure the name field isn’t empty and doesn’t contain any
numbers.

Address Validation: We check that the address field isn’t empty.

Email Validation: We make sure that the email field isn’t empty and that it includes the “@” symbol.

Password Validation: We ensure that the password field isn’t empty and that the password is at
least 6 characters long.

Course Selection Validation: We check that a course has been selected from a dropdown list.

Error Handling:

If any of the checks fail, an alert message is shown to the user using window.alert, telling them
what’s wrong.

The form focuses on the field that needs attention, helping the user easily fix the error.

Submission Control:

If all the validation checks pass, the function returns true, meaning the form can be submitted. If
not, it returns false, stopping the form from being submitted.

Focus Adjustment:

The form automatically focuses on the first field that has an error, guiding the user to fix it.

Types of Form Validation

Client-side Validation:

This is done in the user’s browser before the form is submitted. It provides quick feedback to the
user, helping them fix errors without sending data to the server first.

Server-side Validation:

Even though client-side validation is useful, it’s important to check the data again on the server. This
ensures that the data is correct, even if someone tries to bypass the validation in the browser.
Introduction to AngularJS

AngularJS is a popular open-source framework that simplifies web development by creating


interactive single-page applications (SPAs). Unlike traditional websites that load new pages for each
click, SPAs offer a smoother user experience by updating content on the same page.

AngularJS makes this possible by transforming static HTML into dynamic content that adapts to user
interactions. Features like data binding and dependency injection streamline development, saving
you time and effort. With regular updates and a large community, AngularJS ensures your web
applications stay modern and efficient.

AngularJS is a JavaScript Framework

AngularJS is a JavaScript framework that can be used in 2 ways given below:

1. Using Angular CLI and NPM


2. Using CDN Link in script tag

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"

integrity="sha512-
KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGf
vWEtRXA=="

crossorigin="anonymous" referrerpolicy="no-referrer">

</script>

Why Choose AngularJS?

Easy to Work With: AngularJS requires only basic knowledge of HTML, CSS, and JavaScript. You don’t
need to be an expert; just bring your curiosity and creativity.

Time-Saving Components: AngularJS allows you to work with reusable components, saving time and
reducing unnecessary code. Components are the building blocks of your application.

Ready-to-Use Templates: AngularJS leverages plain HTML templates, which it compiles and makes
ready for use. No complex setup—just write your HTML and let AngularJS do the heavy lifting.

Directives: AngularJS extends HTML with custom elements and attributes called directives. These
enable you to create reusable components and define custom behaviors for your application.
Directives make it easier to manipulate the DOM, handle events, and encapsulate complex UI logic
within a single component.

Key Features of AngularJS

Model-View-Controller (MVC) Architecture:

Model: Manages data and logic, responding to requests from the view and instructions from the
controller.

View: Displays application data to users.

Controller: Orchestrates communication between the model and view, updating the model based on
user interactions.

Filters and Data Transformation:


AngularJS provides powerful filters for transforming data before displaying it in templates. Common
filters include filter, orderBy, and currency.

You can also create custom filters tailored to your application’s needs.

Routing and Single-Page Applications (SPAs):

Implement client-side routing to create SPAs.

Handle route parameters and navigation seamlessly.

Services and Dependency Injection:

Services are reusable components that provide specific functionality.

Dependency injection ensures loose coupling between components, making your code more
maintainable.

Custom Directives and Components:

Build reusable components using custom directives.

Isolate scope and communicate between components.

Testing AngularJS Applications:

Write unit tests using Jasmine and Karma.

Explore end-to-end testing with Protractor.

Advanced Topics:

Dive into promises and asynchronous programming.

Interact with RESTful APIs.

Optimize performance and follow best practices.

Applications of AngularJS

Dynamic Forms:

AngularJS excels at creating dynamic forms with real-time validation and feedback.

Real-Time Dashboards:

Build interactive dashboards that update in real time based on user interactions.

Collaborative Apps:

AngularJS is perfect for chat applications and collaborative document editing.

E-Commerce Platforms:

Create seamless shopping experiences with AngularJS-powered product catalogs and checkout
processes.

Advantages of AngularJS
It facilitates the Two-way Binding that helps to render correspondingly the changes made to the
view or the model.

It helps to create a responsive web application, along with providing the prototyping that can be
utilized to load the application faster.

It uses the concept of directive that helps to add functionality to the application. For this, the overall
length of the code reduces along with discarding the repetition of the code that is specific to
perform the particular task.

AngularJS Expressions

Expressions in AngularJS are used to bind application data to HTML. The expressions are resolved by
AngularJS and the result is returned back to where the expression is written. The expressions in
AngularJS are written in double braces: {{ expression }}. They behave similar to ng-bind directives:
ng-bind=”expression”.

Syntax:

{{ expression }}

AngularJS Modules

The AngularJS module defines the functionality of the application which is applied on the entire
HTML page. It helps to link many components. So it is just a group of related components. It is a
container that consists of different parts like controllers, services, and directives.

Note: These modules should be made in normal HTML files like index.html and no need to create a
new project in VisualStudio for this section.

Creating a Module in AngularJS:

var app = angular.module("Module-name", []);

In this [], we can add a list of components needed but we are not including any components in this
case. This created module is bound with any tag like div, body, etc by adding it to the list of modules.

<div ng-app = "module-name">

The code in which the module is required.

</div>

AngularJS Directive

AngularJS is a Javascript open-source front-end framework that is mainly used to develop single-
page web applications(SPAs). It has the ability to change static HTML to dynamic HTML. Its features
like dynamic binding and dependency injection eliminate the need for code that we have to write
otherwise.

Directives are markers on the DOM element which tell AngularJS to attach a specified behavior to
that DOM element or even transform the DOM element with its children. Simple AngularJS allows
extending HTML with new attributes called Directives. AngularJS has a set of built-in directives which
offers functionality to the applications. It also defines its own directives. A directive can be defined
using some functions which are: Element name, Attribute, Class, and Comment.

Why use Directive in AngularJS?

It gives support to creating custom directives for different types of elements.

A directive is activated when the same element or matching element is there in front.

It is used to give more power to HTML by helping them with the new syntax.

Directive classes, like component classes, can implement life-cycle hooks to influence their
configuration and behaviour.

You might also like