Since you've already learned Web design in 4 minutes, it's time to dive into the Web's main programming language: JavaScript.
17 |
4 |
5 | Learn the basics of JavaScript in 14 minutes with this interactive tutorial! 😃
6 |
7 | ## Copyright and license
8 |
9 | Code copyright 2018 Jeremy Thomas.
10 |
11 | The content of this project itself is licensed under the [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](https://creativecommons.org/licenses/by-nc-sa/4.0/).
12 |
13 | The underlying source code used to format and display that content is licensed under the [MIT license](https://opensource.org/licenses/mit-license.php).
14 |
--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | url: https://jgthms.com/javascript-in-14-minutes
2 |
3 |
--------------------------------------------------------------------------------
/_data/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "JavaScript in 14 minutes",
3 | "description": "Learn the basics of JavaScript in 14 minutes with this interactive tutorial! 😃"
4 | }
5 |
--------------------------------------------------------------------------------
/_includes/icons/facebook.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/_includes/icons/github.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/_includes/icons/hn.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/_includes/icons/reddit.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/_includes/icons/twitter.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/_includes/icons/whatsapp.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/_includes/partials/check.html:
--------------------------------------------------------------------------------
1 | 
9 |
--------------------------------------------------------------------------------
/_includes/partials/newsletter.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/_includes/partials/panorama.html:
--------------------------------------------------------------------------------
1 | 2 | 3 | {% include partials/image.html %} 4 | 5 |
6 | -------------------------------------------------------------------------------- /_includes/partials/share.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /_includes/partials/snippet.html: -------------------------------------------------------------------------------- 1 |
12 |
13 | Since you've already learned Web design in 4 minutes, it's time to dive into the Web's main programming language: JavaScript.
17 |I believe you are using this:
56 | 57 |If this information is correct, let's get started.
85 |106 | Your browser comes with a developer console that allows you to type JavaScript directly in this webpage. 107 |
108 | 109 |Since you're using Apple Safari:
134 |Let's see if it works!
143 |In the console, type (or paste) the following, and press Enter
144 |You've just used alert(), a native JavaScript function that comes with every browser.
But what have you done exactly?
You've called the alert() function with the 'Hello World!' argument.
You have basically done 4 things:
167 | 168 |alert('Hello World!')alert('Hello World!')alert('Hello World!')alert('Hello World!')Sometimes, there's no argument.
188 | Sometimes, there's multiple arguments.
189 | Most of them are required, but some of them can be optional.
In this case, alert() requires only one argument.
But what type of argument is that?
194 |When you handle text, you're using strings, which are a series of characters. In our case, we used a series of 12 characters: Hello World!. This includes all lowercase and uppercase letters, the space, and the exclamation point.
To define where the string starts and where it ends, you need to wrap it in quotes (either single ' or double ").
When you defined the 'Hello World!' string:
What if you wanted to deal with numbers instead?
215 |Like any other programming language, JavaScript can handle numbers.
224 | 225 |These numbers can be big or small, with or without decimals, combined through numeric operations…
226 | 227 |Type or paste the following snippet in your console:
228 |Notice a few things:
240 | 241 |+ and * operators5 * 3 is calculated, then 9 + 15* symbol don't affect the output ; they're just here to help us (humans!) read the code.You can find numbers in lots of places.
248 |Numbers are everywhere! Especially in a browser.
256 | 257 |For example, your current browser window has a certain width that you can access with JavaScript.
258 | 259 |Type the following:
260 | 261 | {% capture snippet %}{% include snippets/snippet_innerwidth.md %}{% endcapture %} 262 | {% include partials/snippet.html contents=snippet %} 263 |272 | This means your browser's window is 1680 pixels wide. 273 |
274 | 275 |
276 | As you would have guessed, window.innerHeight exists as well, as does window.scrollY, which gives you the current scroll position.
277 |
But what is window exactly?
289 | window is a JavaScript object.
290 |
292 | innerWidth is a property of the window object.
293 |
294 | To access this property, you used a dot . to specify you wanted the innerWidth that exists within the window object.
295 |
The JavaScript object is basically a type that contains other things.
298 |For example, window also has:
window.origin which is a stringwindow.scrollY which is a numberwindow.location which is an objectIf window is an object that contains location which is another object, this means that JavaScript objects support…
A property of an object can be an object itself (inception!).
316 | 317 |Since window.location is an object too, it has properties of its own. To access these properties, just add another dot . and the name of the property.
For example, the href property exists:
You just displayed the full URL of this webpage. This is because:
332 | 333 |window is an objectlocation is an objecthref is a string
340 | There's no limit to how deeply objects can be nested.
341 |
342 | There's also no limit to the number of properties an object can have.
343 |
346 | As we've seen, the properties of an object can be of any type: strings, numbers, objects, and even functions. In the latter case, it's called… 347 |
348 |When an object's property is a function, it's called a method instead.
357 | 358 |Actually, the alert() function we've been using so far is a method of the window object!
371 | Since window is the top-level object in the browser, you can access all its properties and methods directly.
372 |
375 | That's why typing location.href is the same as typing window.location.href.
376 |
379 | Or why alert() is equivalent to window.alert().
380 |
383 | Objects are useful for grouping several properties under the same name and scope, and defining a hierarchy in the data. It's like a tree, where each branch can have other smaller branches. 384 |
385 | 386 |387 | But what if you only needed a list of things… 388 |
389 |A JavaScript array is a type that can contain multiple values, as if they were in an ordered list.
398 | 399 |Let's pass an array of 3 strings to the alert() function:
411 | You already know the syntax for calling the alert function: alert(argument).
412 |
415 | In this case, the argument you passed is an array with 3 items that you have defined like this: 416 |
417 | 418 |['What', 'is', 'up']['What', 'is', 'up']['What', 'is', 'up']['What', 'is', 'up']['What', 'is', 'up']442 | An array can contain any type of values: strings, numbers, objects, other arrays, and more… 443 |
444 | 445 |446 | Try out this snippet: 447 |
448 | 449 | {% capture snippet %}{% include snippets/snippet_list.md %}{% endcapture %} 450 | {% include partials/snippet.html contents=snippet %} 451 |
460 | The first item 2 + 5 is a number, while the second one 'samurai' is a string.
461 |
464 | What about the third argument? It's not a string because it's not wrapped in quotes, and it's not a number either. 465 |
466 |467 | So what is it? 468 |
469 |While strings and numbers have an infinite amount of possible values, a boolean can only be either true or false.
480 | By combining the alert() function and the 3-item array on a single line, it makes our code less readable.
481 |
484 | What if we could split the two by moving the array onto its own line? 485 |
486 |495 | We can move the array into a variable. 496 |
497 | 498 |499 | A variable is a container that stores a certain value. It has a name (so you can identify and re-use it), and it has a value (so you can update it later on). 500 |
501 | 502 | {% capture snippet %}{% include snippets/snippet_array.md %}{% endcapture %} 503 | {% include partials/snippet.html contents=snippet skipRun=true %} 504 | 505 |my_things is the name of the variable
508 | [2 + 5, 'samurai', true] is the value of the variable
511 | 515 | Here's the breakdown: 516 |
517 | 518 |varvar my_things = [2 + 5, 'samurai', true];var my_things = [2 + 5, 'samurai', true];=var my_things = [2 + 5, 'samurai', true];var my_things = [2 + 5, 'samurai', true];var my_things = [2 + 5, 'samurai', true];
542 | This means that my_things is equal to [2 + 5, 'samurai', true].
543 |
546 | We can now reinstate the alert function:
547 |
550 | Since we now have two statements, we need to separate them with a semicolon ; in order to know where one ends and the next one begins.
551 |
564 | By storing our array into a variable, we managed to make our code more readable. 565 |
566 | 567 | 580 | 581 |
582 | Although this my_things variable contains a list of several things, we might want to deal with only a single item of the list.
583 |
586 | To access a specific item of an array, you first need to know its index (or position) within the array. You then need to wrap this index into square brackets. 587 |
588 | 589 |590 | Can you guess which item is gonna be displayed? 591 |
592 | 593 | {% capture snippet %}{% include snippets/snippet_array_index.md %}{% endcapture %} 594 | {% include partials/snippet.html contents=snippet %} 595 |
604 | It's the second item that showed up! In programming, indexes start at zero 0.
605 |
my_things[1]my_things[1]my_things[1]my_things[1]627 | It turns out that variables are objects too! Which means that variables also have properties and methods. 628 |
629 | 630 |
631 | For example, my_things has a property called length:
632 |
645 | The array has 3 items. You'll see that if you add or remove items in my_things, this length value will change accordingly.
646 |
649 | While readability and properties are useful, the main point of a variable is that it's editable: you can change the value afterwards! 650 |
651 | 652 | {% capture snippet %}{% include snippets/snippet_array_edit.md %}{% endcapture %} 653 | {% include partials/snippet.html contents=snippet %} 654 |
663 | Two alert boxes have been displayed, but with different values! That's because between the first call and the second one, the value of my_things has been updated: a fourth item, the string 'LOVE', was added.
664 |
667 | Note that the second time we're assigning a value to my_things, we're not using the var keyword: it's because we're editing the my_things variable defined two lines above.
668 |
671 | You only use the keyword var when you're creating a new variable, not when you're editing one.
672 |
675 | Do you remember I told you variables had methods too (since they're objects)? Another way to edit an array's value is by using the push() method:
676 |
689 | The my_things array ends up with 4 items.
690 |
693 | While the push() method altered the array, others simply return a value:
694 |
707 | The includes() method checked if the string 'ninja' was present in the array. Since it wasn't, the method returned false, a boolean value.
708 |
711 | As a matter of fact, when dealing with booleans, typing the keywords true or false is quite rare. Usually, booleans exist as a result of a function call (like includes()) or a comparison.
712 |
715 | Here's a "greater than" comparison: 716 |
717 | 718 | {% capture snippet %}{% include snippets/snippet_innerwidth_boolean.md %}{% endcapture %} 719 | {% include partials/snippet.html contents=snippet %} 720 |729 | This means your browser window is not wider than 400 pixels. 730 |
731 | 732 |window.innerWidth > 400window.innerWidth > 400window.innerWidth > 400
748 | Just like the + and * before, > is a JavaScript operator.
749 |
752 | When you make such a comparison with the "greater than" operator >, you obtain a boolean value.
753 |
756 | Since the result of a comparison only has 2 outcomes (true or false), it's useful in cases where your code has to make a decision…
757 |
767 | Conditional statements are one of the most important concepts in programming. They allow your code to perform certain commands only if certain conditions are met. These conditions can for example be based on: 768 |
769 | 770 |783 | For now, let's trigger an alert box only if you happen to be on my domain! 784 |
785 | 786 | {% capture snippet %}{% include snippets/snippet_if.md %}{% endcapture %} 787 | {% include partials/snippet.html contents=snippet %} 788 | 789 | 794 |
803 | We're doing another comparison here, but with the "equal to" operator == instead.
804 |
ifif (window.location.hostname == 'jgthms.com') {if (window.location.hostname == 'jgthms.com') {if (window.location.hostname == 'jgthms.com') {if (window.location.hostname == 'jgthms.com') {if (window.location.hostname == 'jgthms.com') { alert('Welcome on my domain! 🤗')}
838 | Since the alert box did appear, it means that the hostname is indeed equal to 'jgthms.com'!
839 |
842 | We've handled the case when the comparison returns true.
843 |
846 | To handle the opposite case, when the hostname isn't 'jgthms.com', we can use the "not equal to" operator !=:
847 |
853 | If you try out this snippet, you'll see that it doesn't trigger anything! (Unless this tutorial has been copied to another domain 😆). 854 |
855 | 856 |
857 | What if we wanted to handle both cases simultaneously? We could write two if statements in a row. But since one statement is the exact opposite of the other, we can combine them with a else statment:
858 |
With this conditional setup, we can be sure that:
871 | 872 |
878 | While else is useful for covering all remaining cases, sometimes you want to handle more than two cases.
879 |
882 | By using else if you can add intermediate statements and handle multiple cases:
883 |
896 | As soon as one comparison returns true, it will be triggered, and all following statements will be ignored. That's why only one alert box showed up!
897 |
900 | Conditional statements make use of the keywords if and else, followed by a set of parentheses.
901 |
904 | This pattern of keyword/parentheses combination also happens to exist for another essential programming concept… 905 |
906 |915 | When you want to execute a block of code a certain amount of times, you can use a JavaScript loop. 916 |
917 | 918 |919 | Can you guess how many alert boxes this snippet will trigger? 920 |
921 | 922 | {% capture snippet %}{% include snippets/snippet_loop.md %}{% endcapture %} 923 | {% include partials/snippet.html contents=snippet %} 924 |932 | There were exactly 3 alert boxes! Let's dissect what happened: 933 |
934 | 935 |var i = 0 is the initial statei is assigned a value of zero 0.
939 | i < 3 is the conditional statementtrue, we execute the code in the block.false, we exit the loop.i++ is the increment expressioni is incremented by 1.
950 | 954 | Here's how you implemented it: 955 |
956 | 957 |forfor (var i = 0; i < 3; i++) {for (var i = 0; i < 3; i++) {for (var i = 0; i < 3; i++) {for (var i = 0; i < 3; i++) {for (var i = 0; i < 3; i++) {for (var i = 0; i < 3; i++) {for (var i = 0; i < 3; i++) {for (var i = 0; i < 3; i++) {for (var i = 0; i < 3; i++) { alert(i);}1005 | Let's analyze each iteration of the loop: 1006 |
1007 | 1008 || Iteration | 1013 |Value of i |
1014 | Test | 1015 |Trigger the alert? | 1016 |
|---|---|---|---|
| 1st | 1021 |0 | 1022 |0 < 3 |
1023 | Yes | 1024 |
| 2nd | 1027 |1 | 1028 |1 < 3 |
1029 | Yes | 1030 |
| 3rd | 1033 |2 | 1034 |2 < 3 |
1035 | Yes | 1036 |
| 4th | 1039 |3 | 1040 |3 < 3 |
1041 | No! | 1042 |
1048 | This loop allowed us to repeat an action N times. That's what computers are all about! 1049 |
1050 | 1051 |1052 | Of all the types of variables we've covered so far, there is one in particular worth looping through… 1053 |
1054 |1063 | Arrays are a perfect candidate for loops, because in programming we often want to repeat the same action for each item of an array. 1064 |
1065 | 1066 |
1067 | Let's say we wanted to trigger an alert box for each item of an array. While we could write as many alert() statements as there are items in the array (😰), this solution is cumbersome and ineffective! It would be prone to errors, and wouldn't scale at all with bigger arrays.
1068 |
1071 | Since programming languages are here to help us simplify our work, let's figure out a better way. We already know a few things: 1072 |
1073 | 1074 |i, which conveniently increments 1 by 1
1083 | 1087 | By combining these informations, we can devise the following snippet: 1088 |
1089 | 1090 | {% capture snippet %}{% include snippets/snippet_loop_array.md %}{% endcapture %} 1091 | {% include partials/snippet.html contents=snippet %} 1092 |1101 | One by one, the items of the array were displayed in their own alert box. 1102 |
1103 | 1104 |
1105 | While using a loop simplifies the process of going through each item of an array, we still had to create a for block manually and create a new variable i whose only purpose was to increment after each loop.
1106 |
1109 | I know what you're thinking. "There must be a better way!" 1110 |
1111 |
1120 | Arrays actually have a method called forEach(), which allows to perform a task for each item in the array:
1121 |
1134 | Note a few improvements: 1135 |
1136 | 1137 |i variable involved
1140 | length
1143 | my_thing[i] to access the item
1146 |
1150 | Remember the syntax of the alert() function? It was alert(argument).
1151 |
1154 | If you look carefully, you can see that forEach() has the exact same syntax! It's forEach(argument) but where the argument happens to be a function that spans 3 lines.
1155 |
1158 | So far, we've used a few functions and methods: 1159 |
1160 | 1161 |alert() function (or window method)
1164 | push() array method
1167 | includes() array method
1170 | forEach() array method
1173 | 1177 | We know how to call a function, but how do you actually create one? 1178 |
1179 |1188 | The power of programming languages is the ability to create your own functions, that fit your needs. 1189 |
1190 | 1191 |
1192 | Remember the keyword/parentheses combination that we used for if/else and for? Well, guess what: it's almost the same pattern here!
1193 |
1196 | I'm saying "almost" because the only difference is that a function needs a name! 1197 |
1198 | 1199 |
1200 | Let's create a function called greet(), with 1 parameter called name, and then immediately call it:
1201 |
1214 | You've created your first function! It's a simple one but it can teach you a lot. 1215 |
1216 | 1217 |1218 | Note a few things: 1219 |
1220 | 1221 |greet
1224 | name: it's like a variable, since it acts as a container for a value
1227 | message (a string) whose value is 'Hey there ' + name
1230 | + does is concatenate (or combine) the two strings to make a single longer one
1233 | alert() function, and use the message variable as parameter
1236 | 'Alex'
1239 | 1262 | If we break it down step by step: 1263 |
1264 | 1265 |functionfunction greet(name) {function greet(name) {function greet(name) {namefunction greet(name) {function greet(name) {function greet(name) { var message = 'Hey there ' + name; alert(message);}greet('Alex');
1305 | Unless we call the greet() function at the end, nothing happens! That's because the alert() call is inside the scope of greet() so it's not triggered unless the parent function greet() itself is called!
1306 |
1309 | Basically, by creating greet(), you're only telling the browser: "Hey! I've created this new function. So if at some point I call it, please execute whatever is inside!".
1310 |
1313 | That's why, when you call greet() at the end, the browser executes its content, which happens to be calling alert().
1314 |
1317 | It's important to understand that functions are a 2-step process: creating it first, calling it afterwards. 1318 |
1319 | 1320 |
1321 | As a matter of fact, the alert() function we've used all along was already created beforehand. It just exists somewhere inside your browser.
1322 |
1325 | Anyway, we've already covered a lot in 14 minutes!
1326 | So, what's next?
1327 |
1339 | We've barely covered the basics here. But don't worry! There are tons of resources available online! 1340 |
1341 | 1342 |1343 | Here are a few free resources I'd recommend: 1344 |
1345 | 1346 |
1365 | If you prefer video tutorials, check out these Udemy courses:
1366 |
1403 | If you're in a rush, try this shorter course! 1404 |
1405 | 1406 | 1423 | 1424 |1427 | JavaScript is only one third of what makes a webpage! You also need to know HTML and CSS. 1428 |
1429 | 1430 |1431 | Luckily, I've created two free references for you to browse through, so you can learn everything each language has to offer! 1432 |
1433 | 1434 | 1470 | 1471 |1474 | I designed this page with Bulma, my free open source CSS framework based on Flexbox. Check it out! 1475 |
1476 | 1477 | {% 1478 | include partials/panorama.html 1479 | class_name="bulma" 1480 | href="https://bulma.io/" 1481 | path="bulma-modern-css-framework-flexbox" 1482 | extension="png" 1483 | alt="Bulma CSS framework based on Flexbox" 1484 | width="256" 1485 | height="160" 1486 | %} 1487 | 1488 |1491 | I wrote a 44-page PDF called "CSS in 44 minutes" which teaches how to build your own personal webpage from scratch with HTML5 and CSS3. 1492 |
1493 | 1494 | {% 1495 | include partials/panorama.html 1496 | class_name="fortyfour" 1497 | href="https://jgthms.com/css-in-44-minutes-ebook" 1498 | path="css-in-44-minutes-book-cover" 1499 | extension="png" 1500 | alt="CSS in 44 minutes ebook" 1501 | width="168" 1502 | height="235" 1503 | %} 1504 | 1505 |1506 | As a bonus, the book also includes a small chapter on JavaScript in which I talk about functions, conditionals, objects, strings, and even explains how to interact with CSS. 1507 |
1508 | 1509 |1510 | I guess now there's only one thing left to do… 1511 |
1512 |1595 | Thanks for reading! 1596 |
1597 | 1598 |1599 | Made by @jgthms 1600 |
1601 |