Starting shortly.

  • Coffee is on the house
    (Tell the barista you're with the meetup)

Announcements

  • Missing a flash drive?

  • Continue the discussion on Slack

  • Next time: Ionic2 Intro

  • New members/Intros

Web app

vs

Web site

Web Site

  • Defined by its content
  • Typically one directional
  • Generic

Web App

  • Defined by its interaction with the content
  • Typically two directional
  • Specific

Web site

Web App

Site

Server

Server

Design

Content

UI/UX

Authentication

Front End

Web App

Server

Design

Content

UI/UX

Authentication

Front End

Web App: Front End

HTML

JAVASCRIPT

CSS

What elements to show on the page?

How should the user interact with the page?

How should elements on the page look like?

Fundamentals of a programming Language

What most languages have

  • Variables

    • Primitives, Objects

  • Control Structures

  • Functions/Methods

  • Operators

Variables

Primitives

  • String

  • Number or Integer

  • Boolean

  • Null (JS)

  • Undefined (JS)

  • None (Python)

Objects

  • Date

  • Array

  • Dictionary (Python)

  • List (Python)

  • Employee (Custom)

Syntax Comparison

JavaScript

Java

var answer = 42;
int answer = 42;

What type of variable is answer?

Number

JavaScript

Java

var answer = "42";
String answer = "42";

What type of variable is answer?

String

JavaScript

Java

var answer = "42";

answer = 12345;
String answer = "42";

answer = 12345;

What type of variable is answer?

12345

*ERROR*

String

Objects

var employee = {};

Basic:

var employee = {
    firstName: "Eugen",
    lastName: "Istoc",
    zipCode: 30044
};

More advanced:

Creating Objects

Accessing Objects

How can I get the employee zip code?

var employee_zip_code = employee.zipCode;
var employee_zip_code = employee["zipCode"];

More Objects

var car = {
    make: "Nissan",
    model: "Frontier"
    owner: 'Eugen',
    phone: 404-993-5056,
    configuration: {
        "cylinders": 6;
        fuel type: "unleaded";
    }
};

Identify the problems with this object?

Answer

var car = {
    make: "Nissan",
    model: "Frontier",
    owner: 'Eugen',
    phone: "404-993-5056",
    configuration: {
        "cylinders": 6,
        fueltype: "unleaded",
    }
};
var car = {
    make: "Nissan",
    model: "Frontier"
    owner: 'Eugen',
    phone: 404-993-5056,
    configuration: {
        "cylinders": 6;
        fuel type: "unleaded";
    }
};

EcmaScript

JavaScript

ActionScript

V8

Web Browser

How did Javascript get here?

Fundamentals of Web Development Part 1

By genuchelu

Made with Slides.com

Fundamentals of Web Development Part 1

Introduction to programming with an emphasis on Javascript and web technologies

  • 556

More from genuchelu