This shows you the differences between two versions of the page.
se:labs:02 [2018/10/14 03:30] emilian.radoi |
se:labs:02 [2023/10/10 01:13] (current) emilian.radoi [Feedback] |
||
---|---|---|---|
Line 4: | Line 4: | ||
{{https://media.makeameme.org/created/javascript-javascript-everywhere.jpg| JS}} | {{https://media.makeameme.org/created/javascript-javascript-everywhere.jpg| JS}} | ||
+ | |||
+ | **[[https://drive.google.com/file/d/125SZ_EqMi5FIPCbiNWinSkYq7xrHzhh1/view?usp=sharing | Introduction video]]** | ||
JavaScript is the programming language of not only the browser, but also the server, native applications and even [[https://www.youtube.com/watch?v=6CmIidOxc2g|Arduino boards!]] | JavaScript is the programming language of not only the browser, but also the server, native applications and even [[https://www.youtube.com/watch?v=6CmIidOxc2g|Arduino boards!]] | ||
Line 55: | Line 57: | ||
<code javascript> | <code javascript> | ||
var x = 5 | var x = 5 | ||
- | var x | + | var x = undefined |
console.log(x) // Prints 'undefined' | console.log(x) // Prints 'undefined' | ||
</code> | </code> | ||
Line 67: | Line 69: | ||
* ''%%undefined%%'' - this means that the variable has been declared but not initialized (''%%let x%%'') | * ''%%undefined%%'' - this means that the variable has been declared but not initialized (''%%let x%%'') | ||
+ | |||
+ | <code javascript> | ||
+ | var x | ||
+ | console.log(x) // undefined | ||
+ | </code> | ||
+ | |||
* ''%%NaN%%'' - stands for //not a number//. This is set when doing invalid conversion operations: | * ''%%NaN%%'' - stands for //not a number//. This is set when doing invalid conversion operations: | ||
<code javascript> | <code javascript> | ||
- | let x = 'hello' | + | let x = 'hello' * 3 |
- | x.toString() | + | console.log(x) // NaN |
- | console.log(x) //NaN | + | |
</code> | </code> | ||
+ | |||
* ''%%null%%'' - returned from some functions when no response can be given. | * ''%%null%%'' - returned from some functions when no response can be given. | ||
+ | |||
+ | <code javascript> | ||
+ | let x = 'hello'.match('bye') | ||
+ | console.log(x) // null | ||
+ | </code> | ||
====== Functions ====== | ====== Functions ====== | ||
Line 136: | Line 149: | ||
</code> | </code> | ||
- | Try running the code above in your browser's developer console and see what happens 😊 | + | Try running the code above in your browser's developer console and see what happens. |
====== Network requests using fetch ====== | ====== Network requests using fetch ====== | ||
Line 196: | Line 209: | ||
For today, you'll going to have to do the following: | For today, you'll going to have to do the following: | ||
- | * Download {{:se:labs:task2.zip|the zip containing the tasks}} | + | - Download the {{:se:labs:task2b.zip|zip file}} containing the tasks. |
+ | - Go to the //tasks/// folder, and complete all the functions marked with //TODO:// in the //index.js// file | ||
+ | - In the //api/// folder, you have the necessary functions of a command line API client for the typicode API. Fill in the functions and make it work by calling the addPost, getPosts and deletePost functions from the browser's command line | ||
+ | - In the apiInterface/ folder, you will have to reuse the api/ files in order to make a Postman-like interface for the API. Add event listeners to the buttons and output the result from the API in the div in the HTML. | ||
+ | - In the imageGif/ folder, you have an array of image locations and an img object. Can you make a GIF out of them? | ||
+ | - Optional: In the notifyMe/ folder, you already have a setup for a notification request. Trigger a notification when pressing the button. | ||
- | * Go to the tasks/ folder, and complete all the functions marked with TODO: in the index.js file | + | <solution -hidden> |
+ | <code javascript> | ||
+ | let frame = document.querySelector("img"); | ||
+ | let c = 0; | ||
- | * In the api/ folder, you have the necessary functions of a command line API client for the typicode API. Fill in the functions and make it work by calling the addPost, getPosts and deletePost functions from the browser's command line | + | setInterval(() => { |
- | + | frame.src = images[c]; | |
- | * In the apiInterface/ folder, you will have to reuse the api/ files in order to make a Postman-like interface for the API. Add event listeners to the buttons and output the result from the API in the div in the HTML. | + | c == 5 ? c = 0 : c += 1; |
- | + | }, 100); | |
- | * In the notifyMe/ folder, you already have a setup for a notification request. Trigger a notification when pressing the button. | + | </code> |
- | * In the imageGif/ folder, you have an array of image locations and an img object. Can you make a GIF out of them ? | + | Task 2 solution: |
+ | {{:se:labs:se_lab2_task2.zip|task2}} | ||
+ | </solution> | ||
====== Feedback ====== | ====== Feedback ====== | ||
- | Please take a minute to fill in the **[[https://goo.gl/forms/VbXevv0IufQzRF1i2 | feedback form]]** for this lab. | + | Please take a minute to fill in the **[[https://forms.gle/PNZYNNZFrVChLjag8 | feedback form]]** for this lab. |
+ | /* **[[https://meet.google.com/sgd-hbwv-hhy | Google Meet]]** */ |