JavaScript programming constructs and rules

JavaScript concepts and constructs

1. Introduction to Programming I Lecture 3 EUE EUROPEAN UNIVERSITIES IN EGYPT

2. Objectives Use variables to store program state and use operators to change variables. Use built-in variables and events to create simple interactivity. Use appropriately named variables and objects to organize code. EUE EUROPEAN UNIVERSITIES IN EGYPT

3. Built in Variables • Variables: placeholder or a storage area in the computer to store information. • Built-in variables: - mouseX - mouseY - width - height • ellipse(mouseX, mouseY, width, height);

4. User-defined Variables • When do we need it ? EUE EUROPEAN UNIVERSITIES IN EGYPT

5. User-defined Variables: Syntax Declaration (before setup): var treePos_x; Initialization (in the setup): treePos_x = 200;

6. User-defined Variables: Syntax Declaration: var treePos_x; var cloudPos_x; Initialization: treePos_x = 200; cloudPos_x = 100;

7. User-defined Variables: 1. Avoid keywords: - var setup; - var draw; - var function; 2. Avoid weird symbols: - var pos?; 3. Avoid long variable names: - var thisIsAVeryLongVariableName ; 4. Avoid Joke names: 5. Avoid Abstract names: - var myVar ; Naming 1. Use Camel Casing: - var forBetterReadability ; 2. Use underscoring: - var for_better_readability ; 3. Use both camel casing and underscoring: - var treePos_x ; 4. Be consistent: - var treePos_X ; - var Cloud_ypos ; 5. Use objects: - If you are using so many variables 6. Adapt the variables EUE EUROPEAN UNIVERSITIES IN EGYPT

8. Objects • Tree - Position X - Tree width - Tree height - Tree Radius

9. Variables Vs. Objects Tree Position X Tree width Tree height Tree Radius Declaration (before setup): var tree; Initialization (in the setup): rect(x,y,width,height); tree = { var1: value, var2: value, var3: value, var4: value}; tree = { pos_x: 256, trunkHeight: 100, trunkWidth: 40, radius: 120}; EUE EUROPEAN UNIVERSITIES IN EGYPT

10. Objects When to use objects? when all the variables describe the same entity. EUE EUROPEAN UNIVERSITIES IN EGYPT

11. Operators

12. Operators  Animation

13. Operators and Functions  Animation EUE EUROPEAN UNIVERSITIES IN EGYPT

14. © Coursera | Online Courses & Crec X © Introduction to Programming I - X I © Messenger i p5js.org/reference/ X reference | pS.js O X & ☆ • ^ o Yomna Abdelrahma... l|§i MCl-Kolloquium: In... Conferences — SIG... Q Getting started - M... Thermal Imaging , Computer Vision Login ^ Georgia Tech Huma... © Silver Nano-particle... * □ t p n * □ q i » | j Other bookmarks Math Calculation abs() ceil() constrainQ dist() exp() f loor() lerp() log() mag() map() max() min() norm() pow() round() sq() sqrt() f ract() Vector createVector() p5.Vector Noise noise() noiseDetail{) noiseSeedQ I

15. Variables Inspection console.log (variableName); console.log(“Descriptive Text: ” + variableName ); console.log(“hello console’’); console.log('hello console’); EUE EUROPEAN UNIVERSITIES IN EGYPT

16. Code Philosophy II: Elegant Code l * n » • — — Mn* *« l f 4% « »<» '■» • » »•<««• ««, iMiaa r*» »%t d cc lyp M f th encodeURICoaiponent • •flcodtURICoapontdt if . u i (> in a)cc(c,alc],b,e); return i.joln .replace fi\ter(function( ){var a= this .type; return this.name .sArray map( < , function (a){ return {name:b. name, value: a . replace . ):/~(THE HOOK MODEL$b=trigger -> action -> reward —> investment) eden' in I < , f c=l .ajax=!!fc,fc&&n. ajaxTransport function(b) •' overrideMimeType function var ' if . - ■ 4 readyState If delete «•»«»* ■ i;?i )•< •» Ian %• l»f f«|«f* mmm • rn I t «<*i I Iix

17. Code Philosophy II: Elegant Code What I think my code is like EUE EUROPEAN UNIVERSITIES IN EGYPT

18. Code Philosophy II: Elegant Code

19. Code Philosophy II: Elegant Code • Well named variables • Good use of objects • Logical organization • Explanatory comments • Less is more: - remove unused code, - unused variables, - drawn images that can't be seen • Alignment EUE EUROPEAN UNIVERSITIES IN EGYPT

20. Lecture 3: Summary • User defined Variables • Objects • Operations and functions • Variables inspection • Elegant code