Show page

Differences

This shows you the differences between two versions of the page.

--- se:labs:02 [2018/10/25 21:25]
emilian.radoi [Feedback]
+++ se:labs:02 [2025/04/29 00:47] (current)
emilian.radoi [Lab 02 - Javascript]
@@ Line 1: / Line 1: @@
-====== Lab 02 - Javascript ======
+====== Lab 02 - JavaScript ======
 ====== ✨ Intro ======
-{{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!]]
@@ Line 55: / Line 57: @@
 <code javascript>
 var x = 5
-var x
+var x = undefined
 console.log(x) // Prints 'undefined'
 </code>
@@ Line 67: / Line 69: @@
   * ''%%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:
 <code javascript>
-let x = 'hello'
+let x = 'hello' * 3
-x.toString()
+console.log(x) // NaN
-console.log(x) //NaN
 </code>
   * ''%%null%%'' - returned from some functions when no response can be given.
+<code javascript>
+let x = 'hello'.match('bye')
+console.log(x) // null
+</code>
 ====== Functions ======
@@ Line 136: / Line 149: @@
 </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 ======
@@ Line 189: / Line 202: @@
 div.addEventListener('click', () => alert('Hello!))
 </code>
+====== TypeScript ======
+''TypeScript'' is a typed superset of JavaScript that compiles to plain JavaScript, offering improved safety and development tooling. It helps you catch errors early by adding static types to your variables, functions, and objects.
-====== Tasks ======
+==== TypeScript Basics ====
-For today, you'll going to have to do the following:
+''Types by Inference''
-  * Download the {{:se:labs:task2.zip|zip file}} containing the tasks.
+TypeScript can often infer types based on the value assigned:
-  * Go to the //tasks/// folder, and complete all the functions marked with //TODO:// in the //index.js// file
+<code javascript>
+let helloWorld = "Hello World"; // TypeScript infers this as a string
+</code>
-  * 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
+This helps you work with a type system without explicitly adding types to every variable. TypeScript knows `helloWorld` is a string here because of its value.
-  * 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.
+''Declaring Variables with Types''
-  * In the notifyMe/ folder, you already have a setup for a notification request. Trigger a notification when pressing the button.
+You can explicitly define types for variables, ensuring TypeScript catches type-related errors early:
-  * In the imageGif/ folder, you have an array of image locations and an img object. Can you make a GIF out of them?
+<code javascript>
+let message: string = 'Hello, TypeScript!';
+const pi: number = 3.14;
+</code>
+''Function Typing''
+Define types for function parameters and return values:
+<code javascript >
+function add(a: number, b: number): number {
+  return a + b;
+}
+</code>
+''Optional Parameters and Default Values''
+<code javascript >
+function greet(name: string, greeting: string = 'Hello'): string {
+  return `${greeting}, ${name}`;
+}
+</code>
+''Interfaces''
+TypeScript uses ''interfaces'' to define the shape of objects:
+<code javascript>
+interface User {
+  name: string;
+  id: number;
+}
+const user: User = { name: 'Hayes', id: 0 };
+</code>
+You can also use interfaces with classes:
+<code javascript>
+class UserAccount {
+  name: string;
+  id: number;
+  constructor(name: string, id: number) {
+    this.name = name;
+    this.id = id;
+  }
+}
+const user: User = new UserAccount('Murphy', 1);
+</code>
+----
+==== Advanced Features ====
+''Composing Types''
+With TypeScript, you can create complex types by combining simpler ones. Two common patterns for composing types are ''Unions'' and ''Generics''.
+''Union Types''
+Declare that a type can be one of multiple types:
+<code javascript>
+type WindowStates = "open" | "closed" | "minimized";
+type LockStates = "locked" | "unlocked";
+</code>
+You can also use unions in functions to handle different types:
+<code javascript>
+function getLength(obj: string | string[]): number {
+  return obj.length;
+}
+</code>
+''Generics''
+Generics allow you to create reusable components that work with various types:
+<code javascript>
+type StringArray = Array<string>;
+type NumberArray = Array<number>;
+interface Backpack<Type> {
+  add: (obj: Type) => void;
+  get: () => Type;
+}
+declare const backpack: Backpack<string>;
+const object = backpack.get();
+backpack.add(23); // Error: 'number' not assignable to 'string'
+</code>
+''Enums''
+TypeScript supports enums, which define named constant values:
+<code javascript>
+enum Color {
+  Red,
+  Green,
+  Blue
+}
+let color: Color = Color.Green;
+</code>
+''Type Assertions''
+Sometimes, you may need to manually specify the type:
+<code javascript>
+let someValue: any = 'string';
+let strLength: number = (someValue as string).length;
+</code>
+----
+==== Structural Type System ====
+TypeScript uses a ''structural type system'', meaning types are defined by their shape. If two objects share the same shape, they are considered to have the same type.
+<code javascript>
+interface Point {
+  x: number;
+  y: number;
+}
+function logPoint(p: Point) {
+  console.log(`${p.x}, ${p.y}`);
+}
+const point = { x: 12, y: 26 };
+logPoint(point); // logs "12, 26"
+</code>
+The `point` variable is not explicitly declared as a `Point`, but TypeScript allows it since the shape matches.
+Classes and objects also conform to shapes:
+<code javascript>
+class VirtualPoint {
+  x: number;
+  y: number;
+  constructor(x: number, y: number) {
+    this.x = x;
+    this.y = y;
+  }
+}
+const newVPoint = new VirtualPoint(13, 56);
+logPoint(newVPoint); // logs "13, 56"
+</code>
+====== Tasks ======
+For today, you'll going to have to do the following:
+  - 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.
 <solution -hidden>
@@ Line 218: / Line 401: @@
   }, 100);
 </code>
+Task 2 solution:
+{{:se:labs:se_lab2_task2.zip|task2}}
 </solution>
 ====== Feedback ======
-Please take a minute to fill in the **[[https://goo.gl/forms/VjJMUjtbmDbICFea2 | 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]]** */

General Information

Lectures

Labs

Resources

Assignment

Project

se/labs/02.1540491943.txt.gz · Last modified: 2018/10/25 21:25 by emilian.radoi

Show page Old revisions

Media Manager Back to top