JavaScript
A powerful programming language that
can add interactivity to a website.
Contents
1. Introduction
2. Variables and Constants
3. Console
4. Output
5. Comment
6. JavaScript Core
3
1. Introduction
JavaScript was invented by Brendan Eich in 1995.
It was developed for Netscape 2, and became the ECMA-262 standard in
1997.
After Netscape handed JavaScript over to ECMA, the Mozilla foundation
continued to develop JavaScript for the Firefox browser.
HTML and CSS give a website structure and style, JavaScript lets you add
functionality and behaviors to your website. This allows visitors to interact
with your website in various creative ways.
4
1. Introduction
In September 1995, a Netscape programmer named Brendan Eich developed
a new scripting language in just 10 days. It was originally called Mocha
5
1. Introduction
• What Is ECMAScript?
When JavaScript was first introduced by Netscape, there was a war going
on between all the browser vendors on the market at the time. Microsoft and
several other browser vendors implemented their own versions of
JavaScript (with different names and syntax) in their respective browsers.
This created a huge headache for developers, as code that worked fine on
one browser was a total waste on another.
6
1. Introduction
As a result, Netscape submitted JavaScript to the European Computer
Manufacturers Association (ECMA) for standardization in order to ensure
proper maintenance and support of the language. Since JavaScript was
standardized by ECMA, it was officially named ECMAScript.
7
1. Introduction
8
1. Introduction
9
1. Introduction
Before JavaScript was primarily used in:
• making web pages interactive
Nowadays, JavaScript is also used in:
• server-side applications
• game development
• mobile apps
• web apps
10
1. Introduction
you can run JavaScript in several ways:
• Using console tab of web browsers
• Using Node.js
• By creating web pages
1. Using Console Tab of Web
Browsers
All the popular web browsers have built-
in JavaScript engines.
11
1. Introduction
2. Using Node.js
Node is a back-end run-time environment for executing JavaScript code. To
run JS using Node.js, follow these steps:
• Install the latest version of Node.js.
• Install an IDE/Text Editor like Visual Studio Code. In VS code, create a
file > write JS code > save it with .js extension.
12
1. Introduction
Hit the command: $node hello.js
13
1. Introduction
3. By Creating Web Pages
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./index.js"></script>
</head>
<body>
<header>
<nav></nav>
</header>
</body>
</html> 14
2. Variable and Constant
In programming, a variable is a container ( storage area ) to hold data. For
example,
let num = 5;
Here, num is a variable. It's storing 5.
Declare Variables
In
varJavaScript,
x; we use either var or let keyword to declare variables. For
example,
let y;
15
2. Variable and Constant
Var vs Let
Note: It is recommended we use let instead of var. However, there are a few
browsers that do not support let
16
2. Variable and Constant
Initialize Variables
We use the assignment operator = to assign a value to a variable.
let x;
x = 5;
You can also initialize variables during its declaration.
let x = 5;
let y = 6;
If you use a variable without initializing it, it will have an undefined value.
let x; // x is the name of the variable
console.log(x); // undefined 17
2. Variable and Constant
Rules for Naming JavaScript Variables
1. Variable names must start with either a letter, an underscore _, or the
dollar sign $. For example,
//valid
let a = 'hello';
let _a = 'hello';
let $a = 'hello';
2. Variable names cannot start with numbers. For example
//invalid
let 1a = 'hello'; // this gives an error
18
2. Variable and Constant
3. JavaScript is case-sensitive. So y and Y are different variables. For example,
let y = "hi";
let Y = 5;
console.log(y); // hi
console.log(Y); // 5
4. Keywords cannot be used as variable names. For example
//invalid
let new = 5; // Error! new is a keyword.
19
2. Variable and Constant
20
2. Variable and Constant
Constants
The const keyword was also introduced in the ES6(ES2015) version to create
constants.
const x = 5;
Once a constant is initialized, we cannot change its value.
const x = 5;
x = 10; // Error! constant cannot be changed.
console.log(x)
Also, you cannot declare a constant without initializing it.
21
3. Console
All modern browsers have a web console for debugging.
The console.log() method is used to write messages to these consoles. For
example,
let sum = 44;
console.log(sum); // 44
The console object can be accessed from any global object. It's exposed
as Window.console
console.clear(), and can be referenced as console. It has many methods
console.log("Welcome")
such as:
console.count()
console.error("Hey error")
console.dir(window.location)
console.info("Hey Im your info") 22
4. Comment
• JavaScript comments can be used to explain JavaScript code, and to make it
more readable.
• Comments can also be used to prevent execution, when testing alternative
code.
• There are 2 types of comment.
· Single Line Comments ( // )
· Multi-line comment ( /* … */ )
• Note:
· It is most common to use single line comments
· Block comments are often used for formal documentation. 23
5. Output
Rendering User Interfaces
When a user visits a web page, the server returns an HTML file to the browser
that may look like this:
24
5. Output
The browser then reads the HTML and constructs the Document Object Model
(DOM).
What is the DOM?
The DOM is an object representation of the HTML elements. It acts as a bridge
between your code and the user interface, and has a tree-like structure with
parent and child relationships.
25
5. Output
26
5. Output
You can manipulate the interfaces, by using DOM methods.
• HTML DOM methods are actions you can perform (on HTML Elements).
• HTML DOM properties are values (of HTML Elements) that you can set or
change.
<h2>My First Page</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
27
6. JavaScript Core
The next lessons, you will learn the core concept of JavaScript:
• Objects
• Arrays and array methods
• Functions and Arrow Functions
• Destructuring
• Template literals
• Ternary Operators
28
Thank you
Perfect Practice, Does Perfect Thing
29
