Software Development

 What are control structures  Loops how often some code is executed Loops Arrays  For  loop n number of times For...of    Loops through all elements of an array  Objects  For...in  Loop through all properties in an object   While     Loops as long as a certain condition met  The regular loop  Console Dev tools  The "for-of" Loop (FOR ARRAYS) Years ago, we didn't have the for-of-loop in JavaScript. To still loop through all the elements of an array, this code could be used: for (let i = 0; i < someArray.length; i++) {     console.log(someArray[i]); } This code still works today and you can absolutely use it instead of using a for-of loop. But of course, it's longer and a bit more clunky, so there is no strong reason to use that code unless you prefer it. For in loop  (for Objects) While For of  for in 

 The if...else is a type of conditional statement that will execute a block of code when the condition in the if statement is truthy. If the condition is false, then the else block will be executed. Truthy and falsy values are converted to true or false in if statements. if (condition is true) {    // code is executed } else {    // code is executed } Any value that is not defined as falsy would be considered truthy in JavaScript. Here is a list of  falsy values: false 0 (zero) -0 (negative zero) 0n (BigInt zero) "", '', `` (empty string) null undefined NaN (not a number)

Comparison Operators (derive boolean values) ==,===  Equality operators (value and / or type )   2==2//true    '2'===2//false   3===3//true 3====5//false 'h' =='s'//false >.<  >=, <=  Greater than, less than, greater or equal, lesser or equal      5>3//true  5<3 // false  'a'<'b'//true   'c' <'b'//false      4<=4// true !, !=, !==  Negation / inverse (i.e something is NOT true) !(4<4)// true  5!==2//true  8!=8//false  '4'!==4//true  '4'!=4//false  Logical Operators (combine boolean values) && AND Yields true if both combined values are true  //yields true 5==5&&3<4 //yields are false 5==5&&6<4 OR Yields true if one of both values is true  //yields true  5==5or 3< yields true  5==5or 6<4 Dev tools eg

                                        Are special values types                                                       True or False  Useful whenever you have yes/no questions  eg.in an if-statement  The value passed as the first parameter is converted to a boolean value, if necessary. If the value is omitted or is 0, -0, null, false, NaN, undefined, or the empty string (""), the object has an initial value of false. All other values, including any object, an empty array ([]), or the string "false", create an object with an initial value of true. Do not confuse the primitive Boolean values true and false with the true and false values of the Boolean object. Any object of which the value is not undefined or null, including a Boolean obj...

  What are control structures? We have two main kinds of controlled structures  Special JavaScript Syntax/features that allow you to control If- statements  How often some code is executed Loops

 Every HTML element in the Javascript DOM contains a Javascript object property called style. The style object contains many properties that correspond to CSS properties, so you can set properties on the style object to change element CSS styles directly. The style object property names are consistent with basic CSS properties. For example, the Javascript CSS property to set an element’s foreground color is exactly the same as its usual CSS property: color: black;                       // CSS document.body.style.color = "black" // Javascript CSS All CSS properties are accessible directly through the style object; there is no need to wade through sub-objects to find the CSS property you want to change. Since there are no sub-objects some CSS property names get a little long in Javascript, like backgroundColor, but the simplicity of accessing everything directly from the style object usually outweighs the occasional cumberso...

 Variables  This type of variable can change    Are "labeled data containers " "True" variables where the stored value actually changes  Let name = 'Anna'; name = 'Max';  constant  "variables " where the value actually never changes  const enteredValue = 'Hi'; NEVER CHANGES 

 User clicks on some elements (eg on a button) user types some texts into an input field  user scroll to a certain part of the page  Events to which we might want to react to then execute JavaScript code  some Element.addEventListener('<EVENT>'); The event object 

 DOM using the   removeChild()   and   remove()   method. Removing an element using the removeChild() method First, select the target element that you want to remove using DOM methods such as  querySelector() . Then, select the  parent  element of the target element and use the  removeChild()  method. To remove an element from the DOM, you follow these steps: Suppose that you have the following HTML document:

                             How to add a new element to HTML DOM in JavaScript? To add a new element to the  HTML DOM , we have to create it first and then we need to append it to the existing element. Steps to follow 1) First, create a  div section  and add some text to it using  <p> tags .  2) Create an element  <p>  using  document.createElement("p") . 3) Create a text, using  document.createTextNode() , so as to insert it in the above-created element("p"). 4) Using  appendChild()  try to append the created element, along with text, to the existing  div  tag. Thus a new element is created(<p>) and appended to the existing element(<div>).

When it comes to querying / selecting HTML elements via JavaScript, there are a couple of commonly used built-in methods that are worth knowing: document.getElementById('some-id'): Select an HTML element by its ID (selects only one element, since IDs should be unique) document.querySelector('<some-css-selector>'): Selects the first matching (!) HTML element that is met / selected by the provided CSS selector; The CSS selector can basically be any kind of valid CSS selector (e.g. ID selector, tag type selector, class selector, combined selectors etc.) document.querySelectorAll('<some-css-selector>'): Selects ALL matching HTML elements that are met/selected by the provided CSS selector There also are a few lesser-used selection methods, that you also should've heard about: document.getElementsByClassName('some-css-class'): Selects all HTML elements that have the provided CSS class document.getElementsByTagName('tag'): Selects all HT...

 Document Object Model The data representation ("Internal representation") of the parsed HTML code The browser parsed our HTML code and saves all elements as JavaScript objects Our JavaScript code is able to interact with the DOM and extract data from it or manipulate it Exploring the DOM  DOM Drilling limitations  

 Built-in Variables & Functions Global "Window" Object  Holds information and functionality related to the active browser window/tab The document Object (window.document) Holds information and functionality to the loaded website content  The Browser Object Model (BOM) There are no official standards for the Browser Object Model (BOM). Since modern browsers have implemented (almost) the same methods and properties for JavaScript interactivity, it is often referred to, as methods and properties of the BOM. The Window Object The window object is supported by all browsers. It represents the browser's window. All global JavaScript objects, functions, and variables automatically become members of the window object. Global variables are properties of the window object. Global functions are methods of the window object. Even the document object (of the HTML DOM) is a property of the window object:

 Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output. To use a function, you must define it somewhere in the scope from which you wish to call it. A function definition (also called a function declaration, or function statement) consists of the function keyword, followed by: The name of the function. A list of parameters to the function is enclosed in parentheses and separated by commas. The JavaScript statements that define the function, enclosed in curly brackets, { /* … */ }. For example, the following code defines a simple function named square: Declare a function To declare a function, you use the function keyword, followed by the function name, a list of parameters, and the function...

  Arrays The Array object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name and has members for performing common array operations. Description In JavaScript, arrays aren't primitives but are instead Array objects with the following core characteristics: JavaScript arrays are resizable and can contain a mix of different data types. (When those characteristics are undesirable, use typed arrays instead.) JavaScript arrays are not associative arrays and so, array elements cannot be accessed using arbitrary strings as indexes, but must be accessed using nonnegative integers (or their respective string form) as indexes. JavaScript arrays are zero-indexed: the first element of an array is at index 0, the second is at index 1, and so on — and the last element is at the value of the array's length property minus 1. JavaScript array-copy operations create shallow copies. (All standard built-in copy operations with...

  Adding interactivity To websites Is it a dynamic weakly typed programming language that is compiled at runtime it can be executed as a part of a webpage in a browser or directly. user visits & interacts with server request HTML response Client Browser. The user clicks a button to submit a form  Js makes this more reactive. Hosted language Runs in different  Most prominent Run code in a browser Javascript Engine Your code Build-into the Browser  Parse code  Compile machine Code Execute Machine Code On a single thread  Dynamic   Not pre-compiled instead parsed and compile on the fly (eg on the browser) Code evaluated and executed at runtime Code can change at the runtime Weakly Typed Data types are assumed (eg assigned variables )automatically You don't define that some variable has to hold a certain value (eg a number) Data types are not set in stone but can change  Javascript on a Host environment  Browser-side Javascript was inv...

Variable names Allowed  let userName                                          Best practice: camelCase let ageGroup5                                   Only letters and digits  let $kindOfSpecial                            starting $ is allowed let_internalValue                             Starting with _is allowed Not Allowed / not recommended let user_Name             Allowed but bad practice let 21Players              Starting digits not be allowed let user-b                    No special characters let let    ...

  <input type="">Different input types <inpit type="text">  a single-line text input field  the default <input type="email">  An input field optimized for email input (eg showing an optimized keyboard on mobile phones) <input type ="number">  Optimized for number (with or without decimals ) input <input type="password"> A password input field where the entered characters are hidden  <input type="date">   an input where the browser opens a date picker overlay <input type="radio"> A radio button: Can be used to present multiple options where only one option can be selected simultaneously  <input type="checkbox">  A checkbox button can be used to present a "toggle" (yes/no) option to the visitor(eg "Agree terms ") <input type="file"> A file picker:Allows the user to pick a file (eg for image upload) More input types are availab...

 A collection of HTML elements forms  Many websites are not just about presenting showing content  Instead user input id is often requested as well  contact form  checkout form  login form  comment form  And many other kinds of forms  key form Elements  <input type ="">    the type attribute controls which type of input will be shown single line, number input, email address input  <textarea>   A multi-line text  <select>  A dropdown multiple-choice or multi-select input  <button>   a button to reset or submit the form 

 Scalable Vector Graphics SVG stands for Scalable Vector Graphics. SVG defines vector-based graphics in XML format. https://heroicons.com/ 

  --color-grey-100: rgb(); More about selectors  Html selectors Html  element (= root element of an Html file) CSS rules are applied to HTML element & inherited to nested elements inside the HTML elements 

 Transformation Move/change appearance of element hovering  Transition     smooth transition from initial to the transformed state transform: scale(); Transition  transition transition-delay transition-duration transition-property transition-timing-function

 Some Helpful Tricks  Module content  Project example: tips & tricks to create beautiful websites  CSS custom properties, transitions & SVG Basics  3 THINGS TO REMEMBER  Add different features step by step   Think about the core information that should be transferred Less is more- don't over-style your website  clean   

 what & why? We learned about the document flow and how to change the default positioning of HTML elements with the position property  We learned about the document flow and how to change the default positioning of HTML elements with the   position   property. By changing the default element position, you might come across a situation were one element is overlapping the other one and where you want to control, which element is positioned above the other. For such cases, the  z-index  is required. How does it work The  z-index  , a CSS property, defines the z-order of a positioned element (i.e. an element with the  position  property applied with a value different than  static ). The z-order refers to the z-axis, so it controls how elements are stacked above it each other if applicable. The default value for HTML elements is set to  auto , which is aquivalent to  0 . Positioned elements with a higher  z-index ...