JavaScript UNIT I
UNIT – I
Overview & Introduction to JavaScript
1.1 What is JavaScript?
JavaScript is an object-based scripting language which is lightweight and cross-
platform.
JavaScript is interpreted programming language. The JavaScript translator (embedded
in the browser) is responsible for translating the JavaScript code for the web browser.
JavaScript is used by several websites for scripting the webpages.
JavaScript enables dynamic interactivity on websites when applied to an HTML
document.
With JavaScript, users can build modern web applications to interact directly without
reloading the page every time. The traditional website uses js to provide several forms
of interactivity and simplicity.
Although, JavaScript has no connectivity with Java programming language. The name
was suggested and provided in the times when Java was gaining popularity in the
market.
It was created in 1995 by Brendan Eich while he was an engineer at Netscape.
JavaScript was first known as LiveScript, but Netscape changed its name to
JavaScript, possibly because of the excitement being generated by Java.
JavaScript made its first appearance in Netscape 2.0 in 1995 with the name LiveScript.
Features of JavaScript
1. All popular web browsers support JavaScript as they provide built-in execution
environments.
2. JavaScript follows the syntax and structure of the C programming language. Thus, it
is a structured programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast
(depending on the operation).
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 1
[Link]
JavaScript UNIT I
4. JavaScript is an object-oriented programming language that uses prototypes rather
than using classes for inheritance.
5. It is a light-weighted and interpreted language.
6. It is a case-sensitive language.
7. It is supportable in several operating systems including, Windows, macOS, etc.
8. It provides good control to the users over the web browsers.
9. It is open source and cross-platform.
Application 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. 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 [Link], JavaScript made its way from client to
server and [Link] is the most powerful on the server side.
Games: Not only in websites, but JavaScript also helps in creating games. 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.
Smart watches: 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 [Link] library.
Machine Learning: This JavaScript [Link] 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. Using React Native, we can build mobile applications for different operating
systems.
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 2
[Link]
JavaScript UNIT I
JavaScript Example
<script>
[Link]("Welcome to NIIT Nanded");
</script>
1.2 The Development Workflow in JavaScript
The development workflow in JavaScript can vary based on the project, team preferences, and
tools in use. However, there are common practices and tools that many JavaScript developers
use to ensure efficient development, testing, and deployment. Here's a general overview of a
typical JavaScript development workflow:
1. Project Setup
Initialization: Use package managers like nmp (Node Package Manager) or yran
initialize a new project.
Version Control: Initialize a git repository.
Folder Structure: Organize your project files into a structured directory, often
following the MVC (Model-View-Controller) or similar patterns.
2. Development:
Code Editor: Use a text editor or an Integrated Development Environment (IDE) like
Visual Studio Code, WebStorm, or Atom.
Version Control: Commit your changes regularly to Git and push to a remote
repository (e.g., GitHub, GitLab, Bitbucket).
3. Testing:
Unit Testing: Use testing frameworks like Jest, Mocha, or Jasmine to write and run
unit tests for your JavaScript code.
Integration & End-to-End Testing: Use tools like Cypress, Selenium, or Puppeteer
for integration and end-to-end testing.
4. Linting & Formatting:
Use tools like ESLint, Prettier, or TSLint (for TypeScript projects) to enforce coding
standards, catch errors, and ensure consistent code formatting.
Integrate linting and formatting tools into your code editor or build process.
5. Build & Bundling:
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 3
[Link]
JavaScript UNIT I
Use bundlers like Webpack, Rollup, or Parcel to bundle your JavaScript modules,
optimize assets, and generate production-ready builds.
Transpile modern JavaScript (ES6+) to compatible ES5 code using Babel.
6. Development Server:
Use development servers like Webpack Dev Server, Parcel, or Create React App's
development server for hot module replacement and fast feedback during
development.
7. Documentation:
Maintain documentation using tools like JSDoc, Markdown, or tools integrated with
your code editor/IDE.
8. Performance Optimization:
Profile and optimize your JavaScript code using browser developer tools, tools like
Lighthouse, or third-party monitoring solutions.
Use code-splitting, lazy loading, and other optimization techniques to improve
loading and runtime performance.
9. Deployment:
Deploy your JavaScript applications to hosting platforms like Vercel, Netlify, AWS,
Heroku, or traditional web servers.
Ensure proper environment configuration, security measures, and monitoring in the
production environment.
Remember, the specific tools and practices in a JavaScript development workflow can vary
based on the project's requirements, team preferences, and the ecosystem's evolution.
Regularly updating your skills and staying informed about the latest tools and best practices
is essential for efficient and effective development.
1.3 Selecting The Right Tools For The Job
Selecting the right tools for JavaScript development is crucial for ensuring productivity,
maintainability, and the successful delivery of projects. The JavaScript ecosystem offers a
wide range of tools, libraries, and frameworks tailored for various purposes and requirements.
Here's a systematic approach to help you select the right tools for JavaScript development:
1. Define Project Requirements:
Type of Application: Determine whether you're building a web application, mobile
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 4
[Link]
JavaScript UNIT I
application, desktop application, or server-side application.
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 5
[Link]
JavaScript UNIT I
Functionalities & Features: List down the essential functionalities, features, and
technical requirements of the project.
Performance & Scalability: Assess the expected performance metrics and scalability
requirements of the application.
2. Choose the Right Framework:
Web Development:
React: For building interactive UIs and single-page applications.
Angular: For building robust and scalable applications with a comprehensive
framework.
[Link]: For building progressive and lightweight applications with a flexible
ecosystem.
[Link]: For building scalable and efficient server-side applications using JavaScript.
Mobile Development:
React Native: For building cross-platform mobile applications with native
performance.
Flutter: For building mobile applications with a rich set of customizable
widgets and native performance.
Electron: For building desktop applications using web technologies.
3. Package Management:
npm (Node Package Manager): For managing project dependencies, scripts, and
publishing packages.
yarn: An alternative to npm with performance optimizations and improved caching.
4. Build & Bundling Tools:
Webpack: For bundling JavaScript modules, assets optimization, and generating
production builds.
Rollup: For creating smaller, faster, and more efficient bundles.
Parcel: A zero-configuration bundler for fast and simple builds.
5. Transpilers & Compilers:
Babel: For transpiling modern JavaScript (ES6+) to compatible ES5 code and
supporting experimental features.
6. Linting & Code Quality:
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 6
[Link]
JavaScript UNIT I
ESLint: For linting JavaScript code, enforcing coding standards, and identifying
potential errors or issues.
Prettier: For code formatting and ensuring consistent code style across the project.
7. Testing Frameworks & Libraries:
Jest: For testing JavaScript code with a focus on simplicity and support for various
testing methodologies.
Mocha: A flexible testing framework with support for various assertion libraries and
testing styles.
Cypress: For end-to-end testing of web applications with a focus on simplicity and
real-time feedback.
8. State Management & Data Handling:
Redux: For managing application state and data flow in React applications.
Vuex: For managing state in [Link] applications with a centralized store.
GraphQL: For querying and manipulating data with a flexible and efficient API.
9. Development Environment & Tools:
Visual Studio Code: A popular code editor with extensive support for JavaScript
development and a rich ecosystem of extensions.
[Link]: A JavaScript runtime for executing JavaScript server-side and building
scalable applications.
10. Version Control & Collaboration:
Git: For version control, collaboration, and managing codebase changes.
GitHub, GitLab, Bitbucket: Platforms for hosting Git repositories, managing
projects, and facilitating collaboration.
11. Deployment & Hosting:
Vercel, Netlify: For deploying and hosting static websites, single-page applications,
and serverless functions.
Heroku, AWS, Azure: Cloud platforms for deploying and scaling applications with
support for various server configurations and services.
By aligning the selection of tools with the project's requirements, objectives, and technical
constraints, you can build robust, scalable, and maintainable JavaScript applications.
Regularly updating and optimizing your toolset in response to evolving project needs,
technological advancements, and feedback from the development team will help ensure
efficient development processes and successful project outcomes.
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 7
[Link]
JavaScript UNIT I
1.4 Just Enough HTML and CSS
Using HTML and CSS within JavaScript can be beneficial for creating dynamic user
interfaces, generating content, or manipulating styles based on various conditions or user
interactions. Here's a guide to incorporating just enough HTML and CSS within JavaScript.
HTML:
HTML is mark-up language used for structuring web pages, uses tags to perform different
operation in a structure. Some of the important HTML tags for JavaScript
1. Lists: Lists are a fundamental part of HTML and CSS. They are used to create a structure
for your content and can be styled to match your website's design. List items can contain
other HTML elements, including links, images, and even other lists.
2. Tables: Tables are a great way to present information in a structured way. They can be
used to display tabular data, or to align elements on a page. Tables can be created using the
table element, which contains the table row (tr) and table header (th) elements.
3. Forms: Forms are one of the most important elements in web design. They allow users to
input data, which can then be processed by a server-side script. Forms can be used to log in to
users to their accounts, search for data, and much more.
4. Links: Creating links is a very important part of web development, as they allow users
to navigate between pages on a website. The <a> tag defines a hyperlink, which is used to
link from one page to another. The href attribute specifies the URL of the page that the link
should point to.
5. Images: The very common method everyone knows is by adding img tag with src
attribute. To add an image to your HTML, you'll need to use the <img> tag. This tag tells
the browser that you want to add an image to the page. The <img> tag has two important
attributes: src and alt.
6. Meta tag: The most underrated and ignored tags are meta tags. People skip adding meta
tags because there are too many. They help search engines understand what your website is
about, and they can also be used to improve your website's [Link] tags are placed in
the <head> section of your HTML code.
7. HTML5 Semantics: In recent years, there has been a major update to HTML with the
release of HTML5. This new version of HTML includes new features that make coding web
pages more semantic. Semantic code is code that is easy for both humans and machines to
read and understand. some schematic tags are Header, Footer, Section, Aside, Article, etc.
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 8
[Link]
JavaScript UNIT I
CSS:
On other side CSS is used to style web page element, including HTML tags. It enable you to give
a different style to each element , including height, width, colors, fonts, CSS unit, FlexBox,
Grids, position, Border etc. these properties will help to create stylish and beautiful web
pages.
1. Height/Width: The height and width properties specify the height and width of a
HTML element respectively.
2. Color: Perhaps the most common property is color. the color property allows us to
specify the text color of an HTML element.
3. Font-Size: The font-size property allows us to change the size of the font for any text
based content.
4. Background Color: The background-color property allows you to set the background
color of an HTML element.
5. Border: The border property allows you set a border for your HTML element.
6. Background Image: The background-image property allows us to add a background
image to an HTML element. This is similar to the background color, however an
image is shown instead of a color.
1.5 Understanding Objects
In JavaScript, objects are one of the fundamental data structures, allowing you to store
and organize data using key-value pairs. Each key value pair is called property.
Understanding objects is essential for effective JavaScript programming.
1. Object Basics:
Definition: An object is a collection of properties, where each property consists of a
key (or name) and a value.
Literal Notation: Objects can be created using object literal notation.
const person = {
firstName: 'NIIT',
lastName: 'Nanded',
age: 30,
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 9
[Link]
JavaScript UNIT I
greet: function() {
[Link]('Hello, ' + [Link]);
}
};
2. Accessing Properties: To access the properties of an object we can use two notation
Dot Notation: Use dot notation to access properties.
[Link]([Link]); // Output: NIIT
Bracket Notation: Use bracket notation for dynamic property access or when the
property name is not a valid identifier.
[Link](person['lastName']); // Output: Nanded
3. Adding & Modifying Properties:
Adding Properties:
[Link] = 'nandigramiit@[Link]';
Modifying :
Properties
[Link] = 35;
4. Methods:
Objects can contain methods (functions) as properties.
Methods can access the object's properties using the this
keyword.
[Link](); // Output: Hello, NIIT
1.6 Understanding Variable in JavaScript
In JavaScript, variables are used to store and manipulate data. Understanding variables is
fundamental to programming in JavaScript, as they enable you to work with values, perform
calculations, and store information. JavaScript Variables can be declared in 4 ways:
Automatically, using var, let, const.
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 10
[Link]
JavaScript UNIT I
var name = 'NIIT'; //The var was used in all JavaScript code from
1995 to 2015.
let age = 25; // Only use let if you can't use const
const PI = 3.14; // Always use const if the value should not be
changed
JavaScript Variable Scope: The scope of a variable is the region of your program in which it
is defined. JavaScript variable will have only two scopes.
Global Variables: A global variable has global scope which means it is defined
everywhere in your JavaScript code.
Local Variables: A local variable will be visible only within a function where it is
defined. Function parameters are always local to that function.
Identifier Rules:
You should not use any of the JavaScript reserved keyword as variable name. For
example, break or boolean variable names are not valid.
JavaScript variable names should not start with a numeral (0-9).
They must begin with a letter or the underscore (_) character. For example, 123test is
an invalid variable name but _123test is a valid one.
JavaScript variable names are case sensitive. For example, Name and name are two
different variables.
1.7 Making Comparison
JavaScript supports comparison operators to compare two values.
The JavaScript comparison operators take two values, compare them, and return a
Boolean result, either true or false.
These operators are very useful in decision-making and loop programs in JavaScript.
The following is a list of the comparison operators supported by JavaScript:
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 11
[Link]
JavaScript UNIT I
Logical Operators in JavaScript:
The logical operators can be bound with the comparison operators to create various
use cases. Let's see the available logical operators in JavaScript:
The following are the logical operators supported by JavaScript:
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 12
[Link]
JavaScript UNIT I
Ternary (Conditional) Operator:
JavaScript also supports a conditional operator, known as the ternary operator,
specifying whether the output is true or not based on a condition. It is represented by the
"?" symbol.
Syntax:
Variable_name = (condition) ? value1:value2
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 13
[Link]
