# Javascript Detailed Review ## Javascript Introduction ### What is Javascript? - Javascript is used to make interactive web pages for example image slide effects, pop up animation. ### Where is this language used? - IOT - Hybrid Apps - Server Development ## Javascript Variable ### What is variable? - Variable is a place to put data in it. ### Variable Declaration and Initialization ```js var fruit; // variable declaration fruit = “apple”; // variable initialization var fruit = “apple”; ``` - Variable declaration : create a space to put data in it. - Variable initialization : send data to the created variable after variable declaration. ### Data Change ```js var fruit = "apple"; fruit = "banana"; ``` - We don't have to declare fruit variable again because we already declared and initialized fruit variable with "apple". ### How to check data in variables ```js var fruit = "apple"; console.log(fruit); // print "apple" ``` - console.log() is a command to check data in variables. ### Variable Naming Convention ```js // the name can't start with number var 1str; // X // the name has to be specific var randomNumber; // Don't use like rNumber(X) // avoid combinations that consist of uncertain words var tmax; // we don't know what "t" means in the name. ``` ### Javascript Connection to HTML file ```xml ``` - We can connect Javascript file to HTML file by adding script tag with src attribute and src is Javascript file path. ### Checking Variable Data ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1670503509029/tiY0SFaT7.png align="left") - F12 after right-click in chrome browser. ## Javascript Data Types ### What data types do javascript have? #### String ```js var str1 = "Hello World"; var str2 = "Nice to meet you"; var str3 = "20" // It is a string not number. var str1 = "Elice' // X We can't use single and double quotation marks together. var str2 = "He's a boy"; var str3 = 'He\'s a boy'; ``` #### Number ```js var num1 = 10; // integer var num2 = -10; // negative number var num3 = 3.14 // float ``` #### Function ```js var func = function() { console.log(""Func1); } // Create a function by Function Expression func1(); // Invoke a function ``` ```js function func1(){ console.log("Func1"); } // Create a function by Function Declaration func1(); // Invoke a function ``` ```js var area = function(width, height){ // width and height are parameters return width * height; } area(10,20) // 10 and 20 are arguments ``` #### Function Data Call ```js var area = function(width, height) { return width * height; } var result = area(10, 20); console.log(result); console.log(area(10, 20)) ``` #### Array ```js var fruit = ["apple", "pear", "watermelon"]; console.log(fruit); ``` - We can manage similar types of data in one variable. #### Array Data Extraction ```js var fruit = ["apple","pear","watermelon"]; console.log(fruit[0]); // extract data at index 0 ``` #### Array Data Change ```js var fruit = ["apple","pear","watermelon"]; fruit[0] = "grape"; // change data into "grape" at index 0 console.log(fruit); ``` #### Object ```js var student = { name : "inkwon", age : 20, skills = ["Javacsript","HTML","CSS"] sum : function (num1, num2) {return num1 + num2;} } ``` - We can insert many types of data in object. - An object is composed of property, method and data. #### Object Data Print ```js var student = { name : "inkwon", age : 20, skills = ["Javacsript","HTML","CSS"] sum : function (num1, num2) {return num1 + num2;} } console.log(student.name) // objectName.propertyName console.log(student["name"]) // objectName["PropertyName"] ``` #### Object Data Change ```js var student = { name : "inkwon", age : 20, skills = ["Javacsript","HTML","CSS"] sum : function (num1, num2) {return num1 + num2;} } student.name = "Park"; // object data change console.log(student.name) ``` #### Boolean ```js var t = true; var f = false; ``` - a condition that has true or false data in. #### Undefined and Null ```js var unde; var empty = null; ``` - undefined : no data. - null : We insert this empty data temperarily when the data is not inserted or when we need. ## Propery and Method of Data type ### String properties and methods ```js var str1 = "Hello World"; str1.length; // 11 length of the string str1.charAt(0); // extract "H" str1.split("" ); // After splitting a string by a space, return ["Hello","World"]. ``` ### Array Property and method ```js var fruit = ["apple","pear","watermelon"]; fruit.length; // the number of data in fruit fruit.push("strawberry"); // insert data at the end of the array fruit.unshift("lemon"); // insert data at the front of the array fruit.pop(); // remove data at the end of the array and return it fruit.shift(); // remove data at the front of the array and return it ``` ### Mathmatics Operators and methods ```js Math.abs(-1); Math.ceil(0.3); Math.floor(10.9) Math.random(); // return 0 ~ 1 ``` ### Methods that change String type into Number type ```js parseInt("20.6"); // convert string to integer parseFloat("20.6"); // convert string to float ``` ### Arithmetic Operators ```js console.log(20 + 10); // 30 console.log(20 - 10); // 10 console.log(20 * 10); // 200 console.log(20 / 10); // 2 console.log(20 % 10); // 0 console.log("20" + "10"); // 2010 console.log("20" - "10"); // 10 console.log("20" * "10"); // 200 console.log("20" / "10"); // 2 console.log("20" % "10"); // 0 ``` ### Increment/Decrement Operators ```js var num = 10; console.log(++num); // increment num by 1 and print num console.log(--num); // decrement num by 1 and print num console.log(num++); // print num and increment num by 1 console.log(num--); // print num and decrement num by 1 ``` ### Comparison Operators ```js // false console.log(10 == 20); // if only values are same. console.log(10 === 20); // if values are same and data types are also same. console.log(10 == "10"); // true console.log(10 === "10") // false console.log(10 > 20); console.log(10 >= 20); console.log(10 < 20); console.log(10 <= 20); ``` ### Logical Operators ```js // AND operator console.log(10 === 10 && 20 === 30); // OR operator console.log(10 ==== 10 || 20 === 30); ``` ## Javascript Control Flow Statement ### If Statement ```js var a = 20; var b = 40; if(a < b) { console.log("a is smaller than b"); } ``` - if (condition) {command} - if condition is true, the code can execute commands ### If~else Statement ```js var a = 20; var b = 40; if(a > b) { console.log("a is bigger than b"); } else { console.log("a is smaller than b or equal to b"); } ``` - if condition is true, execute if statement. if not execute else statement. ### else if Statement ```js var a = 20; var b = 40; var c = 60; if(a > b) { console.log("a is bigger than b"); } else if ( b > c ) { console.log("b is bigger than c"); } else if ( a < c ) { console.log("a is smaller than c"); } else if ( b < c ) { console.log("b is smaller than c"); } else { console.log("a is smaller than b or equal to b"); } ``` - We can create many statements ### Nested If Statement ```js var a = 20; var b = 40; if (a !== b){ if (a > b) {console.log("a is bigger than b");} else {console.log("a is smaller than b");} } else {console.log("a is equal to b")}; ``` - We can insert another if statement in a if statement. ## Loop ### For Loop ```js for(var i = 0; i < 10; i++){ console.log(i); } ``` ### While Loop ```js var num = 0 while(num < 10){ console.log(i); num++; } ``` ### Do While Loop ```js var num = 0 do { console.log(i); num++; } whike (num < 10); ``` - Execute codes in "do" statement first and then check the condition. ## Javascript Use ### Dice Game ```js var dice = Math.floor(Math.random() * 6) + 1; ``` ### Check prime number ```js function isPrime(n){ var divisor = 2; while (n > divisor) { if (n % divisor === 0){ return false; } else {divisor++} } return true; } ``` ### Reverse String ```js function reverse(str){ var reverStr = ''; for (var i = str.length - 1; i >= 0; i--){ reverStr = reverStr + str.charAt(i); } return reverStr; } console.log(reverse('Hello')); ```