ACAD 275: Dev I Iovine and Young Academy
ACAD 275: Dev I

Web Experiences

Aaron Siegel | | 2/21/2023

(use your left and right arrow keys to navigate slides)

Interactivity


Web Publishing


Basic production of web pages using HTML and CSS.

Web Development


Interactivity, database calls, dynamic pages, everything beyond publishing.

Server-side Web Development


Code that runs on the server using a server-side scripting language like PHP.

Client-side Web Development


Code that runs directly in the browser on the user's computer. This can only be done with JavaScript.

Frontend Technologies




HTML is for Structure


HTML allows you to define how your content is structured within your page.


CSS is for Appearance


CSS allows you to style the appearance of the content within your page.


JavaScript is for Behavior


JavaScript allows you to program the behavior and interactivity of the content within your page.


HTML: Hypertext Markup Language


  • Creates objects on a webpage.
  • Attributes of HTML objects are properties of that object.


CSS: Cascading Style Sheets


  • Does not create objects, only refers to ones that can exist.
  • Written in stylesheets or inline with HTML elements.
  • Pseudo-classes afford a limited amount of interactivity through CSS.


JavaScript


  • Redefine objects and their properties.
  • JavaScript libraries are packages of code that people can use to build more complex things in easier ways.
  • Frameworks are more complex combinations of technology that make production of more complex applications easier for the developer.
  • JavaScript allows pages to be dynamic after they are loaded.
  • JavaScript can provide logic and process data asynchronously.
  • Acts a bridge between (1) the user and the page, (2) the page and the server, and (3) the HTML and CSS.

JavaScript Functionality


  • Manipulate Objects.
  • Create Objects.
  • Store data in variables and arrays.
  • Calculate (perform mathematical operations).
  • Logical branches (conditional statements, comparators, operators).
  • Event based execution of code.

JavaScript Common Usage


  • Validate data in forms.
  • Respond to user interaction with objects on a page.
  • Change content or stylesheets.
  • Load data from a server.
  • Create dynamic menus.
  • Animate elements.
  • SAAS products.

JavaScript Examples


  • Image swapping and pre-caching.
  • Interactive UIs.
  • Storing/Retrieving Data.
  • Form Validation.
  • Interactive Data.
  • Dynamic HTML.

When Does JavaScript Work?


  • On page load.
  • After an established interval.
  • Upon user interaction (mouse rollover, click, etc).
  • When the user completes a requirement.
  • When a process is complete (an event is triggered).
  • If a bad condition is met (an error has occurred).

Fundamental JavaScript Concepts


  • All HTML tags are objects.
  • All objects can have properties (attributes).
  • Alter objects and their properties.
  • Event based code.
  • Add/bind events to objects.
  • Functions (arguments, returns).

What has JavaScript enabled?