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
