Introduction
to
JavaScript
JavaScript
● JavaScript is a high-level, interpreted programming language
primarily used to add interactivity and dynamic behavior to web
pages.
● It runs inside the web browser and allows developers to manipulate
HTML and CSS, respond to user events (like clicks, typing, and
scrolling), and communicate with servers.
History of JavaScript
Creation
● JavaScript was created in 1995 by Brendan Eich at Netscape.
● It was developed in just 10 days.
● Initially, it was named Mocha, then LiveScript, and finally JavaScript.
Why it was created
● At that time, web pages were static (only HTML and CSS).
● Netscape wanted a language that could:
○ Validate forms
○ Create animations
○ Respond to user actions
So JavaScript was created to make web pages interactive.
Standardization
● In 1997, JavaScript was submitted to ECMA International.
● It became a standard language called ECMAScript (ES).
● This helped different browsers implement JavaScript consistently.
Major versions
● ES3 (1999): JavaScript became stable and widely used.
● ES5 (2009): Added new features like strict mode.
● ES6 / ES2015: Major update with modern features
Speed and popularity
● In 2008, Google introduced V8 engine.
● V8 made JavaScript much faster using JIT compilation.
● In 2009, [Link] was released, allowing JavaScript to run on servers.
Compiler
A compiler is a software program that translates the entire source code
written in a high-level programming language into machine code (or
intermediate code) before the program is executed.
Compilation Process
Interpreter
An interpreter is a software program that executes code step by
step. In many modern languages, the source code is first converted
into bytecode, and then the interpreter executes that bytecode line
by line.
Interpretation Process
Difference between Machine Code and Byte
Code
Aspect Byte Code Machine Code
Level Intermediate Code Low-level Code
Generated From Source code Source code (compiler)
Executed by Virtual Machine (VM) CPU (directly)
Platform Dependency Platform Independent Platform dependent
Portability High Low
Execution Speed Slower Faster
Need of Translator Requires VM / Interpreter No translator needed
Start-up Time Faster Slower
ECMAScript
ECMAScript (ES) is the standard specification that defines how JavaScript should work.
In simple words:
ECMAScript is the rulebook for JavaScript.
Why ECMAScript is needed
Before ECMAScript:
● Different browsers behaved differently
● JavaScript code worked in one browser but failed in another
So in 1997, JavaScript was standardized by ECMA International to ensure consistency.
ECMAScript Specifications
How JS Executes
1. Tokaniation
2. Syntax Analysis OR Parsing
3. AST (Abstract Syntax Tree)
4. Byte Code
5. Execution
JavaScript Execution
Tokenization
JS Code breaks into tokens like ( keywords, literals, operators, identifiers ).
Parsing
JavaScript Engine
A JavaScript engine is a program that executes JavaScript code.
It reads JavaScript, converts it into instructions, and runs it on the computer.
JIT (Just In Time) Compiler
JIT Compiler
JIT (Just-In-Time compilation) is a technique used by modern programming language
runtimes to convert code into machine code at runtime, right when it’s needed,
instead of doing everything beforehand.
Why JIT is needed
● Interpreted code is easy to run but slow
● Fully compiled code is fast but less flexible
● JIT combines both: flexibility + speed
<script> tag
The <script> tag is used to include and run JavaScript code in an HTML page.
Basic Syntax:-
● Internal JS:-
<script>
[Link]("Hello JavaScript");
</script>
● External JS:-
<script src="[Link]"></script>
Synchronous and Asynchronous
async and defer attribute
async:- The word async in JavaScript means “non-blocking” — code that does not stop the
execution of the rest of the program
How it works:-
● Script downloads in parallel with HTML parsing
● Executes as soon as download finishes
● Execution order is NOT guaranteed
defer:- defer is an attribute of the <script> tag that tells the browser to download the JavaScript
file in parallel with HTML parsing but execute it only after the HTML is fully parsed.
How it works
● Script downloads in parallel
Executes after HTML parsing is complete
● Execution order is preserved
Console methods
1. [Link]() :- Prints normal messages.
2. [Link]() :- Shows error messages (red color).
3. [Link]() :- Shows warning messages (yellow color).
4. [Link]() :- Shows information messages.
5. [Link]() :- Clears the console screen.
6. [Link]() :- Displays arrays/objects in table format.
7. [Link]() :- Used to check conditions