The Complete Lecture 1:

Javascript Course
Basics of
Javascript
-Bhavesh Bansal

@newtonschool
1
Table of Contents
● What is Javascript?
● Variable Declaration: var, let and const
● Differences between let, var and const
● Example of variable usages in real world scenarios

2
Considerations before we start... 🚀
In first few sections don’t stress about why code works and how to write efficient
code, or clean code. Just start learning and eventually you will understand
everything.

3
Let’s Start

4
 What is Javascript?
Animate elements and
make pages dynamic.

A S CR IPT
JAV
Run
back-end
The language that makes web code with
Node.js.
Create web, pages come alive. 🤯
mobile, or desktop
apps.

Fetch and process data dynamically.

5
Javascript Role in Web Development
Javascript adds logic to our web pages:-

NOUNS
CONTENT
<p>Data</p>

means “paragraph”
ADJECTIVES
p {color: red}

means “the
paragraph text is VERBS
red” p.hide();

PRESENTATION PROGRAMMING
means “hide the
LANGUAGE: BUILDING paragraph”
WEB APPLICATIONS
6
Features of Javascript
JavaScript is a programming language that makes websites interactive, like adding
buttons, animations, and live updates.

JavaScript is
Lightweight Used both in frontend single-threaded,
and backend meaning it
processes one
task at a time in
Single-threaded
a sequential
Easy to Write
order.

Language of Web

7
Comparing with other languages
Let’s compare javascript with other languages:-

A S CR IPT
JAV

8
Challenges in Javascript
JavaScript's dynamic typing can cause bugs, and browser inconsistencies
require extra effort for compatibility.

Challenges

Browser
Dynamic Typing
Inconsistency
“1” + 2 => 12
1 + 2 => 3 Behaviour of javascript code
varies depending on which
Such issues due to dynamic browser is loading your web
typing leads unpredictable page.
code behaviour
9
The Origin of JavaScript

10
A Browser Ahead of Its Time
In the 1990s, Netscape Navigator changed the web. It was the first widely-used
browser, capable of beautifully displaying HTML and CSS

A S CR IPT
JAV

NetScape Browser Early HTML/CSS website

11
A World of Static Websites
But there was a problem — web pages were static. They couldn’t respond
dynamically to user actions

12
Brainchild: Brendan Eich
To solve the issue, Brendan Eich was tasked with creating a Java-like scripting
language for the web, and amazingly, he accomplished it in just 10 days!
A S CR IPT
JAV

13
JavaScript Revolutionizes the Web
With Brendan Eich's creation of JavaScript, websites transformed from static
pages into dynamic, interactive experiences.

A S CR IPT
JAV

14
 Advancements in Javascript
1995 Brendan Eich creates the very first version of
JavaScript in just 10 days.
1996 Mocha changes to LiveScript and then to JavaScript, in
order to attract Java developers.`
ECMA releases ECMAScript 1 (ES1), the first official
1997
standard for JavaScript

2009 ES5 (ECMAScript 5) is released with lots of great new

features; Javascript
2015 ES6/ES2015 (ECMAScript 2015) was released: the was named
biggest update to the language ever! ‘Mocha’
2016 – ∞ Release of ES2016 / ES2017 / ES2018 / ES2019 / earlier.
ES2020 / ES2021 / … / ES2089
15
ECMA: Architect Behind Javascript
ECMA(European computer manufacturers association) plays a vital role in
standardizing and advancing JavaScript for modern development.

ECMA is a Committee
which regularly releases
standards for JavaScript
updates making
javascript more powerful
and efficient.

16
ES6: The Game Changer for JavaScript
ES6 introduced modern features like classes, modules, arrow functions, and
promises, making JavaScript more structured, concise, and easier to work with. And
not to forget let and const.

Most of the
javascript which we
use today is ES6.

17
How to run Javascript code?
You can run JavaScript directly in a browser using the Developer Console or by
embedding it in an HTML file with <script> tags.
A S CR IPT
JAV
1. Developer Console
2. Embedding in HTML( <script>...</script> tags)

18
Running javascript in Developer Console
Open the Developer Console in Chrome on Mac using Cmd + Option + J. Type
your JavaScript code in the Console tab and press Enter to execute it.
A S CR IPT
JAV
While on any
webpage, Press
Cmd + Option + J

In Console
you can write
javascript
code
19
Run javascript: script tag
We use script tag to either embed code inside it or link code:-

A S CR IPT
JAV

Embedding Code Linking External Code

20
Let’s Start Learning
Javascript Syntax

21
Variables in Javascript
Variables in JavaScript are containers for storing data values. They allow
developers to label and reference data in their programs,

PRIMITIVES

22
Storing Values in Javascript
JavaScript provides three keywords to declare variables: let, var, and const.
These can be used to declare and store values.

PRIMITIES

23
Syntax for variable declaration
Variables in JavaScript are declared using let, const, or var, followed by a
variable name.

Keyword used to declare a variable:-

PRIMITIVES

24
Similarly we can declare for let and const
Variables in JavaScript are declared using let, const, or var, followed by a
variable name, let is an better alternative of var

Once assigned,
the value of a
const variable
cannot be
changed or
PRIMITIVES
reassigned.

25
Why three keywords to store values?
Why does JavaScript need three different ways—var, let, and const—just to
store values? Is there really a big difference between them?

PRIMITIVES

26
Difference between var and let
let is the newer and preferred way to declare variables in JavaScript, offering
better control and safety compared to the older var.

Values
declared with
var and let can
be changed
PRIMITIVES

27
Understood!! But what about let and const
let lets you change the value later, while const keeps the value fixed once set.

28
But, how can we check the stored values?
We can check stored values in variables using console.log().

PRIMITIVES

29
Understanding console.log in javascript
console.log() is a JavaScript method that outputs messages or data, helping
developers debug and monitor code execution.

PRIMITIVES

30
Comments: The Footnotes of Code
Comments are like notes in a book, offering explanations without affecting the
code. Always comment your code, not just for others, but for your future self
too.

Comments helps you

understand the code
better later one.

31
Types of Comments
You can use either single line comments or multi-line comments in javascript.

Single Line Comments

Multi Line Comments

32
Comments: Single Line
Single-line comments are used to add brief explanations or notes within a
single line of code.

Single line comments start with // and end within the line.

33
Comments: Multi-Line
Multi-line comments are used to add longer explanations or comment out
multiple lines of code, enclosed between /* and */.

Use multi-line
comments for longer
explanations,
commenting out
blocks of code, or
providing detailed
documentation.

34
Some Real World Examples

35
Temperature Changes Over a Day
The temperature of a room or a city changes throughout the day.

In Programming:

PRIMITIVES

36
Bank Account Balance
Your bank account balance fluctuates with deposits and withdrawals.

In Programming:

PRIMITIVES

37
Speed of a Car
A car’s speed changes depending on driving conditions and actions.

In Programming:

PRIMITIVES

38
In Class Questions

39
References
1. MDN Web Docs - JavaScript: Comprehensive and beginner-friendly documentation for
JavaScript.
https://developer.mozilla.org/en-US/docs/Web/JavaScript
2. Eloquent JavaScript: A free online book covering JavaScript fundamentals and advanced topics.
https://eloquentjavascript.net/
3. JavaScript.info: A modern guide with interactive tutorials and examples for JavaScript learners.
https://javascript.info/
4. freeCodeCamp JavaScript Tutorials: Free interactive lessons and coding challenges to learn
JavaScript.
https://www.freecodecamp.org/learn/

40
Did you know?

JavaScript powers over

98% of websites,
making it most popular
programming
language! 🌐✨

41
Thanks
for
watching!

42