guyotv/CoursInformatique
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Révision des langages HTML, CSS, Javascript et PHP

Browse Source
This commit is contained in:
Guyot 2023-01-02 22:38:03 +01:00
parent 0a96857e9f
commit f8c17842d0
11 changed files with 14349 additions and 13236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
OCInfoPres.aux
View File

@ -706,46 +706,52 @@
\@writefile{nav}{\headcommand {\slideentry {7}{3}{12}{299/299}{HTML}{0}}} \@writefile{nav}{\headcommand {\slideentry {7}{3}{12}{299/299}{HTML}{0}}}
\@writefile{nav}{\headcommand {\beamer@framepages {299}{299}}} \@writefile{nav}{\headcommand {\beamer@framepages {299}{299}}}
\HyPL@Entry{299<</P(191)>>} \HyPL@Entry{299<</P(191)>>}
\@writefile{toc}{\beamer@subsectionintoc {7}{4}{Animation javascript}{300}{0}{7}} \@writefile{nav}{\headcommand {\slideentry {7}{3}{13}{300/300}{HTML}{0}}}
\@writefile{nav}{\headcommand {\beamer@subsectionpages {288}{299}}}
\@writefile{nav}{\headcommand {\beamer@subsectionentry {0}{7}{4}{300}{Animation javascript}}}
\@writefile{nav}{\headcommand {\slideentry {7}{4}{1}{300/300}{Animation javascript}{0}}}
\@writefile{nav}{\headcommand {\beamer@framepages {300}{300}}} \@writefile{nav}{\headcommand {\beamer@framepages {300}{300}}}
\HyPL@Entry{300<</P(192)>>} \HyPL@Entry{300<</P(192)>>}
\@writefile{nav}{\headcommand {\slideentry {7}{4}{2}{301/301}{Animation javascript}{0}}} \@writefile{nav}{\headcommand {\slideentry {7}{3}{14}{301/301}{HTML}{0}}}
\@writefile{nav}{\headcommand {\beamer@framepages {301}{301}}} \@writefile{nav}{\headcommand {\beamer@framepages {301}{301}}}
\HyPL@Entry{301<</P(193)>>} \HyPL@Entry{301<</P(193)>>}
\@writefile{nav}{\headcommand {\slideentry {7}{4}{3}{302/302}{Animation javascript}{0}}} \@writefile{toc}{\beamer@subsectionintoc {7}{4}{Animation javascript}{302}{0}{7}}
\@writefile{nav}{\headcommand {\beamer@subsectionpages {288}{301}}}
\@writefile{nav}{\headcommand {\beamer@subsectionentry {0}{7}{4}{302}{Animation javascript}}}
\@writefile{nav}{\headcommand {\slideentry {7}{4}{1}{302/302}{Animation javascript}{0}}}
\@writefile{nav}{\headcommand {\beamer@framepages {302}{302}}} \@writefile{nav}{\headcommand {\beamer@framepages {302}{302}}}
\HyPL@Entry{302<</P(194)>>} \HyPL@Entry{302<</P(194)>>}
\@writefile{nav}{\headcommand {\slideentry {7}{4}{4}{303/303}{Animation javascript}{0}}} \@writefile{nav}{\headcommand {\slideentry {7}{4}{2}{303/303}{Animation javascript}{0}}}
\@writefile{nav}{\headcommand {\beamer@framepages {303}{303}}} \@writefile{nav}{\headcommand {\beamer@framepages {303}{303}}}
\HyPL@Entry{303<</P(195)>>} \HyPL@Entry{303<</P(195)>>}
\@writefile{nav}{\headcommand {\slideentry {7}{4}{5}{304/304}{Animation javascript}{0}}} \@writefile{nav}{\headcommand {\slideentry {7}{4}{3}{304/304}{Animation javascript}{0}}}
\@writefile{nav}{\headcommand {\beamer@framepages {304}{304}}} \@writefile{nav}{\headcommand {\beamer@framepages {304}{304}}}
\@writefile{nav}{\headcommand {\gdef \insertmainframenumber {195}}}
\HyPL@Entry{304<</P(196)>>} \HyPL@Entry{304<</P(196)>>}
\@writefile{nav}{\headcommand {\partentry {Annexe}{1}}} \@writefile{nav}{\headcommand {\slideentry {7}{4}{4}{305/305}{Animation javascript}{0}}}
\@writefile{nav}{\headcommand {\beamer@partpages {1}{304}}}
\@writefile{nav}{\headcommand {\beamer@sectionpages {271}{304}}}
\@writefile{nav}{\headcommand {\beamer@subsectionpages {300}{304}}}
\@writefile{nav}{\headcommand {\beamer@appendixpages {305}}}
\@writefile{nav}{\headcommand {\beamer@sectionpages {305}{304}}}
\@writefile{nav}{\headcommand {\beamer@subsectionpages {305}{304}}}
\@writefile{nav}{\headcommand {\sectionentry {8}{Références}{305}{Références}{1}}}
\newlabel{notes}{{196}{305}{Références}{Doc-Start}{}}
\@writefile{snm}{\beamer@slide {notes}{305}}
\@writefile{nav}{\headcommand {\beamer@sectionpages {305}{304}}}
\@writefile{nav}{\headcommand {\beamer@subsectionpages {305}{304}}}
\@writefile{nav}{\headcommand {\sectionentry {9}{Crédits photographiques}{305}{Crédits photographiques}{1}}}
\@writefile{nav}{\headcommand {\slideentry {9}{0}{0}{305/305}{}{1}}}
\@writefile{nav}{\headcommand {\beamer@framepages {305}{305}}} \@writefile{nav}{\headcommand {\beamer@framepages {305}{305}}}
\HyPL@Entry{305<</P(197)>>} \HyPL@Entry{305<</P(197)>>}
\@writefile{nav}{\headcommand {\slideentry {9}{0}{0}{305/306}{}{1}}} \@writefile{nav}{\headcommand {\slideentry {7}{4}{5}{306/306}{Animation javascript}{0}}}
\@writefile{nav}{\headcommand {\beamer@framepages {305}{306}}} \@writefile{nav}{\headcommand {\beamer@framepages {306}{306}}}
\@writefile{nav}{\headcommand {\beamer@partpages {305}{306}}} \@writefile{nav}{\headcommand {\gdef \insertmainframenumber {197}}}
\@writefile{nav}{\headcommand {\beamer@subsectionpages {305}{306}}} \HyPL@Entry{306<</P(198)>>}
\@writefile{nav}{\headcommand {\beamer@sectionpages {305}{306}}} \@writefile{nav}{\headcommand {\partentry {Annexe}{1}}}
\@writefile{nav}{\headcommand {\beamer@documentpages {306}}} \@writefile{nav}{\headcommand {\beamer@partpages {1}{306}}}
\@writefile{nav}{\headcommand {\gdef \inserttotalframenumber {197}}} \@writefile{nav}{\headcommand {\beamer@sectionpages {271}{306}}}
\gdef \@abspage@last{306} \@writefile{nav}{\headcommand {\beamer@subsectionpages {302}{306}}}
\@writefile{nav}{\headcommand {\beamer@appendixpages {307}}}
\@writefile{nav}{\headcommand {\beamer@sectionpages {307}{306}}}
\@writefile{nav}{\headcommand {\beamer@subsectionpages {307}{306}}}
\@writefile{nav}{\headcommand {\sectionentry {8}{Références}{307}{Références}{1}}}
\newlabel{notes}{{198}{307}{Références}{Doc-Start}{}}
\@writefile{snm}{\beamer@slide {notes}{307}}
\@writefile{nav}{\headcommand {\beamer@sectionpages {307}{306}}}
\@writefile{nav}{\headcommand {\beamer@subsectionpages {307}{306}}}
\@writefile{nav}{\headcommand {\sectionentry {9}{Crédits photographiques}{307}{Crédits photographiques}{1}}}
\@writefile{nav}{\headcommand {\slideentry {9}{0}{0}{307/307}{}{1}}}
\@writefile{nav}{\headcommand {\beamer@framepages {307}{307}}}
\HyPL@Entry{307<</P(199)>>}
\@writefile{nav}{\headcommand {\slideentry {9}{0}{0}{307/308}{}{1}}}
\@writefile{nav}{\headcommand {\beamer@framepages {307}{308}}}
\@writefile{nav}{\headcommand {\beamer@partpages {307}{308}}}
\@writefile{nav}{\headcommand {\beamer@subsectionpages {307}{308}}}
\@writefile{nav}{\headcommand {\beamer@sectionpages {307}{308}}}
\@writefile{nav}{\headcommand {\beamer@documentpages {308}}}
\@writefile{nav}{\headcommand {\gdef \inserttotalframenumber {199}}}
\gdef \@abspage@last{308}

BIN
OCInfoPres.dvi
View File

Binary file not shown.

49
OCInfoPres.log
View File

@ -1,4 +1,4 @@
This is pdfTeX, Version 3.14159265-2.6-1.40.21 (TeX Live 2020/Debian) (preloaded format=latex 2022.6.12) 28 SEP 2022 10:22 This is pdfTeX, Version 3.14159265-2.6-1.40.21 (TeX Live 2020/Debian) (preloaded format=latex 2022.6.12) 2 JAN 2023 22:30
entering extended mode entering extended mode
\write18 enabled. \write18 enabled.
%&-line parsing enabled. %&-line parsing enabled.
@ -2688,14 +2688,14 @@ File: ./Images//AdminGetSimple.eps Graphic file (type eps)
] [290 ] [290
] [291
] ]
Overfull \hbox (0.44365pt too wide) in paragraph at lines 3412--3412 Overfull \hbox (0.44365pt too wide) in paragraph at lines 3422--3422
[][] [][]
[] []
[291 [292
] [292
] [293 ] [293
@ -2717,10 +2717,14 @@ Overfull \hbox (0.44365pt too wide) in paragraph at lines 3412--3412
] [302 ] [302
] ] [303
[303
] [304 ]
[304
] [305
] [306
] (./OCInfoPres.ent ] (./OCInfoPres.ent
Overfull \hbox (6.08382pt too wide) in paragraph at lines 14--18 Overfull \hbox (6.08382pt too wide) in paragraph at lines 14--18
@ -2769,9 +2773,9 @@ Overfull \hbox (0.24661pt too wide) in paragraph at lines 56--61
[] []
) [305 ) [307
] [306 ] [308
] ]
@ -2785,16 +2789,25 @@ Overfull \hbox (0.24661pt too wide) in paragraph at lines 56--61
\openout11 = `OCInfoPres.snm'. \openout11 = `OCInfoPres.snm'.
(./OCInfoPres.aux) (./OCInfoPres.aux)
Package rerunfilecheck Info: File `OCInfoPres.out' has not changed.
(rerunfilecheck) Checksum: ACF46764D3DE1F70341DFECEAC5249C1;2480. LaTeX Warning: Label(s) may have changed. Rerun to get cross-references right.
Package rerunfilecheck Warning: File `OCInfoPres.out' has changed.
(rerunfilecheck) Rerun to get outlines right
(rerunfilecheck) or use package `bookmark'.
Package rerunfilecheck Info: Checksums for `OCInfoPres.out':
(rerunfilecheck) Before: 3B69D4E79004A5DB9E8FCD807FE64D2C;2480
(rerunfilecheck) After: 146D3C8933B174FC65AD04EA92F2754E;2480.
) )
Here is how much of TeX's memory you used: Here is how much of TeX's memory you used:
29592 strings out of 481063 29595 strings out of 481063
543295 string characters out of 5909860 543330 string characters out of 5909860
1358368 words of memory out of 5000000 1358426 words of memory out of 5000000
45786 multiletter control sequences out of 15000+600000 45789 multiletter control sequences out of 15000+600000
531285 words of font info for 128 fonts, out of 8000000 for 9000 534074 words of font info for 129 fonts, out of 8000000 for 9000
81 hyphenation exceptions out of 8191 81 hyphenation exceptions out of 8191
131i,19n,132p,645b,2610s stack positions out of 5000i,500n,10000p,200000b,80000s 131i,19n,132p,645b,2610s stack positions out of 5000i,500n,10000p,200000b,80000s
Output written on OCInfoPres.dvi (306 pages, 4906940 bytes). Output written on OCInfoPres.dvi (308 pages, 4928724 bytes).

58
OCInfoPres.nav
View File

@ -455,36 +455,40 @@
\headcommand {\beamer@framepages {298}{298}} \headcommand {\beamer@framepages {298}{298}}
\headcommand {\slideentry {7}{3}{12}{299/299}{HTML}{0}} \headcommand {\slideentry {7}{3}{12}{299/299}{HTML}{0}}
\headcommand {\beamer@framepages {299}{299}} \headcommand {\beamer@framepages {299}{299}}
\headcommand {\beamer@subsectionpages {288}{299}} \headcommand {\slideentry {7}{3}{13}{300/300}{HTML}{0}}
\headcommand {\beamer@subsectionentry {0}{7}{4}{300}{Animation javascript}}
\headcommand {\slideentry {7}{4}{1}{300/300}{Animation javascript}{0}}
\headcommand {\beamer@framepages {300}{300}} \headcommand {\beamer@framepages {300}{300}}
\headcommand {\slideentry {7}{4}{2}{301/301}{Animation javascript}{0}} \headcommand {\slideentry {7}{3}{14}{301/301}{HTML}{0}}
\headcommand {\beamer@framepages {301}{301}} \headcommand {\beamer@framepages {301}{301}}
\headcommand {\slideentry {7}{4}{3}{302/302}{Animation javascript}{0}} \headcommand {\beamer@subsectionpages {288}{301}}
\headcommand {\beamer@subsectionentry {0}{7}{4}{302}{Animation javascript}}
\headcommand {\slideentry {7}{4}{1}{302/302}{Animation javascript}{0}}
\headcommand {\beamer@framepages {302}{302}} \headcommand {\beamer@framepages {302}{302}}
\headcommand {\slideentry {7}{4}{4}{303/303}{Animation javascript}{0}} \headcommand {\slideentry {7}{4}{2}{303/303}{Animation javascript}{0}}
\headcommand {\beamer@framepages {303}{303}} \headcommand {\beamer@framepages {303}{303}}
\headcommand {\slideentry {7}{4}{5}{304/304}{Animation javascript}{0}} \headcommand {\slideentry {7}{4}{3}{304/304}{Animation javascript}{0}}
\headcommand {\beamer@framepages {304}{304}} \headcommand {\beamer@framepages {304}{304}}
\headcommand {\gdef \insertmainframenumber {195}} \headcommand {\slideentry {7}{4}{4}{305/305}{Animation javascript}{0}}
\headcommand {\partentry {Annexe}{1}}
\headcommand {\beamer@partpages {1}{304}}
\headcommand {\beamer@sectionpages {271}{304}}
\headcommand {\beamer@subsectionpages {300}{304}}
\headcommand {\beamer@appendixpages {305}}
\headcommand {\beamer@sectionpages {305}{304}}
\headcommand {\beamer@subsectionpages {305}{304}}
\headcommand {\sectionentry {8}{Références}{305}{Références}{1}}
\headcommand {\beamer@sectionpages {305}{304}}
\headcommand {\beamer@subsectionpages {305}{304}}
\headcommand {\sectionentry {9}{Crédits photographiques}{305}{Crédits photographiques}{1}}
\headcommand {\slideentry {9}{0}{0}{305/305}{}{1}}
\headcommand {\beamer@framepages {305}{305}} \headcommand {\beamer@framepages {305}{305}}
\headcommand {\slideentry {9}{0}{0}{305/306}{}{1}} \headcommand {\slideentry {7}{4}{5}{306/306}{Animation javascript}{0}}
\headcommand {\beamer@framepages {305}{306}} \headcommand {\beamer@framepages {306}{306}}
\headcommand {\beamer@partpages {305}{306}} \headcommand {\gdef \insertmainframenumber {197}}
\headcommand {\beamer@subsectionpages {305}{306}} \headcommand {\partentry {Annexe}{1}}
\headcommand {\beamer@sectionpages {305}{306}} \headcommand {\beamer@partpages {1}{306}}
\headcommand {\beamer@documentpages {306}} \headcommand {\beamer@sectionpages {271}{306}}
\headcommand {\gdef \inserttotalframenumber {197}} \headcommand {\beamer@subsectionpages {302}{306}}
\headcommand {\beamer@appendixpages {307}}
\headcommand {\beamer@sectionpages {307}{306}}
\headcommand {\beamer@subsectionpages {307}{306}}
\headcommand {\sectionentry {8}{Références}{307}{Références}{1}}
\headcommand {\beamer@sectionpages {307}{306}}
\headcommand {\beamer@subsectionpages {307}{306}}
\headcommand {\sectionentry {9}{Crédits photographiques}{307}{Crédits photographiques}{1}}
\headcommand {\slideentry {9}{0}{0}{307/307}{}{1}}
\headcommand {\beamer@framepages {307}{307}}
\headcommand {\slideentry {9}{0}{0}{307/308}{}{1}}
\headcommand {\beamer@framepages {307}{308}}
\headcommand {\beamer@partpages {307}{308}}
\headcommand {\beamer@subsectionpages {307}{308}}
\headcommand {\beamer@sectionpages {307}{308}}
\headcommand {\beamer@documentpages {308}}
\headcommand {\gdef \inserttotalframenumber {199}}

2
OCInfoPres.out
View File

@ -33,7 +33,7 @@
\BOOKMARK [3][]{Outline0.7.1.272}{Constituants des pages}{Outline0.7}% 33 \BOOKMARK [3][]{Outline0.7.1.272}{Constituants des pages}{Outline0.7}% 33
\BOOKMARK [3][]{Outline0.7.2.283}{Les CMS : Syst\350mes de Management de Contenu}{Outline0.7}% 34 \BOOKMARK [3][]{Outline0.7.2.283}{Les CMS : Syst\350mes de Management de Contenu}{Outline0.7}% 34
\BOOKMARK [3][]{Outline0.7.3.288}{HTML}{Outline0.7}% 35 \BOOKMARK [3][]{Outline0.7.3.288}{HTML}{Outline0.7}% 35
\BOOKMARK [3][]{Outline0.7.4.300}{Animation javascript}{Outline0.7}% 36 \BOOKMARK [3][]{Outline0.7.4.302}{Animation javascript}{Outline0.7}% 36
\BOOKMARK [1][]{Outline1}{Annexe}{}% 37 \BOOKMARK [1][]{Outline1}{Annexe}{}% 37
\BOOKMARK [2][]{Outline1.8}{R\351f\351rences}{Outline1}% 38 \BOOKMARK [2][]{Outline1.8}{R\351f\351rences}{Outline1}% 38
\BOOKMARK [2][]{Outline1.9}{Cr\351dits photographiques}{Outline1}% 39 \BOOKMARK [2][]{Outline1.9}{Cr\351dits photographiques}{Outline1}% 39

BIN
OCInfoPres.pdf
View File

Binary file not shown.

27348
OCInfoPres.ps
View File

File diff suppressed because it is too large Load Diff

2
OCInfoPres.snm
View File

@ -1,2 +1,2 @@
\beamer@slide {rvbtsv}{214} \beamer@slide {rvbtsv}{214}
\beamer@slide {notes}{305} \beamer@slide {notes}{307}

27
OCInfoPres.tex
View File

@ -3354,11 +3354,21 @@ Une zone d'administration
\subsection{HTML} \subsection{HTML}
\begin{frame}{Versions} \begin{frame}{Langages de programmation pour internet}
Il existe plusieurs versions de HTML qui ne sont pas compatibles avec tous les navigateurs. \begin{center}
\Huge{HTML, CSS,\\Javascript et PHP}
\end{center}
\end{frame}
\begin{frame}{HTML5}
\begin{center}
\huge{HTML5}
\end{center}
\medskip \medskip
En 2014, la norme \emph{HTML5} devrait être officialisée. C'est donc sur celle-ci qu'on va se baser. Elle est compatible avec tous les navigateurs récents dans la pluspart des cas. La création d'un site internet nécessite du contenu. Pour définir celui-ci, un langage, HTML pour Hyper Text Markup Language ou langage de balises hypertexte, est nécessaire. HTML est donc un langage de balisage du contenu, on dit aussi du fond, d'un site.
\smallskip
Aujourd'hui, la norme \emph{HTML5} est en vigueur. C'est donc sur celle-ci qu'on va se baser. Il s'agit d'une norme où les balises ont du sens, c'est-à-dire qu'elles signifient quelque chose, contrairement aux balises d'HTML4. On parlera de la sémantique d'HTML5.
\end{frame} \end{frame}
\begin{frame}{Structure de balisage} \begin{frame}{Structure de balisage}
@ -3506,6 +3516,17 @@ Exemples :
\end{columns} \end{columns}
\end{frame} \end{frame}
\begin{frame}{CSS3}
\begin{center}
\huge{CSS3}
\end{center}
\medskip
Les feuilles de style permettent de gérer la forme qu'on veut donner au contenu d'un site. Cette forme peut dépendre des appareils (smartphone, écrans, beamer, ...) utilisés. Pour la gérer au mieux, on utilise généralement une feuille de style par appareil.
\smallskip
Un langage, CSS pour Cascading Style Sheet ou feuilles de style en cascade, est nécessaire pour cela. Aujourd'hui, la norme \emph{CSS3} est en vigueur. C'est donc sur celle-ci qu'on va se baser.
\end{frame}
\begin{frame}[containsverbatim]{Intégration des feuilles de styles} \begin{frame}[containsverbatim]{Intégration des feuilles de styles}
Trois cas sont envisageables : Trois cas sont envisageables :
\begin{block}{Dans la balise.} \begin{block}{Dans la balise.}

27
OCInfoPres.tex.bak
View File

@ -3354,11 +3354,21 @@ Une zone d'administration
\subsection{HTML} \subsection{HTML}
\begin{frame}{Versions} \begin{frame}{Langages de programmation pour internet}
Il existe plusieurs versions de HTML qui ne sont pas compatibles avec tous les navigateurs. \begin{center}
\Huge{HTML, CSS,\\Javascript et PHP}
\end{center}
\end{frame}
\begin{frame}{HTML5}
\begin{center}
\huge{HTML5}
\end{center}
\medskip \medskip
En 2014, la norme \emph{HTML5} devrait être officialisée. C'est donc sur celle-ci qu'on va se baser. Elle est compatible avec tous les navigateurs récents dans la pluspart des cas. La création d'un site internet nécessite du contenu. Pour définir celui-ci, un langage, HTML pour Hyper Text Markup Language ou langage de balises hypertexte, est nécessaire. HTML est donc un langage de balisage du contenu, on dit aussi du fond, d'un site.
\smallskip
Aujourd'hui, la norme \emph{HTML5} est en vigueur. C'est donc sur celle-ci qu'on va se baser. Il s'agit d'une norme où les balises ont du sens, c'est-à-dire qu'elles signifient quelque chose, contrairement aux balises d'HTML4. On parlera de la sémantique d'HTML5.
\end{frame} \end{frame}
\begin{frame}{Structure de balisage} \begin{frame}{Structure de balisage}
@ -3506,6 +3516,17 @@ Exemples :
\end{columns} \end{columns}
\end{frame} \end{frame}
\begin{frame}{CSS3}
\begin{center}
\huge{CSS3}
\end{center}
\medskip
Les feuilles de style permettent de gérer la forme qu'on veut donner au contenu d'un site. Cette forme peut dépendre des appareils (smartphone, écrans, beamer, ...) utilisés. Pour la gérer au mieux, on utilise généralement une feuille de style par appareil.
\smallskip
Un langage, CSS pour Cascading Style Sheet ou feuilles de style en cascade, est nécessaire pour cela. Aujourd'hui, la norme \emph{CSS3} est en vigueur. C'est donc sur celle-ci qu'on va se baser.
\end{frame}
\begin{frame}[containsverbatim]{Intégration des feuilles de styles} \begin{frame}[containsverbatim]{Intégration des feuilles de styles}
Trois cas sont envisageables : Trois cas sont envisageables :
\begin{block}{Dans la balise.} \begin{block}{Dans la balise.}

2
OCInfoPres.toc
View File

@ -34,4 +34,4 @@
\beamer@subsectionintoc {7}{1}{Constituants des pages}{272}{0}{7} \beamer@subsectionintoc {7}{1}{Constituants des pages}{272}{0}{7}
\beamer@subsectionintoc {7}{2}{Les CMS : Systèmes de Management de Contenu}{283}{0}{7} \beamer@subsectionintoc {7}{2}{Les CMS : Systèmes de Management de Contenu}{283}{0}{7}
\beamer@subsectionintoc {7}{3}{HTML}{288}{0}{7} \beamer@subsectionintoc {7}{3}{HTML}{288}{0}{7}
\beamer@subsectionintoc {7}{4}{Animation javascript}{300}{0}{7} \beamer@subsectionintoc {7}{4}{Animation javascript}{302}{0}{7}