Dynamic interactions on any website
Lists, Search Fields, Google Maps, Animations and many more
Open your index.html file in the browser
Right-click on your browser window and select Inspect
Click on Console
Share your thoughts with your console
console.log("Hello World!");
Let your console tell you something about the weather!
This is how it could have looked like
console.log("The weather in Munich is sunny today.");
var
var weather = "sunny";
console.log("The weather in Munich is " + weather + " today");
What will happen here?
var weather = "sunny";
console.log("The weather in Munich is " + weather + " today");
weather = "rainy";
console.log("The weather in Munich is " + weather + " today");
Try it out for yourself!
This is how it could have looked like
var weather = "sunny";
console.log("The weather in Munich is " + weather + " today");
// The weather in Munich is sunny today
weather = "rainy";
console.log("The weather in Munich is " + weather + " today");
// The weather in Munich is rainy today
Loops help you to automate program instructions that have to be repeated in the same or in a similar way. Have a look at this example!
for (var i = 0; i < 3; i += 1){
// do something for 3 times
}
Print the list of numbers from 0 to 30 to your console
for (// insert the definition for your for loop here){
console.log(i);
}
Print the list of numbers from 0 to 30 to your console
for (var i = 0; i < 31; i += 1){
console.log(i);
}
// 1
// 2
// 3
// ..
// 30
Sometimes you want to execute code only in specific situations
var weather = "sunny";
if (weather === "sunny"){
console.log("Let's go skating!");
}
And sometimes you even want to have a fallback
var weather = "rainy";
if (weather === "sunny"){
console.log("Let's go skating!");
}
else {
console.log("Let's watch a movie!");
}
// Let's watch a movie!
Imagine how this scenario could turn out: Print either "Let's celebrate your birthday!" or "Let's not celebrate your birthday!" to the console depending on the value of the variable hasBirthday
var hasBirthday = true;
// if (....
This is how it could have looked like:
var hasBirthday = true;
if (hasBirthday === true){
console.log("Let's celebrate your birthday!");
}
else {
console.log("Let's not celebrate your birthday!");
}
// Let's celebrate your birthday!
Extra task "FizzBuzz": Print all the numbers from 1 to 100 into your console. If the number is dividable by 3 print "Fizz", if it is dividable by 5 print "Buzz" and "FizzBuzz" if it is dividable by both numbers instead. Hint: Check for division by numbers with the % operator:
if (num % 3 === 0){
// do if num is dividable by 0
}
Help you to seperate program instructions into seperate bits
myFunction(){ // Your instructions go here }You can then execute them anytime in your program by calling the name of your function
myFunction();
You can use the return value of functions to set new variables
function myFunction (){
return 3;
}
var number = myFunction();
console.log(number); // -> 3
You can provide values called parameters to your function and interact with those
function doubleMe (paramNumber) {
return paramNumber * 2;
}
And later on use this with different values which you put in
var myNumber = 3;
var myDoubledNumber = doubleMe(myNumber);
console.log(myDoubledNumber); // -> 6
Write a function called multiplicate()that returns the result of the multiplication of two input parameters! Hint: You can seperate several parameters by comma
function multiplicate(a,b){
return //....
}
You can create the function with two input parameters
function multiplicate(a,b){
return a * b;
}
You can use this function now to create results for any multiplication
function multiplicate(a,b){
return a * b;
}
var firstNum = 3;
var secondNum = 4;
var product = multiplicate(firstNum, secondNum);
console.log(product); // -> 12
Check your index.html from the HTML introduction to get started and open the file drawing.js in your working example folder.
We want to draw on the canvas element that you already prepared in your index.html file
...which will be selected as the drawing area by the following code in functions.js
var canvas = document.getElementById('my-canvas');
var ctx = canvas.getContext('2d');
After this setup you can now use the circle() function we prepared for you to draw on your canvas in the file drawing.js
function drawOnCanvas(circle, randomColor){
// drawing code here
// circle(x-coordinate,y-coordinate);
circle(60,60);
}
You can add another circle next to it:
function drawOnCanvas(circle){
// drawing code here
circle(60,60);
circle(120,60);
}
Try creating 5 circles in a row the using one of the loops we got familiar with!
function drawOnCanvas(circle){
// drawing code here
}
Try creating 5 circles in a row using one of the loops we got familiar with!
function drawOnCanvas(circle){
// drawing code here
for (var i = 1; i < 6; i += 1){
circle(60 * i, 60);
}
}
How about 5 circles in a row and 4 in a column? Hint: You may use another counting variable as well!
function drawOnCanvas(circle){
// drawing code here
for (var i = 1; i < 6; i += 1){
// ....
}
}
Color your circles!
function drawOnCanvas(circle, randomColor){
// drawing code here
// circle function takes an optional parameter for the color
circle(60,60,"#ff00ff");
// you can even create random colors
var myRandomColor = randomColor();
}
Javascript library for visualizing data using HTML, CSS and SVG
You can easily plug D3 into your website using the code from the project site:
This makes your D3.js toolbox usable for your website straight away!
d3.selectAll("p").style("color", "white");