JavaScript - Lesson 01

Lecture # 1
Basic JavaScript
Variable, Data types, String Methods
Presented by:
Ahsan Ali Mansoor
4+ Years of experience / Team Lead (React JS)
Sr. Full Stack JavaScript Developer at eBridge.tech
Setup Development Environment
Browser: Google Chrome
Code editor: Visual Studio code (or any of your choice)
Visual Studio Extensions:
Bracket Pair Colorizer
Elm Emmet
ES7 React/Redeux/GraphQL/React-Native snippets
ESLint
Live Server
Prettier - Code formatter
Let’s start coding
• Console log Hello world
• Two ways to write scripts
• Internal in file
• External File: When “src” attribute found in script tag, the inside
script tag code will be skipped.
You can write JS directly in browser console as well.

A Brief Introduction to JavaScript
• JavaScript is a lightweight, cross-platform, object-Based(object oriented) computer
programming language
• JavaScript is one of the three core technologies of web development
Today, JavaScript can be used in different places:

Client-side: JavaScript was traditionally only used in the browser
Server-side: Thanks to node.js, we can use JavaScript on the Server as well
• JavaScript is what made modern web development possible

• Dynamic effects and interactivity
• Modern web application that we can interact with
• Frameworks / libraries like React and angular are 100% based on JavaScript: you
need to master JavaScript in order to use them!
Role of JavaScript in Web Development
• HTML: For content

• CSS: For Presentation and styling
• JS: For make it Dynamic / Add programing
JavaScript Versions
• When JavaScript was created, it initially had another name: “LiveScript”. But
Java was very popular at that time, so it was decided that positioning a new
language as a “younger brother” of Java would help.
• But as it evolved, JavaScript became a fully independent language with its

own specification called ECMAScript, and now it has no relation to Java at all.
• ES5 Came with a lot of advancement in language then ES6 and next versions
of JS called as ES Next.
Variables and Data Types
• Variables (var, let, const)
• Variable naming conventions
• In JavaScript, there are six different Primitive (Non object / simple) data
types:
Number, String, Boolean, Undefined, symbol and Null.
• Dynamic typing
Variable Mutation and Type Coercion
Comments
There are two type of comments single line (//) and multiline (/**/)
typeof Operator
typeof returns the type of passed value or variable i.e. typeof “text”
Type coercion: when JavaScript automatically change variable type i.e.

number to string when we concatenate it with a string.
Type coercion also occur when we use == operator instead of ===
Mutation: when we use same variable but assign it a different data type value
i.e. store 28 then ‘twenty-eight’.
JavaScript String Methods
• JavaScript, methods and properties are also available to primitive values, because
JavaScript treats primitive values as objects when executing methods and properties.
• length //return the total length count
• indexOf("locate") //returns the index of (the position of) the first occurrence can also use
in array. It is Case sensitive.
• lastIndexOf() //method returns the index of the last occurrence
• Both indexOf(), and lastIndexOf() return -1 if the text is not found.
• indexOf("locate", 15) //Both methods accept a second parameter as the starting position
for the search:
• search() //method searches a string for a specified value and returns the
position of the match
The two methods, indexOf() and search(), are equal?

Are they accept the same arguments (parameters), and return the same value?
The two methods are NOT equal. These are the differences:
• The search() method cannot take a second start position argument.
• The indexOf() method cannot take powerful search values (regular
expressions).
All String Methods are case sensitive.

Extracting String Parts
There are 2 methods for extracting a part of a string:

• slice(start, end)
• substring(start, end)
slice(start, end)
• extracts a part of a string and returns the extracted part in a new string.
• The method takes 2 parameters: the start position, and the end position
(end not included).
• slice(-12, -6) //If a parameter is negative, the position is counted from the
end of the string.
• slice(7) //If you omit the second parameter, the method will slice out the
rest of the string
• slice(-12) //counting from the end
substring(start, end) Method
• substring() is similar to slice().

• The difference is that substring() cannot accept negative indexes.
• If you omit the second parameter, substring() will slice out the rest of the
string like slice method.
replace(old string, new string) Method
• replace() method does not change the string it is called on. It returns a new
string.
• By default, the replace() method replaces only the first match:
• By default, the replace() method is case sensitive.
• replace(/MICROSOFT/i, "W3Schools") // To replace case insensitive, use a
regular expression with an /i flag (insensitive)
• replace(/Microsoft/g, "W3Schools") // To replace all matches, use a regular
expression with a /g flag (global match)
Note that regular expressions are written without quotes.

Converting to Upper and Lower Case
• toUpperCase()
• toLowerCase()
• text1.concat(" ", text2)
The concat() method can be used instead of the plus operator. These two
lines do the same:
var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ", "World!");
Note: All string methods return a new string. They don't modify the original string.
Formally said: Strings are immutable: Strings cannot be changed, only replaced.
trim() //method removes whitespace from both sides of a string
Extracting String Characters
var str = "HELLO WORLD";
There are 3 methods for extracting string characters:

charAt(position) //method returns the character at a specified index (position) in a
string
str.charAt(0); //returns H
charCodeAt(position) //method returns the unicode of the character at a specified
index in a string
str.charCodeAt(0); // returns 72
Property access [ ] //ECMAScript 5 (2009) allows property access [ ] on strings
str[0]; // returns H
We can not do like str[0] = "A"

Converting a String to an Array
var txt = "a,b,c,d,e"; // String

txt.split(","); // Split on commas
txt.split(" "); // Split on spaces
txt.split("|"); // Split on pipe
Datatype - Symbol
Using Symbols
Each symbol is unique — even if created with the same label.
var sym1 = Symbol('a');

var sym2 = Symbol('b');
var sym3 = Symbol('a');
Console.log('sym1 === sym1: ' + (sym1 === sym1)); //sym1 === sym1: true
Console.log('sym1 === sym2: ' + (sym1 === sym2)); //sym1 === sym2: false
Console.log('sym1 === sym3: ' + (sym1 === sym3)); //sym1 === sym3: false

JavaScript - Lesson 01

Uploaded by

JavaScript - Lesson 01

Uploaded by

Lecture # 1

You can write JS directly in browser console as well.

Today, JavaScript can be used in different places:

• JavaScript is what made modern web development possible

• HTML: For content

• But as it evolved, JavaScript became a fully independent language with its

Type coercion: when JavaScript automatically change variable type i.e.

• length //return the total length count

• lastIndexOf() //method returns the index of the last occurrence

• Both indexOf(), and lastIndexOf() return -1 if the text is not found.

The two methods, indexOf() and search(), are equal?

All String Methods are case sensitive.

There are 2 methods for extracting a part of a string:

• substring() is similar to slice().

Note that regular expressions are written without quotes.

There are 3 methods for extracting string characters:

We can not do like str[0] = "A"

var txt = "a,b,c,d,e"; // String

var sym1 = Symbol('a');

You might also like