Difference between revisions of "IB Computer Science 1"
From WLCS
Line 14: | Line 14: | ||
*# In the canvas, draw a stick figure with filled in squares or rectangles for hands and feet | *# In the canvas, draw a stick figure with filled in squares or rectangles for hands and feet | ||
*# Under the stick figure, display a text message in the canvas that says "Computer Science Rocks!" | *# Under the stick figure, display a text message in the canvas that says "Computer Science Rocks!" | ||
+ | * Canvas + Mouse | ||
+ | <syntaxhighlight lang="HTML"> | ||
+ | <html> | ||
+ | <head> | ||
+ | <title>Canvas tutorial</title> | ||
+ | <script type="text/javascript"> | ||
+ | |||
+ | var setup = function() | ||
+ | { | ||
+ | var canvas = document.getElementById('tutorial'); | ||
+ | var ctx = canvas.getContext('2d'); | ||
+ | |||
+ | var drawRect = function(evt) | ||
+ | { | ||
+ | ctx.fillRect(evt.clientX, evt.clientY, 20, 20); | ||
+ | }; | ||
+ | |||
+ | canvas.addEventListener('click', drawRect); | ||
+ | }; | ||
+ | |||
+ | </script> | ||
+ | |||
+ | <style type="text/css"> | ||
+ | canvas { border: 1px solid black; } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body onload="setup();"> | ||
+ | <canvas id="tutorial" width="600" height="400"></canvas> | ||
+ | </body> | ||
+ | |||
+ | </html> | ||
+ | </syntaxhighlight> | ||
== Friday (2/28/14) == | == Friday (2/28/14) == | ||
* Paid Focus Group Opportunity | * Paid Focus Group Opportunity |
Revision as of 15:19, 6 March 2014
Contents
- 1 Wednesday - Thursday (3/5/14 = 3/6/14)
- 2 Friday (2/28/14)
- 3 Wednesday - Friday (2/26/14 - 2/28/14)
- 4 Monday - Tuesday (2/24/14 - 2/25/14)
- 5 Thursday - Friday (2/20/14 - 2/22/14)
- 6 Tuesday - Wednesday (2/18/14 - 2/19/14)
- 7 Thursday - Friday (2/13/14 - 2/14/14)
- 8 Monday - Wednesday (2/10/14 - 2/11/14)
- 9 Thursday - Friday (2/6/14 - 2/7/14)
- 10 Monday - Wednesday (2/3/14 - 2/5/14)
- 11 Archives
Wednesday - Thursday (3/5/14 = 3/6/14)
Agenda:
- Demo/show Mr. Bui and missing assignments
- Introduction to HTML Canvas
- Read and complete the tutorial: Basic usage of Canvas
- Don't worry if you don't understand everything...this most important part is getting the A skeleton template
- Also refer to this documentation: W3Schools HTML5 Canvas, which will explain different parts of the template
- More Canvas Documentation: W3Schools Canvas Reference
- If you're interested more canvas tutorials can be found here: Mozilla Canvas Tutorials
- Canvas Practice Assignment
- Create an HTML+JavaScript file named canvasPractice.html
- Use the skeleton template from Basic usage of Canvas
- Refer to W3Schools HTML5 Canvas for specific functions that will be helpful
- In the canvas, draw a stick figure with filled in squares or rectangles for hands and feet
- Under the stick figure, display a text message in the canvas that says "Computer Science Rocks!"
- Canvas + Mouse
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
var setup = function()
{
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
var drawRect = function(evt)
{
ctx.fillRect(evt.clientX, evt.clientY, 20, 20);
};
canvas.addEventListener('click', drawRect);
};
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="setup();">
<canvas id="tutorial" width="600" height="400"></canvas>
</body>
</html>
Friday (2/28/14)
- Paid Focus Group Opportunity
- MediaBarn is having a focus group study at 5:30pm on Tuesday (3/4/14). They are interested to talk with students who are interested in majoring in IT/Computer Science/any related topic.
- 90-minute focus group, and the compensation is $100
- Registration Here
- Mediabarn Research Services (near Courthouse metro), 2200 Clarendon Blvd, Suite 1200, Arlington, VA 22201
- Make sure that you have completed While Loops
- Make sure that you have completed Dragon Slayer
- Introduction to HTML Canvas
- Read and complete the tutorial: Basic usage of Canvas
- Don't worry if you don't understand everything...this most important part is getting the A skeleton template
- Also refer to this documentation: W3Schools HTML5 Canvas, which will explain different parts of the template
- If you're interested more canvas tutorials can be found here: Mozilla Canvas Tutorials
- Canvas Practice Assignment
- Create an HTML+JavaScript file named canvasPractice.html
- Use the skeleton template from Basic usage of Canvas
- Refer to W3Schools HTML5 Canvas for specific functions that will be helpful
- In the canvas, draw a stick figure with filled in squares or rectangles for hands and feet
- Under the stick figure, display a text message in the canvas that says "Computer Science Rocks!"
Wednesday - Friday (2/26/14 - 2/28/14)
Warmup:
- Show Mr. Bui that you have completed Javascript - For Loops
- Show Mr. Bui that you have completed Search Text for Your Name
Agenda:
- Paid Focus Group Opportunity
- MediaBarn is having a focus group study at 5:30pm on Tuesday (3/4/14). They are interested to talk with students who are interested in majoring in IT/Computer Science/any related topic.
- 90-minute focus group, and the compensation is $100
- Registration Here
- Mediabarn Research Services (near Courthouse metro), 2200 Clarendon Blvd, Suite 1200, Arlington, VA 22201
- Demo Quadratic Formula web app
- Complete While Loops
- Complete Dragon Slayer
- Introduction to HTML Canvas
- Read and complete the tutorial: Basic usage of Canvas
- Don't worry if you don't understand everything...this most important part is getting the A skeleton template
- Also refer to this documentation: W3Schools HTML5 Canvas, which will explain different parts of the template
- If you're interested more canvas tutorials can be found here: Mozilla Canvas Tutorials
- Canvas Practice Assignment
- Create an HTML+JavaScript file named canvasPractice.html
- Use the skeleton template from Basic usage of Canvas
- Refer to W3Schools HTML5 Canvas for specific functions that will be helpful
- In the canvas, draw a stick figure with filled in squares or rectangles for hands and feet
- Under the stick figure, display a text message in the canvas that says "Computer Science Rocks!"
Monday - Tuesday (2/24/14 - 2/25/14)
Agenda:
- Demo Pythagorean Theorem web app
- Demo Quadratic Formula web app
- Complete Javascript - For Loops
- Complete Search Text for Your Name
Thursday - Friday (2/20/14 - 2/22/14)
Agenda:
- Pythagorean Theorem Example
- There should be input boxes for a, b, and c (hypotenuse)
- The user should be able to fill in any two boxes, and hit calculate
- The empty input box should be filled in with the correct answer
- You should validate the input for non-numbers
- Quadratic Formula Program
- Create a program that takes three inputs: a, b, and c
- Calculate the quadratic formula
- Check if the solutions are real or imaginary
- Output the 2 real solutions, and either output the imaginary solutions or put a message that says the solutions are imaginary
Tuesday - Wednesday (2/18/14 - 2/19/14)
Agenda:
- More Javascript + HTML Form practice
- Slope Calculation Example
- parseFloat()
- parseInt()
- isNaN()
- JavaScript Math
Thursday - Friday (2/13/14 - 2/14/14)
- Snow Days
Monday - Wednesday (2/10/14 - 2/11/14)
Agenda:
- Bring up your Codecademy account and show 100% completion of Javascripts 1-3
- Complete Javascript-4: Build "Rock, Paper, Scissors"
- Introduction Javascript + HTML Forms
- HTML Forms and Input
- JavaScript Examples
- Name & Address Example Form
- Slope Calculation Example
- Pythagorean Theorem Example
Thursday - Friday (2/6/14 - 2/7/14)
Agenda:
- Python-JavaScript Cheatsheet
- Complete JavaScript-2: Choose Your Own Adventure!
- Complete JavaScript-3: Introduction to Functions in JS
Monday - Wednesday (2/3/14 - 2/5/14)
Agenda:
- Demo missing Hangman
- Introduction to Web Development
- HTML, CSS, & JavaScript
- Codecademy