Tom Training
HTML
CSS
Javascript
Data
- What is an attribute? Give an example.
- What is the difference between an id and a class, when would you use each?
- What is the difference between background-color and color?
- What is wrong with the img below:
- <img src=http://awebsite.com/cool-pic.jpg></img>
- What is the difference between block and inline elements?
- What is wrong with the css below:
- .highlight(
background-color = blue
)
- .highlight(
Quiz
Responsive Design
Bootstrap
Bootstrap offers a lot of functionality. It's a library of pre-built css styles that allow us to do some impressive stuff. At it's core, it creates a grid.
Rows and Columns
<body>
<div class="row">
<div class="col-xs-4 colormered">
</div>
<div class="col-xs-4 colormered">
</div>
<div class="col-xs-4 colormered">
</div>
</div>
</body>
Now You Try
Now You Try
Day 2
Time to Interact
Javascript is all about interaction. Javascript is a programming language that allows you to "teach" computers to do specific things under different conditions.
Adding Sublime
Make a new folder on your desktop
Open Sublime Text Editor
Create a new file
Save the file in your folder, as index.html
Adding Sublime
Type Hello World, and then be sure to save.
Go to your browser, hit Control+O (command on mac) and open your file.
Adding Sublime
<script>
alert("Hello World!");
</script>
Variables
<script>
var num1 = 5;
var num2 = 8;
alert("num1 + num2");
alert(num1 + num2);
</script>Variables
<script>
var num1 = 5;
var num2 = 8;
alert(num1 + num2);
alert(num1 - num2);
alert(num1 * num2);
alert(num1 / num2);
</script>An Extra Operation
<script>
var num1 = 5;
var num2 = 8;
var num3 = 4;
var num4 = 15;
num4 % num3 //3
num4 % num2 //7
num4 % num1 //0
num3 % num4 //4
num3 % num3 //0
num3 % num2 //4
num3 % num1 //4
num2 % num1 //3
num2 % num3 //0
num2 % num4 //8
</script>An Extra Operation
So answer the following:
3 % 2
5 % 20
20 % 5
5 % 2
7 % 3
Challenge
num1 = 4
num2 = 12
num3 = 16
num4 = 1
Create 3 different alerts with the 4 variables above and no constants, one using only addition, one using only multiplication, and one using only division. Each alert should say 16.
Vari
Variables can change many times in a program, that's actually what makes them valuable.
What are some examples of variables in programs we use daily?
Challenge
var x = 5;
x = x + 3;
var y = x / 2;
x = x * y;
x = (2*y + x) / y;
//what are the current values of x and y?We can combine different types of data
var name = "Ryan";
alert("Hello " + name + " how are you?");
Challenge
var city = "Nashville";
var name = "Matt";
var age = 15;Using the variables above, alert a sentence that says the city, name and age.
Random
The key to any good game is randomness.
var start = Math.random();
Test it out a few times, what's the pattern?
Random
The key to any good game is randomness.
Make it so it generates a random number between 1 and 100
Figure out how to round it so it is just a whole number. (google search!)
Algorithm
There are 3 major parts to any computer program
1. Sequence, the order in which things occur
2. Selection, conditional statements that are only executed when certain conditions are met.
3. Iteration, doing something many times.
Conditionals
var num = Math.round(Math.random()*100);
if(num > 50){
alert(num + ", that's huge!");
}Add another if that says if less than 50 alert the number, that's small.
What's left?
var num = Math.round(Math.random()*100);
if(num > 50){
alert(num + ", That's huge!");
}else if(num < 50){
alert(num + ", That's small!");
}Challenges
Generate a random integer between 0 and 50. If it's even, alert ___ is even. Otherwise alert the number.
Generate a random number between 0 and 30. If it's a multiple of 3 alert ___ is a multiple of 3. If it's a multiple of 2 alert___ is a multiple of 2.
Generate a random number between 0 and 20. If it's a multiple of 2 and 3, alert ____ is a multiple of 2 and 3.
Analyze
var num = Math.round(Math.random()*10);
num = num + 10;
if(num > 20){
alert("I'm greater than 20");
}else{
alert(num / 2);
}User Input
var answer = prompt("Guess a Number");When a user types their answer, it defaults as a string.
var answer = prompt("Guess a Number");
answer = Number(answer);
//alternative way
var answer = Number(prompt("Guess a Number");Challenge
Generate a random integer between 0 and 10. Have the user guess a number between 0 and 10. If they guess correctly, tell them they win. If the don't guess correctly, tell them how far off they were.
Format: Indent
var car = prompt("What kind of car do you drive?");
if(car == "Honda"){
var like = prompt("Nice, do you like it?");
if(like == "yes"){
alert("Good, it would be a bummer not to like your car");
}else{
alert("I'm sorry to hear that!");
}
}Challenge
Create your own choose your own adventure game. Structure:
- A question with 2 possible answers (i.e. yes/no, a/b, etc.
- Based on their answer, another question (i.e. if they said yes ask one question, if they said no ask another).
- Based on that answer, create a final statement, it does not need to collect any input.
Example
var answer = prompt("Do you want to go out to eat?");
if(answer == "yes"){
answer = prompt("Somewhere fancy or somewhere cheap?");
if(answer == "cheap"){
alert("Nice, we'll go on a date to KFC");
}else{
alert("Okay, sushi it is!");
}
}else{
answer = prompt("Would you rather make pizza or pasta?");
if(answer == 'pizza'){
alert("Cool, we should make pineapple pizza");
}else{
alert("Okay, but we have to make our own pasta");
}
}Functions
function myFunction(p1, p2) {
return p1 * p2;
}Functions
function timesTwo(p1, p2) {
return p1 * p2;
}
var num1 = prompt("Give me a number");
var num2 = prompt("Give me another number");
alert(timesTwo(num1, num2);Buttons
<button>Click Me</button>Copy the code into a new file and load it up. What happens? What doesn't happen?
OnClick
<button onclick="myFunction()">Click me</button>
<script>
myFunction(){
alert("hello");
}
</script>OnClick
<button onclick="myFunction()">Click me</button>
<script>
myFunction(){
alert("hello");
}
</script>Project
For Loops
<script>
for(var i=0; i<6; i++){
alert(i);
}
</script>Loops: Reading
<script>
for(var i=3; i<=10; i++){
alert(i);
}
</script>What will this do?
What if I wanted to start at 2?
What if I wanted to go to 8?
What if I wanted to go up by 2 instead of 1?
Computers are really good at doing things over and over again.
Loops: Challenges
- Make a loop that alerts the numbers between 1 and 10.
-
Instead of saying the number, say whether it's even or odd.
-
Loop from 1 - 5, if the number is less that 3, say "That's less than 3", if the number is three, say "3" and if the number is greater than 3, say "That's greater than 3".
Loops: Challenges
- Loop through the numbers 1 - 100. console log that number and every even whole number that is less than or equal to that number.
- Loop through the numbers 1 - 100 but only console log prime numbers.
- Print the first 100 numbers in the Fibonacci sequence
When Do Loops Matter?
- Science: Very helpful when testing theories. For example, what's the minimum amount of radiation needed to kill certain types of cancer, loop over and over and each time check to see if you've got the desired results.
- Social Media: When comments are shown below posts, the website is creating a loop, and then getting the "i"th comment.
- Finance: Any program that manages budgets or transactions is using functions like SUM and AVERAGE, which loop through all transactions and then performs operations based on the values of those transactions or values.
Cash Register
Make a program that allows the user to type in the total, then type in the amount they paid. Afterwards it should say the amount of change due.
Then, it should say "You'll get ___ back in bills and ___ back in change.