While HTML is a programming language used for page layout, Javascript is a programming language used for page manipulation.
Javascript code is written for the page to interpret, not render.
All Javascript code must be wrapped in between two <script> tags. These tags can be anywhere on an HTML page, in the header or the body.
<script>
</script>Javascript code is executed line-by-line, from top to bottom. While spacing and indentation do not matter, each line must end with a semi-colon.
A variable is a common name for a value that might change. By storing things as variables, we can access them later. Here we can store a number and print it out to the browser console.
<script>
var myNumber = 42;
console.log(myNumber);
</script>Numbers can be manipulated with math!
<script>
var myNumber = 42;
myNumber = myNumber + 10;
console.log(myNumber);
</script>Text is stored by surrounding the characters with quotation marks, and text strings can be concatenated to eachother.
<script>
var myString = "Javascript is Cool!";
console.log("D3 and " + myString);
</script>Booleans are values that are either true or false.
<script>
var myNumber = 20;
var bigNumber = myNumber > 100;
console.log(bigNumber);
</script>A list of variables can be stored as an Array, and you select which entry you need by using a 0-index based numbering system.
<script>
var myArray = ["one", "two", "three", "four"];
// Any line starting with double slashes is a comment
// that will not be interpreted by the browser.
// This should print out "two"
console.log(myArray[1]);
</script>Instead of using a flat list as in Arrays, you can store data with keys and values to easily access later.
<script>
var myObject = {
"name": "Dave",
"color": "red"
};
console.log(myObject.name);
</script>When logic may need to be repeated multiple times, it is best practice to store that logic in one place. Functions are triggered by saying the variable name followed by a set of parenthesis.
<script>
var sayHello = function() {
console.log("Hello!");
}
sayHello();
</script>Functions may accept variables to use internally.
<script>
var sayText = function(txt) {
console.log(txt);
}
sayText("Goodbye");
</script>Additionally, functions can return a value.
<script>
var plusTen = function(num) {
return num + 10;
}
var thirty = plusTen(20);
console.log(thirty);
</script>Javascript contains syntax for evaluating logic and performing actions when a defined parameter is met.
<script>
var myNumber = 12;
if (myNumber > 10) {
console.log("greater than 10!");
}
else {
console.log("less than 10!");
}
</script>Javascript starts to shine once you start combining these concepts.
<script>
function greaterThanTen(num) {
if (num > 10) {
console.log("greater than 10!");
}
else {
console.log("less than 10!");
}
return num > 10;
}
// this should return true
console.log(greaterThanTen(20));
</script>The "document" is a pre-defined object with information and functions relating to the page itself. Here, we can select an element and change it's content:
<h1 id="name"></h1>
<script>
document.getElementById("name").innerHTML = "Dave";
</script>D3 is an external javascript library that allows for manipulating HTML page elements in Javascript using complex data arrays. It also provides a lot of nice javascript shortcuts.
First, let's include D3 on our page:
<script src="https://d3js.org/d3.v4.min.js"></script>Similar to vanilla Javascript and JQuery, D3 has it's own element selector:
document.getElementById("name");$("#name");d3.select("#name");Element attributes and styles can be changed by using the supplied D3 functions:
d3.select("#name")
.attr("class", "big")
.style("color", "red");You can also select multiple elements on a page and change all of the properties at the same time.
d3.selectAll(".big")
.style("color", "red");Now let's get into why D3 is so great. Instead of re-inventing the wheel, let's do the tutorial that the creator of D3 put together: https://bost.ocks.org/mike/circles/.
Create a simple SVG page that modifies the data/elements of that SVG when clicking on a button.