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 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 • ‘var’ is the oldest keyword to declare a variable in JavaScript. • ‘var’ is globally-scoped when declared outside a function, and function- scoped when declared inside a function. • Lets try this code and watch the ‘msg’ variable: var msg = "Hello!"; var times = 4; if (times > 3) { var msg = "Hello World!"; } console.log(msg); 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 - 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 • There are two groups of data types in JavaScript: 1. Primitive data types String represents sequence of characters e.g. "hello“. Number represents numeric values e.g. 100 Boolean represents Boolean value either true or false. Undefined represents undefined value. Null represents null i.e. no value at all. Object represents instance through which we can access members. Array represents group of similar values. RegExp represents regular expression. 2. Non-primitive (reference) data types OPERATORS – COMPARISON OPERATORS Operators Description == Compares the equality of two operands without considering type. === Compares equality of two operands with type. != Compares inequality of two operands. > Returns a boolean value true if the left-side value is greater than the right-side value; otherwise, returns false. < Returns a boolean value true if the left-side value is less than the right-side value; otherwise, returns false. >= Returns a boolean value true if the left-side value is greater than or equal to the right- side value; otherwise, returns false. <= Returns a boolean value true if the left-side value is less than or equal to the right-side value; otherwise, returns false. 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 • Explicit conversion functions: • Number() • Boolean() • String() • parseFloat(), and parseInt() Check this link for examples: https://www.w3schools.com/js/js_type_conversion.asp FLOW CONTROL • Loops: - For loop - While loop - Do-while loop • Conditional statements: - If, else if, else - Switch https://www.w3schools.com/js/js_if_else.asp FUNCTIONS • To declare a function in JavaScript: • The function name must be a valid JavaScript identifier. By convention, the function names are in camelCase and start with verbs like: getName(), isValid(), calcAge(). • DO NOT start a function name in capital letter! function functionName(parameters) { // function body // ... }