Javascript
fundamental
Course Target
1. Understanding Javascript Concept
2. Understanding Variable
3. Understanding Data Type
4. Understanding Array
5. Understanding Conditional
6. Understanding Looping
7. Understanding Type Conversion
8. Understanding Function
9. Understanding Object
10. Understanding Class
Javascript introduction
JavaScript is a programming language used in website
development to be more dynamic and interactive. if
previously you only know HTML and CSS, with JavaScript
can increase functionality on web pages.
With JavaScript you can create applications, tools, or
even games on web.
Running javascript on browser
Right click on the browser select inspect ( Ctrl + Shift + i )
Open the console tab menu
How can we run our JavaScript code?
what is javascript used?
or
compiler intepreter
what is javascript used?
intepreter
let's start use Javascript
Download and Install NodeJS
Node.js is Ryan Dahl's platform for running applications
JavaScript-based web which was introduced in 2009. With
this platform, you can run JavaScript from the server side.
Test your node successfully installed with this command:
Node JS vs Javascript
Node.js and JavaScript are two things different.
Node JS vs Javascript
JavaScript is used together with HTML and CSS to create web pages that
are interactive.
Node.js, on the other hand, is a platform for running code JavaScript on
the server side. It is responsible for executing code JavaScript before the
website page is displayed in the browser.
Node.js can run websites, web applications, and games browser-based
with high performance.
Tried using node
open terminal/ command prompt
Variable
Variable
A variable is a name that represents a value. Naming
variables in javascript usually have 3 types viz
const
the value of the variable
can’t be changed.
var
Block Scope
const name
is an old-school variable declaration
function Scope
can Redeclared
let
is a modern variable declaration.
can Reassign
can Reassign
can Hoisting Block Scope
var name
let name
Introduction Hoisting
hoisting is appointment a variable before called
Block Scope vs Function scope
Block scope is an activity limit that is delimited by brackets
curly braces in a for loop or if condition or a variable.
Block scope = let, const
Function scope is a limitation of activities within a
function delimited by curly braces.
Function scope = var
Local variabel vs Global variabel
A variable declared inside a function is only visible inside that function
Global variables are visible from any function (unless shadowed by locals).
Data Type
Data Type
Data types are the types of data that we can store in variables
Primitive data types can store only one value at a time.
String Number Boolean
Undefined Big Integer
Non-primitive data types can store more than one value at a time
Object
Operator
Operators are symbols that are used to perform operations
on values and variables.
Arithmetic operators Comparison operators
+ - * ** / == != > < ====
Assignment operators Logical operators
|| && !
=
String operators
+
example
Comparison operators
example
Logical operators
OR operators
AND operators
NOT operators
Array
Array
Array is a structured data type that functions to store
a number of data or elements where each element has an index
Elements in an array in javascript can have different data types
declaration :
let students = new Array()
let students = []
Array Method
push add array elements at the following index
pop remove last element
shift delete the first element
unshift adds items to the beginning
splice add new elements according to index.
slice remove elements according to index
Displays the entire contents of the array
Let arr = [‘sony’, ‘nikon’, ‘Fujifilm’]
for(let i = 0; i < arr.length ; i++){
console.log(“Mahasiswa ke-” + (i+1) + “ : “ + arr[i])
}
String Manipulation
extracts a part of a string and returns the extracted part in a new string
Slice Substring Substr
String.slice(start,end) String.substring(start,end) String.substring(start, length)
CharAt BackTik
array.CharAt(index) ` this code ${expression} `
Conditional
If Else Statement
If is a key for branching, which means we can execute certain
program code when a certain condition is met.
let nilai = 90;
if (nilai > 80) { console.log('nice'); }
if we want to execute a certain program if the condition evaluates to
false, this can be done with an else expression
if (nilai > 80) { console.log('nice'); }
else if (nilai > 60 ) { console.log('standard'); }
else { console.log('Try again'); }
Switch Case Statement
A switch statement can replace multiple if checks.
It gives a more descriptive way to compare a value with multiple variants
if (condition1) { switch (ecpression) {
action case value1 :
} action
else if (condition2 ) { break;
action case value2 :
} action
else if (condition3) { break;
action default :
} action
else { } break;
}
Ternary Operator
shorthand for the if branch, but shorter and to the point
if condition ? " true " : "false"
Looping
Looping
is the process of repeating the execution of one statement or more blocks of statements
without stopping, as long as the conditions referred to are met
In general, this loop is divided into two. Namely, calculated loops and
uncountable loops.
calculated loops uncountable loops.
For while
Foreach do while
Repeat
For
for(init statement; condition; post statement){
// block looping
}
Init statement
will be executed only once at the start before the loop
Post statement
will be executed after each loop
While Do While
while (condition) { do {
// block looping // block looping
} }
while(condition)
Arrays Loop
Let arr = [‘sony’, ‘nikon’, ‘Fujifilm’]
for(let i = 0; i < arr.length ; i++){
console.log(“Mahasiswa ke-” + (i+1) + “ : “ + arr[i])
}
But for arrays there is another form of loop, for..of:
Let arr = [‘sony’, ‘nikon’, ‘Fujifilm’]
for(let camera of arr){
console.log(camera);
}
Type Conversion
Type Conversion
is a method to convert data type
String Conversion Boolean Conversion
Numeric Conversion
let variabel_name = New_Data_Type(value)
Function
Functions
is a set of code blocks wrapped under a specific name for a
specific purpose to make the code more modular and reusable
Function Creation Rules
Functions are created using the camelCase writing format
function name must contain a verb or verb.
Functions Category
Built-in function User-Defined func
This is a custom function that is not
Is a function that has
built in to javascript. created Using
been provided by
the function keyword, Parameters /
javascript
arguments, Function body wrapped
by {} and Can return value (return
slice(), splice(), substring() value) or not
Function declaration
Function expression
Functions Declarations
The function keyword goes first, then goes the name of the
function, then a list of parameters between the parentheses
(comma-separated, empty in the example above) and finally the
code of the function, also named “the function body”, between
curly braces
function sayHello() {
console.log("Hello Enigmanians ! ");
}
Functions Expression
is a function stored in a variable.
const sayHello = function (name) {
Console.log("hello " + name);
}
Parameter & Argument
Parameters
Variables that are written in brackets when the function is
created, used to hold the value passed during the function sent
function sayHello(name) {
console.log("Hello " + name);
}
Argument
The value passed to the parameter when the function is called
sayHello('Enigma') ;
Lexical scope
The lexical scope is the scope that is read when the JavaScript code is
going through the compile process, or often called compile-time. This
lexical scope regulates in which scope we have to look for a variable.
example
var x = 2;
var add = function() {
var y = 1; return x + y;
};
Arrow Function
ES6 introduced a new function called arrow function. Arrow
functions are similar to normal functions in behavior, but
differ in the way they are written. As the name implies,
functions are defined using arrows or fat arrow =>
before using arrow function
const hello = function() { const hello =() => {
return 'hello enigma' return 'hello enigma'
} }
arrow function with parameter
const hello =(name) => "hello "+name
IIFE (Immediately Invoked Function
Expression) is a function an
expression that is immediately
called upon creation
IIFE vs SIAF
SIAF (Self Invoking Anonymus Function) is
when there is a the variable insidethe
function is not named then the variable is
not accessible outside
Object
Object
An object can be created with figure brackets {…} with an optional list of
properties. A property is a “key: value” pair, where key is a string (also called a
“property name”), and value can be anything.
We can imagine an object as a cabinet with signed files. Every piece of data is
stored in its file by the key. It’s easy to find a file by its name or add/remove a file.
// bad
const user = new Object(); // object structural syntax
// good
const user = {}; // object literal syntax
Accessing Object
const user = {
fullName: 'Ramadhan',
age: 22,
isActive: true
startRun: function(){
console.log(“1 2 3 go!”)
}
}
To access the value of an object property, we can call the object
name and then a period or use square brackets
Console.log(user.fullName);
Console.log(user['fullName']);
to access object method using the ()
Console.log(user.startRun());
Modify an object.
When we change an object using the assignment operator and its property/key already
exists, the value in it will be replaced with the new value.
user.fullName = 'Rohkmah'
Meanwhile, if the property with the specified key name is not found, then a
new property will be added to the object.
user.email = '[email protected]'
We can also delete properties on objects by using the delete keyword
delete user.email;
Keyword this
The this keyword here refers to the owner of the function itself.
const student = {
name : 'Anis' ,
address: { city: 'Dewata' }
console.log(`${this.name}`)
}
The call, apply, and bind methods are used to access data from other objects that differ in context (this)
function getInfo(address) {
console.log(this.address.city);
console.log(`My address is ${address.city}, ${address.province}`); // error
}
getInfo.call(student, student.address);
getInfo.apply(student, [student.address]); ]
Immutable Object
By default objects in JavaScript are mutable
If we create a new variable and we immediately assign an object, the new
variable only copies that object by reference, does not copy its value
There are 2 ways we can copy object references and their values:
use the keyword Object.assign()
const car = {
name: 'terrios'
}
const newCar = Object.assign({}, car);
newCar.name = 'BMW';
using the latest feature from ES6 namely Spread Operator
const newCar = { ...car };
Class
Class
Is a framework or blueprint for creating an object
CREATE CLASS
Before ECMAScript 6, JavaScript was procedural, where we could print an
object using a function, in ES6 we could print the object using a class.
before ES6 - Constructor Function with keyword class
function Car() { class Car {
this.name = '' }
this.run = function () {
console.log('Car is running');
const corolla = new Car();
}
}
const terios = new Car();
Constructor Class
Each class always adds a constructor to create a objects from classes.
When the new keyword is called, the constructor will be executed.
1 class can only have 1 constructor
class Car {
constructor(brand) {
this.brand = brand;
}
engineStart() {
console.log(`${this.brand} ${this.name} engine started`);
}
}
const corolla = new Car('Toyota');
corolla.engineStart() // Toyota Corolla engine started
Class static method
A method that can be used without having to initialize the object first
class Model extends Mobil {
constructor(brand, mod) {
super(brand);
this.model = mod;
}
static hello(){
return “hello”
}
}
Model.hello()
Inheritance (derivative)
Using the extend keyword
class model is the lower class or child of the car
The model class accesses whatever is in the parent
class Hewan {
berjalan(name) {
console.log(`${name} berjalan`);
}
}
class Kucing extends Hewan {
}
const kucing = new Kucing()
kucing.berjalan('kucing');
Super Keyword
The super keyword is used to call the constructor of the super class or
parent class. If in the child class we create a constructor, it is mandatory
to call the parent constructor, even though there is no constructor in
the parent
class Hewan {
constructor(name) {
this.name = name;
}
class Kucing extends Hewan {
constructor() {
super('Kucing');
}
}
Thank You
