Javascript : une appli de calcul de moyenne

cm 2020-04-30 ISN javascript calculateur de moyenne

Whaouh ! Le résultat de notre séance de deux heures avec Léa puis Zoé au partage d’écran était top. On peut :

  • le tester en cliquant ici.
  • Afficher le code html avec un « Ctrl – U »,
  • voir le code javascript en suivant le lien à la fin de la balise body du code source.

Reste à faire :

  • affecter la spécialité, et les changements dans le menu déroulant,
  • sauvegarder les données d’un utilisateur dans le localStorage…

Projets pour le bac en ISN

Les discussions se font là :

Projets validés pour 2020 en ISN

  • « Calculateur de moyennes » – html – css – js – Léa et Zoé P.
  • « Aide aux devoirs » – html – css – js – Sarah et Zoé S.
  • « Mario Maker » – python – pygame – Justine, Alex et Axel
  • « Casse-briques » – python – pygame – Corentin « BdB » et Valentin
  • « Méga Tanks 2D » – python – pygame – Elias, Gaëtan et Noé
  • « Photoshop Lite » – python – pygame – Romain et Tom

@Monsef, si tu nous lis, contacte moi !

 


Rappel :

  • Il faut être par deux ou par trois,
  • il fallait faire valider le sujet par votre enseignant (moi),
  • il fallait envoyer votre ébauche avant jeudi 26 mars avec :
    • la composition du groupe,
    • un descriptif sommaire,
    • une découpage des tâches,
    • le langage envisagé (python ? pygame ? html/css/php/sql ?),
    • comment vous comptez stocker l’information (choix des variables).

Vous pouvez répondre via les commentaires de cette page pour vous inscrire par groupes.

Discussions sur javascript dans des pages web

Pour commencer, lire :

Commencer ce cours :

Premiers tests des 3-4 avril :

Les codes de la session discord du 9 avril :

Voir les commentaires pour plein d’autres trucs :

Le cours du 30 avril avec son calculateur de moyenne :

Correction des exercices – UTF8

Question 1 :

  • Coder en UTF8 (binaire) le é codé 233.
    • 233 donne  11101001
      • Notes :
        • On peut l’obtenir avec 128 + 64 + 32 + 8 + 1,
        • ou par divisions successives par 2 :
          • 233 = 2 \times 116 + 1
          • 116 = 2 \times 58 + 0
          • 58 = 2 \times 29 + 0
          • 29 = 2 \times 14 + 1
          • 14 = 2 \times 7 + 0
          • 7 = 2 \times 3 + 1
          • 3 = 2 \times 1 + 1
          • 1 = 2 \times \boxed{0} + 1
          • On a zéro au quotient on s’arrête et on prend les restes successifs 1, 0, 0, 1, 0, 1, 1, 1 dans l’ordre inverse 😉
        • ou en python :
          >>> ord('é')
          233
          >>> bin(ord('é'))
          '0b11101001'
          >>> bin(233)
          '0b11101001'
          >>> hex(233) # au passage
          '0xe9'
          >>> bin(233) # reour au sujet
          '0b11101001'
          >>> bin(ord('é'))
          '0b11101001'
          >>> bin(ord('é'))[2:] # avec ça on a toujours le code
          '11101001'
    • Il faut les caser dans ces 2 octets 110xxxxx 10xxxxxx ,
    • donc 11000011 10101001.

Question 2 :

  • Combien de caractères différents peut on coder en UTF-8 ?

Alors là, j’ai souvent dit des âneries…
La bonne réponse est toute bête :
cm 2020-01-13 NSI utf8

  • 1 octet 0xxxxxxx , de l’ASCII, 7 bits avec deux possibilités, zéro ou un …
    \Rightarrow 2^{7} possibilités
  • 2 octets 110xxxxx 10xxxxxx , mais seulement 5 + 6 = 11 bits disponibles … \Rightarrow 2^{11} possibilités ?
    Non, car on ne mettra pas de code en dessous de huit bits !
    \Rightarrow 2^{11} - 2^{7} possibilités !
  • 3 octets 1110xxxx 10xxxxxx 10xxxxxx , mais seulement 4 + 6 + 6 = 16 bits disponibles … \Rightarrow 2^{16} possibilités ?
    Non plus, car on ne mettra pas de code en dessous de huit bits !
    \Rightarrow 2^{16} - 2^{11} possibilités !
  • 4 octets 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx , mais seulement 3 + 6 + 6 + 6 = 21 bits disponibles … \Rightarrow 2^{21} possibilités ?
    Vous avez compris
    \Rightarrow 2^{21} - 2^{16} possibilités !

Au final, un total de \left(2^{21} - 2^{16}\right) + \left(2^{16} - 2^{11}\right) + \left(2^{11} - 2^{7}\right) + 2^7.
Bref, c’est tout bête, 21 bits au max en UTF-8 et \boxed{2^{21}} possibilités !

En vrai… « Le standard Unicode décrit comment les caractères sont représentés par les points de code. Une valeur de point de code est un nombre entier compris entre 0 et 0x10FFFF (environ 1,1 million de valeurs, avec environ 110 000 valeurs attribuées à ce jour). » comme le dit la doc de python

cm 2020-04-02 ISN notes de Léa 1 utf8 et codes

Question 3 :

On a la séquence de huit octets suivante :

C3 A9 6C C3 A8 76 65 73

où chaque octet est représenté par deux chiffres hexadécimaux.

cm 2020-04-02 ISN notes de Léa 2 utf8 et codes

  • C’est en UTF-8, décoder la séquence.
    • En binaire,
      • le C donne 12 donc 1100,
      • le 3 donne… 3 donc 0011,
      • le A donne 10 donc 1010,
      • le 9 donne … 9 donc 1001,
      • etc
    • Donc les octets donnent :
      • C3 A9 donne 11000011 10101001 soit un code de 11101001 donc 233 donc é,
      • 6C donne 01101100 soit 64 + 32 + 8 + 4 = 108 donc l,
      • C3 A8 donne 11000011 10101000 soit un code de 11101000 donc 232 donc è,
      • 76 donne 01110110 soit 64 + 32 + 16 + 4 + 2 = 118 donc v,
      • 65 donne 01100101 soit 64 + 32 + 4 + 1 = 101 donc e,
      • 73 donne 01110011 soit 64 + 32 + 16 + 2 + 1 = 115 donc s.
    • La séquence donne la chaîne « élèves » !
  • N.B. : si c’était pas en UTF8 mais en latin-1, une norme en voie de disparition, ça afficherait … « élèves » ! On comprend mieux certains bugs d’affichage.

Maintenant que tout ceci est plus clair, plongeons-nous dans le TP « Afficheur utf-8 » !

TP pygame – Rebondir avec Mario

Première prise en main

  1. Comprendre ce code.
  2. Le modifier pour que ça « rebondisse » sur tous les murs.
import pygame
from pygame.locals import *
pygame.init()

fenetre=pygame.display.set_mode((640, 480))
pygame.display.set_caption("Une balle ?")

clock = pygame.time.Clock()

continuer=True

# un rectangle que nous déplacerons ...
hitbox = pygame.Rect(80, 120, 40, 40)
# ... à l'aide de ce vecteur
vecteur = [10, 10]

while continuer :
    # déplcement du rectangle
    hitbox.move_ip(vecteur)

    # collision avec un mur ?
    if hitbox.right > 640:
        vecteur[0] *= -1
    if hitbox.bottom > 480:
        vecteur[1] *= -1

    # le fond
    fenetre.fill((0, 160, 160))

    # dessiner le cercle
    x, y = hitbox.centerx, hitbox.centery
    pygame.draw.circle(fenetre, (255, 255, 255), (x, y), 20, 1)

    #mettre à jour l'affichage
    pygame.display.flip()    

    #30 images par seconde
    clock.tick(30)

    #gestion des événements
    for event in pygame.event.get():

        if event.type==QUIT: #la croix en haut à gauche
            continuer=False

        elif event.type==MOUSEBUTTONUP : # clic de souris
            hitbox.centerx, hitbox.centery = event.pos

pygame.quit()

On ramène Mario

mario_left

  1. Placer Mario sur la fenêtre,
  2. créer un rectangle « virtuel » ou « hitbox » de la taille de Mario, et placer Mario dedans,
  3. déplacer ce rectangle au clavier,
  4. faire que en sorte que la balle « rebondisse » sur Mario.

Notes de Léa (merci) :

cm 2020-04-02 ISN notes de Léa 0 TP Mario

Le code proposé en cours :

import pygame
from pygame.locals import *
pygame.init()
 
fenetre=pygame.display.set_mode((640, 480))
pygame.display.set_caption("Une balle ?")
 
clock = pygame.time.Clock()
 
continuer=True
 
# un rectangle que nous déplacerons ...
hitbox = pygame.Rect(80, 120, 40, 40)
# ... à l'aide de ce vecteur
vecteur = [10, 10]

imageG = pygame.image.load("mario_left.png").convert_alpha()
imageD = pygame.transform.flip(imageG, True, False)
joueurRect = imageG.get_rect() # rectangle de même taille que l'image
joueurRect.centerx = 400
joueurRect.centery = 300
position = "gauche"

while continuer :
    # déplcement du rectangle
    hitbox.move_ip(vecteur)
 
    # collision avec un mur ?
    if hitbox.right > 640 or hitbox.left < 0:
        vecteur[0] *= -1
    if hitbox.bottom > 480 or hitbox.top < 0:
        vecteur[1] *= -1

    if joueurRect.right < 0:
        joueurRect.left = 640
    elif joueurRect.left > 640:
        joueurRect.right = 0
    if joueurRect.bottom < 0:
        joueurRect.top = 480
    elif joueurRect.top > 480:
        joueurRect.bottom = 0
    
    if joueurRect.colliderect(hitbox):
        vecteur[0] *= -1
        vecteur[1] *= -1
 
    # le fond
    fenetre.fill((0, 160, 160))

    if position == "gauche":
        fenetre.blit(imageG, joueurRect)
    else :
        fenetre.blit(imageD, joueurRect)
 
    # dessiner le cercle
    x, y = hitbox.centerx, hitbox.centery
    pygame.draw.circle(fenetre, (255, 255, 255), (x, y), 20, 1)
 
    #mettre à jour l'affichage
    pygame.display.flip()    
 
    #25 images par seconde
    clock.tick(25)
 
    #gestion des événements non clavier
    for event in pygame.event.get():
 
        if event.type==QUIT: #la croix en haut à gauche
            continuer=False
 
        elif event.type==MOUSEBUTTONUP : # clic de souris
            hitbox.centerx, hitbox.centery = event.pos

    # touches pressées dans une liste
    tkey = pygame.key.get_pressed()
    
    if tkey[K_UP]:
        joueurRect.move_ip(0, -5)
    if tkey[K_DOWN]:
        joueurRect.move_ip(0, 5)
    if tkey[K_LEFT]:
        joueurRect.move_ip(-5, 0)
        position = "gauche"
    if tkey[K_RIGHT]:
        joueurRect.move_ip(5, 0)
        position = "droite"
    if tkey[K_ESCAPE]:
        continuer = False
 
pygame.quit()