JAVASCRIPT DEVELOPMENT Sasha Vodnik, Instructor JAVASCRIPT - - PowerPoint PPT Presentation

▶
javascript development
SMART_READER_LITE
LIVE PREVIEW

JAVASCRIPT DEVELOPMENT Sasha Vodnik, Instructor JAVASCRIPT - - PowerPoint PPT Presentation

Aug 06, 2023 252 likes •1.13k views

JAVASCRIPT DEVELOPMENT Sasha Vodnik, Instructor JAVASCRIPT DEVELOPMENT THE COMMAND LINE THE COMMAND LINE WEEKLY OVERVIEW WEEK 2 The Command Line / Data Types WEEK 3 Loops & Conditionals / Functions & Scope WEEK 4 Slackbot Lab /

slide-1
SLIDE 1

Sasha Vodnik, Instructor

JAVASCRIPT DEVELOPMENT

slide-2
SLIDE 2

JAVASCRIPT DEVELOPMENT

THE COMMAND LINE

slide-3
SLIDE 3

WEEKLY OVERVIEW

THE COMMAND LINE WEEK 4 WEEK 2

Slackbot Lab / Objects & JSON The Command Line / Data Types

WEEK 3

Loops & Conditionals / Functions & Scope

slide-4
SLIDE 4

THE COMMAND LINE

LEARNING OBJECTIVES

  • Summarize the client-server model & explain how DNS lookup works.
  • Use the most common commands to navigate and modify files /

directories via the terminal window.

  • Initialize a local Git repository and push/pull changes to a remote Git

repository.

  • Run basic JavaScript code on the command line using Node.

4

At the end of this class, you will be able to

slide-5
SLIDE 5

THE COMMAND LINE

AGENDA

5

  • Client-server model & DNS
  • JS and web technology
  • The terminal
  • Git and GitHub
  • Command line JS
slide-6
SLIDE 6

THE COMMAND LINE

Homework checkin/questions

6

  • The most significant thing I learned in the homework

(or last class) is __________.

  • My biggest outstanding question from the homework

(or last class) is __________.

In the #01-command-line channel in Slack, share your answers to one or both of the following questions:

slide-7
SLIDE 7

THE COMMAND LINE

EXIT TICKET QUESTIONS

7

  • 1. I am not really sure on git, node and how the other things really work

until we start to use them

  • 2. Will we be using frameworks like Vue.JS or React?
  • 3. How do package managers work?
  • 4. What, in general, is getting set up in the background when I run the

commands for installation on the back end?

  • 5. How to correctly setup Sublime for the terminal
  • 6. I'm not clear how we got to that list of ways we use the Internet

without the web.

slide-8
SLIDE 8

Name some things you use the Internet for that are not part of the web

  • Email
  • Skype/GoogleTalk/FaceTime
  • Dropbox/iCloud/cloud storage
  • Spotify/Pandora/music streaming
  • YouTube/Netflix/video streaming

THE COMMAND LINE

INTERNET VS WORLD WIDE WEB

slide-9
SLIDE 9

THE COMMAND LINE 9

Think about last class:

  • We installed software from the command line by typing commands
  • We also installed software by downloading an installer, double-clicking

it, and following the prompts

slide-10
SLIDE 10
  • Use the most common commands to navigate and modify files /

directories via the terminal window. 4 min

  • 1. List at least 2 advantages to using the command line.
  • 2. List at least 2 disadvantages to using the command line.

EXERCISE

TIMING KEY OBJECTIVE

ACTIVITY

  • Turn and Talk

TYPE OF EXERCISE

slide-11
SLIDE 11

The Client-Server Model & DNS

THE COMMAND LINE 11

slide-12
SLIDE 12

INSTALLFEST

THE CLIENT-SERVER MODEL

request response

slide-13
SLIDE 13

INSTALLFEST

HOW DO YOU REACH A SPECIFIC SERVER?

slide-14
SLIDE 14

INSTALLFEST

HOW DO YOU REACH A SPECIFIC SERVER?

slide-15
SLIDE 15

4 min

  • 1. In your browser, open a new tab, type 50.0.2.222, then

press Enter.

  • 2. Discuss with your partners what happened and why.
  • 3. On your desk, collaborate to draw a diagram illustrating

what happened. Include client, server, and DNS in your diagram.

EXERCISE

TIMING KEY OBJECTIVE

ACTIVITY

  • Partner activity (groups of 2-3)

TYPE OF EXERCISE

  • Summarize the client-server model & explain how DNS lookup works.
slide-16
SLIDE 16

JavaScript & Web Technology

THE COMMAND LINE 16

slide-17
SLIDE 17

THE COMMAND LINE 17

WHAT CAN JAVASCRIPT DO?

front end tasks (animations, buttons, forms) APIs, databases, back end tasks

slide-18
SLIDE 18

THE COMMAND LINE 18

VERY FEW STEPS TO RUN

runs directly in browser within an HTML file also runs in node.js

slide-19
SLIDE 19

THE COMMAND LINE 19

AND WORKS EVEN WHEN COMPUTERS ARE OFFLINE

runs directly in browser within an HTML file also runs in node.js

slide-20
SLIDE 20

THE COMMAND LINE 20

HIGHLY RESPONSIVE INTERFACES

slide-21
SLIDE 21

THE COMMAND LINE 21

LOAD ADDITIONAL CONTENT WHEN USER NEEDS IT (AJAX)

slide-22
SLIDE 22

THE COMMAND LINE 22

WHAT ELSE CAN JAVASCRIPT DO?

  • Determine your browser functional limitations and react accordingly

(progressive enhancement)

  • Power website backends and physical devices (node.js)
slide-23
SLIDE 23

THE COMMAND LINE 23

DRAWBACK: The environment in which JavaScript

  • perates is unknown
slide-24
SLIDE 24

THE COMMAND LINE 24

DRAWBACK: JavaScript can be disabled

slide-25
SLIDE 25

Node.js

THE COMMAND LINE 25

slide-26
SLIDE 26

THE COMMAND LINE 26

Node.js

  • A definition (from Wikipedia):
  • In software development, Node.js is an open-source, cross-platform

runtime environment for developing server-side Web applications.

  • Enables JavaScript on the server (the backend)
  • Written in C, C++, and JS (so, not a JS framework)
  • Interprets JS using Chrome's V8 engine
  • Module driven; see Node Package Manager (npm)
  • All about non-blocking, asychronous input/output
slide-27
SLIDE 27

THE COMMAND LINE 27

Node.js

  • We will not be using Node.js as a web server (backend) - see Firebase
  • We will be taking advantage of Node's command line interface
  • Allows us to run JavaScript from our terminal applications
  • More at the end of class...
slide-28
SLIDE 28

JavaScript Frameworks & Libraries

THE COMMAND LINE 28

slide-29
SLIDE 29

THE COMMAND LINE 29

A Library

  • Set of predefined functions that your code calls
  • Each call performs work and returns a result (and control) to your

code

  • Specific, well-defined operations
  • Example: jQuery
slide-30
SLIDE 30

THE COMMAND LINE 30

A Framework

  • Opinionated architecture for building software
  • Control-flow exists, you fill in with your code
  • Calls your code; is always in control
  • Examples: React, Angular, Vue, Ember
slide-31
SLIDE 31

THE COMMAND LINE 31

Libraries vs Frameworks

  • The primary difference (source):
  • You call library
  • Framework calls you
  • Please Note:
  • JSD focuses on the foundations of JavaScript as a programming

language

  • We will be using the jQuery library
  • Opportunity towards class end for a framework intro
slide-32
SLIDE 32

THE COMMAND LINE 32

slide-33
SLIDE 33

The Terminal

THE COMMAND LINE 33

slide-34
SLIDE 34

THE COMMAND LINE 34

INTRODUCTION TO THE TERMINAL

  • Terminal allows you to interact with your

computer faster

  • Terminal === Command Line === Console
slide-35
SLIDE 35

THE COMMAND LINE 35

UNIX

  • Family of operating systems,

including all Linux systems and OS X/macOS

UNIX

slide-36
SLIDE 36

THE COMMAND LINE 36

SHELL

  • A generic name for the primary

program that runs inside a terminal

slide-37
SLIDE 37

THE COMMAND LINE 37

BASH

  • Bourne-again shell: a specific shell

program

Sashas-MacBook-Pro:JS-SF-8 sasha$
slide-38
SLIDE 38

THE COMMAND LINE 38

ANATOMY OF THE TERMINAL

Sashas-MacBook-Pro:JS-SF-8 sasha$

slide-39
SLIDE 39

Sashas-MacBook-Pro:JS-SF-8 sasha$

THE COMMAND LINE 39

ANATOMY OF THE TERMINAL

Host (computer) name

slide-40
SLIDE 40

Sashas-MacBook-Pro:JS-SF-8 sasha$

THE COMMAND LINE 40

ANATOMY OF THE TERMINAL

Working directory (current folder)

slide-41
SLIDE 41

Sashas-MacBook-Pro:JS-SF-8 sasha$

THE COMMAND LINE 41

ANATOMY OF THE TERMINAL

Username

slide-42
SLIDE 42

Sashas-MacBook-Pro:JS-SF-8 sasha$

THE COMMAND LINE 42

ANATOMY OF THE TERMINAL

Bash prompt

slide-43
SLIDE 43

Sashas-MacBook-Pro:JS-SF-8 sasha$ ls

THE COMMAND LINE 43

ANATOMY OF THE TERMINAL

Command (program)

slide-44
SLIDE 44

Sashas-MacBook-Pro:JS-SF-8 sasha$ ls 00-installfest

THE COMMAND LINE 44

ANATOMY OF THE TERMINAL

Argument (input)

slide-45
SLIDE 45

Sashas-MacBook-Pro:JS-SF-8 sasha$ ls -a 00-installfest

THE COMMAND LINE 45

ANATOMY OF THE TERMINAL

Option

slide-46
SLIDE 46

Sashas-MacBook-Pro:JS-SF-8 sasha$ ls -a 00-installfest . .DS_Store index.html slides.md .. img install.md Sashas-MacBook-Pro:JS-SF-8 sasha$

THE COMMAND LINE 46

ANATOMY OF THE TERMINAL

Output

slide-47
SLIDE 47

THE COMMAND LINE

slide-48
SLIDE 48

THE COMMAND LINE 48

Configure Visual Studio Code or Sublime so you can call it from the command line (Mac only)

Visual Studio Code

https://code.visualstudio.com/docs/setup/osx

Sublime Text 3

http://www.sublimetext.com/docs/3/osx_command_line.html

slide-49
SLIDE 49

THE COMMAND LINE 49

Command line codealong

For Mac Open the Terminal app (Applications > Utilities > Terminal) For Windows Open the Git BASH application

slide-50
SLIDE 50
  • Use the most common commands to navigate and modify files /

directories via the terminal window. 10 min Follow the instructions posted on the class resources repo to navigate and modify files and directories using the command line.

EXERCISE

TIMING KEY OBJECTIVE

LAB — COMMAND LINE

  • Individual/Pairs

TYPE OF EXERCISE

slide-51
SLIDE 51
  • Use the most common commands to navigate and modify files /

directories via the terminal window. 2 min

  • 1. Name a command line command and explain what it
  • does. Let’s hear from everyone at least once!

EXERCISE

TIMING KEY OBJECTIVE

EXERCISE — COMMAND LINE

  • Whole class brainstorm

TYPE OF EXERCISE

slide-52
SLIDE 52

Introduction to Git/GitHub

THE COMMAND LINE 52

slide-53
SLIDE 53

THE COMMAND LINE

  • A version control program that saves the state of

your project's files and folders

  • Basically, it takes a "snapshot" of what all your files

look like at a moment and stores a reference to that "snapshot"

GIT

slide-54
SLIDE 54

THE COMMAND LINE

  • Platform that makes it easy to manage git repositories.
  • Similar to Dropbox or Google Drive, but for code.
  • Stores a history of files and the changes that happen within each changed

document.

  • Hosts files on the cloud so you can share the finished product with other people.
  • Git - the technology that Github is based on top of - was designed to allow for

multiple engineers to work on the same project.

GITHUB IS A WEB APP/PLATFORM THAT

slide-55
SLIDE 55

THE COMMAND LINE

  • Since GitHub stores a

history of the code, it allows developers to go back in time if something breaks.

HISTORY COLLABORATION

  • Allows multiple developers to

work on the same project. Much like Google Drive lets multiple people collaborate on the same document, GitHub allows this for code.

  • You can see who worked on what.

FEEDBACK

  • GitHub allows for

feedback to be given on the code which, hopefully, increases code quality.

Why use GitHub?

slide-56
SLIDE 56

THE COMMAND LINE 56

  • Git is version control sostware
  • GitHub is a website and platform for utilizing Git in a collaborative way

Git vs GitHub

slide-57
SLIDE 57

THE COMMAND LINE 57

Git/GitHub Vocabulary

  • Repository
  • Clone
  • Commit
  • Push
  • Pull
slide-58
SLIDE 58

THE COMMAND LINE 58

What is a repository (repo)?

  • Basic element of GitHub
  • Contains all of a project's files (all the code)
  • One or more users can contribute to a single repository
  • Repositories are either public or private
  • By the end of class today, you will create your own repo
slide-59
SLIDE 59

THE COMMAND LINE 59

clone

  • Git command that copies/clones a remote

repo to your machine

  • This copy/clone is called a local repo
  • Changes to the local repo will not affect the

remote

slide-60
SLIDE 60

THE COMMAND LINE 60

commit

  • Git command that creates a snapshot of

changes to a repo

  • Think of it as "saving" your changes
  • Contains a message describing the changes

made

slide-61
SLIDE 61

THE COMMAND LINE 61

push

  • Git command that sends your commits (saved

changes) to a remote repository

  • Allows other developers to see your changes and

copy (“pull”) them to their own local repos

local clone with changes remote repo

slide-62
SLIDE 62

THE COMMAND LINE 62

pull

  • Git command that copies (pulls) changes by other

developers from a remote repository to your local clone

  • Allows you to see changes made by other

developers and incorporate them into your local clone

local clone remote repo with changes

slide-63
SLIDE 63

THE COMMAND LINE 63

How will we use GitHub in JSD8?

  • contains slides and start files
  • you will pull changes at the

start of each class JS-SF-8-resources JS-SF-8-homework

  • currently empty
  • you will push your

completed homework and receive feedback here You will create your

  • wn additional repos

for the 3 projects during the course of this class.

slide-64
SLIDE 64

THE COMMAND LINE

GIT COMMANDS

64

slide-65
SLIDE 65

THE COMMAND LINE

slide-66
SLIDE 66
  • Understand how to initialize a local Git repository and push/

pull changes to a remote Git repository. 2 min

EXERCISE

TIMING KEY OBJECTIVE

EXERCISE — GIT/GITHUB

  • Pairs

TYPE OF EXERCISE

  • 1. What command do you use to initialize a local Git

repository? (Hint: Check the cheat sheet.) What does initializing do?

  • 2. What command do you use to push changes to a remote

Git repository? What does pushing do?

  • 3. What command do you use to pull changes from a remote

Git repository? What does pulling do?

  • 4. BONUS: Draw a diagram illustrating all 3 commands
slide-67
SLIDE 67

Intro to Node.js and command line JS

THE COMMAND LINE 67

slide-68
SLIDE 68

THE COMMAND LINE 68

slide-69
SLIDE 69

THE COMMAND LINE 69

How is Node different from JS in the browser?

  • No browser-specific functionality
  • Same JS engine as Chrome
slide-70
SLIDE 70

THE COMMAND LINE 70

What is Node good for?

  • Creating a backend server for a web application
  • Running a script to do data analysis
  • File management
  • Making command line programs

front end back end

slide-71
SLIDE 71

THE COMMAND LINE 71

Ways to run Node

Interactive command line Run a file

> 5 + 2 < 7 Your command Node’s response > script.js You Node < 7 Node loads the file script.js and executes its contents

slide-72
SLIDE 72

Executing JavaScript code

THE COMMAND LINE 72

slide-73
SLIDE 73

THE COMMAND LINE 73

Let’s write some JavaScript!

slide-74
SLIDE 74

THE COMMAND LINE 74

Variables

  • Containers that allow us to store values
  • Let us tell our program to remember values for us to use later on
  • The action of saving a value to a variable is called assignment
slide-75
SLIDE 75

THE COMMAND LINE

let age;

Declaring a variable

slide-76
SLIDE 76

THE COMMAND LINE

age = 29;

Assigning a value to a variable

slide-77
SLIDE 77

THE COMMAND LINE

let age = 29;

Declaring and assigning in a single statement

slide-78
SLIDE 78

THE COMMAND LINE

console.log("Hello!");

Printing things out for our own inspection

slide-79
SLIDE 79

THE COMMAND LINE

console.log(age);

Printing a variable value out for our own inspection

slide-80
SLIDE 80

THE COMMAND LINE 80

When do you use console.log?

  • When you are developing a program and need help figuring out what’s

going on (aka debugging)

  • When you want to print things to the command line

browser developer tools command line

slide-81
SLIDE 81

THE COMMAND LINE

slide-82
SLIDE 82

THE COMMAND LINE 82

Exit the Node console

control + C twice

>

$

Node prompt BASH prompt

slide-83
SLIDE 83
  • Run basic JavaScript code on the command line using Node.

2 min

EXERCISE

TIMING KEY OBJECTIVE

EXERCISE — NODE

  • Turn and talk

TYPE OF EXERCISE

  • 1. What is Node?
  • 2. What did we use it for today?
  • 3. BONUS: How else can it be used?
slide-84
SLIDE 84

THE COMMAND LINE

LEARNING OBJECTIVES - REVIEW

  • Summarize the client-server model & explain how DNS lookup works.
  • Use the most common commands to navigate and modify files /

directories via the terminal window.

  • Initialize a local Git repository and push/pull changes to a remote Git

repository.

  • Run basic JavaScript code on the command line using Node.

84

slide-85
SLIDE 85

THE COMMAND LINE 85

Next class preview: Data Types

  • Describe the concept of a "data type" and how it relates to variables.
  • Declare, assign to, and manipulate data stored in a variable.
  • Create arrays and access values in them.
  • Iterate over and manipulate values in an array.
slide-86
SLIDE 86

THE COMMAND LINE 86

Exit Tickets!

slide-87
SLIDE 87

Q&A

THE COMMAND LINE 87