|
| 1 | +--- |
| 2 | +title: Introducing JavaScript |
| 3 | +template: splash |
| 4 | +--- |
| 5 | + |
| 6 | +Now that you got a taste of HTML and CSS, let's talk about JavaScript. It's the third language that the browser understands. |
| 7 | + |
| 8 | + |
| 9 | +## Client-side and server-side JavaScript |
| 10 | + |
| 11 | +Inside the browser, JavaScript is best used sparingly to add interactivy to a page. Although unfortunately, some websites load millions of lines of JavaScript into the browser. Since a browser is also known as a _client_, this is known as client-side JavaScript. In fact, client-side JavaScript frameworks like React compute the whole page in the browser of your user every time they load the page. This may be required for an app like Google Docs or Visual Studio Code. But for most websites, it just makes everything slow for no good reason – especially on mobile phones, with their limited computing power and slow networks. |
| 12 | + |
| 13 | +However, JavaScript is a general-purpose programming language like any other. Nowadays, you can run JavaScript also on your server or laptop, generate the HTML there, and only send that to your user's browser – just like people have done with PHP or Ruby for ages. This is known as server-side JavaScript and it's what we'll be doing primarily in this guide. |
| 14 | + |
| 15 | + |
| 16 | +## Introducing JavaScript |
| 17 | + |
| 18 | +On your published website, open your [browser's developer tools](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools#how_to_open_the_devtools_in_your_browser) again. But this time, switch to the tab named **Console**. |
| 19 | + |
| 20 | + |
| 21 | + |
| 22 | +This is an interactive JavaScript console, which means that you can type in JavaScript, hit `enter`, and it will calculate the result. Try adding two numbers by typing: |
| 23 | + |
| 24 | +```js title=Console |
| 25 | +1 + 2 |
| 26 | +``` |
| 27 | + |
| 28 | +After hitting `enter`, a new line will be shown with the result: `3`. |
| 29 | + |
| 30 | +A piece of text, that a program works with, is called a _string_. In JavaScript, strings are usually wrapped in either single quotes or double quotes. Type: |
| 31 | + |
| 32 | +```js title=Console |
| 33 | +'1' + "2 cats" |
| 34 | +``` |
| 35 | + |
| 36 | +and hit `enter`. It returns `"12 cats"` (this time with quotes). That's because when working on strings (as opposed to numbers), the `+` operator concatenates them together. |
| 37 | + |
| 38 | +If you want your program to remember something for later, assign it to a variable. Create the variable `myName` and assign it the string `"Peter"` by typing: |
| 39 | + |
| 40 | +```js title=Console |
| 41 | +const myName = "Peter"; |
| 42 | +``` |
| 43 | + |
| 44 | +The semicolon at the end is customary to mark the end of a statement. Statements (as opposed to expressions) will not directly give a result – that's why it prints a line saying `undefined`. |
| 45 | + |
| 46 | +A third way to write a string is to wrap it in backticks. This allows you to put variables (and other expressions) in it using `${ }`: |
| 47 | + |
| 48 | +```js title=Console |
| 49 | +`I am ${myName} and ${3 * 10} years old` |
| 50 | +``` |
| 51 | + |
| 52 | +If you want to execute the same kind of computation multiple times, you need a function. One way to write a function that returns the string `"Hello World"`, and assign that function to the variable `hello` is: |
| 53 | + |
| 54 | +```js title=Console |
| 55 | +const hello = () => "Hello World"; |
| 56 | +``` |
| 57 | + |
| 58 | +Again, assignments always return `undefined`. But now you can call the function: |
| 59 | + |
| 60 | +```js title=Console |
| 61 | +hello() |
| 62 | +``` |
| 63 | + |
| 64 | +which will return the string `"Hello World"`. |
| 65 | + |
| 66 | +To make it a bit more useful, we can write a new function that takes an argument, which you can name as you wish. Let's call our argument `name`: |
| 67 | + |
| 68 | +```js title=Console |
| 69 | +const helloName = (name) => `Hello ${name}`; |
| 70 | +``` |
| 71 | + |
| 72 | +You can call it like: |
| 73 | + |
| 74 | +```js title=Console |
| 75 | +helloName("Peter") |
| 76 | +``` |
| 77 | + |
| 78 | +Finally, let's give you a sneak peak on JavaScript objects (which hold key-value pairs): |
| 79 | + |
| 80 | +```js title=Console |
| 81 | +const person = { firstName: "Arthur", lastName: "Dent", age: 42 }; |
| 82 | +`${person.firstName} ${person.lastName} is ${person.age} years old.` |
| 83 | +``` |
| 84 | + |
| 85 | +And arrays, which act like lists: |
| 86 | + |
| 87 | +```js title=Console |
| 88 | +const shoppingList = ["bread", "milk", "butter"]; |
| 89 | +const rememberFn = (item) => `Remember the ${item}!`; |
| 90 | +shoppingList.map(rememberFn) |
| 91 | +``` |
| 92 | + |
| 93 | +`.map()` calls the method `map` on the `shoppingList`. A method is a function attached to an object. All arrays come with a `map` method. When you call it, you need to give it a special kind of argument: a function. |
| 94 | + |
| 95 | +Feel free to toy around a bit more in the JavaScript console. You can always reload the page to reset everything, meaning you'll lose all your variables. |
| 96 | + |
| 97 | +The good news is that with JavaScript – like with any general-purpose programming language – you can create arbitrarily complex programs. That's also the bad news btw. Either way, this crash course should be enough for you to create that second page for your website. |
| 98 | + |
| 99 | +:::tip[Want to learn more JavaScript?] |
| 100 | +[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide) also has good documentation on JavaScript. But especially if you're new to programming in general, I can highly recommend the book [Eloquent JavaScript](https://eloquentjavascript.net/), which is free to read online. |
| 101 | +::: |
0 commit comments