Introduction to JavaScript

Day - 1 (05-08-2025)
What is JavaScript ?
● JavaScript is a high-level, interpreted, single-threaded, dynamically typed,
object-oriented, and event-driven programming language that enables
developers to build interactive and responsive user interfaces in the
browser.
● Originally developed for client-side scripting in web pages, JavaScript is
now widely used on both the client-side (in browsers) and the server-side
(using platforms like [Link]).

○ High-Level
■ JavaScript is "high-level" because the code is written in a
language that's easy for humans to read and understand.
■ It abstracts away the complex, low-level details of how a
computer's hardware works, like memory management and
CPU instructions.
■ This makes it easier to write and debug code.
■ Example:
● Instead of having to manually manage memory, you
simply declare a variable.
○ Interpreted
■ Unlike a compiled language (which translates all code into
machine code before running), an "interpreted" language like
JavaScript is executed directly, line by line, by an interpreter.
■ The JavaScript engine in your browser reads the code and
executes it on the fly.
■ Example:
● You can write JavaScript code in a simple text file and
open it in a browser, and the browser's engine will
immediately interpret and run it. There's no separate
compilation step.

○ Single-Threaded
■ A thread is the smallest unit of a program that can be
executed.
 ■ Think of it as a single line of work or a path of execution within
a program.
■ A program is single-threaded when it has only one thread of
execution. This means it can only perform one task at a time.
The program must complete the current task before it can
move on to the next.
■ It can only execute one task at a time. This might sound
inefficient, but JavaScript uses an event loop to handle
asynchronous tasks (like fetching data from a server) without
blocking the main thread.
■ Example:
● Imagine a single chef in a kitchen. They can only chop
vegetables or boil water, but not both at the same time.
● However, if the chef needs to boil water for 10 minutes,
they'll put the pot on the stove and then go back to
chopping vegetables, checking back on the water later.
● This is what JavaScript's event loop does; it offloads
time-consuming tasks and continues with other code.

○ Dynamically Typed -
■ “Dynamically typed" means you don't have to specify the data
type (like string, number, etc.) of a variable when you declare
it. The JavaScript engine determines the type at runtime, and
the variable's type can change.

○ Object-Oriented
■ JavaScript is "object-oriented" because it organizes code
around objects, which are collections of data (properties) and
functions (methods). This allows for a modular and reusable
code structure.
■ Example: You can create an object to represent a car.

○ Event-Driven
■ "Event-driven" means that the execution of code is triggered
by events. Events are actions that occur on a web page, such
 as a user clicking a button, a page loading, or a form being
submitted.
■ Example: This code runs a function only when a button is
clicked.

What is JavaScript Engine ?

● A JavaScript (JS) engine is a program that executes JavaScript code.
● It's what makes your browser or a server-side environment like [Link]
able to understand and run the JavaScript you write.
● Every major web browser has its own JS engine; for example, Chrome
uses V8, Firefox uses SpiderMonkey, and Safari uses JavaScriptCore.
● How It Works
○ The process of a JS engine running your code can be broken down
into a few key steps.
1. Parsing:
a. The engine first reads your code and breaks it down into
a data structure called an Abstract Syntax Tree (AST).
b. This tree represents the code's structure, which makes
it easier for the computer to understand.
2. Compilation:
a. The engine then converts the AST into machine code,
which the computer's processor can directly execute.
This is often done using a Just-In-Time (JIT) compiler,
b. The JIT compiler first interprets the code and then, for
frequently run sections (called "hot code"), compiles it
into highly optimized machine code.
3. Execution:
a. The compiled machine code is then executed.
b. This is where the code actually runs, performing tasks
like manipulating the web page, handling user
interactions, or fetching data.
c. The engine uses a call stack to keep track of the
functions being executed and a memory heap to store
all the variables and objects.

4. Optimization:
a. During execution, the engine continuously monitors the
code. If it finds a section that's running slowly, it can re-
 compile it with more aggressive optimizations to
improve performance. This makes JavaScript
applications surprisingly fast.

History of JavaScript ?
● JavaScript is developed by Brendan Eich, a computer scientist and
programmer at Netscape Communications Corporation.
● The initial name of the JavaScript was the 'Mocha'. After that, it changed to
'LiveScript', and then 'JavaScript'.
● Between 1996 and 1997, the European Computer Manufacturers
Association (ECMA) standardized JavaScript. After that, 3 revisions of the
JavaScript have been done.

In ES5 (2009), [Link] was introduced to use JavaScript as a server-side

language. The ES6 (2015) was a significant revision of JavaScript, introducing
advanced features into JavaScript.

Day - 2 (06-08-2025)
Ways to implement JavaScript
There are three primary ways to implement JavaScript in a web page:

1. External JavaScript

● This is the most common and recommended method for larger projects
and is considered a best practice.
 ● You write your JavaScript code in a separate file with a .js extension, and
then you link to that file from your HTML document using the <script> tag
with the src attribute.

Why use it?

● Organization: It keeps your JavaScript, HTML, and CSS files separate,

making your code cleaner and easier to manage.
● Reusability: You can use the same .js file across multiple HTML pages
without having to copy and paste the code.
● Performance: The browser can cache the external file, which means it
doesn't have to download it again on subsequent page visits, leading to
faster load times.

2. Internal JavaScript

● With this method, you write your JavaScript code directly inside the
<script> tags within the HTML file.
● This is useful for small, simple scripts that are only needed on a single
page.
● Where to place it?
○ You can place the <script> tag in the <head> or the <body>.
○ The best practice is to place it just before the closing </body> tag.
○ This ensures the HTML content is fully loaded and rendered before
the JavaScript runs, preventing potential errors if the script tries to
manipulate an element that doesn't exist yet.

3. Inline JavaScript

● This method involves embedding JavaScript code directly into an HTML

element's attribute.
● It's often used with event handlers like onclick or onmouseover.
● While it can be quick for very simple tasks, it's generally discouraged for
larger projects because it mixes content (HTML) with behavior
(JavaScript), making the code harder to read and maintain.