Show page

Differences

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

--- se:labs:02 [2019/10/08 12:44]
cosmin.dumitrache [Why is var so introverted ?]
+++ 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 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.
+==== TypeScript Basics ====
+''Types by Inference''
+TypeScript can often infer types based on the value assigned:
+<code javascript>
+let helloWorld = "Hello World"; // TypeScript infers this as a string
+</code>
+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.
+''Declaring Variables with Types''
+You can explicitly define types for variables, ensuring TypeScript catches type-related errors early:
+<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>
@@ Line 196: / Line 384: @@
 For today, you'll going to have to do the following:
-  - Download the {{:se:labs:task2.zip|zip file}} 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 notifyMe/ folder, you already have a setup for a notification request. Trigger a notification when pressing the button.
   - 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 220: / Line 408: @@
 ====== Feedback ======
-Please take a minute to fill in the **[[https://docs.google.com/forms/d/e/1FAIpQLSe4RKsezNzCRz_0hZwaD6k0_HagKgJFanirq7Kb6Ukptj-Svw/viewform | 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.1570527867.txt.gz · Last modified: 2019/10/08 12:44 by cosmin.dumitrache

Show page Old revisions

Media Manager Back to top