Understanding Variables and Control Structures in JavaScript

Slide Note
Embed
Share

Introduction to JavaScript variables including integers, floats, strings, booleans, and arrays. Learn about control structures like if-else statements, comparison operators, and loops. Practice examples provided for better understanding.


Uploaded on Sep 08, 2024 | 0 Views


Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

E N D

Presentation Transcript


  1. Lecture 02 Javascript

  2. Variables var

  3. Variables var variableName

  4. Integer var myInteger = 1;

  5. Integer var anyOtherName = 1;

  6. Float var myFloat = 1.00;

  7. Float var myFloat = 1.50;

  8. String var myString ="hello";

  9. Boolean var myBoolean = true;

  10. Boolean var myBoolean = false;

  11. if(a < b){ console.log("a is less"); }else if(a > b){ console.log("a is more"); }else{ console.log("they must be equal"); } a == b a != b && a === b ||

  12. Array var myArray = [1,2,3];

  13. Array var myArray = [1,2,3,4.0];

  14. Array var myArray = [1,2,3,4.0,"hello"];

  15. Array var myArray = [1,2,3,4.0,"hello"]; myArray[0] \> 1

  16. Declare var myArray = []; Populate myArray[0] = 102; Or myArray.push(102); Fits the new value in the first available position

  17. for(var i=0; i<10; i++){ console.log(i); } Execute with var i=0

  18. 1 Is minor then ten? 0 for(var i=0; i<10; i++){ console.log(i); } Execute with var i= And so on

  19. var myArray = [1,2,3,4.0,"hello"]; for(var i=0; i<10; i++){ console.log(myArray[i]); } 1 2 3 4.0 "hello"

  20. function myFunction(myArgument){ console.log(myArgument) }

  21. var x = function f(a){ return a + 5; } x(2); 7 var myArray = [1,2,3,4.0,"hello",x]; myArray[5](2); 7

  22. Recap on if Statement Booleans == === != <=

  23. Good to know * / %

  24. 1 Write a function that: Takes two arguments a and b subtracts the smaller from the bigger returns the result

  25. 2 Declare an array of strings Write a function that: Iterates through the array Checks if hello is in the array In case it is, prints Hi back

  26. 3 Declare an array of booleans Write a function that: Iterates through the array For each element: -Prints TRUE if the boolean is true -Prints FALSE if the boolean is false

  27. 4 Declare an array of integers Write a function that: Iterates through the array Prints only the even numbers

  28. Declare an array of integers Calculate the average of the array entries 6 *Tip use myArray.length to get the number of elements in the array Write a function that iterates through the array and prints BIGGER If the current value is bigger then the average, SMALLER if the value is smaller and EQUAL if it is equal

  29. Declare an array of integers 5 Write a function that: Iterates through the array For each value of the array, populates a new array with that value only in case it is: -bigger than 5 -smaller than 9 In case numbers are smaller than 5 prints too small In case numbers are bigger than 9 prints too big Returns the array

  30. Objects var myObject = { key_1:"value", key_2:"value", key_3:"value", };

  31. Objects var myObject = { key_1:"string", key_2:1, key_3:[array ], };

  32. Objects var myObject = { key_1:"string", key_2:1, key_3:[array ], key_4:function(){ . . . }, };

  33. D3

  34. Data Driven Documents

  35. Import D3 <script src="https://d3js.org/d3.v5.min.js"></script>

  36. D3 in action d3.select("body").append("svg") .append("circle") .attr("cx",100) .attr("cy",100) .attr("r",20);

  37. var mySvg = d3.select("body") .append("svg") mySvg.append("circle") var myCirc = .attr("cx",100) .attr("cy",100) .attr( r",20); myCirc

  38. Make a grid of squares using d3

More Related Content