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
- 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.
Answer these questions to check your understanding what is in the Break Out tutorial.
- Q: How are variables declared?
- Q: What are the variables used in Break Out?
- Q: What value types are used in the Break Out tutorial?
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?
- Q: How are functions defined in JS?
- Q: What functions are defined in the Break Out tutorial?
- Q: What do these functions do?
- Q: How is an if else structure written in JS?
- Q: What is this logical operator
||? - Q: Where is
ifandif elseused in the tutorial?
- Q: What is an Array?
- Q: Where are Arrays used in the tutorial?
- Q: What is stored in the array in the tutorial?
- Q: What is a Object in JS?
- Q: Where are Objects used in the tutorial?
- Q: What do thes objects represent?
- Q: What are the properties of these objects?
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