1 of 16

OpenBrackets

Intermediate Web Development

Week 3 Day 1

Welcome!

2 of 16

Welcome to class!

This is the Intermediate Web Development class. Make sure you’re in the right place!

​

Schedule for today:

  • 10 minutes for a game demo
  • 40 minutes for an intro to JavaScript
  • 10 minutes for a break
  • 30 minutes for a Kahoot!

3 of 16

How are you doing today?

On a scale of 1-10, how are you doing today and why?

​

4 of 16

Asking Questions

Type in chat

Or

  1. Click Reactions
  2. Click Raise Hand

5 of 16

Speed Clicker

  • The goal of this class is to make a game called Speed Clicker

6 of 16

Intro to JavaScript

7 of 16

What is JavaScript?

  • JavaScript makes your website interactive
    • Right now our websites are good for presenting information, but they can’t do much else
  • Your website can respond to user actions
    • Clicking a button
    • Typing something into an input box
  • Also known as JS for short

8 of 16

Importing JavaScript

  • We can use the <script> tag to import a JavaScript file
    • This is similar to how we use <link> to import CSS files
    • <script> tags go in the <head> tag
  • All our JavaScript files will end in .js
  • <script src="/script.js" defer></script>
    • We need a closing component because <script> can also have JS code inside it
    • For now, all our JS code will be in separate files

Let’s test this out! Import the JS file at https://www.openbrackets.us/assets/js/iwdDemo.js

9 of 16

Printing with JavaScript

  • All this code will go in the script.js file
    • Replit should have already created one for you
  • JavaScript has a console that we can view in DevTools
    • We can see the console in Replit too
  • To print something to the console, we write console.log("something") or console.log("Hello!")
    • You can change the "something" to be whatever you want
    • Make sure there are quotes around what you want to print!
      • Otherwise we’ll get a SyntaxError or ReferenceError

10 of 16

Types

  • The stuff that we just printed is called a string
    • A string is a bunch of characters with quotes around them
    • Words and sentences are strings
  • JS also has numbers
    • If you’ve worked with Python, you might remember int and float. In JS, all numbers are floats.
    • We can do math with numbers

11 of 16

Math

  • Addition uses +
  • Subtraction uses -
  • Multiplication uses *
    • x won’t work
  • Division uses /

​

We can do math on some numbers and then print out the result

12 of 16

Math Quiz!

What is 213 + 352?

What is 638 - 480?

What is 203 * 118?

What is 840 / 125?

13 of 16

10 minute break!

14 of 16

Kahoot!

15 of 16

When you need help outside class

Email contact@openbrackets.us and say what class and teacher you have

  • Don't email teacher directly

​

If you are age 13 or older, you can try Discord

  • https://discord.gg/ZRtk534

​

The age restriction is because of Discord’s Terms of Service

16 of 16

Thanks for coming to class!

Please let us know if you have any questions!