Scribd
Upload
8 views29 pages

1. JavaScript Introduction

JavaScript, created by Brendan Eich in 1995, is a powerful programming language that adds interactivity to websites and has evolved to support server-side applications, game development, and mobile apps. It was standardized as ECMAScript to ensure consistent implementation across different browsers. The document covers key concepts such as variables, constants, the console, comments, output, and core JavaScript concepts like objects and functions.

Uploaded by

Arofath
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
8 views29 pages

1. JavaScript Introduction

JavaScript, created by Brendan Eich in 1995, is a powerful programming language that adds interactivity to websites and has evolved to support server-side applications, game development, and mobile apps. It was standardized as ECMAScript to ensure consistent implementation across different browsers. The document covers key concepts such as variables, constants, the console, comments, output, and core JavaScript concepts like objects and functions.

Uploaded by

Arofath
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 29

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

You might also like