2e:null 2f:["$","title",null,{"children":"If / Else Statements | Charith Wijewardena | Observable"}] 34:T42e,protip( "Writing secret messages in your program.", md`A ${emphasise.keyTerm( "comment" )} is like a *secret message* that only humans can read, and computers can't. When we write lines of code, our computers obediently ${emphasise.keyTerm( "execute" )} (in other words, run) them. However, there are times where we might not want the computer to execute *all* the lines we've written. For example, we might want to leave explanations and instructions that we've written in plain English. Obviously we don't want the computer to run that! So to tell your program not to run something, you can put a \`//\` in front of it. We call this a ${emphasise.keyTerm( "comment" )}. To ${emphasise.keyTerm( "uncomment" )} something, we simply delete the \`//\`. An **easy way to do this** in your code is to highlight the lines you want to comment or uncomment and press Ctrl + /. In general, comments help other people understand our code faster, and help us remember our reasons for doing things when we look at our code in the future!` )35:T4cf,{ const svg = d3.create("svg") .attr("viewBox", [0, 0, width, 260]); const points = Array.from({length: 100}, (d, i) => i % 10 + 1); const margin = ({ top: 60 }); const r = 10; const balls = svg.selectAll("circles") .data(points) .join("circle") .attr("cx", (d, i) => d * r * 2) .attr("cy", (d, i) => (Math.floor(i / 10)) * r * 2 + margin.top) .attr("r", r) .attr("fill", (d, i) => { const x = d; const y = Math.floor(i / 10) + 1; return setEx4BallColors(x, y); }); svg.append("g") .attr("transform", `translate(0,${margin.top - 40})`) .call(d3.axisBottom( d3.scaleLinear() .domain([1, 10]) .range([2 * r, 2 * r + 180]) )) svg.append("g") .attr("transform", `translate(240,0)`) .call(d3.axisLeft( d3.scaleLinear() .domain([1, 10]) .range([margin.top, margin.top + 180]) )) svg.append("text") .attr("dx", 100) .attr("dy", 10) .attr("font-size", "1rem") .text("x") svg.append("text") .attr("dx", 250) .attr("dy", margin.top + 85) .attr("font-size", "1rem") .text("y") return svg.node(); }36:T7de,{ const numSquares = 40; const squareWidth = 10; const margin = ({ top: 60 }); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, squareWidth * numSquares + squareWidth + margin.top + 40]); const points = Array.from({length: numSquares ** 2}, (d, i) => i % numSquares + 1); const squares = svg.selectAll("rect") .data(points) .join("rect") .attr("x", (d, i) => d * squareWidth + i % numSquares) .attr("y", (d, i) => Math.floor(i / numSquares) * squareWidth + Math.floor(i / numSquares) + margin.top) .attr("width", squareWidth) .attr("height", squareWidth) .attr("fill", (d, i) => { const x = d; const y = Math.floor(i / numSquares) + 1; return setEx5SquareColors(x, y); }); svg.append("g") .attr("transform", `translate(0,${margin.top - 40})`) .call(d3.axisBottom( d3.scaleLinear() .domain([1, numSquares]) .range([1.5 * squareWidth, numSquares * squareWidth + numSquares + 0.5 * squareWidth]) )) svg.append("g") .attr("transform", `translate(${numSquares * squareWidth + numSquares + 60},0)`) .call(d3.axisLeft( d3.scaleLinear() .domain([1, numSquares]) .range([margin.top + 0.5 * squareWidth, (numSquares - 0.5) * squareWidth + margin.top + (numSquares - 1)]) )) svg.append("text") .attr("dx", d3.scaleLinear() .domain([1, numSquares]) .range([1.5 * squareWidth, numSquares * squareWidth + numSquares + 0.5 * squareWidth])(numSquares / 2)) .attr("dy", 10) .attr("font-size", "1rem") .text("x") svg.append("text") .attr("dx", `${squareWidth * numSquares + numSquares + 70}`) .attr("dy", d3.scaleLinear() .domain([1, numSquares]) .range([margin.top + 0.5 * squareWidth, (numSquares - 0.5) * squareWidth + margin.top + (numSquares - 1)])(numSquares / 2)) .attr("font-size", "1rem") .text("y") return svg.node(); }37:[] 32:{"id":"dd2bf91925a9a840","slug":"if-else-statements","title":"If / Else Statements","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-09-03T00:50:22.464Z","update_time":"$D2024-09-09T10:32:55.023Z","view_time":null,"first_public_time":"$D2024-09-07T04:35:29.397Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"046cde780f244322","login":"chaz","name":"Charith Wijewardena","avatar_url":"https://avatars-next.observableusercontent.com/59be3652951cdac59de6ac2160245d82c1c12a02e4d000d6e87abaaa82c8bf7a","tier":"starter_2024"},"version":827,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"653cb85288b2ee67","login":"chaz","name":"Charith Wijewardena","avatar_url":"https://avatars-next.observableusercontent.com/59be3652951cdac59de6ac2160245d82c1c12a02e4d000d6e87abaaa82c8bf7a","tier":null}],"members":[{"type":"team","id":"046cde780f244322","login":"chaz","name":"Charith Wijewardena","avatar_url":"https://avatars-next.observableusercontent.com/59be3652951cdac59de6ac2160245d82c1c12a02e4d000d6e87abaaa82c8bf7a","tier":"starter_2024","role":"editor"},{"type":"individual","id":"653cb85288b2ee67","login":"chaz","name":"Charith Wijewardena","avatar_url":"https://avatars-next.observableusercontent.com/59be3652951cdac59de6ac2160245d82c1c12a02e4d000d6e87abaaa82c8bf7a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"5c40080fe18b9745","slug":"mudita-youth-program-computed-programming","title":"Mudita Youth Program - Computer Programming","owner":{"id":"046cde780f244322","login":"chaz","name":"Charith Wijewardena"}},"type":"notebook","body":{"title":"If / Else Statements","cells":[{"id":0,"value":"# If / Else Statements\n\n## The way programs make choices!\n\n----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":229,"value":"checkpoint(1, \"Reading code from top to bottom.\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"md`When a computer reads Javascript code, it reads it from *top to bottom*, and runs each line in that order. \n\nLet's take a look at this. Uncomment the line of code that says \\`return a + b\\` and run the code cell below. \n\n(But before you do that, have a guess as to what the answer will be!)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"puzzle(1, \"Guess the value of `a + b`.\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"{\n let a = 10;\n let b = 5;\n let c;\n\n // c = a + b;\n // b = c + 10;\n // c = a + c;\n // a = c + a;\n\n // Uncomment the line underneath! Before you do that, what do you think the answer will be?\n // return a + b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":288,"value":"checkpoint(2, \"Making choices.\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"md`In everyday life, we need to make choices all the time - about what we eat, wear etc. If we didn't, life would be boring! \n\nIn programs, we also need to make choices. If not, code would be boring too!😉 \n\nOne of the ways we do that is by using \"if-else statements\". Here, choices are made depending on whether ${emphasise.keyTerm(\n \"expressions\"\n)} are *true* or *false*. \n\n${puzzle(2, \"Playing with your first if-else statement!\")}\n\nLet's play with this example: \n- Change the \\`true\\` and \\`false\\` and see what happens.\n- What happens if 2 or more blocks are \\`true\\`?\n- What happens if nothing is \\`true\\`?`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"{\n let x;\n\n if (false) {\n x = 3;\n } else if (false) {\n x = 6;\n } else if (true) {\n x = 9;\n } else if (false) {\n x = 12;\n } else {\n x = 15;\n }\n\n return x;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"theory(\n \"Comparison and logical operators\",\n md`We use comparison operators to check if expressions are \\`true\\` or \\`false\\`, and logical operators to check the logic in statements. We'll see exactly what that means below. \n\nFor future reference, the comparison operators we'll be using are: \n- Less than: \\`<\\`\n- Greater than: \\`>\\`\n- Less than or equal: \\`<=\\`\n- Greater than or equal: \\`>=\\`\n- Equal: \\`===\\`\n- Not equal: \\`!==\\`\n\nThe logical operators are: \n- AND: \\`&&\\`\n- OR: \\`||\\``\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"md`${puzzle(3, \"Writing our first if-else statement!\")} \n\nLet's write an if-else statement. Here's what we'll do: \n- Create a new code block underneath this one.\n- Define a variable called \\`value\\`, and ${emphasise.keyTerm(\n \"assign\"\n)} it a value of 5.\n- Define another variable called \\`message\\`.\n- Write an if-else statement so that:\n - \\`message\\` is assigned the string \"Selected number is < 10\" if \\`number < 10\\`.\n - \\`message\\` is assigned the string \"Selected number is < 20\" if \\`number < 20\\`.\n - \\`message\\` is assigned the string \"Selected number is >= 20\" if \\`number >= 20\\`.\n- Change the value assigned to the variable \\`value\\`, and see if the code still works properly.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"theory(\n \"Control flow.\",\n md`*Control flow* is the order in which statements in a program are executed. \n\nIf-else statements are a way of controlling this flow of code - they allow us to make choices, and tell the program what path to follow.`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"checkpoint(3, \"Let's create some art!🌷\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"md`Finally, let's use if-else statements to create some art! \n\nTry hovering your mouse over the black balls. Cool, right?!! If only we could make the colors not disappear... \n\nWell that's what you're going to do! 😝`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"{\n const rowLen = 10;\n const r = 10;\n \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 2 * r * rowLen + 10]);\n\n const points = Array.from({length: rowLen ** 2}, (d, i) => i % rowLen + 1);\n\n const balls = svg.selectAll(\"circles\")\n .data(points)\n .join(\"circle\")\n .attr(\"cx\", (d, i) => d * 20)\n .attr(\"cy\", (d, i) => (Math.floor(i / rowLen)) * 20 + 20)\n .attr(\"r\", r)\n .attr(\"fill\", \"black\")\n .on('mouseover', function(e, d) {\n d3.select(this)\n .transition()\n .duration(100)\n .style(\"fill\", () => d3.interpolateRainbow(Math.random()))\n })\n .on('mouseout', function(e, d) {\n d3.select(this)\n .transition()\n .duration(2000)\n .style(\"fill\", \"black\");\n })\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"md`${puzzle(4, \"Let's draw some shapes!\")}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"

\n Let's write if-else statements inside the setEx4BallColors function below, so that the colors of the balls underneath that code block change.\n

Each ball has an x and y position; your function needs to return a color depending on those values. Let's take a look together first.

\n P.S - Here is a list of all the colors you can use! If that's not enough you can even go here and choose any color you want by copying it's hex code. 🙈`\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"function setEx4BallColors(x, y) {\n // STRATEGY.\n // ----------------------------------------------------------------------------------------------\n // Write your strategy here!\n // Remember to use comments for lines that you don't want your computer to read!\n\n // CODE.\n // ----------------------------------------------------------------------------------------------\n // Write your code here!!\n // Your function needs to return the name of a color.\n return \"black\";\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"md`${puzzle(5, \"Draw some art!\")} \n\nNow that you have the hang of using if-else statements, let's create some unique art using the squares below! \n\nIf you'd like, we can share our art with the rest of the group after we've finished the exercise!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"

\n Here's an idea to get you started...\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":503,"value":"function setEx5SquareColors(x, y) {\n return \"grey\";\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"import {\n protip,\n theory,\n emphasise,\n checkpoint,\n puzzle\n} from \"@chaz/mudita-programming-utils\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"