\documentclass[10pt]{article}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage[french]{babel} 
\usepackage{geometry}
\usepackage{float}
\usepackage{graphicx}
\usepackage{babel}
\usepackage{subfigure}
\usepackage{epsfig}
\usepackage{fourier}
\usepackage{import}
\usepackage{marginnote}
\usepackage[small]{titlesec}
\usepackage{changes}
\usepackage{sidecap}
\usepackage{amssymb}
\usepackage{hyperref}
\usepackage{minted}
\usepackage{tcolorbox}
\usepackage{etoolbox}
\usepackage{mdframed}
\usepackage{enumitem}

\usepackage[
    type={CC},
    modifier={by-nc-sa},
    version={4.0},
]{doclicense}

\makeatletter
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% User specified LaTeX commands.
\geometry{verbose,a4paper,tmargin=1.3cm,bmargin=1.9cm,lmargin=2.5cm,rmargin=2.7cm}
\renewcommand{\thesection}{\Roman{section}}
\renewcommand{\thesubsection}{\arabic{subsection}.}
\renewcommand{\thesubsubsection}{\arabic{subsubsection}}
\newcommand*{\helplines}[1]{%
    \leavevmode
    \count@ = 0
    \loop
      \ifnum \count@ < #1
      {\mbox{}\hrulefill \linebreak}%
      \advance \count@ by 1
    \repeat
  }
\newcommand{\cb}{%
  $\square$%
}
\newcounter{compteurdoc}
\newcommand{\comptedoc}{%
\addtocounter{compteurdoc}{1}%
%  \refstepcounter{compteurdoc}%
 \thecompteurdoc
 }
\newcommand\Section[2]{\section[#1]{#1 \marginnote{\small #2 pts}[-\baselineskip]}}

\newcommand\Subsection[2]{\subsection[#1]{#1 \marginnote{\small #2 pts}[-\baselineskip]}}

\let\includegraphicsORI\includegraphics
  \newcommand\killedincludegraphics[2][]{Voir document électronique}
  \newcommand\killgraphics{%
    \let\includegraphics\killedincludegraphics
  }
  \newcommand\restoregraphics{%
    \let\includegraphics\includegraphicsORI
  } 
\newcommand\cestmoi{%

  \footnotesize{Auteur : Alain Bertrand. }
}
\newcommand\docmylicenseThis{%
  \vspace*{\fill}

  \setlength{\doclicense@hsize}{\textwidth-\doclicense@imagewidth-\doclicense@imagedistance}%
  \ifthenelse{\equal{\doclicense@imageposition}{left}}{%
    \begin{center}
      \begin{minipage}{\doclicense@imagewidth}
        \doclicenseImage%
      \end{minipage}
      \begin{minipage}{\doclicense@hsize}
        \ifthenelse{\isempty{\doclicense@hyphenation}}{}{%
          \@nameuse{\doclicense@hyphenation}%
        }%
	\cestmoi 
      \end{minipage}
    \end{center}
  }{%
  % \ifthenelse{\isnamedefined{iflandscape}}{%
  %   \iflandscape{%
  %     \setlength{\doclicense@hsize}{\doclicense@hsize-10em}%
  %   }{}%
  % }{}%
  % {%
    \begin{center}
      \begin{minipage}{\doclicense@hsize}
        \ifthenelse{\isempty{\doclicense@hyphenation}}{}{%
          \@nameuse{\doclicense@hyphenation}%
        }%
      \cestmoi \doclicenseLongText%
      \end{minipage}
      \hfill
      \begin{minipage}{\doclicense@imagewidth}
        \doclicenseImage%
      \end{minipage}
    \end{center}
  % }
  }
}

\newcommand{\origwiki}[1]{%
  \scriptsize{Origine : Wikipedia, auteur :  #1,  licence : CC BY 2.0}
}

\newcommand{\wikip}[1]{%
\scriptsize{Origine :#1 }
} 

\newcommand{\origwikib}[2]{%
  \scriptsize{Origine : Wikipedia, auteur :  #1,  licence : #2}
}
\newcommand{\origwikit}[3]{%
  \scriptsize{Auteur : #1, origine : \url{#2},  licence : #3}
}


\newcommand{\webref}[2]{%
  \scriptsize{Origine : \url{#1}, licence : #2}
}

\newcommand{\manref}[2]{% i
  \scriptsize{Source: {#1}, licence : #2}
}
\definecolor{bg}{rgb}{0.85,0.95,0.85}


%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% User specified LaTeX commands.
\date{}
\author{}

\makeatother
  

\begin{document}
\title{Introduction au Javascript}
\maketitle


Comme présenté en cours, la présence de programme(s) dans les pages web est une
condition nécessaire à leur interactivité. Ces programmes sont réalisés en
Javacript, un langage dont la syntaxe est inspirée de Java. Contrairement à ce
que vous avez déjà vu avec Python, Javascript est un langage \og orienté
objet\fg{}. Réaliser ce TP fera l'objet d'un bonus. 

\section{L'éternel premier pas}
Comme dans de nombreux tutoriels, votre première tâche sera de faire afficher
\og Bonjour le monde\fg{} par votre programme.
\begin{enumerate}
	\item Ouvrir le fichier \emph{patron.html} dans Notepad++.
	\item Insérer le petit bout de code suivant
	      \begin{minted}[bgcolor=bg]{html}
  <script>
    alert('Bonjour le monde');
  </script>
  \end{minted}

	      entre \texttt{<p>Avant le
		      script...</p>} et \texttt<p>...après le script.</p>{}
	\item Charger le fichier dans le navigateur.
	      Qu'observez-vous et comment l'interprétez vous ? \helplines{4}

\end{enumerate}
\section{Réaliser un convertisseur binaire -- décimal en Javascript}
\subsection{Préambule :}
Au niveau le plus élémentaire d'un ordinateur (les transistors qui sont dans les
microprocesseurs), les données sont représentées que de deux façons :
\begin{itemize}
  \item Soit le courant passe, et par convention on attribut la valeur 1 à ce
    transistor,
  \item soit il ne passe pas, et on attribut à ce transistor la valeur zéro.
\end{itemize}
Pour représenter des données, on utilise des jeux de transistors, dont la valeur
sera donc décrite par une suite de  0 et de 1 : c'est la représentation binaire.
Comme elle est peu pratique, on préfère la représenter en base 10 en utilisant
la technique de la figure \ref{fig_conversion}.
Ceux qui souhaiterais en savoir un peu plus peuvent consulter la vidéo
\url{https://www.youtube.com/watch?v=YpijcKyrdik}.
\begin{figure}[H] 
   \centering 
    \includegraphics[width = 7cm]{python} 
     \caption{Méthode pour convertir un nombre de 8 chiffres binaires vers le
       décimal
       \webref{https://www.w3resource.com/python-exercises/math/python-math-exercise-31.php}{Creative
	 Commons} }
      \label{fig_conversion} 
       \end{figure}
       \subsection{Problème posé}

       Vous allez créer une page web comportant du code Javascript pour obtenir
       un convertisseur binaire -- décimal similaire à celui de la figure
       \ref{fig_calc} : vous aurez une série de 8 cases à cocher, représentant
       chacune l'état de la puissance de 2 correspondant (\og bit\fg{}) et un
       champ numérique indiquant la valeur correspondant. Chaque cochage ou
       décochage d'une des cases devra mettre  à jour le champ numérique.
       \begin{figure}[H] 
	  \centering 
	  \includegraphics[width =10 cm]{aspect} 
	    \caption{Aspect à obtenir} 
	     \label{fig_calc} 
	      \end{figure}
	      \subsection{Mise en œuvre}

	      \begin{enumerate}
		\item Dans votre fichier \emph{patron.html}, supprimez le code
		  que vous aviez inséré ainsi que  \texttt{<p>Avant le
		      script...</p>} et \texttt<p>...après le script.</p>{}
 et remplacez-les par le fragment suivant :
\begin{minted}[bgcolor=bg]{html}

  <form>
    <input id="b0" type="checkbox" onChange="conversion()">
  </form>
  <script>function conversion() {
      var s = 0
      if (document.getElementById("b0").checked) { s = 1 }
      document.getElementById("valeur").innerHTML = s
    }
  </script>
  <p>Le nombre représenté en binaire ci-dessus est
    <code id="valeur">0</code>.
  </p>

\end{minted}
\item Charger dans le navigateur et interagir avec la page pour comprendre ce
  que fait le code.
\item En vous basant sur le code Javascript et html donné, généraliser la
  procédure pour obtenir les valeurs pour 8 bits.
\item Appeler l'enseignant quand vous avez terminé et faire valider votre bonus.
 \end{enumerate}
  \section{Si vous êtes vraiment très fort ou très motivé\ldots}

  En vous basant sur le code présenté, réalisez une calculatrice 4 opérations.
  Pour faciliter la conception, on supposera que l'utilisateur ne fait pas
  d'erreur de frappe, c'est à dire qu'il tape toujours :

  \texttt{ nombre 1 } +
  \texttt{opérateur} + \texttt{nombre 2} + \texttt{signe égal}.


  Vous pourrez vous aider de la référence Javascript
  \url{https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide}

	     
%\docmylicenseThis
 \vspace*{\fill} 
 \doclicenseImage
 \footnotesize{ Auteur : Alain Bertrand, sur une idée d'Alain Busser}
\end{document}
