Le langage JavaScript

let a = 3.14;
a = 6.28; // OK

const b = 3.14;
b = 6.28; // Erreur!

const country = "France"; // or 'France'
console.log(`I live in ${country}`); // "I live in France"

function sayHello(name) {
  const message = `Hello, ${name}!`;
  return message;
}

console.log(sayHello("Richard")); // "Hello, Richard!"

const hello = function (name) {
  const message = `Hello, ${name}!`;
  return message;
};

console.log(hello("Richard")); // "Hello, Richard!"

const hello = (name) => {
  const message = `Hello, ${name}!`;
  return message;
};

// Syntaxe alternative encore plus concise
// const hello = name => `Hello, ${name}!`;

console.log(hello("Richard")); // "Hello, Richard!"

const movies = ["The Wolf of Wall Street", "Zootopia", "Babysitting"];
console.log(movies.length); // 3

for (let i = 0; i < movies.length; i++) {
  // Use movies[i] to access each array element one by one
}

movies.forEach((movie) => {
  // Use movie to access each array element one by one
});

for (const movie of movies) {
  // Use movie to access each array element one by one
}

// Création d'un objet litéral
const pen = {
  type: "ballpoint",
  color: "blue",
  brand: "Bic",
};

// Modifcation de la valeur d'une propriété
pen.color = "red";

console.log(pen.type); // "ballpoint"
console.log(pen.color); // "red"
console.log(pen.brand); // "Bic"

const firstName = "Baptiste";
const lastName = "Pesquet";
const twitterHandle = "@bpesquet";

const teacher = { firstName, lastName, twitterHandle };

console.log(teacher.firstName); // "Baptiste"
console.log(teacher.lastName); // "Pesquet"
console.log(teacher.twitterHandle); // "@bpesquet"

const pen = {
  type: "ballpoint",
  color: "blue",
  brand: "Bic",
};

// Accès à 2 des propriétés de l'objet
const { color, brand } = pen;

console.log(color); // "blue"
console.log(brand); // "Bic"

const primaryColors = ["red", "green", "blue"];

const [red, green, blue] = primaryColors;

console.log(red); // "red"
console.log(green); // "red"
console.log(blue); // "blue"

const chaine = "foo bar";
console.log(chaine); // "foo bar"
console.log([...chaine]); // ["f", "o", "o", " ", "b", "a", "r"]

const numbers = ["one", "two", "three", "four"];

const [one, two, ...rest] = numbers;

console.log(one); // "one"
console.log(two); // "two"
console.log(rest); // ["three", "four"]

const aurora = {
  name: "Aurora",
  health: 150,
  strength: 25,

  // Renvoie la description du personnage
  describe() {
    return `${this.name} has ${this.health} health points
      and ${this.strength} as strength`;
  },
};

class Character {
  constructor(name, health, strength) {
    this.name = name;
    this.health = health;
    this.strength = strength;
  }
  describe() {
    return `${this.name} has ${this.health} health points
      and ${this.strength} as strength`;
  }
}

const aurora = new Character("Aurora", 150, 25);
console.log(aurora.describe());

// Importe l'élément exporté par défaut par le module
import React from "react-native";

// Importe d'autres éléments exportés grâce à leur nom
import { View, Text, Image } from "react-native";

// Importe à la fois l'élément par défaut et d'autres éléments
import React, { View, Text, Image } from "react-native";

function resolveAfter2Seconds() {
  return new Promise((resolve) => {
    // Wait for 2 seconds before resolving promise
    setTimeout(() => {
      resolve("Success!");
    }, 2000);
  });
}

// Doesn't work: result is not yet available!
console.log(resolveAfter2Seconds());

// Wait for the result to be available, then output it
resolveAfter2Seconds().then((result) => {
  console.log(result); // "Success!"
});

// Wait for the result to be available, then output it
async function asyncCall() {
  const result = await resolveAfter2Seconds();
  console.log(result); // "Success!"
}

asyncCall();

npm init # Create a minimal package.json file

# Shorter version: npm i {package name}
npm install {package name} # Install {package name} locally
npm install -g {package name} # Install {package name} globally
npm install # Install all packages listed in package.json

npm update    # Update local packages to latest version
npm update -g # Update global packages to latest version

npm list    # List locally installed packages
npm list -g # List globally installed packages

# Execute a command from a package
npx {command} {command-arg}...

{
  "name": "helloreactnative",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~47.0.9",
    "expo-status-bar": "~1.4.2",
    "react": "18.1.0",
    "react-native": "0.70.5"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

{
  "root": true,
  "env": {
    "node": true,
    "es2016": true,
    "browser": true
  },
  "rules": {
    "no-console": 0,
    "eqeqeq": "warn",
    "no-cond-assign": 0,
    "no-unused-vars": 1,
    "no-extra-semi": "warn",
    "semi": "warn"
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true
    }
  }
}

# Install TypeScript globally
npm i -g typescript

# The TS compiler produces a pure JS version of the TS file
tsc my_typescript_file.ts

// This function is meant to receive an input of type string
function hello(person: string) {
  return "Hello, " + person;
}

const user = "Jane Doe";
// Uncomment to see TS error checking in action
//const user = [0, 1, 2];

console.log(hello(user)); // "Hello, Jane Doe"

// Describes objects that have a firstName and lastName field
interface Person {
  firstName: string;
  lastName: string;
}

function hello(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}

// ... (see next slides)

// This object is structurally compatible with the Person interface
const user = { firstName: "Jane", lastName: "Doe" };

console.log(hello(user)); // "Hello, Jane Doe"

class Student {
  fullName: string;

  // The public argument implicitly creates properties
  constructor(
    public firstName: string,
    public middleInitial: string,
    public lastName: string
  ) {
    this.fullName = firstName + " " + middleInitial + " " + lastName;
  }
}

const user = new Student("Jane", "M.", "Doe");

console.log(hello(user)); // "Hello, Jane Doe"