Javascript
Let
Javascript
if (true) {
let blockScope = "Hello"; console.log(blockScope); // Hello
}
console.log(blockScope); // Uncaught ReferenceError: blockScope is not
// definedConst
Javascript
if (true) {
const constVar = "Hello";
console.log(constVar); // Hello
const SITE_URL = "http://MyCMS.org";
console.log(SITE_URL); // http://MyCMS.org
constVar = "Hi";
console.log(constVar); // Uncaught TypeError: Assignment to constant
}typeof
Javascript
console.log(typeof 12); // numberopĂ©rateur dâĂ©galitĂ©
Javascript
1 === 1; // true
"1" === 1; // false
"1" == 1; // true
0 == false; // true
0 == null; // falseopérateur logique
- âą && : ET logique âą || : OU logique âą ! : NOT logique
condition
Javascript
let isAuthenticated = false;
if (isAuthenticated) {
console.log("Render the HomePage.");
console.log("You are authenticated.");
} else {
console.log("Render the Login Page."); // Render the Login Page.
console.log("You are not authenticated."); // You are not authenticated.
}object
Javascript
let vegetable = { name : "carrot", color: "orange" }; // show/access field name
const nameofvegetable = vegetable.name;
// Show object with all fields in litteral notation
console.log(JSON.stringify(vegetable));tables
Javascript
let vegetables = ["onion","garlic"];
vegetables.push("carrot"); // array vegetables now : ["onion", "garlic", "carrot"]
vegetables.pop("onion"); // array vegetables now : ["garlic", "carrot"]routeur express
Javascript
// index.js in routes directory
const express = require('express');
const router = express.Router();
// when i receive a request GET on /
// '/' is the root of the siteWeb -> lhttp://localhost:3000
router.get('/', (req, res) => {
const tableOfVegetables = ["tomato", "banana"];
res.render('index.hbs', { simpleStringVar : "handlebars", vegetablesList : tableOfVegeta
});
// when i receive a request GET on /brol // http://localhost:3000/brol
router.get('/brol', (req, res) => {
// send a response with render -> response in HBS
// res.render search a file named brol.hbs in views dir !
res.render('brol.hbs');
});
module.exports = router;hbs
hbs
{{#if isAuthenticated}}
<a class="nav-item nav-link" href="/">Home</a>
<a class="nav-item nav-link" href="/list">List users</a> <a class="nav-item nav-link" href="/logout">Logout</a> <a class="nav-item nav-link" href="/">{{user}}</a>
{{else}}
<a class="nav-item nav-link" href="/">Home</a>
<a class="nav-item nav-link" href="/register">Register</a> <a class="nav-item nav-link" href="/login">Login</a>
{{/if}}
<!-- if inversé : {{#unless isAuthenticated}} -->
<!-- if égualité {{#if (eq user.email "olivier.choquet@vinci.be") }} -->
<!-- {{#exists var}} ... {{else}} ... {{/exists}} -->
<section>
<p> Bonjour {{simpleStringVar}} </p>
<ul>
{{#each vegetablesList}} <!-- {{#each userList as |userItem|}} -->
<li> {{this}} <!-- {{userItem}} --> </li>
{{/each}}
</ul>
</section>boucles
Javascript
// for ... of pour les tableaux
let students = [{name:'Monica', age: 12}, {name:'Sandra', age: 13} ];
for (let stud of students) {
for(let key in stud) {
console.log("Key : " + key + " Value : " + stud[key]);
}
}
// for ... in pour les objets JSON
const student = { name: 'Monica', age: 12 }
for (let key in student ) {
// display the properties
console.log(key + " => " + student[key]);
}
// expected output:
// name => Monica
// age => 12
// for traditionnel si besoin d'un index
for (let index = 0; index < 5; index++) {
console.log(index); // 0 1 2 3 4
}
// while existe aussi
let vegetables = ["onion","garlic"]; let i = 0;
while(i<vegetables.length) {
console.log(vegetables[i]);
i++;
}fonction
Javascript
function welcomeMessage(message) {
return "Message : " + message;
}
const welcome = function (message) {
return "Message : " + message;
};
// Les fonctions fleÌcheÌes sont souvent anonymes et ont une syntaxe plus courte.
const welcome2 = (message) => {
return "Message : " + message;
};
let x = welcomeMessage;
let myMessage = x("Hi");
console.log(myMessage); // Message : Hirouteur
- res.render : renvoyer une page HTML rendue via un moteur de template (handlebars)
- res.send : renvoyer une reÌponse (une string, un objet JSON, ⊠)
- res.sendFile : renvoyer un fichier
- res.redirect : rediriger vers une autre route
Javascript
app.get('/', (req, res) => {
res.send("Bonjour");
});
app.get('/index.html', (req, res) => {
// __dirname return the root path of the project
res.sendFile(__dirname + "/index.html");
});
router.get('/', (req, res) => {
// send a response with render -> response in HBS
const table = ["january", "february", "march"];
res.render('index.hbs', { param1: "bonjour", param2: table });
});
router.get('/', (req, res) => {
// redirect to route /students
res.redirect('/students');
});| res.render | res.redirect |
|---|---|
| Renvoie une vue | Redirige vers une route |
| chemin vers le fichier hbs Ă partir du repertoir views | route Ă partir de la racine (localhost:3000) |
| ne commence pas par un / | commence par un / |
| on peut passer des parametres à la vue directement | le passage de param doit se faire via la route et est limité |
Ex : res.render("students/hbs",{studentList}); | Ex : res.redirect("/students?id=7"); |
MVC
- âmodelsâ == les donneÌes (persistance des donneÌes) : contiendront le code dâacceÌs aux donneÌes (donneÌes statiques ou SELECT, INSERT dans la base de donneÌes). 1ere lettre maj
- âviewsâ == affichage (HTML) : vues handlebars
- ControÌleur as âroutesâ == chef dâorchestre entre le modeÌle et la vue :- contiendront le code de traitement des requeÌtes. Ils utiliseront le modeÌle et renverront vers une vue.
User.js
const db = require('../models/db_conf.js');
module.exports.list = () => {
// use of prepared statement
const stmt = db.prepare("SELECT * FROM USERS");
// all() -> return alls rows like [ {name:'user1', pseudo:'oli'}, {name:'user2', pseudo: 'stef'}]
return stmt.all();
};
// function list
// Pay attention to modules.export to give access
// to list function outside (in controller for example)
module.exports.save = (name, pseudo) => {
// use of prepared statement with parameters
const stmt = db.prepare('INSERT INTO USERS (name, pseudo) VALUES (?, ?)');
const info = stmt.run(name, pseudo);
console.log("users model save" + info.changes);
};sessions
- secret : ce secret sera utiliseÌ pour chiffrer le cookie de session stockeÌ chez le client
- resave : forcer la sauvegarde de la session pour chaque nouvelle requeÌte
- saveUninitialized : forcer la sauvegarde des nouvelles sessions qui nâont pas encore eÌteÌ modifieÌes
Javascript
// creer/ recup la session
router.post('/login', (req, res, next) => {
console.log("LOGIN");
req.session.connected = true;
req.session.login = "olivier";
});
// detruire la session
router.post('/logout', (req, res, next) => {
console.log("LOGOUT");
req.session.destroy();
});hbs
<section>
<h2> Profil Utilisateur </h2>
<!-- use of session variable : req.session.login --> Login de l'utilisateur connecteÌ : {{session.login}}
</section>chiffrement
Javascript
const bcrypt = require('bcrypt');
...
if (bcrypt.compareSync(dataInClear, hash)) {
console.log("dataInClear == hash, OK c'est bon");
} else {
console.log ("dataInClear != hash, KO");
}context
- Pour acceÌder aÌ une variable du contexte de base aÌ lâinteÌrieur dâun #each, utilisez @root ou ../ devant le nom de votre variable
hbs
<section>
<p> {{title}} </p> <ul>
{{#each tableOfMeals}}
<li>
<!-- use of @root or ../ to access the root context -->
{{this}} {{#if @root.userVegan}} Une alternative aÌ la viande est le seitan {{/if}}
</li>
{{/each}}
</ul>
</section>validator
hbs
<form action="/adduser" method ="post">
<input type="text" name="username">
<input type="submit">
</form>Javascript
const validator = require('validator');
router.get('/users', function (req, res) {
// retrieve errors message via req.query
res.render('users/index.hbs', { errors : req.query.errors});
});
router.post('/adduser', function (req, res) {
// validate name of user -> betweeen 5 and 10 character if
(!validator.isEmail(req.body.username) {
// errors sent via query string
res.redirect('/users?errors=L\'email n\'est pas correct');
}
else {
...
}
});