The goal of this class is to improve and develop your JavaScript skill, knowledge, and to further develop your skills in software development.
By the end of the class you should be able to:
- Use functions and variables
- Write for loops in JavaScript
- Write if statements in JavaScript
- Use Canvas to draw bitmap graphics
- Describe program flow
These are the two goals that will bring you success.
- Building Portfolio Projects 🖼
- Master Learning Objectives 🧠
Portfolio projects 🖼 are what get you noticed 👁. Your portfolio is often the reason people get invited to job interviews 🤝.
Learning objectives are the concepts and ideas that you need to know to claim mastery of a subject. 🏫
Learning Objectives are often skills that are related to success at job interviews and on the job. 😎
When you understand a learning objective you will be able to explain it and put it into practice.
There will be learning objectives for each class. You should test your knowledge by explaining the concepts to someone else. 🤼♀️
If you are having trouble understanding a learning objective you need to take action.
- Discuss the topic with another student
- Talk with a TA
- Bring questions to class
- Talk to an instructor during lab or office hours.
The goal is to produce something that shows your skills.
- Breakout - This is a JavaScript implementation of the arcade game Breakout
- React Fundamentals Tutorial - This tutorial will get you started with React
- Custom/Contractor Project with React - This will be a website built with React and is open to your ideas and input.
The Breakout tutorial is a great JS practice project. It makes use of many of the core concepts found in every programming language.
- Variables
- Functions
- Flow control
- loops
- if else
- Arrays
- Objects
After completing the tutorial you will improve the code by applying modern techniques and best practices. This will include:
- Using ES6 JS ideas and syntax
- Linting to professional standards
- Using build systems and bundling
The Custom/Contractor project will be built with React.
Here you will put all of the things from the first project into something that is built using one of the most common and popular libraries in use today.
- What is Breakout?
- How does the tutorial game work?
- Draws with canvas
- Use cartesian coordinates?
Breakout was invented by Atari in 1976!
It looked like this.
Canvas is a JS API that allows you to draw bitmapped graphics. Use it to draw pictures. It's good for games.
Canvas is a tag:
<canvas id="myCanvas"></canvas>Think of canvas as the <img> tag with the ability to draw on it.
Like the <img> tag you should give <canvas> width and height.
<canvas id="myCanvas" width="480" height="320"></canvas>Your game will look like this:
You will draw your game on Canvas with JS.
Canvas allows you to draw shapes into a rectangular area.
Canvas is mapped in cartesian coordinates.
Canvas is mapped in cartesian coordinates.
You'll draw the ball from the center:
You'll draw the rectangles from the upper left corner:
To draw on canvas you need to get a canvas context.
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");ctx is the canvas context. You'll call on methods of this object to draw on the canvas.
- Q: What's a method?
- Q: What's an Object?
Draw on your canvas using the canvas API. The tutorial uses a few of the APIs methods.
Drawing with canvas generally follows these steps:
- begin a new path
- draw a shape with one of the drawing methods
- set the fill style
- set the stroke style
- fill and stroke your path
Here are a few examples...
Draw a rectangle
ctx.beginPath() // begins a new path
ctx.rect(x, y, width, height) // draws a rectangular path
ctx.fillStyle = "#0095DD" // sets the fill color
ctx.closePath() // closes the path
ctx.fill() // fills the current path- Q: How big is the rectangle?
- Q: Where is it in the canvas?
Draw a circle
ctx.beginPath()
ctx.arc(x, y, radius, startAngle, endAngle)
ctx.fillStyle = "#0095DD"
ctx.fill()
ctx.closePath()- Q: How big is the circle?
- Q: Where is the circle?
- Q: What color is the circle?
Clear Rectangle
ctx.clearRect(x, y, width, height)- Q: What area of the screen is being cleared?
Million Dollar Homepage! Canvas Practice.
https://github.com/soggybag/canvas-practice -->
Take a 10-minute break and measure the world in pixels.
Start working on assignment 1 here.
This tutorial is 10 pages. At the end of every page is the completed source code. If you run into any problems you can check your code against the source.
While you work look for the things on this list:
- Variables
- Functions
- Flow control
- loops
- if else
- Arrays
- Objects
Today in class your job is to start on the tutorial and identify the things on this list
The code in the tutorial is very naive. You will be updating the code to modern standards in the next assignment.
Come back to class at: ...
- Show progress
- Review Objectives
- Questions
Follow the instructions here