1. TIL (Today I learned)
Combinatorics (Combinations without Repetition)
Definition: The number of different ways we can pick certain elements of a set.
Ex. Pick 3 people to represent your company
- 10 employees , how many combinations are there?
using variation:
vⁿ ᵖ = n! / (n-p)! = v¹⁰ ³ = 720
This would lead to counting every group of 3 people several times
Picking Alex, Sarah, Dave is same as picking Dave, Sarah, Alex.
**Variations don't take into acoount double counting elements.
**All the different permutations of a single combination are different variations.
--> Any of the 6 permutations we show below is a differnt variation but NOT a different combination.
[Alex, Sarah, Dave] [Alex, Dave, Sarah] [Sarah, Alex, Dave]
[Sarah, Dave, Alex] [Dave, Alex, Sarah] [Dave, Sarah, Alex]
However, Combinations take into account double counting.
Pⁿ = n!
P³ = 3! = 6
6 variations for any combination
- six times fewer combinations than variations
v¹⁰ ³ = 10 * 9 * 8 = 720
C¹⁰ ³ = 720 / 6 = 120 ways of choosing who represents the company.
Recall:
We can say that all the different permutations of a single combination are different variations.
p³ = 6
=== v¹⁰ ³ = 720
C¹⁰ ³ = 120
Cⁿ ᵖ = vⁿ ᵖ / pⁿ = n! / p!(n-p)!
n = 10
p = 3
C¹⁰ ³ = 10! / 3!7! = 8 * 9 * 10 / 1 * 2 * 3 = 720 / 6 = 120
if ex. pick 4 employees
C¹⁰ ⁴ = V¹⁰ ⁴ / P⁴ = 10! / 4!6! = 7 * 8 * 9 * 10 / 1 * 2 * 3 * 4
= 5040 / 24 = 210
[JS/Browser] DOM
Dom (Document Object Model)
- DOM is an HTML for programmers
- If you understand DOM, you can upgrade HTML to a web app.
- You can control HTML using Javascript in a browser with DOM.
- You can approach a element or make/delete an element in a HTML document.
FUN FACTS:
Things you can do using JS.
1. Mobile App (React Native)
2. Video App (Web RTC)
3. Robot & IOT device (Johnny Five)
4. ChatBot (Javascript)
5. Automation (Google Spreadsheet - Macro)
6. Visualization (D3.js)
7. Machine Learning (TensorFlow)
Achievement Goals
1. Understand the concept of DOM
2. Understand the structure of DOM & see what are the similarities between DOM & HTML
3. Understand the cautions when calling JS files from HTML.
-
the < script > tag's location differs the outcome.
Advanced Challenge
- Understand the difference between DOM & Javascript
Applying Javascript in HTML
To apply Javascript in HTML we user the < script > tag
<script src="myScriptfile.js"></script>
// this code will call myScriptfile.js from the same directory the HTML is located.
** When the web browser is parsing(analyzing) the written codes in HTML and meets a < script > tag,
it stops parsing & fetches the script & executes the scripr before moving on.
2 Occurences in using the < script > tag
-
Including < script > inside the < head > tag
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <!-- script 요소 삽입 위치 --> <script src="myScriptFile.js"></script> </head> <body> <div id="msg">Hello JavaScript!</div> </body> </html> -
Including < script > at the end of the < body > tag.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <div id="msg">Hello JavaScript!</div> <!-- script 요소 삽입 위치 --> <script src="myScriptFile.js"></script> </body> </html>
Questions
- What are the differences in the console between 2 ways of including < script >?
Answer: Including < script > in the head returned null for the HTML file.
However, including < script > after body returned both HTML & JS file returned null because the HTML file was not loaded.
- Find the children element of an HTML
a. A DOM is located in a object "document" in Javascript.
b. You can approach the document object anytime in the browser.
c. In searching for DOM structure, using console.dir() is more efficient, a console.dir returns an object compared to console.log().
console.dir(document.body)
// lists down all the keys of the document
document.body.children
// directly shows the values inside the children element of body
-
Find the parent element of div, class = news-contents.
#news-contents(ID = news-contents) is the 'children' element of the body element
body element is the parent element of elemnts with id = news-contents(#news-contents)to find element with ID NAME = news-contents document.body.children[1] // assign a variable to easily approach let newsContents = document.body.children[1] console.dir(newsContents) // div#news-Contents; to find newsContent parent element newsContents.parentElement document.body.children[1].parentElement
**DOM structure usually called a tree structure because a parent element has many children and the children element then become a parent element itself and has a children element and so on.
2. 3 Things to be Thankful for
- Thank God I had a chance to wonderfully finish my plans for the day.
- Thank God I reached out to pray to you when I felt scared.
- Thank God I am consistently learning new things and not getting arrogant
3. Ideas and Things to think about
- Understanding that learning is not speed but just having fun on learning new things. Stay calm and just go in your own pace, God will do the rest.
- Metaverse is a good place to advertise because it really is a new market people go into and get influenced.
- Using spreadsheet automation can make my duty maker a better software for my military colleagues
- Focus on giving thanks and praying because He is everything.
- Before encountering any people always start with a prayer.
