The basics of javascript, Slides of Technology

Download The basics of javascript and more Slides Technology in PDF only on Docsity!

PART 3

JAVASCRIPT – THE BASICS

PREPARED BY: ENG. SAMER HUWARI

INTRODUCTION

• Declaring Variables
• Data Types
• Operators
• Type Conversion
• Flow Control
• Functions
• Classes

DECLARING VARIABLES - SCOPES

• Scope essentially means where these variables are available for use.
• In JavaScript, there are 3 types of scope: global scope, function scope, and block

scope.

• Scopes are basically where you do define your variable which leads to

defining the access level to that variable.

• Function and block scopes are called local scopes.
• Keep in mind that ‘block’ is any piece of code surrounded by curly brackets { }.

For example, function-scoped

variables can be accessed inside

block scope, but block-scoped

variables can’t be accessed

inside the function scope.

DECLARING VARIABLES - SCOPES

DECLARING VARIABLES - VAR

• In ‘var’ , variables can be re-declared and updated!
• It might not be a problem if you knowingly want to redefined the variable, it

becomes a problem when you do not realize that the variable has already

been defined before.

• This will likely cause a lot of bugs in your code and that is why ‘ let’ and ‘ const’

are necessary.

DECLARING VARIABLES - LET

• ‘let’ is block-scoped variable declaration which makes it only available for use

within that block.

• ‘let’ can be updated but not re-declared if it is in the same scope. Although a

‘let’ variable can be re-declared if it is in different scope.

• Since a variable cannot be declared more than once within a scope, then the

“re-declaring and updating” problem discussed earlier with ‘var’ does not

occur.

DECLARING VARIABLES - CONST

• ‘const’ shares the same scope properties with ‘let’, they can only be accessed

within the block they were declared in.

• The only difference is ‘const’ cannot be updated or re-declared! // You can’t do this //------------------------------ const hello = "Hello"; hello = "Hello World!"; // error // And you can’t do this //------------------------------ const hello = "Hello"; const hello = "Hello World!"; // error

DECLARING VARIABLES - CONST

• Every ‘const’ must be initialized upon declaration.
• But, when dealing with objects, we can change the property values. // This Is an object const response = { message: "Hello", times: 4 } // You cannot do this response = { words: "Hello", number: "five" } // error // This Is an object const response = { message: "Hello", times: 4 } // You CAN do this response.message = "Hello World!";

DATA TYPES - EXAMPLES

// String let name = "Samer"; let lastName = 'Huwari'; // notice the single quote // Numbers let age = 33 ; let y = 123e5; // 12300000 let z = 123e- 5 ; // 0. let price = 39.95; // Object let car = {'brand' : 'Mercedes', 'year': 2019 , }; // Array let colors = ['red','blue','black']; //undefined let x;

OPERATORS – ARITHMETIC OPERATORS

Operator Description

Adds two numeric operands.

Subtract right operand from left operand

Multiply two numeric operands.

/ Divide left operand by right operand.

% Modulus operator. Returns remainder of two operands.

Increment operator. Increase operand value by one.

Decrement operator. Decrease value by one.

OPERATORS – LOGICAL OPERATORS

Operator Description

known as AND operator. It checks whether two operands are non-zero or not (0, false, undefined, null or "" are considered as zero). It returns 1 if they are non-zero; otherwise, returns 0.

known as OR operator. It checks whether any one of the two operands is non- zero or not (0, false, undefined, null or "" is considered as zero). It returns 1 if any one of them is non-zero; otherwise, returns 0.

known as NOT operator. It reverses the boolean result of the operand (or condition). !false returns true, and !true returns false.

OPERATORS - ASSIGNMENT OPERATORS

Operator Description

= Assigns right operand value to the left operand.

+= Sums up left and right operand values and assigns the result to the left operand.

• = Subtract right operand value from the left operand value and assigns the result to the left operand.

*= Multiply left and right operand values and assigns the result to the left operand.

Divide left operand value by right operand value and assign the result to the left operand.

Get the modulus of left operand divide by right operand and assign resulted modulus to the left operand.

TYPE CONVERSION

• There are two types of type conversion in JavaScript: Implicit Conversion

(automatic type conversion) and explicit Conversion (manual type conversion

using functions).

• Examples of implicit conversion: // Implicit Conversion to String console.log(' 3 ' + 2 ) // "32" console.log(' 3 ' + true); // "3true" // Implicit Conversion to Number console.log(' 4 ' - 2 ); // 2 console.log(' 4 ' / 2 ); // 2 // Non-numeric String Results to NaN console.log('hello' - 'world'); // NaN //Implicit Boolean Conversion to Number console.log( 4 + true); // 5

TYPE CONVERSION

• Explicit conversion functions:
• Number()
• Boolean()
• String()
• parseFloat(), and parseInt() Check this link for examples: https://www.w3schools.com/js/js_type_conversion.asp