cs50 for mbascdn.cs50.net/2017/mba/classes/web_programming/web... · •ios programming with swift...

31
CS50 for MBAs Web Programming

Upload: others

Post on 06-Aug-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

CS50 for MBAsWeb Programming

Page 2: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

Last TimeDatabase Design

Page 3: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

• iOS Programming with Swift

• Recruiting Software Engineers

• Full-Stack Development with Node.js

• Data Visualization with D3

Page 4: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

This TimeWeb Programming

Page 5: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

• back end, front end

• JavaScript

• APIs

Page 6: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

back end, front end

Page 7: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

DOM

Page 8: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

<!DOCTYPE html>

<html> <head> <title>hello, world</title> </head> <body> hello, world </body> </html>

Page 9: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

events

Page 10: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data
Page 11: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

functions

Page 12: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

functions

window.alert("hello, world");

Page 13: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

loops

Page 14: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

loops

while (true) { window.alert("hello, world"); }

Page 15: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

loops

Page 16: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

loops

for (var i = 0; i < 10; i++) { window.alert("hello, world"); }

Page 17: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

variables

Page 18: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

variables

var counter = 0; while (true) { window.alert(counter); counter++; }

Page 19: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

Boolean expressions

Page 20: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

Boolean expressions

(x < y) ((x < y) && (y < z))

Page 21: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

conditions

Page 22: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

conditionsif (x < y) { window.alert("x is less than y"); } else if (x > y) { window.alert("x is greater than y"); } else { window.alert("x is equal to y"); }

Page 23: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

examples

Page 24: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

http://nifty.stanford.edu/2011/parlante-image-puzzle/

Page 25: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

getRed(x, y)

getGreen(x, y)

getBlue(x, y)

setRed(x, y, value)

setGreen(x, y, value)

setBlue(x, y, value)

Page 26: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

https://developers.google.com/maps/documentation/javascript/tutorial

Page 27: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

AIzaSyAmk7cP6WPlqLXgIP4mlQKg7RTDVxhKm50

Page 28: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

http://bit.ly/mba-key

Page 29: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

Next TimeMobile Strategies

Page 30: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

• hybrid apps, native apps, web apps

Page 31: CS50 for MBAscdn.cs50.net/2017/mba/classes/web_programming/web... · •iOS Programming with Swift • Recruiting Software Engineers • Full-Stack Development with Node.js • Data

CS50 for MBAsWeb Programming