0% found this document useful (0 votes)
3 views

Javascript Tutorial

The document provides an overview of JavaScript, detailing its eight data types, various events, display possibilities, variable declaration methods, operators, string methods, template literals, and APIs such as Storage and Console. It also includes examples of JSON data types and console methods. The content is aimed at enhancing understanding of JavaScript fundamentals and functionalities.

Uploaded by

dheremangesh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
3 views

Javascript Tutorial

The document provides an overview of JavaScript, detailing its eight data types, various events, display possibilities, variable declaration methods, operators, string methods, template literals, and APIs such as Storage and Console. It also includes examples of JSON data types and console methods. The content is aimed at enhancing understanding of JavaScript fundamentals and functionalities.

Uploaded by

dheremangesh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

JAVASCRIPT

JavaScript has 8 Datatypes


1. String

2. Number

3. Bigint

4. Boolean

5. Undefined

6. Null

7. Symbol

8. Object

https://www.linkedin.com/in/pushpendratips
JAVASCRIPT

JavaScript Events
1. onclick

2. onchange

3. onkeydown

4. onload

5. onmouseover

6. onmouseout

7. onmousedown

8. onmouseup

9. onmousemove

https://www.linkedin.com/in/pushpendratips
JAVASCRIPT

JavaScript Display Possibilities


Writing into an HTML element, using innerHTML
Writing into the HTML output using document.write()
Writing into an alert box, using window.alert()
Writing into the browser console, using console.log().

3 Ways to Declare a JavaScript Variable:


Using va
Using le
Using const

https://www.linkedin.com/in/pushpendratips
JAVASCRIPT

JavaScript Operators
Arithmetic Operator
Assignment Operator
Comparison Operator
Logical Operator
Conditional Operator
Type Operators

JavaScript Comparison Operators


== equal to

== equal value and equal type

!= not equal

!== not equal value or not equal type

https://www.linkedin.com/in/pushpendratips
JAVASCRIPT

JavaScript Comparison Operators


> greater than

< less than

>= greater than or equal to

<= less than or equal to

? ternary operator

JavaScript Logical Operators


&& logical and

|| logical or

! logical not

https://www.linkedin.com/in/pushpendratips
JAVASCRIPT

JavaScript Type Operators


typeof Returns the type of a variable

instanceof Returns true if an object is an instance

of an object type

JavaScript Statements
let x, y, z; // Statement 1

x = 15; // Statement 2

y = 16; // Statement 3

z = x + y; // Statement 4

https://www.linkedin.com/in/pushpendratips
JAVASCRIPT

JavaScript Declare
let a, b, c; // Declare 3 variables

a = 15; // Assign the value 5 to a

b = 16; // Assign the value 6 to b

c = a + b; // Assign the sum of a and b to c

When separated by semicolons, multiple statements

on one line are allowed:

a = 5; b = 6; c = a + b;

JavaScript Syntax
// How to create variables : var x;let y;

// How to use variables : x = 5;y = 6;

let z = x + y;

https://www.linkedin.com/in/pushpendratips
JAVASCRIPT

JavaScript Strings
JavaScript strings are for storing and manipulating text.
Example
let text = "Pushpendra";

console.log(text)

String Length
Example
let text = "Pushpendra";

console.log(text)

https://www.linkedin.com/in/pushpendratips
JAVASCRIPT

JavaScript String Methods


String length
String slice()
String substring()
String substr()
String replace()
String replaceAll()
String toUpperCase()
String toLowerCase()
String concat()

https://www.linkedin.com/in/pushpendratips
JAVASCRIPT

JavaScript String Methods


10. String trim()

11. String trimStart()

12. String trimEnd()

13. String padStart()

14. String padEnd()

15. String charAt()

16. String charCodeAt()

17. String split()

https://www.linkedin.com/in/pushpendratips
JAVASCRIPT

JavaScript Template Literals


Template Literal
Template String
String Template
Back-Tics Syntax
Back-Tics Syntax
Template Literals use back-ticks (``) rather

than the quotes ("") to define a string:


Example
let text = `Pushpendra`;

console.log(text)

https://www.linkedin.com/in/pushpendratips
JAVASCRIPT

JavaScript Template Literals


Quotes Inside Strings

With template literals, you can use both single

and double quotes inside a string:

Example
let text = `He's often called "Push"`;

console.log(text)

Multiline Strings

Template literals allows multiline strings:

https://www.linkedin.com/in/pushpendratips
JAVASCRIPT

JavaScript Template Literals


Example
let text =

`The quick

brown fox

jumps over

the lazy dog`;


console.log(text)

Variable Substitutions

Template literals allow variables in strings:

https://www.linkedin.com/in/pushpendratips
JAVASCRIPT

JavaScript Template Literals


Example
let firstName = "Pushpendra";

let lastName = "Tripathi";

let text = `Welcome ${firstName}, ${lastName}!`;

console.log(text)

JavaScript Date Formats


JavaScript Date Input
ISO Date "2015-03-25" (The International Standard)

Short Date "03/25/2015"

Long Date "Mar 25 2015" or "25 Mar 2015"

https://www.linkedin.com/in/pushpendratips
JAVASCRIPT

Storage API
Storage Object Properties and Methods
1- clear()

2- getItem()

3- key()

4- length

5- setItem()

6- removeItem()

7- window.localStorage

8- window.sessionStorage

https://www.linkedin.com/in/pushpendratips
JAVASCRIPT

Console API
The Console Object
The console object provides access to the browser's
debugging console.

1- assert()
9- log()

2- clear()
10- table()

3- count()
11- time()

4- error()
12- timeEnd()

5- group()
13- trace()

6- groupCollapsed()
14- warn()
7- groupEnd()

8- info()

https://www.linkedin.com/in/pushpendratips
JAVASCRIPT

JavaScript Array Object


1- concat()
13- indexOf()
25- reverse()

2- constructor
14- isArray()
26- shift()

3- copyWithin()
15- join()
27- slice()

4- entries()
16- keys()
28- some()

5- every()
17- lastIndexOf()
29- sort()

6- fill()
18- length
30- splice()

7- filter()
19- map()
31- toString()

8- find()
20- pop()
32- unshift()

9- findIndex()
21- prototype
33- valueOf()
10- forEach()
22- push()

11- from()
23- reduce()

12- includes() 24- reduceRight()

https://www.linkedin.com/in/pushpendratips
JAVASCRIPT

JSON Data Types


JSON Strings
JSON Arrays

Example
Example

{"name":"push"} {"employees":["Push", "Anna", "Peter"]}

JSON Booleans

JSON Numbers
Example

Example
{"sale":true}
{"age":30} JSON null

Example

JSON Objects
{"middlename":null}
Example

{"employee":{"name":"Push", "age":20, "city":"New York"}}

https://www.linkedin.com/in/pushpendratips
JAVASCRIPT
console in JavaScript
info() method

Example

clear() Method
let tips = "Pushpendra Tripathi"

Example
console.info(tips);
let tips = "PushpendraTips"

console.log(tips)

console.clear() log() Method

Example

let tips = "Pushpendra Tripathi"

error() Method

console.log(tips);
Example

let name = "Pushpendra"

console.error(name,’This is a simple error’);

https://www.linkedin.com/in/pushpendratips
JAVASCRIPT
console in JavaScript
warn() Method

Example

let tips = "This is a warning!"

console.warn(tips);

table() method =>Array

Example

console.table(["HTML","CSS","JAVASCRIPT"]);

table() method =>Object

Example

({fName:"Pushpendra", lName:"Tripathi"});

https://www.linkedin.com/in/pushpendratips
Pushpendra Tripathi
Thanks for reading!

Follow my profile for more

coding related contents


Twitter: https://twitter.com/pushpendratips

Instagram: https://www.instagram.com/pushpendratips

Telegram: https://telegram.me/pushpendratips

You might also like