https://github.com/svendolin/all-about-javascript
This "All-about-Javascript"-repository catches up its focus on all the USEFUL JAVASCRIPT I've been working on and I've coded through the years as a SAE-Web Development student with exercise lessons every week as well as tutorial videos on Youtube.
https://github.com/svendolin/all-about-javascript
es6 es6-javascript javascript javascript-framework js vanilla-javascript vanilla-js
Last synced: about 1 month ago
JSON representation
This "All-about-Javascript"-repository catches up its focus on all the USEFUL JAVASCRIPT I've been working on and I've coded through the years as a SAE-Web Development student with exercise lessons every week as well as tutorial videos on Youtube.
- Host: GitHub
- URL: https://github.com/svendolin/all-about-javascript
- Owner: Svendolin
- Created: 2022-05-30T13:09:26.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-03-30T19:00:12.000Z (about 2 years ago)
- Last Synced: 2025-01-20T00:43:40.684Z (3 months ago)
- Topics: es6, es6-javascript, javascript, javascript-framework, js, vanilla-javascript, vanilla-js
- Language: JavaScript
- Homepage:
- Size: 4.3 MB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
    
---
# - ALL ABOUT JAVASCRIPT / VANILLA JAVASCRIPT - 🔅
This "All about JAVASCRIPT"-repository catches up its focus on all the Javascript I've learned, coded, commented and written through the years as a **SAE-Web Development** student with exercise lessons every week as well as tutorial videos on _Youtube_.
Direct Link to the place where I'm studying are you going to find [HERE](https://www.sae.edu/che/de?utm_source=PS01&gclid=Cj0KCQjw-4SLBhCVARIsACrhWLVIaD_aUt7y4brT7tqMW9o7tskgb1vjQqJFkzQwkwdN_40_Ls7MgAEaAtXxEALw_wcB)
**What is Javascript:**
- JavaScript (JS for short) is a scripting language originally developed by Netscape in 1995 for dynamic HTML in web browsers to evaluate user interactions, modify, reload or generate content, and thus extend the capabilities of HTML.
**Why Javascript:**
- Its after HTML (to define the content of web pages) and CSS (to specify the layout of web pages) one of the most important languages of all and here to program the behavior of web pages!
**Javascript != Java:**
- Both "Java" and "JavaScript" are trademarks and/or registered trademarks of Oracle in the USA or other countries. The two programming languages have very different syntax, semantics and usage.
**ES6:**
- ECMAScript 6 or ES6 is the latest version of JavaScript and brings since 2016 great new features, such as variables, arrow functions, strings and arrays
**CDN:**
- A Content Delivery Network (CDN) is a network of servers in different data centres around the world. It is an excellent way to offer or develop your website or web application worldwide. When you use such a network, your web server connects to a large number of other servers. With the help of a distribution system, the static contents of your web server are transferred to these so-called replica servers.
- I personally use [CDNJS](https://cdnjs.com/) to load library files on websites. In generally used it for FONTAWESOME / JQUERY and HTML2CANVAS (for the QR Code thingy) which is described over [HERE](https://html2canvas.hertzen.com/)
**JQUERY:**
- Our JQuery [Repository HERE](https://github.com/Svendolin/All-about-JQuery)
**JSON:**
- Our JQuery [Repository HERE](https://github.com/Svendolin/All-about-AJAX-and-Node.js)
---
## Folder Directory
---
| Topic | Content |
| :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 00 Slides and Notes | Slides and notes which might be supportive for the whole project |
| 01 Basics | 01 `console.log()` // 02 `data types` of values like: (strings, numbers, arrays, boolean, objects) // 03 `operators` to control and manipulate varaibles (==, ===, !===, && and many more) // 04 `conditionals` are IF {} ELSE {} statements |
| 02 Basics II | 00 Exercises // 01 `loops for() and forEach()` // 02 `arrays` // 03 `objects` // 04 `strings`(string methods and template strings) // 05 `alert + confirm + prompt` // 06 `pop() push() shift() unshift()`|
| 03 Basics III | 01 `functions + arrow=>functions` // 02 `DOM Manipulation`|
| 04 Click and Show | 01 Show Box by clicking a button // 02 Show RANDOM Box by clicking a circle // 03 Show text with InnerHTML |
| 05 Calculator | Functionable Calculator with Vanilla Javascript |
| 06 Kitten Image Gallery | Clickable Kitten Images - the clicked image will be shown on a big screen |
| 07 Form Validation | Registration form with error handlers and word counter done in Javascript (no PHP) |
| 08 Todo List | Add content to a list, mark them as completed and clear the completed tasks if needed |
| 09 All components exercise | A terrible looking website to show the previous stuff integrated in a onepager |
| 10 QR-CODE Generator | A fully functionable QR Code generator for your websites. The principle is to generate a QR Code with the URL of the current website such as this example here: https://www.qrcode-monkey.com/de/ and download it as a JPG File at the end! |
| 11 HTML2CANVAS | Download a screenshot of the current website (or in our case a DIV) as a JPG or PNG File |
## Important TERMS in Javascript: 📈
---
| Term (word): | Explenation in German for a better personal understanding for myself: |
| :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **STATEMENTS** | Die Anweisungen werden nacheinander in der gleichen Reihenfolge ausgeführt, in der sie geschrieben wurden. Ein JavaScript-Programm ist eine Liste von Programmieranweisungen. = `let x, y, z; (Statement 1), x = 5; (Statement 2), y = 6; (Statement 3)` etc |
| **OBJECTS** | "Im wirklichen Leben ist ein Auto ein Objekt..." - Objects sind eine Sammlung von Datenwerten z.B. = `const = car {type: "fiat", model: "500", farbe: "weiss"}` etc |
| **PROPERTIES** | "Ein Auto hat Eigenschaften wie Gewicht und Farbe. Alle Autos haben die gleichen Eigenschaften, aber die Eigenschaftswerte unterscheiden sich von Auto zu Auto." - Properties sind Eigenschaften eines Objektes: `car.color =` in dot-notation oder `car["color"] =` in bracket-notation welcher einen Wert (value) mitteilt, der hinter dem =-zeichen genannt wird. |
| **METHODS** | "Methoden eines Autos sind wie Start und Stopp. Alle Autos haben die gleichen Methoden, aber die Methoden werden zu unterschiedlichen Zeiten durchgeführt." - Eine Methode ist eine als Eigenschaft gespeicherte Funktion: `car.start() oder car.stop()` |
| **VARIABLES** | Const, let, var-Behälter als "Speicherplatz" zum Speichern von Daten (Container von Datenwerten). => `let car = "Fiat";` Alle JavaScript-Variablen müssen mit eindeutigen Namen versehen werden! |
| **VALUES** | DatenWERT z.B. `let carColor = "blue"` |
| **FUNCTIONS** | Eine JavaScript-Funktion ist ein Codeblock, der eine bestimmte Aufgabe erfüllen soll. Eine JavaScript-Funktion wird ausgeführt, wenn "etwas" sie aufruft ("callen"). |
| **KEYWORDS** | JavaScript-Anweisungen beginnen oft mit einem Schlüsselwort, um die auszuführende JavaScript-Aktion zu identifizieren: `"if" = conditionals` / `"switch" = cases` / `"for" = loops bzw Schleifen` / `"function" = declares a function` / `"return" = exits a function` / `"try" = for error handling` |
## Important KEYWORDS in Javascript: ⚡
---
| Keyword | Explenation in German for a better personal understanding for myself: |
| :------------- | :----------- |
| **VAR** | Deklariert eine Variable und initialisiert sie optional mit einem Wert. / z.B `"Let X; X = 6"` / Wenn man einen mit var deklarierte JavaScript-Variable erneut deklariert, verliert sie ihren Wert nicht. Sie kann auch versehentlich überschrieben werden, was gefährlich sein kann. (var carName = "Volvo"; var carName;) |
| **LET** | Deklariert eine Blockvariable - Re-Declaration (Übernennung) nicht möglich!|
| **CONST** | Deklariert eine Blockkonstante - Re-Declaration (Übernennung) nicht möglich. JavaScript const-Variablen muss bei ihrer Deklaration ein Wert zugewiesen werden, z.B.: `const PI = 3.14159265359;`|
| **IF** | Markiert einen Anweisungsblock, der unter einer Bedingung ausgeführt werden soll (für Conditionals) |
| **SWITCH** | Markiert einen Block von Anweisungen, die in verschiedenen Fällen ausgeführt werden sollen. |
| **FOR** | Markiert einen Block von Anweisungen, die in einer Schleife ausgeführt werden sollen (For Loop) |
| **FUNCTION** | Deklariert eine Funktion |
| **RETURN** | Beendet eine Funktion |
| **TRY** | Implementiert Fehlerbehandlung für einen Block von Anweisungen |
**When to use: "CONST, LET, VAR?"**
- If you want a general rule or declare an object: always declare variables with **const.**
- If you think the value of the variable can change, use **let.**
- In this example, price1, price2, and total, are variables:
```js
In this example, price1, price2, and total are variables.
const price1 = 5; // CONST
const price2 = 6; // CONST
let total = price1 + price2; // LET
document.getElementById("demo").innerHTML =
"The total is: " + total;
```
**Why DYNAMIC TYPES only work with "let"...**
- This means that the same variable can be used to hold different data types. As we said above: use "let" for dynamic types if the value of the variable should change:
```js
let x; // Now x is undefined (const x; would throw an error)
x = 5; // Now x is a Number
x = "John"; // Now x is a String
document.getElementById("demo").innerHTML = x;
```
---
## Basic Javascript-Stuff in a Nutshell 🥜
---
_**What are the Javascript DISPLAY possibilities?**_
- Writing into an HTML element, using innerHTML like:
```js
document.getElementById("demo").innerHTML = "Hello JavaScript!";
```
- Writing into the HTML output using document.write().
- Writing into an alert box, using window.alert() or print stuff, using window.print() like:
```js
Print this page
```
- Writing into the browser console, using console.log() for debugging proposes.
_**What are DATA TYPES ?**_
- Data types describe the different types or kinds of data that we’re gonna be working with and storing in variables.
- It's a good programming practice to declare all variables at the beginning of a script.
```js
/* ---- Data Types ---- */
// "Non-Zero Value" = There is a value around like these:
// 1) (Strings = Not mutable "Zeichenketten")
let person_name = "Victor";
//Character Escaping:
let myString1 = "He didn't do it"
let myString2 = '"This is a quote"'
// Character Escaping with \:
let alternative1 = 'He didn\'t do it'
let alternative2 = "\"This is a quote\""
//Template Strings using ``:
let text = `The quick brown fox jumps over
the lazy dog`;
//Interpolation (interpolate variables into strings) with ${...}:
let firstName = "John";
let lastName = "Doe";
let text = `Welcome, ${firstName} ${lastName}!`; // Welcome, John Doe!
//Declare many variables in one line:
let person_name = "Victor",
person_age = 41,
person_alive = true;
// 2) (Numbers = "Zahlen")
let person_age = 41;
// 3) (Boolean = Decision if true or false)
let person_alive = true;
// 4) (Array = List of Values)
let person_parents = ["Maria", "Peter", "Tom", "Dave", "Lisa", "Paul"];
// 5) (Objects = Container of a collection of Data)
let person = {
name: "Victor",
age: 41,
alive: true,
parents: ["Maria", "Peter"],
};
// Value of "0" = The value of this variable is actually 0
// 6) Undefined: (variable has been declared but no assigned value, "kein versehener Wert") for example:
let = toiletpaperholder // declared but not defined = "undefined"
let toiletpapeholder = "Got some paper"; // declared, defined and assigned a value (string)
// 7) Null: No value (EMPTY AND NON-EXISTENT) => "let toiletpaperholder = null"
```
_**What are OPERATORS?**_
- Operators in Javascript help us to control and manipulate variables in many ways
- An operation is a certain type of instruction. If you work with an operator, this is already a so-called operation.
```js
/* ---- Operators ---- */
// 1) (=) The assigment operator
let myNum = 24;
// 2) (+) Addition operator:
let myStr1 = "Hello";
let myStr2 = "World";
let separator = " ";
let conc = myStr1 + separator + myStr2;
console.log(conc);
// 3) (+=) Addition assignment operator:
let x = 10;
x += 5; // x = x + 5 = 15 (which is the same as X = X + Y - "Zum bestehenden X wird Y addiert")
// Also possible with other operators like: -=, *=, /=, %=, **=, <<=, >>=, >>>=, &=, ^=, |= with the exact same logic! :D
// 4) (-) and (*) and (/) (- Substraction operator) (* multiplication operator) (/ division operator)
let someNumber = 15;
console.log(myNum - someNumber); // -76 (Number)
console.log(myNum * someNumber); // 2400 (Number)
console.log(myNum / someNumber); // 0.24 (Number)
console.log(24 * 32 - 200 + 3 * 4); // 580 (Number)
// 5) (>) or (<) Bigger than vs smaller than operator
console.log(3 > 1); // True
console.log("foo" > "fo"); // True (amount of letters)
// 6) (==) Equal operator
console.log("100" == 100); // True
// 7) (===) Strictly equal operator
console.log(someNumber === 100); // false
// 8) (<=) and (=>)Bigger-or equal than vs smaller-or equal than
console.log(someNumber <= 100); // true
console.log(someNumber >= 100); // false
// 9) (!=) and (!==) NOT operator (!)
console.log(someNumber != 100); // ==
console.log(someNumber !== 100); // ===
// 10) (&&) AND Operator
console.log(100 > 80 && 100 < 200); // true
console.log(100 > 80 && 300 < 200); // false
// 11) (||) OR Operator
console.log(100 > 80 || 100 < 200); // true
console.log(100 > 80 || 300 < 200); // true
// 12) (%) Modulus Operator
console.log(6 / 2); // 3
console.log(7 / 2); // 3.5
```
_**What are CONDITIONALS ?**_
- Conditional statements are used to perform different actions based on different conditions.
- Conditional statements control behavior in JavaScript and determine whether or not pieces of code can run ("Entscheidungen")
```js
/* ---- Classic IF / ELSE - Statement ---- */
if (pluggedIn === true && isOn === true) {
console.log("Items are being displayed");
if (item) {
if (item === "Coffee") {
if (current_beans >= min_beans && current_water >= min_water) {
console.log("Coffee TIME :D");
} else {
console.log("Not enough Water or Coffee");
}
} else {
console.log("Your item is not available at the moment");
}
} else {
console.log("Please select an item");
}
} else {
console.log("Turn me on pls");
}
```
_**ITERATION: FOR-LOOP or FOREACH-LOOP with an arrow-function?**_
- Up until now, we've been doing our iterating with for loops. These are great for one-off tasks ("Schleifen")
- BUT: Every array in JavaScript comes with the .forEach() method. This method lets us iterate over every element of the array directly:
```js
/* ---- for() VS forEach() ---- */
const array1 = ["a", "b", "c"];
array1.forEach((element) => console.log(element));
// expected output: "a"
// expected output: "b"
// expected output: "c"
const array2 = ["1", "2", "3"];
for (let i = 0; i < array2.length; i++) {
console.log(array2[i]);
}
// expected output: "1"
// expected output: "2"
// expected output: "3"
/* ---- Manipulate Arrays ["foo","bas"] ---- */
```
=> Figuratively: A is the bottom of the card pile, T again the highest card of the pile. With pop() we take away the card from the top, with push() we add a card instead.
_**FUNCTIONS and ARROW=>FUNCTIONS:**_
- 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.
- A JavaScript function is a block of code designed to perform a particular task.
- A JavaScript function is executed when "something" invokes it (calls it).
```js
/* ---- Function declaration ---- */
// Function declarations are pushed to the top due to js hoisting:
console.log(square(4)) // 16
// Function was called above, variable n was filled with a number. This here is the built up of the function:
function square ( n ) {
return n * n
}
// ----------------------------------------------------------
// FINE EXAMPLE:
// The temperature is 25 Celsius
document.getElementById("demo").innerHTML =
"The temperature is " + toCelsius(77) + " Celsius";
function toCelsius(fahrenheit) { // Function declaration with 77 as parameter from above
return (5/9) * (fahrenheit-32);
}
// ----------------------------------------------------------
// Local vaiables:
// code here can NOT use carName
function myFunction() {
let carName = "Volvo"; // Local variable
// code here can use carName
}
// code here can NOT use carName
// ----------------------------------------------------------
// in Arrow form ( Ab ES6 )
let squareArrow = n => console.log(n * n) // 25
// Initialisation ALWAYS after the arrow function:
squareArrow(5)
```
---
## Technologies and additional infos ✅
---
_**EXTERNAL FILES:**_
- External scripts are practical when the same code is used in many different web pages. I personally do not write a < script > tag in my HTML file, but rather link to an external script file. For short explanations its not a shame to use the < script > tag in the HTML file of course!
```js
// External file:
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
// HTML file in the section:
// Note: If you put the tag in the <body>, the script will not work unless you use "defer" like: <scrip src="myScript.js" defer>
```
_**CODE BLOCKS:**_
```js
// Code blocks are used to group one or more statements. A code block starts with { and ends with }. The following example shows a code block containing two JavaScript statements:
// With a click on this button, "myFunction" (defined down below) will be executed:
Click Me!
function myFunction() {
document.getElementById("demo1").innerHTML = "Hello Dolly!";
document.getElementById("demo2").innerHTML = "How are you?";
}
```
_**General OUTPUT:**_
```js
// HTML
/* Output:
3.14
John Doe
Yes I am!
*/
// JS
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
document.getElementById("demo").innerHTML =
pi + "
" + person + "
" + answer;
```
---
## Collaboration ✅
---
> Feel free to contact me if you've seen something wrong, found some errors or struggled on some mistakes! Always happy to have a clean sheet here! :)
---
## FAQs ✅
---
0 Questions have been asked, 0 answers have been given, 0 changes have been made.
| Questions | Anwers | Changes |
| :-------- | :----: | ------: |
| 0 | 0 | 0 |