JAVASCRIPT LEARNING BASED

EMAN ALIAS “POGI” GUMAYAGAY

TOPIC POINTERS

 VARIABLES TYPES
 VARIABLES SCOPE
 ELEMENT ENTERACTIONS
 JS OPERATORS
 JS ARRAY, OBJECTS, JSON
VARIABLES TYPES

Variables are used to store data values. For example, a variable may be used to store a
user’s email address, or their name. In JavaScript, a variable can contain any types of data, such
as a string, a true or false boolean, an object, or a number.

VARIABLES TYPES
 var

 let

 const
VARIABLES TYPES
VAR

var variables can be re-declared and updated

And also

VAR PROBLEMS

There's a weakness that comes with var. I'll use the example below to explain

So, since times > 3 returns true, greeter is redefined to "say Hello instead". While
this is not a problem if you knowingly want greeter to be redefined, it becomes a
problem when you do not realize that a variable greeter has already been defined
before.

If you have used greeter in other parts of your code, you might be surprised at the
output you might get. This will likely cause a lot of bugs in your code. This is why let
and const are necessary.
VARIABLES TYPES
LET
let is now preferred for variable declaration. It's
no surprise as it comes as an improvement to
var declarations. It also solves the problem
with var that we just covered. Let's consider
why this is so.
We see that using hello outside its block (the curly braces
where it was defined) returns an error. This is because let
LET CAN BE UPDATED BUT NOT RE-DECLARED. variables are block scoped

Can be Updated Cannot be Re-Declared

VARIABLES TYPES
LET
Variables declared with the const maintain constant values. const declarations share some similarities
with let declarations.

CONST DECLARATIONS ARE BLOCK SCOPED

Like let declarations, const declarations can only be accessed within the block they were declared.

CONST CANNOT BE UPDATED OR RE-DECLARED

Cannot be Updated

Cannot be Re-Declared
VARIABLES SCOPE

Scope determines the accessibility (visibility) of variables.

VARIABLES SCOPE TYPES

 Block scope

 Function scope

 Global scope
VARIABLES SCOPE
BLOCK SCOPE

 Before ES6 (2015), JavaScript had only Global Scope and Function Scope.
 ES6 introduced two important new JavaScript keywords: let and const.
 These two keywords provide Block Scope in JavaScript.
 Variables declared inside a { } block cannot be accessed from outside the block:

Variables declared with the var keyword can NOT have block scope.

Variables declared inside a { } block can be accessed from outside the block.
VARIABLES SCOPE
LOCAL SCOPE

Variables declared within a JavaScript function, become LOCAL to the function.

VARIABLES SCOPE
FUNCTION SCOPE

 JavaScript has function scope: Each function creates a new scope.

 Variables defined inside a function are not accessible (visible) from outside the function.
 Variables declared with var, let and const are quite similar when declared inside a function.

THEY ALL HAVE FUNCTION SCOPE:

ELEMENT ENTERACTIONS
GETTING ELEMENT

Since JavaScript supports HTML, we can get HTML Elements by using different ways

getElementByID()
Getting element using their attribute id

querySelector()

Getting element using QUERY, means filtering element based on a certain condition of a query

Get the first element with class="example" Get the first element with id="example"
Getting the first <p> element

querySelectorAll()

method returns all elements that matches a

CSS selector(s), same as querySelector but
this time, it will return all of the elements
ELEMENT ENTERACTIONS
CLASSES

We can get all of the classes of an element by selecting that element, and use classList property

To Add Class To Remove Class To Toggle Class

ATTRIBUTES

The attributes are special

words used inside the start
To Set Attribute
tag of an HTML element to
control the tag's behavior or
provides additional
information about the tag.
To Remove Attribute
JAVASCRIPT OPERATORS
CLASSES

We can get all of the classes of an element by selecting that element, and use classList property

 Arithmetic Operators

 Assignment Operators

 Comparison Operators

 Logical Operators

 Conditional Operators

 Type Operators
JAVASCRIPT OPERATORS
ARITHMETIC OPERATORS

Arithmetic Operators are used to perform arithmetic on numbers:

JAVASCRIPT OPERATORS
ASSIGNMENT OPERATORS

Assignment operators assign values to JavaScript variables.

The Addition Assignment Operator (+=) adds a value to a variable.
JAVASCRIPT OPERATORS
JAVASCRIPT COMPARISON OPERATORS

These operators use to compare two objects

JAVASCRIPT OPERATORS
JAVASCRIPT LOGICAL OPERATORS

These operators use to compare two objects

JAVASCRIPT TYPE OPERATORS

These operators use to return the real type of an instance or object
JS ARRAY, OBJECTS, JSON
ARRAY

An array is a special variable, which can hold more than one value:

Spaces and line breaks are not important. A declaration can span multiple lines:

The following example also creates an Array, and assigns values to it:
JS ARRAY, OBJECTS, JSON
ARRAY METHODS

.toString() - converts an array to a string of (comma separated) array values.

Result

.join() - It behaves just like toString(), but in addition you can specify the separator:

Result

.pop() - method removes the last element from an array

Result

.push() - method adds a new element to an array (at the end):

Result
JS ARRAY, OBJECTS, JSON
REAL LIFE OBJECTS, PROPERTIES, AND METHODS

In real life, a car is an object.

A car has properties like weight and color, and methods like start and stop:

All cars have the same properties, but the property values differ from car to car.

All cars have the same methods, but the methods are performed at different times.
JS ARRAY, OBJECTS, JSON
JAVASCRIPT OBJECTS

Objects are variables too. But objects can contain many values.

This code assigns many values (Fiat, 500, white) to a variable named car:

The values are written as name:value pairs (name and value separated by a colon).

ACCESSING OBJECT PROPERTIES

OR

ACCESSING OBJECT METHODS

JS ARRAY, OBJECTS, JSON
JSON

 JSON stands for JavaScript Object Notation

 JSON is a lightweight data interchange format
 JSON is language independent *
 JSON is "self-describing" and easy to understand

The JSON syntax is derived from JavaScript object notation syntax, but the JSON format is text only.
Code for reading and generating JSON data can be written in any programming language.
JS ARRAY, OBJECTS, JSON
ARRAY AND OBJECT CONVERTION TO JSON

Since JSON is like an array and object but in a text form only, we can convert an array and objects to json

JSON.stringnify() – converts an object or array to a json

JSON.parse() – converts a json to a form of object or array, it detects if it is object or array

PHP ARRAY, OBJECTS AND JSON TO JS
PHP SENDING OBJECTS AND ARRAY TO JAVASCRIPT
Since Ajax only accepts text format of data, we need to convert our objects and array into text enable to
Manipulate data on our javascript file.

Json_encode() – converts an PHP object or array to a json

to receive this json on our JS file we need to use JSON.parse()

JAVASCRIPT SENDING OBJECTS AND ARRAY TO PHP

THANK YOU