Junho Dev Blog
Javascript Detailed Review

Javascript Detailed Review

Junho Shin's photo
Junho Shin
·

7 min read

Table of contents

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

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

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

var fruit = "apple";
console.log(fruit); // print "apple"
  • console.log() is a command to check data in variables.

Variable Naming Convention

// 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

<body>
  <script src="index.js"></script>
</body>
  • 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

  • F12 after right-click in chrome browser.

Javascript Data Types

What data types do javascript have?

String

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

var num1 = 10; // integer 
var num2 = -10; // negative number
var num3 = 3.14 // float

Function

var func = function() {
  console.log(""Func1);
} // Create a function by Function Expression

func1(); // Invoke a function

function func1(){
  console.log("Func1");
} // Create a function by Function Declaration

func1(); // Invoke a function

var area = function(width, height){ // width and height are parameters
  return width * height; 
}

area(10,20) // 10 and 20 are arguments

Function Data Call

var area = function(width, height) {
  return width * height;
}
var result = area(10, 20);
console.log(result);

console.log(area(10, 20))

Array

var fruit = ["apple", "pear", "watermelon"];

console.log(fruit);
  • We can manage similar types of data in one variable.

Array Data Extraction

var  fruit = ["apple","pear","watermelon"];
console.log(fruit[0]); // extract data at index 0

Array Data Change

var  fruit = ["apple","pear","watermelon"];
fruit[0] = "grape"; // change data into "grape" at index 0
console.log(fruit);

Object

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

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

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

var t = true;
var f = false;
  • a condition that has true or false data in.

Undefined and Null

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

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

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

Math.abs(-1);
Math.ceil(0.3);
Math.floor(10.9)
Math.random(); // return 0 ~ 1

Methods that change String type into Number type

parseInt("20.6"); // convert string to integer
parseFloat("20.6"); // convert string to float

Arithmetic Operators

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

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

// 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

// AND operator
console.log(10 === 10 && 20 === 30);

// OR operator
console.log(10 ==== 10 || 20 === 30);

Javascript Control Flow Statement

If Statement

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

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

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

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

for(var i = 0; i < 10; i++){
  console.log(i);
}

While Loop

var num = 0
while(num < 10){
  console.log(i);
  num++;
}

Do While Loop

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

var dice = Math.floor(Math.random() * 6) + 1;

Check prime number

function isPrime(n){
  var divisor = 2;
  while (n > divisor) {
    if (n % divisor === 0){
      return false;
    } else {divisor++}
  }
  return true;
}

Reverse String

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'));

Did you find this article valuable?

Support Junho Dev Blog by becoming a sponsor. Any amount is appreciated!

JavaScriptjsjavascript framework