27 - String Methods
Access With Index Access With charAt() length trim() => remove
espace toUpperCase() toLowerCase() Chain Methods
let theName = " Ahmed ";
theName;
theName[5];
theName.trim();
theName.trim().charAt(5).toUpperCase()
String Methods
indexOf(Value [Mand], Start[Opt] 0)
let a = "Elzero Web School";
a.indexOf("Web")
a.indexOf("Web", 8)
lastIndexOf(Value [Mand], Start [Opt] length) slice(Start [MAnd],
End [Opt] Not Include End) repeat(Times) [ES6] split(Separator
[Opt], limit [Opt])
040 - Array Big Introduction
Arrays
Create Arrys [To w Methods] new Array()
let myFriends = ["Ahmed", "Mohamed", "Sayed"];
042 - Add And Remove From Array
Array Methods [Adding And Removing]
unshift("", "", ...) Add Element To The First
push("", "", ...) Add Element To The End shift()
Relove First Element From Array pop() Remove Last Element From Array
066 - Arrow Function Syntax
Arrow Function
- Regular vs Arrow [Param + No Param ]
- Multiple Lines
071 - Higher Order Functions - Map
Higher Order Function
is a function that accepts functions as parameters and/or returns a
function.
Map
method creates a new array populated with the resultes of calling a
provided function on every element. in the calling array. Syntax
map(callBackFunction(Element, Index, Array){}, thisArg) Element
=> The current element beig processed in the array. Index =>
The index of the current element being processed in the array. Array
=> The Current Array Notes Map Return A New Array Examples
Anonymous Function Named Function
let Arry = [1, 2, 3, 4];
console.log(Arry);
let NewArry = [];
for (let i = 0; i < Arry.length; i++){
NewArry.push(Arry[i] + Arry[i] )
};
console.log(NewArry);
let addSelf = myNums.map(function(element, index, arr){
console.log(`Current Element => ${element}`);
console.log(`Current Index => ${index}`);
console.log(`Array => ${arr}`);
console.log(`This => ${this}`);
}, 10);
let addSelf = myNums.map((e)=> e + e)
console.log(addSelf);
funxtion addition(ele) {
return ele + ele;
}
let add = myNums.map(addition);
console.log(add);
074 Higher Order Functions - Filter
Filter
Filter Longest Word By Number
let sentence = "I Love Food Code Too Playing Much";
let smallWords = sentence.split(" ").filter(function(ele){
return ele.length <= 4;
}).join(" ");
let ignoreNumbers = "Elz123er4o";
let ign = ignoreNumbers
090 - Product With Title And Description
DOM [Create Elements]
let myMainElement = document.createElement("div");
let myHeading = document.createElement("h2");
let lyParagraph = document.createElement("p");
let myHeadingText = document.createTextNode("Product");
let myParagraphText = document.createTextNode("Product");
Add Heading text
myHeading.appendChild(myHeadingText)
Add Heading To Main Element
myMainElement.appendChild(myHeading)
Add Paragraph Text
myParagraph.appendChild(myParagraphText)
091 - Deal With Children's
let myElemµent = document.querySelector("div");
console.log(myElement.children); \\
console.log(myElement.children[0]); \\
console.log(myElement.childNodes); \\
DOM [Events]
let userInput = document.querySelector("[name='username']");
let ageInput = document.querySelector("[name='age']");
document.forms[0].onsubmt = function (e) {
let userValid = false;
let ageValid = false;
if(userInput.value !== "" && userInput.value.length <= 10){
userValid = true;
};
if(ageInput.value !== ""){
ageValid = true;
}
if (userValid === false || ageValid === false){
e.preventDefault();
}
}
094 - Event Simulation Click Focus Blur
DOM [Events Simulation]
let two = document.querySelector(".two");
window.onload = function (){
tow.focus();
};
cersur sorte input
let one = document.querySelector(".one");
one.onblur = function (){
document.links[0].click();
}
095 - Class List Object And Methods
DOM [Class List]
classList -length -contains -item(index) -add -remove -toggle
HTML
<div id="my-div" class="one two show test">Div With Many Classes</div>
JavaScrept:
let element = document.getElementById("my-div");
element.classList // DOMTokenlist(4)["one", "two", "show", "test", value: "one two shw test"]
typeof element.classList // Object
element.classList.contains("osama"); // false
element.classList.contains("two"); // true
element.classList.item("3"); // shw
115 - Destructuring Arrays
Destructuring: is a JavaScript experession that allows us to extract
data from arrays, objects, and maps and set them into new, distinct
variables.
let a = 1;
let b = 2;
let c = 3;
let myFriends = ["Ahmed", "Sayed", "Ali"];
[a = "A", b, c] = myFriend;
console.log(a)
console.log(b)
console.log(c)
let [x, y, z] = myFriend;
console.log(x)
console.log(y)
console.log(z)
let [, k,];
console.log(k)
Advanced Examples
let myFriends = ["Ahmed", "Sayed", "Ali", ["Shady", "Amr", ["Mohamed", "Gamal"]]];
myFriends[3][2][1]; // Gamal
let [, , , [a, , [, b]]] = myFriends;
console.log(a); // Shady
console.log(b); // Gamal
Destructuring Array => Swapping Variables
let book = "video";
let video = "Book";
[book, video] = [video, book];
console.log(book);
console.log(video);
Destructuring Object
const user = {
theName: "Osama",
theAge: 39,
theTitle: "Developer",
theCountry: "Egypt"
};
118 - Destructuring Objects
const user = {
theName: "Osama",
theAge: 39,
theTitle: "Developer",
theCountry: "Egypt",
skills: {
html: 70,
css: 80,
}
};
console.log(user.theName);
({theName, theAge, theTitle, theContry } = user);
const {
theName: x,
theAge: a,
theTitle = "undif",
theContry: k = "tunis",
skills: {html: h, css}
} = user;
console.log(x);
console.log(k);
console.log(h);
console.log(css):
const {html: skillOne, css: skillTwo} = user.skills;
123 Set Data Types And Methods
Set Data Type
Santax: new Set(Iterable).
Object To Store Unique Values. Cannot Access Elements By Index
Properties: siez Methods add delete
let myData = [1, 1, 1, 2, 3];
let myUniqueData = new Set([1, 1, 2, 3]);
let myUniqueData = new Set(myData);
let myUniqueData = new Set(myData);
124 - Set vs WeakSet And Garbage Collecto
Set vs WeakSet
The WeakSet is weak, meaning references to objects in a WeakSet are
held weakly. If no other references to an object stored in the
WeakSet exist, those objects can be garbage collected.
- set => Can Store Any Data Values
- WeakSet => Collection Of Objects Only
- set => Have Size Property
- WeakSet => Does Not Have Size Property
- set => Have Keys, Values, Entries
- WeakSet => Does Not Have clear, keys, Value And Entries
- set => Can Use forEach
- WeakSet => Cannot Use forEach
129 - Array.copyWithin Method
Array Methods
Array.copyWithin(Target, Start => Optional, End => Optional)
"Copy Part Of An Array To Another Location in The Same
Array"
Any Negative Value Will Count From The End Target
Index To Copy Part To If At Or Greater Than Array Length Nothing
Will Be Copied Start Index To Start copying From If Ommited =
Start From Index 0 End Index To End Copyinf From Not Including End
If Ommited = Reach The End
148 - Constructor Function Introduction
syntaxe: exempl
function User(id, username, salary){
this.id = id;
this.u = username;
this.s = salary + 1000;
};
let userOne = new User(100, "Hassan", 5000);
let userTwo = new User(100, "Hassan", 5000);
let userThree7 = new User(100, "Hassan", 5000);
userOne.id
userOne.u
ES 2015
class User {
constructor(id, username, salary){
this.i = id;
this.u = username;
this.s = salary;
}
}
instanceof
userOne = new User(100, "Elzero", 5000);
userOne instanceof User // true
userOne.constructor === User // true
150 - Deal With Properties And Methods
exemple:
class User {
constructor(id, username, salary){
this.i = id;
this.u = username || "Unknown";
this.s = salary < 6000 ? salary + 500 : salary;
this.msg = function(){
return `Hello ${this.u} Your Salary Is ${this.s}`;
};
}
writeMsg(){
return `Hello ${this.u} Your Salary Is ${this.s}`;
}
}
let userOne = new User(100, "Elzero", 500);
let userTwo = new User(101, "Ahmed", 6000);
userOne.u
userOne.s
userTwo.u
userTwo.s
151 - Update Properties And Built In Cons
constructor Function
- Update Properties
- Built In Constructors
class User {
constructor(id, username, salary){
this.i = id;
this.u = username;
this.s = salary;
}
updateName(newName){
this.u = newName;
}
}
let userOne = new User(100, "Elzero", 5000);
userOne.u
userOne.updateName("Osama");
userOne.u
let strOne = "Elzero";
let strTwo = new String("Elzero");
typeof strOne
typeof strTwp
strOne instanceof String
strTwo instanceof String
strOne.constructor === String
strTwo.constructor === String
152 - Class Static Properties And Methods
Class
static Properties And Methods
class User {
static cont = 0;
constructor(id, username, salary){
this.i = id;
this.u = username;
this.s = salary;
User.cont++;
}
static syHello(){
return `Hello From Class`;
}
static contMembers(){
return `${this.cont}`
}
}
153 - Class Inheritance
Class
Inheritance
class User {
constructor(id, username){
this.i = id;
this.u = username;
};
sayHello(){
return `Hello ${this.u}`;
}
}
class Admin extends User {
constructor(id, username, permissions){
super(id, username);
this.p = permissions;
}
}
class Superman extends Admin {
constructor(id, username, permisson, ability){
super(id, username, permissions);
this.a = ability
}
}
154 - Class Encapsulation
Encapsulation
- Class Fields Are Public Default
- Guards The Data Against Illegal Access.
-
Helps To Achieve The Target Without Revealing Its Complex Details.
- Will reduce Human Errors.
- simplifies The App
class User {
#e;
constructor(id, username, eSalary){
this.i = id;
this.u = username;
this.#e = eSalaey;
}
getSalary(){
return parseInt(this.#e);
}
}
let userOne = new User(100, "Elzero", "5OO dt");
userOne.u
userOne.getSalary() * 0.3
155 - Prototype Introduction
Prototype
- Introduction
- Prototypes are the mechanism by which JavaScript objects
- inherit features from another
class User {
constructor(id, username){
this.i = id;
this.u = username;
}
sayHello(){
return `Hello ${this.u}`;
}
}
let userOne = new User(100, "Elziro");
userOne.u
User.prototype;
let strOne = "Elzero";
String.prototype;
167 - Modules Import And Export
<script src="js/ymain.js" type="module"></script>
<script src="js/app.js" type="module"></script>
main.js
Export Methode 1
export let a = 10;
export let arr = [1, 2, 3, 4];
export function saySomething(){
return `Something`;
}
Export Methode 2
let a = 10;
let arr = [1, 2, 3, 4];
function saySomething(){
return `Something`;
}
export { a, arr, saySomething };
app.js
import {a, arr, saySomething as s} from "js/main.js";
console.log(a);
console.log(arr);
console.log(s());
Export Alias Named Export Import All
main.js
export default function sayHello(){
return `Hello`;
}
app.js
import elzero, { a, arr, saySomething } from from "js/main.js";
console.log(elzero());
Export Methode 2
export default function(){
return `Hello`;
}
Impore All
import * as all from from "js/main.js";
console.log(all.arr);
console.log(all.saySomething);
169 - What Is JSON
Whate Is JSON ?
- JavaScript Object Notation
- Format For Sharing Data Between Server And Client
- JSON Derived From JavaScript
- Alternative To XML
- Fille Extension IS .json
Why JSON ?
- Easy To Use And Read
- Used By Most Programmng Languages And Its Frameworks
- You Can Convert JSON Object To JS Object And Vice Versa
| JSON vs XML |
|
| Text Based Format = Markup Lang |
age |
| Lightweight |
Heavier |
| Does Not Use Tags |
Using Tags |
| Shorter |
Not Short |
| Can Use Arrays |
Cannot Use Arrays |
| Not Support Comments |
Support Comments |
170 - JSON Syntax And Compare With Js Object
JSON Syntax
- Data Added Inside Curly Braces { }
- Data Added With Key : Value
- Key Should Be String Wrapped In Double Quotes
- Data Separated By Comma
- Square Brackets [] For Arrays
- Curly Braces {} For Objects
Available Data Types
- String
- Number
- Object
- Array
- Boolean Values
- null
Exemple :
{
"string": "Elzero",
"number": 100,
"object": {
"EG": "Giza",
"KSA": "Riyadh"
},
"array": ["HTML", "CSS", "JS"],
"Boolean": true,
"null": null
}
172 - Parse And Stringify
- JSON.parse => Convert Text Data To JS Object
- JSON.stringify => Convert JS Object To JSON
const myJsonObjectFromServer = '{"Username": "Osama", "Age": 39}';
console.log(typeof myJsonObjectFromServer);
console.log(myJsonObjectFromServer);
const myJsObject = JSON.parse(myJsonObjectFromServer);
console.log(typeof myJsObject);
console.log(myJsObject);
myJsObject["Username"] = "Elzero";
myJsObject["Age"] = 40;
const myJsonObjectToServer = JSON.stringify(myJsObject);
console.log(typeof myJsonObjectToServer);
console.log(myJsonObjectToServer);
173 - Asynchronous
To Understand Ajax, Fetch, Promises
Asynchronous VS Synchronous Programming
Synchronous
- Operation Runs in Sequence
- Each Operation Must Wait For The Previous One To Complete
- Story From Real Life
Asynchronous
- Operation Runs In Parallel
-
This Means That An Operation Can Occur while Another One Is Still
Being Processed
- Story From Real Life
- Facebook As Example
- Simulation
Search
- JavaScript Is A Single-Threaded
- Multi Threaded Languages
174 - Call Stack And Web API
To Understand Ajax, Fetch, Promises
Call Stack || Stack Trace
-
JavaScript Engine Uses A Call Stack To Manage Execution Contexts
- Mechanism To Make The Interpreter Track Your Calls
- When Function Called It Added To The Stack
- When Function Executed It Removed From The Stack
-
After Function Is Finished Executing The Interpreter Continue From The
Last Point
- Work Using LIFO Principle => Last In First Out
- Code Execution Is Synchronous.
-
Call Stack Detect Web API Methods And Leave It To The Browser To
Handle It
Web API
- Methods Available From The Environment => Browser
setTimeout(()=>{
console.log("Web API")
}, 0);
function one(){
console.log("One");
}
function two(){
one();
console.log("Two");
}
function three(){
tow();
console.log("Three")
}
three()
AJAX
- Asynchronous JavaScript And XML
- Approach To Use Many Technologies Together [HTML, CSS, JS, DOM]
-
It Use "XMLHttpRequest" Object To Interact With The Server
- You Can Fetch Data Or Send Data Without Page Refresh
-
Examples -- Youtube Studio -- Google Drive -- Upload Article Photo --
Form Check Name
Test new XMLHttpRequest(); Request And Response Status Code
let req = new XMLHtpRequest();
console.log(req);
177 - Request And Response From Real API
Ajax Ready State => Status Of The Request
consol.log('hello')
THe End.