Lesson 1, Thursday, 2024-09-11
- Introduction to JavaScript
It does not matter what we cover, but what you discover
- Victor Weisskopf, quoted by Noam Chomsky
- don't be shy (or scared), ask questions!
- as many as possible
- there are no bad questions
- interrupt us
- ask us to repeat
- if something is not clear to you, it's likely that it's not clear for others
| HTML | CSS | JavaScript |
|---|---|---|
 |
 |
 |
| Content | Presentation | Dynamic Effects |
| Nouns | Adjectives | Verbs |
<p>Hey</p>
<!-- HTML: Adds a paragraph -->p {
color: red;
} /* CSS: Makes the paragraph red */p.remove(); // JavaScript: removes the paragraph- JS is a programming language (scripting language)
- JS allows you to implement dynamic content and effects
- Invented by Brendan Eich in 1995 for the Netscape browser
- 1997: Standardized by ECMA as ECMA-262
- 1998: ES2 released
- 1999: ES3 released
- umm...
- ZZzzzzz...
- 2009: ES5 released
- 2015: ES6 released
- Since 2016: Yearly releases
- For servers, back-end: Node.js, Deno, ...
- For mobile apps: React Native, Cordova, ...
- For desktop apps: PWAs, Electron
- Most used programming language among developers worldwide as of 2024
- #1 most used language on GitHub as of 2022
We'll be using these tools during our course:
- Chrome Browser (or any modern browser, although Chrome is advised)
- Visual Studio Code
- MDN Web Documentation
Please install Visual Studio Code for the next lesson
- javascript.info: tutorials with nice (often visual) explanations
- freecodecamp.org: full free courses on many topics
- udemy.com: Introduction to JS (course)
- codeacademy.com: Introduction to JS (another course)
- edabit.com: Learn JavaScript with interactive challenges and external resources
- learnjavascript.online: very good online course, but costs 40€
( Parentheses ) |
< Angle brackets > |
{ Braces, or curly braces } |
& Ampersand & |
[ Brackets, or square brackets ] |
| Vertical bar, or pipe | |
; Semicolon ; |
: Colon : |
' Single quote ' |
# Hash or number sign # |
" Double quote " |
` Back tick ` |
_ Underscore _ |
* Asterisk * |
/ Slash, or Forward slash / |
~ Tilde ~ |
\ Backslash \ |
^ Caret or circumflex ^ |
- Open Google Chrome
- Hit
F12key - Or opt + cmd + C (Mac) / ctrl + shift + C (Windows)
- Click on Console
- Try entering something
What did you try? What did you see?
Numbers include entire and decimal numbers. In Javascript, we call them integer and float, respectively.
10, 12, 1.5, 3.5
Basic mathematical operators:
+addition-subtraction*multiplication/division**exponentiation
Let's say we want to go to the cinema with some friends (choose any number).
- How many people are going to the cinema in total? Enter it to JavaScript Console.
- A ticket costs 8€. Let JavaScript compute how much we have to pay in total.
- Alan and Ada volunteered to pay for the tickets. Use JavaScript to compute how much each has to pay.
A data type is defined by two things:
- A set of values
- A set of operators
The operators are used on the values.
2 and 3 are example values for the Number data type. + is an operator that we can use to perform an addition on 2 and 3.
When we say "Number data type", we mean all the possible number values plus all the operations we can perform with those values.
- A String is a sequence of characters
- It starts and ends with a
"double quote - Or it starts and ends with a
'single quote - Examples:
"Hello",'Grace Hopper'
Open the console, and type in the following strings:
- Your first name
- Your favorite food
- Name of your favorite book / tv series / anime
Strings start and end with (') or ("). But what if we want to add a quote within our string?
"He said: "Hello""We must escape the quote with a backslash (\).
A backslash in a string means that the character right after the backslash is special:
"He said: \"Hello\"";If you want a backslash in a string, you need to escape it: "\\"
There are some special characters in strings, for example:
"\n"- new line"\t"- tab
1. "Hello"
2. 'World'
3. "He said "hello" to me"
4. 'Let's go!'
5. ""
6. 'This is a\nnew line'
7. 'This is a backslash: \'
"Hello" // CORRECT
'World' // CORRECT
"He said "hello" to me" // WRONG - unescaped quotes
'Let's go!' // WRONG - unescaped '
"" // CORRECT
'This is a\nnew line' // CORRECT
'This is a backslash: \' // WRONG - escaped '