Week 1

Data type

There are several data type in programming languages

  • String: for representing text
  • Numbers: for representing numbers
  • Boolean: for true and false
  • Null: for nothing
  • Undefined: for when data type isn't determaind
  • Symbol

Variables

Variables be defined by keywords "const", "let", "var" to store a value or values

  • const name = "Moein"
  • let sum = a + b
  • var x = 3

Arithmetic Operators

  • +
  • -
  • *
  • **
  • /
  • %
  • ++
  • --

Assignment Operator

  • =
  • *=
  • +=
  • -=
  • /=
  • ++
  • --

if

Use the keyword ‘if’ to start a conditional statement

Array

More stuff to do with more data.In the real world an array is like a list (shopping list)

For and While Loops

"for" loop, it will iterate though the array and console log each item *i stands for index, which is widely used in loops. However, it could be anything you like. A "while" loop will continue to run while a condition is true

Week 2

Js objects

objects are containers that can store data and functions. We use Key-Value pairs to store the data

const members = { name: "Moein", lastName: "Zidehsaraei", age: 45 }

HTML

is used for coding the content of webpages. It has been around since the early 90’s. HTML is constructed using ELEMENTS

CSS

CSS ic Cascading Style Sheets

Box Model

CSS ic Cascading Style Sheets. Content The content of the box, where text and images appear. Padding Clears an area around the content. The Padding is transparent Border A border that goes around the padding and content. Margin Clears and area outside the border. The Margin is transparent.

Media query

Media queries allow us to change styles depending on particular parameters like screen width or device type. Here there are media query codes.Please resize this page to see changed styles

Flexbox

Flexbox, or the Flexible Box Layout, is a layout model in CSS that allows you to design complex layouts with a more efficient and predictable way to distribute space and align content in a container, even when the size of your items is unknown or dynamic. It is particularly useful for creating responsive and complex layouts without relying heavily on floats or positioning.

There are two flexbox codes belong to this page and home page

Animation

CSS allows animation of HTML elements without using JavaScript or Flash! Here, There are an animation code and its output

SQL

SQL is a standard language for storing, manipulating and retrieving data in databases. For creating a table in sql we use key word "CREATE TABLE" then table name. Here there is a sample for making a table, defining fields with data type, insert data, and delete data.

Week 3

Project management

Software Development Life Cycle

  • Analysis: Understand the problem that needs to be solved. How can the current situation be improved?

  • Design: Using the software specification, design a solution.

  • Development: Create the solution using the appropriate programming languages and tools.

  • Testing: Test the solution against the requirements. Does it do what the client wanted?

  • Deployment: Roll the software out. This may be done in stages with a parallel ‘test phase’ where both old and new systems are run side by side so that any issue do not impact on client business.

  • Maintenance: Deal with any bugs that arise, identify potential improvements

Week 4

JS DOM

DOM represents a webpage as a tree like structure

Document Object

In JS we can select and control elements of the currently loaded webpage

  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelectorAll()
  • querySelector()

Set events

For setting key or mouse events we use "addEventListener"

SQL advance query

We can creat complex query by joining tables together.

Week 5

JavaScript Engines

A javascript engine executes javascript. V8 is the name of the JavaScript engine that powers Google Chrome.

Three fundamental parts of the JavaScript engine :

  1. Execution contex
  2. Memory environment
  3. Thread of execution

Scope in JS

We’ve all experienced it… Sometimes we have access to a variable we’ve created and sometimes we don’t ..why? Because of scope.

There are 3 types of variable scope :

  1. Global Scope :

    2. Variables declared Globally (outside any function) have Global Scope. Global variables can be accessed from anywhere in a JavaScript program.

  2. Function Scope

    3. Javascript has function scope, meaning each function creates a new scope. Variables declared inside a function are not accessible from outside the function

  3. Block Scope

    4. Before ES6 (2015) Javascript only had global scope and function scope. ES6 introduced the Let and Const keywords. These two keywords provide block scope in Javascript. Variables declared inside a block cannot be accessed outside a block. Let’s compare and contrast the old keyword Var with Let in a For Loop.

Higher Order Functions

Functions which accept a function as a parameter.ORFunctions which return a function.

Example One :

Example Two :

Example Three :

Example Four :

Week 6

Objects

objects are containers that can store data and functions. We use Key-Value pairs to store the data.

Access data in an object

Using Functions Objects

Asynchronous JavaScript

To explore what synchronous and asynchronous mean To be able to work with higher order functions and be familiar with callback functions To recognise what promises are in JavaScript To identify the async and await keywords and use them to handle data

In JavaScript, synchronous refers to our code executing one thing at a time. So our program waits until the current function has finished before moving on to the next.

JavaScript Promise Object

Waiting for a Timeout

Waiting for a File

What is Inquirer?

Inquirer is an NPM package that provides an easy way to capture user input in your Node.js command line interface applications. It provides several methods for asking questions and returning answers from the user that can be accessed by a .then promise function.

Week 7

React js

React is The library for web and native user interfaces

Create React Application

Folder Structure

Run react app

npm start

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser. The page will reload if you make edits. You will also see any lint errors in the console.

Week 8

React lifecycle

To explore lifecycle methods in both class and functional components To be familiar with ComponentDidMount, ComponentDidUpdate and ComponentWillUnmount

Fetching Data

What is "useEffect" Hook?

When fetching external data use this hook to control the lifecycle effects.