[go: up one dir, main page]
Scribd
Upload
86 views130 pages

Course Material

Uploaded by

enas hady
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
86 views130 pages

Course Material

Uploaded by

enas hady
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 130

Revision # 1

Dnaaya Team
Coding Requirement
Tools

Dnaaya Team
Coding Requirement Tools

VS Code: https://code.visualstudio.com/

WebStorm: https://www.jetbrains.com/webstorm/download/
1.Text Editor
2.Github Brackets: http://brackets.io/

Sublime: https://www.sublimetext.com/
Coding Requirement Tools

Git: https://git-scm.com/downloads

1.Text Editor
GitHub: https://github.com/
2.Github
GitHub Desktop: https://desktop.github.com/
What Is Git, GitHub and
GitHub Desktop

Dnaaya Team
What is Git, GitHub and GitHub
Desktop

GitHub
Git GitHub Desktop

• Version control of System • Repository hosting service for Git is a tool that allows you to interact
with GitHub from the desktop.
• Revert files to an earlier state • social platform to share With this new application, you can
knowledge and work.
• Compare changes over time work easier without having to
• provides access control and depend on your browser.
• See who modified what? several collaboration features
• Control modifications using • Manage Team Task and Projects
presmissions • provides a web-based graphical
interface
Web Design
vs
Web Development

Dnaaya Team
Web Designer VS Web Developer

SQL Java Php C#

Angular Firebase Node Js

HTML JavaScript CSS

Photoshop Illustrator InDesign


HTML
Hyper Text Markup Language

Dnaaya Team
The Syntax

1.The DOCTYPE
2.Elements
3.Attributes
<!DOCTYPE html>
4.Comments
The Syntax

<element> ... </element>


1.The DOCTYPE
2.Elements
3.Attributes End Tag
Start Tag Content
4.Comments
<title>Acc-web diploma</title>
The Syntax
<element attribute=”value”>
1.The DOCTYPE
2.Elements
3.Attributes Value
Name
4.Comments
<img src="http://dnaaya.com/assets/img/logo.png" />
The Syntax

1.The DOCTYPE <!-- Comment Here -->


2.Elements
3.Attributes
4.Comments
Start Comment End
HTML Syntax

Dnaaya Team
Html Syntax

<tag attributes> content</tag>

• two-sided tag
• one-sided tag: content appears in
webpage. It could be
empty
Starting Tag Closing Tag

Examples: <p> This is a paragraph</p>


Html Syntax

</tag>
• two-sided tag Examples:
• one-sided tag: Breaking line tag: <br/>

Horizontal line tag: <hr/>


HTML Structure

Dnaaya Team
Structure of the Web Page

Starting with the tag <html>...</html>

<html>
Everything about the
....
web page should be
enclosed here
</html>
Structure of the Web Page

Starting with the tag <html>...</html>

<html>
<head>
• Each web page has a head part <title>web diploma</title>
</head>
</html>
Structure of the Web Page

Starting with the tag <html>...</html>

<html>
The title of the web <head>
page should be put <title>web diploma</title>
here </head>
</html>
Structure of the Web Page

Starting with the tag <html>...</html>


<html>
<head>
<title>web diploma</title>
The content of the </head>
whole web page should
<body>
be put here
Hello World
</body>
</html>
HTML Popular Tags

Dnaaya Team
HTML Common Tags

• Paragraph Tag
• List Tag <p>
• Hyperlink Tag Lorem ipsum dolor sit amet consectetur
adipisicing elit.
• Image Tag Explicabo est velbeatae,necessitatibus
vitae recusandae
• Table Tag unde aut itaque aliquam in officiis nu
quam deleniti iusto sed minima.
• Form Tag </p>

• Button Tag
HTML Common Tags

• Paragraph Tag
• List Tag <ul>
• Hyperlink Tag <li>Coffee</li>
• Image Tag <li>Tea</li>
<li>Milk</li>
• Table Tag <li>Orange</li>
• Form Tag </ul>
• Button Tag
HTML Common Tags

• Paragraph Tag
• List Tag
<a href="url">link text</a>
• Hyperlink Tag
• Image Tag <a href="https://www.dnaaya.com/">
Visit our Dnaaya Website
• Table Tag </a>
• Form Tag
• Button Tag
HTML Common Tags

• Paragraph Tag Link

• List Tag
• Hyperlink Tag <img src=“http://dnaaya.com/assets/img/logo.png” />

• Image Tag
<img src=“Images/Dnaayalogo.png” alt =“Dnaaya Logo”/>
• Table Tag
• Form Tag Local
• Button Tag Source
HTML Common Tags

• Paragraph Tag
<table style="width:100%“ border=“2" >
<tr>
<th>First name</th>
• List Tag <th>Last name</th>
<th>Age</th>
• Hyperlink Tag </tr>
<tr>
• Image Tag <td>Jill</td>
<td>Smith</td>

• Table Tag <td>50</td>


</tr>
<tr>
• Form Tag <td>Eve</td>
<td>Jackson</td>
• Button Tag <td>94</td>
</tr>
</table>
HTML Common Tags

• Paragraph Tag
• List Tag <form>
First name:

• Hyperlink Tag <br>


<input type="text" name="firstname">
<br>
• Image Tag Last name:
<br>
• Table Tag <input type="text" name="lastname">
<br>
• Form Tag <button type="submit">Submit</button>
</form>
• Button Tag
Revision Task

Dnaaya Team
Try To Make Page Like This

• Page Title: Google


• Image: Google Logo
• Form
• Input
• List: Advanced Search, Language Tools
• Button: Google Search, I’m Feeling Lucky
• List: Advanced Programs, Business
Solution, About Google, Go to Google
Nederland

Good Luck
THANKS

Dnaaya Team
Revision #
HTML With CSS

Dnaaya Team
What Is CSS?

NO CSS

WITH CSS
Types Of CSS

Dnaaya Team
CSS Types

<tag style="property: value; property: value"> content </tag>

1. Inline Style Examples:


2. Internal
3. External <h1 style="color: red;">This is a Red Heading</h1>

Result:
CSS Types

<head>
1. Inline Style <title> Acc Web Diploma </title>
2. Internal Start Style Tag <style>
Open CSS Selector h1 {
3. External color: red;
Close CSS Selector }
End Style Tag </style>
</head>

CSS
Value
Property
CSS Types

#1 Create .CSS File #2 Link .CSS File in HTML Page


1. Inline Style
2. Internal
3. External
#3 Create .CSS File
CSS Selectors

Dnaaya Team
CSS Selectors

body { property: value }


h1 { property: value }
p { property: value }
1. HTML Tags a { property: value }
2. IDs
3. Class
HTML Element CSS Property CSS Value
Tags
Examples:
<h1>This is a Red Heading #1</h1> /* in style.css page */
<h1>This is a Red Heading #2</h1> h1 {
color: red;
<h1>This is a Red Heading #3</h1>
}
CSS Selectors

.html Page
<tag id=“myID"> content </tag>
1. HTML Tags
2. IDs HTML Tag HTML attribute ID Name
(ID)
3. Class
.CSS Page
#myDiv { property: value }

HTML Element CSS Property CSS Value


ID
CSS Selectors

.html Page
<tag class=“className"> content </tag>
1. HTML Tags
2. IDs HTML Tag HTML attribute Class Name
(Class)
3. Class
.CSS Page
.className { property: value }

Class of CSS Property CSS Value


Element
CSS Task
Dnaaya Team
Try To do This Web Page:
Bootstrap
Dnaaya Team
What Is Bootstrap

• Bootstrap is a free front-end


framework (HTML and CSS) for
faster and easier web
development
• Responsive Design is about
using CSS and HTML
Why Use Bootstrap

• Mobile first approach.


• It is supported by all popular browsers.
• Easy to get started.
• Responsive design
Including Bootstrap Files
<head>
<title> Acc Web Diploma </title>
<link href="bootstrap.min.css" rel="stylesheet"/>
<script src="jquery.min.js" />
<script src="bootstrap.min.js" />
</head>
1. Local Include
2. Internet Include Download Bootstrap assets from
Link: https://getbootstrap.com/
You will need to include three files into your project files :
• bootstrap.min.css
• jquery.min.js
• bootstrap.min.js
Including Bootstrap Files
<head>
<title> Acc Web Diploma </title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" />
1. Local Include <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" />
</head>
2. Internet Include
Download Bootstrap assets from
Link: https://getbootstrap.com/
You will need to include three files into your project files :
• https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min
.css
• https://code.jquery.com/jquery-3.4.1.slim.min.js
• https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js
Concept Of Containing Elements
<div class=“container">
<h1>My First Website</h1>
1. container <img src="images/cover.jfif"/>
<p>Lorem ipsum dolor sit amet consectetur adipisicing el
2. container-fluid it. Est alias neque architecto illum.</p>
3. Grid </div>

5. Images
6. Buttons

Result
Concept Of Containing Elements
<div class="container-fluid">
<h1>My First Website</h1>
<img src="images/cover.jfif"/>
1. container <p>Lorem ipsum dolor sit amet consectetur adipisicing el
it. Est alias neque architecto illum.</p>
2. container-fluid </div>

3. Grid
5. Images
6. Buttons
Result
Bootstrap Grid System

1. container
2. container-fluid
3. Grid
<div class="container-fluid">
5. Images
<div class="row">
6. Buttons <div class="col-4"> .col-4 </div>
<div class="col-4"> .col-4 </div>
<div class="col-4"> .col-4 </div>
</div>
</div>
Bootstrap Images

1. container
2. container-fluid
3. Grid <div class="container-fluid">
5. Images <div class="row">
<div class="col-md-4">
6. Buttons <img src="images/bg.jpg" class="img-fluid"/>
</div>
<div class="col-md-4">
<img src="images/bg.jpg" class="img-thumbnail"/>
</div>
</div>
</div>
Bootstrap Buttons

<div class="container">
1. container <h1>Bootstrap Buttons</h1>

2. container-fluid <button type="button" class="btn btn-primary">Primary</button>


<button type="button" class="btn btn-secondary">Secondary</button>
3. Grid <button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
5. Images <button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
6. Buttons <button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
</div>
Bootstrap Spacing

Sides: Size:
•t - for classes that set margin-top or padding-top 0 - for classes that eliminate
•b - for classes that set margin-bottom or padding- the margin or padding by setting it to 0
bottom 1 - (by default) for classes that set
•l - for classes that set margin-left or padding-left the margin or padding to $spacer * .25
•r - for classes that set margin-right or padding- 2 - (by default) for classes that set
right the margin or padding to $spacer * .5
•x - for classes that set both *-left and *-right 3 - (by default) for classes that set
•y - for classes that set both *-top and *-bottom the margin or padding to $spacer
•blank - for classes that set a margin 4 - (by default) for classes that set
or padding on all 4 sides of the element the margin or padding to $spacer * 1.5
5 - (by default) for classes that set
Property : the margin or padding to $spacer * 3
•m - for classes that
auto - for classes that set the margin to auto
set margin
•p - for classes that
set padding
Bootstrap
Task
Dnaaya Team
Revision JavaScript

#3
Dnaaya Team
What is JavaScript?
Frontend, Backend… Which End Do I Choose?
If you are interested in creating websites,
Frontend including user interfaces (UI) with interactive
elements on web pages, you may want to learn
more about “front-end” technologies like HTML
and CSS, and front-end JavaScript frameworks.
Backend Unfortunately, there are sooooo
many frameworks to choose from.

For Example:
Desktop

Mobile AngularJS Vue React


Frontend, Backend… Which End Do I Choose?

Frontend f you are interested in creating software that


serves (or hosts) web applications, you may want
to learn more about “back-end” programming.
Backend This Includes:

Desktop

Mobile NodeJS Express JS


Frontend, Backend… Which End Do I Choose?

Frontend Electron is a great way to build cross-platform


desktop applications that can run on Windows,
macOS, and Linux. Visual Studio Code is one
Backend example of an Electron application. Watch one of
my introduction to Electron talks to learn more
about what you can do!
Desktop

Mobile
Frontend, Backend… Which End Do I Choose?

Frontend
Want to build a mobile application?
Use one of This frameworks to build ANDROID
Backend and IOS application

Desktop

Mobile
Hmmm
Which End Do You
Choose Now ?
I Think You Choose All

Dnaaya Team
Getting started
with JavaScript

Dnaaya Team
JavaScript Types

The scripts inside an HTML document is interpreted in the


order they appear in the document.

<div class="container-fluid">
1. Internal JS <h1 class="pb-5 ml-4">Hello world</h1>
2. External JS </div>
<script type="text/javascript">
alert('Hello');
</script>
</body>
</html>
JavaScript Types

Import JavaScript file into Html Page

<div class="container-fluid">
1. Internal JS <h1 class="pb-5 ml-4">Hello world</h1>
2. External JS </div>
<script src="javascript/script.js“
type="text/javascript">
</script>
</body>
Comments In JavaScript

// alert('Hello World');
Line Comment // console.log('Hello World')

/*
alert('Hello World');
Block Comment console.log('Hello World')
*/
Comments In JavaScript

// alert('Hello World');
// console.log('Hello World')
Line Comment

/*
alert('Hello World');
Block Comment console.log('Hello World')
*/
Print On Screen

Examples:
1. Console console.log("Hello, World!");
2. Alert
3. Promote
Logging Variable:

var x = 'hello';
console.log(x);
Print On Screen

Examples:
1. Console
alert("Hello World");
2. Alert
3. Promote
Confirm Message:

var answer = confirm("Are you sure?");


Print On Screen

1. Console
2. Alert prompt( Message , Default Value);
3. Promote
Examples:

prompt("whats your name?", "No Name")


Let’s Deep into
JavaScript Basics

Dnaaya Team
JavaScript Variable Declaration

1. Declare Variables
How To Declare Variables
2. Variables Type
3. Data Types var <variable-name>;
4. Variables Mutation var <variable-name> = <value>;
& Coercion
5. Basic Operators Example:

6. Assignment &
Logical Operators var x = 4;
var y = 6;
7. Comparison Operators
var z = x + y
8. The typeof Operator
JavaScript Variables Types

1. Declare Variables var x;


function getVar() {
2. Variables Type Global x = 7
3. Data Types console.log('my variable:', x);
}
4. Variables Mutation
& Coercion
5. Basic Operators
function getVar() {
6. Assignment & var x = 7;
Logical Operators Local console.log('my variable:', x);
7. Comparison Operators }
8. The typeof Operator
JavaScript Data Types

1. Declare Variables Number


2. Variables Type var num = 2; // Number
String var str = "string" // String
3. Data Types var check = true // Boolean
4. Variables Mutation var nullVar = null; // Null
& Coercion Boolean var undefinedVar = undefined; //Undefined
var user = { // Object
5. Basic Operators firstName: "sara",
Object phone: "01022992093",
6. Assignment &
Logical Operators age: 27,
isAdmin: true
7. Comparison Operators Null
}
8. The typeof Operator
Undefined
JavaScript Mutation & Coercion

1. Declare Variables
2. Variables Type var firstName = 'Sara';
3. Data Types var age = 27;
// Variable Coercion
4. Variables Mutation console.log('Coercion:', firstName + ' ' + age);
& Coercion console.log (firstName, age); //printing variables
5. Basic Operators // Variable Mutation
firstName = 'Mohammed';
6. Assignment & age = '25';
Logical Operators console.log ('Mutation:', firstName, age);
7. Comparison Operators
8. The typeof Operator
JavaScript Operators
* Given that y = 5
1. Declare Variables
2. Variables Type
3. Data Types
4. Variables Mutation
& Coercion
5. Basic Operators
6. Assignment &
Logical Operators
7. Comparison Operators
8. The typeof Operator
JavaScript Operators
Assignment: * Given that x = 10 and y = 5

1. Declare Variables
2. Variables Type
3. Data Types
4. Variables Mutation
& Coercion
5. Basic Operators
6. Assignment &
Logical Operators Logical: * x = 6 and y = 3
7. Comparison Operators
8. The typeof Operator
JavaScript Operators
* Given that x = 5

1. Declare Variables
2. Variables Type
3. Data Types
4. Variables Mutation
& Coercion
5. Basic Operators
6. Assignment &
Logical Operators
7. Comparison Operators
8. The typeof Operator
JavaScript Operators

1. Declare Variables
2. Variables Type typeof “Sara" // Returns string
typeof 3.14 // Returns number
3. Data Types
typeof NaN // Returns number
4. Variables Mutation typeof false // Returns boolean
& Coercion typeof [1, 2, 3, 4] // Returns object
typeof {name:’Sara', age:34} // Returns object
5. Basic Operators typeof new Date() // Returns object
6. Assignment & typeof function () {} // Returns function
Logical Operators typeof myCar // Returns undefined (if m
yCar is not declared)
7. Comparison Operators typeof null // Returns object
8. The typeof Operator
JavaScript IF Statement
How to Write If Statement:

if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
1. The If Statement }

2. The else if Statement Example:


3. Switch Statement
var time = 'Morning';
var greeting;
if (time == ’Morning') {
greeting = 'Good Morning'
} else {
greeting = 'Good Afternoon'
}
JavaScript IF Statement
How to Write If Statement:
if (condition) {
// block of code to be executed if the condition1 is true
} else if (condition){
// block of code to be executed if the condition2 is true
} else {
// block of code to be executed if the condition1 & condition2 is
1. The If Statement false
}
2. The else if Statement Example:
3. Switch Statement var time = 'Morning';
var greeting;
if (time = ’Morning') {
greeting = 'Good Morning'
} else if (time = 'Afternoon') {
greeting = 'Good Afternoon'
} else {
greeting = 'Good Evening'
}
JavaScript IF Statement
How to Write Switch Statement:
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
1. The If Statement // code block
}
2. The else if Statement
Example:
3. Switch Statement
var a = 2 + 2;
switch (a) {
case 3:
alert( 'Too small' );
break;
case 4:
alert( 'Exactly!' );
break;
case 5:
alert( 'Too large' );
break;
default:
alert( "I don't know such values" );
}
JavaScript IF Statement
How to Write Switch Statement:
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
1. The If Statement // code block
}
2. The else if Statement
Example:
3. Switch Statement
var a = 2 + 2;
switch (a) {
case 3:
alert( 'Too small' );
break;
case 4:
alert( 'Exactly!' );
break;
case 5:
alert( 'Too large' );
break;
default:
alert( "I don't know such values" );
}
JavaScript Functions

function name(parameter1, parameter2, parameter3) {


1. Function Syntax // code to be executed
}
2. Function Invocation
Example:
3. Function Return
function username(fName, lName) {
console.log(fName + lName)
}
JavaScript Functions

The code inside the function will execute when


"something" invokes (calls) the function:
•When an event occurs (when a user clicks a button)
1. Function Syntax •When it is invoked (called) from JavaScript code
•Automatically (self invoked)
2. Function Invocation
Example:
3. Function Return
function userName(fName, lName) {
console.log(fName + lName)
}

userName('sara','soliman')
JavaScript Functions

function myFunction(parameter1, parameter2) {


return parameter1 + parameter2
}
1. Function Syntax
2. Function Invocation Example:

3. Function Return function calculatNum(num1, num2) {


return num1 + num2
}

var result = calculatNum(4,9)


console.log('calculate Result', result)
JavaScript Arrays

Syntax #1:

var arrayname = [item1, item2, ...];


Example:
1. Initialize Array var users = [
2. Access Element Of Array 'sara soliman',
'ahmed mahmoud',
3. Mutate array data 'yaser gamal',
4. Different data types 'engy nabil',
5. Array Methods 'israa atef'
]

Syntax #2:

var arrayname = [item1, item2, ...];


Example:

var arrayName = new Array('sara', 'ahmed', 'israa')


JavaScript Arrays

Syntax :

var element = arrayName[indexNumber]

1. Initialize Array Example:


2. Access Element Of Array
var users = [
3. Mutate array data
'sara soliman',
4. Different data types 'ahmed mahmoud',
5. Array Methods 'yaser gamal',
'engy nabil',
'israa atef'
]
console.log(users[0]) // sara soliman
console.log(users[1]) // ahmed mahmoud
console.log(users[4]) // israa atef
JavaScript Arrays

Syntax :

arrayName[index number] = "New Value"

1. Initialize Array Example:


2. Access Element Of Array
var users = [
3. Mutate array data 'sara soliman',
4. Different data types 'ahmed mahmoud',
5. Array Methods 'yaser gamal',
'engy nabil',
'israa atef'
]
users[2] = 'Yasmin Mahmoud'
console.log(users)
//'sara soliman', 'ahmed mahmoud','Yasmin Mahmoud','
engy nabil','israa atef'
JavaScript Arrays

Syntax :

arrayName = [String, Number, Boolean, Method, ..etc ]

1. Initialize Array Example:


2. Access Element Of Array
var userArr = [
3. Mutate array data 'ssoliman@dnaaya.com’, //String
4. Different data types '123456’, //Number
5. Array Methods true, //Boolean
new Date().getFullYear() //Method
]
console.log(userArr);
JavaScript Arrays
Syntax :

push pop shift unshift


indexOf splice slice
Example:

var users = ['ssoliman', 'abotaleb']


1. Initialize Array users.push('osabry', 'a.elrazik'); //Add to the end of an Array
2. Access Element Of Array //Result: ["ssoliman", "abotaleb", "osabry", "a.elrazik"]
3. Mutate array data users.pop(); //Remove from the end of an Array
//Result: ["ssoliman", "abotaleb", "osabry"]
4. Different data types users.shift(); //Remove from the front of an Array
5. Array Methods //Result: ["abotaleb", "osabry", "a.elrazik"]
users.unshift('fsayed'); //Add to the front of an Array
//Result: ["fsayed","ssoliman", "abotaleb", "osabry", "a.elrazik"]
users.indexOf("abotaleb"); //Find the index of an item in the Array
//Result: 1
users.splice(0,3); //Remove an item by index position
//Result: ["a.elrazik"]
users.slice(); //Copy an Array
//Result: ["ssoliman", "abotaleb", "osabry", "a.elrazik"]
JavaScript Loops
Let's Print on Console Screen “Hello World” 5 Times

Before After
console.log("Hello World"); for (var i = 0; i < 6 ; i++)
console.log("Hello World"); {
console.log("Hello World"); console.log("Hello World")
console.log("Hello World"); }
console.log("Hello World");
JavaScript Types of Loops
Syntax :
while (boolean condition)
{
loop statements...
}

Example:

1. While loop var x = 0;


while(x < 6) {
2. For loop console.log("Hello World");
3. Do while loop x++
}

Loop In Array Example:


var users = ["ssoliman", "abotaleb", "osabry"];
var x = 0;
while(x < users.length){
console.log("User Name =", users[x]);
x++
}
JavaScript Types of Loops
Syntax :
for (variable declaration; condition; increment/decrement)
{
statement(s)
}

Example:

1. While loop for (var i = 0; i < 6 ; i++) {


console.log("Hello World")
2. For loop }
3. Do while loop
Loop In Array Example:

var users = ["ssoliman", "abotaleb", "osabry"];


for(var i = 0; i < users.length; i++) {
console.log("User Name =", users[i]);

}
JavaScript Types of Loops

Syntax :
do
{
statements.. Loop In Array Example:
}
var users = ["ssoliman", "abotaleb",
while (condition);
"osabry"];
1. While loop Example: var x = 0;
2. For loop var x = 0;
do {
console.log("User Name =", users[i]);
3. Do while loop do { x++
console.log("Hello World"); }
x++ while(x < users.length)
}
while(x < 6);
Breaks and Continue in Loops

Break Continue
The break statement breaks (stops) The continue statement terminates
the execution of a loop entirely. execution of the current iteration
in a loop.
var theValue = 4 var theValue = 3;
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
if (i === theValue) { if (i === theValue) {
break; continue;
} }
console.log(i) console.log(i)
} }
//Result: 0 1 2 3 //Result: 0 1 2 4 5
Advanced
JavaScript
Sara Soliman
Software Developer
Everything is an object

Primitives Everything Else….

• Arrays var a = 'hello’;


• Numbers var b = new String('hello');
• Functions
• Strings
• Objects
• Booleans
• Dates
• Undefined
• Wrappers for Numbers, Strings,
• Null
Booleans

…. IS An Object
THE OBJECT-ORIENTED PARADIGM
Parent Class

Parent Class Parent Class Parent Class


1. Classical Inheritance instance instance instance
(non-JS)
2. Prototypal Inheritance

Class- Class- Class-


A B C

Obj-A Obj-B Obj-C


THE OBJECT-ORIENTED PARADIGM

Prototypal Object
1. Classical Inheritance
(non-JS)
2. Prototypal
Inheritance

Obj-A Obj-B Obj-C


Inheritance and the Prototype Chain

Creating Function Constructor


function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
1. Function Constructor this.age = age;
this.eyeColor = eye;
2. Prototyping }
3. Creating Object Creating Object Of Function Constructor

var ahmedObj = new Person(“Ahmed", “saleh", 20, "blue");


var semonObj = new Person(“Semon", “Ali", 26, "green");
Inheritance and the Prototype Chain
Creating Function Constructor
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
1. Function Constructor Add new methods to objects constructors using Prototype
2. Prototyping Person.prototype.printName = function() {

3. Creating Object console.log(this.firstName + " " + this.lastName)


};

And to use it using our object:


var myFather = new Person('mohamed','soliman', '52', '
brown');
myFather.printName() ;
Inheritance and the Prototype Chain
Creates a new object, with the specified prototype.
Syntax :

Object.create(prototype_object, propertiesObject)
Example:
var person = {
name: “Sara Soliman",
1. Function Constructor age: 27,
2. Prototyping printIntroduction: function () {
3. Creating Object console.log(`My name is ${this.name},
Iam ${this.age} Years Old`);}
};
var ahmedObj = Object.create(person, {
name: {value: 'Ahmed'},
age: {value: '25'}
})
Inheritance and the Prototype Chain
Implementing Inheritance

1 Creating ClassA, Instantiated ClassA Using New


Keyword 3 Creating ClassB, inherited the print function
from ClassA

var ClassB = function() {


var ClassA = function() {
this.name = "class A"; this.name = "class B";
} this.surname = "I'm the child";
ClassA.prototype.print = function() { }
console.log(this.name); inheritsFrom(ClassB, ClassA);
} var b = new ClassB();
var a = new ClassA(); b.print();
a.print();

2 Creating “inheritanceFrom” function to use Inheritance


between Classes
var inheritsFrom = function (child, parent
) {
child.prototype = Object.create(parent
.prototype);
};
Function Factory

Create a main function takes array and function as parameter


Example:

var years = [1990, 1965, 1937, 2005, 1998];


function arrayCalc(arr, fn) {
1. Passing function as
var arrRes = [];
argument
for (var i = 0; i < arr.length; i++) {
2. Function Return Function arrRes.push(fn(arr[i]));
3. IIFES }
return arrRes;
}
function calculateAge(el) {
return 2020 - el;
}
var ages = arrayCalc(years, calculateAge);
console.log(ages);
Function Factory

Create a function return another function have a greeting statement


Example:

function greating(fname) {
1. Passing function as
argument return function(lName) {
2. Function Return Function console.log('WELCOME . . . ', fname, lName)
3. IIFES }
}
greating('Sara')('Soliman')
Function Factory

JavaScript Immediately-invoked Function Expressions (IIFE):


Example 1:
(function() {
console.log('Hello World')
1. Passing function as })()
argument
Example 2:
2. Function Return Function
(function doSomething() {
3. IIFES
console.log('Hello World')
})()
Example 3:
;(function() {
console.log('Hello World')
})()
Call, Apply, Bind - The Basic Usages
Call accepts a this value and a list of arguments:
Syntax :
Function.call(this, arg1,arg2,...)
Example 1:
var sara = {
1. Call Method name: 'Sara Soliman',
2. Apply Method presentation: function(age) {
console.log(`Welcome i'm ${this.name}, i'm ${age} years old`);
3. Bind Method
}
};
var mohamed = {
name: 'mohamed',
};
sara.presentation(27);
sara.presentation.call(mohamed, 26);
Call, Apply, Bind - The Basic Usages
Apply is the same as call but instead, apply accepts a single array of
arguments.
Syntax :
Function.apply(this, array)
Example 1:
var sara = {
name: 'Sara',
1. Call Method
presentation: function(age, job) {
2. Apply Method console.log(`Welcome i'm ${this.name}, i'm ${age} years old,
3. Bind Method i'm a ${job}`);
}
};
var mohamed = {
name: 'mohamed',
};
sara.presentation(27, 'software developer');
sara.presentation.apply(mohamed, [26, 'graphic designer’]);
Call, Apply, Bind - The Basic Usages
Apply is the same as call but instead, apply accepts a single array of
arguments.
Syntax :
Function.apply(this, array)
Example 1:
var sara = {
name: 'Sara',
1. Call Method
presentation: function(age, job) {
2. Apply Method console.log(`Welcome i'm ${this.name}, i'm ${age} years old,
3. Bind Method i'm a ${job}`);
}
};
var mohamed = {
name: 'mohamed',
};
var saraPres = sara.presentation.bind(mohamed, 26);
saraPres('graphic designer')
Next Generation
JavaScript
Intro to ES6 / ES2015
Sara Soliman
Software Developer
Introduction To ES6

JavaScript ES6 has been around for few years now,


and it allows us to write code in a clever way
which basically makes the code more modern and
more readable. It's fair to say that with the use of
ES6 features we write less and do more, hence the
term ‘write less, do more’ suits ES6.
ES6 introduced several key features like const, let,
arrow functions, template literals, default
parameters and lot more. Let's take a look at them
one by one.
Introduction To ES6
Block and
IIFES Arrows
Functions
Variables
Let, Const
Classes

“This”
Keyword
Promises

Spread operator
&
Rest Parameters Arrays

Mapping
variable with (var, let, const)

Var Let Const


var - has function level scoping let - has block level scoping const - has block level scoping
and can change the value and can change the value but cannot change the value
reference reference reference
Example: Example: Example:

var len = 10; let len = 10; const len = 10;


for(var index = 0; index for(let index = 0; index for(const index = 0; inde
< len; index++){ < len; index++){ x < len; index++){
console.log(index); console.log(index); console.log(index);
} } }
console.log(index); console.log(index); console.log(index);

Result Result Result


0 1 2 3 4 5 6 7 8 9 0
Uncaught ReferenceError: index is not Uncaught TypeError: Assignment to constant
0 1 2 3 4 5 6 7 8 9 10 variable.
defined at....
Strings

ES6 ES5
let firstName = 'Sara'; let firstName = 'Sara';
let lastName = 'Soliman'; let lastName = 'Soliman';
const yearOfBirth = 1993; const yearOfBirth = 1993;
function calcAge(year) { function calcAge(year) {
return 2020 - year; return 2020 - year;
} }
// ES6 // ES5
console.log( console.log('This is ' + firstName +
' ' + lastName +
`This is ${firstName} ${lastName}.
He was born in ${yearOfBirth}. Today, '. He was born in ' + yearOfBirth + '
. Today, he is '
he is ${calcAge(yearOfBirth)} years o
ld.`); + calcAge(yearOfBirth) + ' years old.
');
Arrow Functions

ES6 ES5
greeting = (name) => { greeting = function(name) {
console.log('WELCOME . . . ', name); console.log('WELCOME . . . ', name);
} }
greeting('Sara’); greeting('Sara’);

Return Example ES6: Return Example ES5:


greeting = greeting = function(name) {
(name) => 'Welcome . . . ' + name; return 'Welcome . . . ' + name;
console.log(greeting('sara’)); }
console.log(greeting('sara'));
Destructuring In Javascript

ES6 ES5
// EXAMPLE #1: // EXAMPLE #1:
const [name, age] = ['Sara', 27]; var ssoliman = ['Sara', 27];
var name = ssoliman[0];
console.log(name);
var age = ssoliman[1];
console.log(age); console.log('name :', name)

// EXAMPLE #2:
const obj = {
firstName: 'Sara',
lastName: 'Soliman'
};

const {firstName, lastName} = obj;


console.log(firstName);
console.log(lastName);
Arrays

ES6 ES5 indexOf()


// EXAMPLE #1: // EXAMPLE #1:
const contacts = [ var names = ['Sara', 'Mohamed', 'Ahmed', 'Israa']
console.log(names.indexOf('Mohamed'));
{name: 'Sara'},
console.log(names.indexOf('Israa'));
{name: 'Mohamed'},
console.log(names.indexOf('Sara'));
{name: 'Ahmed'},
{name: 'Israa'}
]

console.log(contacts.findIndex(contact =>
contact.name === 'Mohamed'));
console.log(contacts.find(contact =>
contact.name === ’Israa'));
Spread operator

ES6 ES5
function addFourAges (a, b, c, d) { function addFourAges (a, b, c, d) {
return a + b + c + d; return a + b + c + d;
} }

var sum1 = addFourAges(18, 30, 12, 21); var sum1 = addFourAges(18, 30, 12, 21);
console.log(sum1); console.log(sum1);

//ES6 //ES5
const sum3 = addFourAges(...ages); var ages = [18, 30, 12, 21];
console.log(sum3); var sum2 = addFourAges.apply(null, ages);
console.log(sum2);
Rest parameters

ES6 ES5
function isAdult(...years) { function isAdult() {
console.log('years es6', years) console.log(arguments);
years.forEach(cur => var argsArr =
console.log( (2020 - cur) >= 18)); Array.prototype.slice.call(arguments);
} console.log(argsArr);
isAdult(1993, 2015, 1992, 2019) argsArr.forEach(function(cur) {
console.log((2020 - cur) >= 18);
})
}
isAdult(1993, 2015, 1992, 2019)
Maps In JavaScript

Creating new map: Map Methods:


const map = new Map() console.log(map.get(5))
map.set(5, "Hello") console.log(map.has(5))
map.set("5", "World") console.log(map.get('Random'))
map.set("sara", "software developer"); console.log(map.has('sara'))
console.log(map); console.log(map.delete('5'))
console.log(map.size); console.log(map.size)
console.log(map.clear())
console.log(map.size)

map vs for and foreach:


let stringArray = ['sara','mahmoud', 'abd elrazik']
function convertString(strArr) {
return strArr.map(result => result.charAt(0).toUpperCase() + result.slice(1).toLocaleLowerCase())
}

console.log(convertString(stringArray))
Classes

ES6 ES5
class Person6 { var Person5 = function(name, yearOfBirth, job)
constructor (name, yearOfBirth, job) { {
this.name = name; this.name = name;
this.yearOfBirth = yearOfBirth;
this.yearOfBirth = yearOfBirth;
this.job = job;
} this.job = job;
calculateAge() { }
var age = new Date().getFullYear() Person5.prototype.calculateAge = function() {
- this.yearOfBirth;
var age =
console.log(age);
} new Date().getFullYear() - this.yearOfBirth;
} console.log(age);
const saraES6 = new Person6('Sara', 1993, 'softwar }
e developer');
var sara = new Person5('Sara', 1993, 'software
Person6.greeting();
developer');
saraES6.calculateAge();
sara.calculateAge();
Asynchronous JavaScript:
Promises, ASYNC/AWAIT
Sara Soliman
Software Developer
Basic example of async
Synchrouns Asynchrouns

const second = () => { const second = () => {


console.log('How Are you?') setTimeout(() => {
} console.log('Async Hey there');
}, 2000);
const first = () => {
}
console.log('Hey there'); const first = () => {
second(); console.log('Hey there');
console.log('The end'); second();
} console.log('The end');
}
first(); first();
Basic example of async

Example 1:

const second = () => {


setTimeout(() => {
console.log('Async Hey there');
1. Basic async
}, 2000);
2. The old way Asynchrouns
Callbacks }
const first = () => {
3. Callback Hell to Promises console.log('Hey there');
4. From Promises to second();
ASync/Await
console.log('The end');
}

first();
Basic example of async
Example 1:
function getEmployee() {
setTimeout(() => {
const employeeId = [29099, 87675, 54674, 2233];
console.log(employeeId);
setTimeout((id) => {
const employee = {
name: 'Sara Soliman',
1. Basic async job: 'Software Developer'
}
2. The old way Asynchrouns console.log(`ID: ${id}, Name:${employee.name}`);
Callbacks setTimeout(job => {
3. Callback Hell to Promises const employee2 = {
name: 'Ahmed Farag',
4. From Promises to job: 'Graphic Designer'
ASync/Await }
console.log(aemployee)
},1500, employee.jop)

}, 1500 , employeeId[2])
}, 1500);
getEmployee();
}
Basic example of async
Example 1:
function getEmployee() {
setTimeout(() => {
const employeeId = [29099, 87675, 54674, 2233];
console.log(employeeId);
setTimeout((id) => {
const employee = {
name: 'Sara Soliman',
1. Basic async job: 'Software Developer'
}
2. The old way Asynchrouns console.log(`ID: ${id}, Name:${employee.name}`);
Callbacks setTimeout(job => {
3. Callback Hell to Promises const employee2 = {
name: 'Ahmed Farag',
4. From Promises to job: 'Graphic Designer'
ASync/Await }
console.log(aemployee)
},1500, employee.jop)

}, 1500 , employeeId[2])
}, 1500);
getEmployee();
}
AngularJS - Tutorial
Sara Soliman
Software Developer
#1 Introduction & Install Requirements

• What is AngularJS:
AngularJS is a structural framework for dynamic web apps powered by Google. It lets you use HTML as your template
language and lets you extend HTML's syntax to express your application's components clearly and
succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to
write.

• Why Use AngularJS:


• JavaScript Framework for creating web and mobile single page application.
• Easy To Learn
• MVC done right
• Better User Interface and support for native android and IOS
• Easer to use DOM Manipulation and Service Provider &
• Best Websites Developed with AngularJS:
#1 How To be an Expert in Angular

• Study Basics of JavaScript Course.


Link: https://www.udemy.com/course/the-complete-javascript-course/

• Study AngularJS Course


Link: https://www.udemy.com/course/the-complete-guide-to-angular-2/

• Study How to use Firebase to build database


Link: https://www.udemy.com/course/firebase-course/

• Study NodeJS and Express


Link: https://www.udemy.com/course/nodejs-unit-testing-in-depth

You might also like