JavaScript-Overview

Lecture 2
Introduction
• JavaScript is a very powerful client-side scripting language.
• JavaScript is used mainly for enhancing the interaction of a user with
the webpage. In other words, you can make your webpage more lively
and interactive, with the help of JavaScript.
• JavaScript is also being used widely in game development
and Mobile application development.
Applications of JavaScript
• Client side validation − This is really important to verify any user input before submitting it to the server and
JavaScript plays an important role in validating those inputs at front-end itself.
• Manipulating HTML Pages − JavaScript helps in manipulating HTML page on the fly. This helps in adding and
deleting any HTML tag very easily using JavaScript and modify your HTML to change its look and feel based on
different devices and requirements.
• User Notifications − You can use JavaScript to raise dynamic pop-ups on the webpages to give different types of
notifications to your website visitors.
• Back-end Data Loading − JavaScript provides Ajax library which helps in loading back-end data while you are doing
some other processing. This really gives an amazing experience to your website visitors.
• Presentations − JavaScript also provides the facility of creating presentations which gives website look and feel.
JavaScript provides RevealJS and BespokeJS libraries to build a web-based slide presentation.
• Server Applications − Node JS is built on Chrome's JavaScript runtime for building fast and scalable network
applications. This is an event based library which helps in developing very sophisticated server applications including
Web Servers.
Applications of JavaScript
• Machine learning − Developers can use the ML5.js library to complete the task related to machine learning.
• Game Developments − JavaScript contains multiple libraries and NPM packages to design graphics for the
game. We can use HTML, CSS, and JavaScript with libraries to develop the games.
• Mobile applications − We can use frameworks like React Native to build feature-rich mobile applications.
• Internet of Things (IoT) − JavaScript is used to add functionality to devices like smartwatches, earbuds, etc.
• Data visualization − JavaScript contains the libraries like D3.js to visualize the data efficiently. The D3.js is
also used to prepare high-quality charts to visualize the data.
• Cloud computing − We can use JavaScript in serverless computing platforms like Cloudflare and AWS lambda
to write and deploy functions on the cloud.
JS Framework
Definition: JavaScript frameworks are pre-written code libraries that provide a structured and organized way to build web
applications.
• Real-World Example: Think of a JavaScript framework as a toolbox filled with tools (functions and utilities) that help you
build a house (web application) faster and more efficiently.
What’s inside JS framework?
• Components: Reusable building blocks (like buttons, forms, and modals) that can be easily integrated into the application.
• Utilities: Helper functions and tools for tasks such as data manipulation, DOM manipulation, and state management.
• Routing: Mechanisms for handling navigation within the application, including managing URLs and rendering different
views.
• Data Binding: Techniques for synchronizing data between the application's model (data) and view (UI), ensuring
consistency and responsiveness.
• Testing Support: Built-in testing frameworks and tools for writing and running automated tests to ensure the reliability
and quality of the code.
Node JS
Node.js is a server-side JavaScript runtime environment that allows developers to run JavaScript
code on the server.
• Real-World Example: Imagine you're running a bakery. Node.js acts as the oven in your bakery
kitchen. It helps you bake different types of goods (web applications) efficiently and reliably. You
can use Node.js to handle customer orders (HTTP requests), prepare ingredients (process data),
and deliver freshly baked goods (responses) to your customers.
• Why Use Node.js?
• JavaScript Everywhere: With Node.js, you can use JavaScript for both frontend and backend
development, creating a unified development environment.
• Scalability: Node.js is known for its non-blocking, event-driven architecture, making it suitable
for building highly scalable and performant applications.
• Rich Ecosystem: Node.js has a vast ecosystem of modules and libraries (npm) that allow
developers to extend its functionality and easily integrate with other technologies.
Express.js
• Definition: Express.js is a web application framework for Node.js, designed to simplify the process of
building web applications and APIs.
• Real-World Example: Express.js acts as the recipe book in your bakery kitchen. It provides you with
predefined recipes (routing, middleware) and ingredients (functions, utilities) to create a variety of
baked goods (web applications) quickly and easily.
• Why Use Express.js?
• Minimalistic and Flexible: Express.js provides a minimalist and unopinionated framework that allows
developers to build applications according to their preferences and requirements.
• Robust Routing: Express.js offers a powerful routing system that enables developers to define
endpoints and handle various HTTP requests efficiently.
• Middleware Support: Express.js supports middleware functions, allowing developers to add custom
logic and perform tasks like authentication, logging, and error handling.
React.js
• Definition: React.js is a JavaScript library for building user interfaces, developed by Facebook.
• Real-World Example: Imagine you're designing a storefront for your bakery. React.js acts as the
display case in your bakery shop. It allows you to showcase your delicious baked goods (user
interface components) in an attractive and interactive manner, enticing customers to make
purchases.
• Why Use React.js?
• Component-Based Architecture: React.js follows a component-based architecture, allowing
developers to create reusable UI components and compose complex interfaces easily.
• Virtual DOM: React.js uses a virtual DOM for efficient rendering, minimizing DOM manipulations
and improving performance.
• Declarative Syntax: React.js provides a declarative syntax that makes it easy to understand and
maintain UI code, enhancing developer productivity and collaboration.
Next.js
• Definition: Next.js is a React framework for building server-rendered and statically generated web applications.
• Real-World Example: Next.js acts as the automated assistant in your bakery shop. It helps you streamline and
automate the baking process (application development) by providing pre-configured settings and templates
(routing, data fetching) to create delicious baked goods (web applications) efficiently.
• Why Use Next.js?
• Server-Side Rendering (SSR) and Static Site Generation (SSG): Next.js supports SSR and SSG, enabling developers
to improve SEO, performance, and user experience by generating HTML pages on the server or at build time.
• Automatic Code Splitting: Next.js automatically splits JavaScript code into smaller chunks, optimizing page
loading times and reducing bundle sizes.
• Built-in Features: Next.js comes with built-in features like file-based routing, API routes, and image optimization,
saving developers time and effort in configuring and setting up projects.
Reading Resources
• Client Side JavaScript VS Server-Side
https://www.tutorialspoint.com/javascript/javascript_overview.html
JS Syntax
• JavaScript syntax is the set of rules, how JavaScript programs are constructed.
• JavaScript can be implemented using JavaScript statements that are placed within the <script>...
</script> HTML tags in a web page.
JS Variables
In JavaScript, you can have two types of values.
• Fixed values (Literals)
• Variables (Dynamic values)
• In the below code, 10 is a Number literal and ‘Hello’ is a string literal.
Dynamic Variables
• In JavaScript, variables are used to store the dynamic data.
• You can use the below keyword to define variables in JavaScript.
 var
 let
 const
• You can use the assignment operator (equal sign) to assign values to the variable.
• In the below code, variable a contains the numeric value, and variable b contains the text (string).
JS Syntax
Whitespace and Line Breaks: Case Sensitivity:
• JavaScript ignores spaces, tabs, and newlines in • JavaScript is case-sensitive, meaning identifiers
programs, allowing for flexible formatting. must be consistently capitalized.
• Consistent formatting improves code readability. • Variables "time" and "Time" are considered
• Semicolons are Optional: different in JavaScript.
• While semicolons are typically used to end Naming Conventions:
statements, they are optional if each statement is • Use camel case for variable and function names.
on a separate line. • Pascal Case: SmartWatch, MobileDevice
• However, it's good practice to use semicolons for •
Lower Camel Case: smartwatch, mobileDevice
clarity and consistency.
• Avoid hyphens in names; underscores are
acceptable.
JS Syntax
Keywords and Identifiers: processed by JavaScript)
JavaScript has reserved keywords (e.g., • Operators
function, let, const) for specific tasks. • Arithmetic, logical, bitwise, etc.
• Identifiers (variable, function, object names) • Use + for string concatenation.
must follow certain rules:
• Expressions:
• Start with a letter, $, or _
• Combine variables, values, and operators.
• Can contain letters, numbers, $, and _
• Example: a * b (multiplication), c / 2 (division)
• Avoid starting with digits or hyphens.
• Character Set
Comments:
• JavaScript supports Unicode characters for
• Single-line comments: // special symbols and emojis.
• Multi-line comments: /* */
• HTML comments: <!-- --> (recognized but not
Reading Resources

• https://www.tutorialspoint.com/javascript/javascript_syntax.html
• https://www.codewithharry.com/tutorial/js/
Hello World Program
1. In JavaScript, the simplest way to print "Hello World" is to use document.write() method.
The document.write() method writes the content (a string of text) directly to the HTML
document or web page.
2. We can use the window alert() method to print "Hello Word" in a dialogue box.The alert()
is a window method that instruct the browser to display an alert box with the message.
We can write alert without passing any message to it.
3. The console.log() is a very convenient method to print the message to web Console. It is
very useful to debug the JavaScript codes in the browsers.
4. The innerHTML property of an HTML element defines the HTML content of the element.
We can use this property to display the Hello World message. By changing
the innerHTML property of the element, we can display the message in HTML document
or webpage. To use innerHTML property of an element, we need to access that element
first. We can use document.getElementById() method to access the element.
Hello World Program Using JS(2)
• We call document.write method which writes a
string into our HTML document. This method can be
used to write text, HTML, or both.
• We can use the console.log to print strings or
JavaScript objects. Here in code snippet, we have
passed "Hello World" as a string argument to the
console.log() method.
Hello World Program Using JS

We can write alert() method as window.alert(). As window object is a global scope object, we can
skip the "window" keyword.
document.getElementById Example
• In the example below, we define a div element with id, "output". We access this element using the
document.getElementById("output"). Then we change the innerHTML property and display our message,
"Hello World".