What is JavaScript
* A programming language
* Runs in the browser
* Provides interactivity
* Provides real-time content
* Provides animation options
Want to know how JavaScript was created in just 10 days? Listen to the
Lex Fridman
podcast
where he interviewed JavaScript creator Brendan Eich, who is also the
co-founder of Mozilla and Brave.
The Front-end Trifecta: HTML, CSS and JavaScript
(Source credit: Alexis Sanders)
JavaScript, HTML and CSS are the building blocks of modern website
development. Anybody can create a website in 3 simple steps:
1. Create webpages using HTML
2. Style webpages with CSS
3. Add everything else (such as interactions or animations) with
JavaScript
Control flow and loops
The control flow and loops of computer chair assembling
In preparation of upcoming bootcamp and long hours of sitting in
front of the computer, I decided to treat myself to a proper
computer chair, the kind that you can adjust the height up and down,
not the fancy ergonomic ones that cost thousands of dollars. I know,
such thing does exist. The chair got delivered today. So I decided
to put my
control flow and loops skills to test while I am
assembling the chair.
First things first, I identified all the parts and pieces according
to the instructions to make sure I have everything I need and
nothing is missing. Then I followed each step on the manual from A -
E to put every single piece together. There were moments where I had
to fix a few bugs but I got there in the end. And here I am sitting
on my perfectly finished computer chair. But wait, where is the loop
in this? Well the chair comes with 5 individual wheels. I 'looped'
through (literally) each wheel until all 5 of them are properly
fitted. Mission accomplished!
What is DOM
While Javascript is a programming language, the Document Object Model
(DOM) is a programming interface for web documents. We use DOM to
access the webpage and its elements, and as a result, to manipulate
the webpage using JavaScript or other programming languages.
A simple example would be: whenever you click a button on a webpage,
there is always some type of interactions happening. And more often
than not, this interaction is made possible through DOM.
Let me show you what I mean. Hover your mouse over this button and see
what happens.
Did you see the text color change to red? I did that by using DOM to
access the button element
(document.getElementById('button').style.color = 'red').
Once I 'gained' access to the 'button' object, I am able to change the
color of that element and do so much more.
What are functions
Now click this button
to see what happens.
Did you see the message? I created the message by using the JavaScript
function called
myFunction(). Once you click on the button, this block of
code is invoked and executed to perform a task, which is to display
the message. Congratulations! You just learned your first JavaScript
function.
To sum it up, A JavaScript function is a block of code, created to
perform a specific task (eg., display a message, change the text
colour etc...). The function will be executed when it's 'called'.
Functions are so helpful because they can be used many times with
different arguments, to produce different results.
Difference between accessing data from arrays and objects
Array is used when we want to create and store a list of items in a
single variable. Items inside an array can be accessed by their
numerical position called index in the list. Arrays use zero-based
indexing, so the first item in an array has an index of 0 (array[0]),
the second item an index of 1 (array[1]), and so on.
Data stored in objects are called properties, which consist keys and
values. var object = { key: 'value' }; To access data in objects, we
use either dot notation (object.key) or bracket notation
(object['key']).
| Arrays | Objects |
|---|---|
| var array = ['value1', 'value2', 'value3']; | var object = { key: 'value' }; |
| var person = ['Peter', 'Bob', 'Sue']; | var person = { name: 'Bob' }; |
| person[0] // returns Peter | person.name //returns Bob |
| person[1] // returns Bob | person['name'] // returns Bob |