Vous êtes sur la page 1sur 11

MMO1DVELOPPEMENTJOUR1

Vendredi22Janvier2016CoursJavascriptF
rdricLOSSIGNOL

Cequilfautretenir
Introduction
QuestcequeJavascript

SilHTMLestunlangagede
description,

Javascriptluiestunlangagede
programmation
.

Ilestlatroisimebriqueessentielleauxpageswebctclient.HTML/CSSetJSsont
aujourdhuimajoritairementutilisssurlespagesweb.Silestunlangageconnupourtre
ctclient(sexcutantsurlenavigateur),ilestaussideplusenplusutilisctserveur.

Javascriptvouspermettralafoisdeconstruiredesapplicationsmaisaussidajouterune
couched
interactivit
etde
dynamisme
vospagesweb.

SOMMAIRE

1. CommentchargerJavascriptdansvotrepageWeb

2. Lesvariablesetlesconstantes

3. Lestableaux

4. Laconcatnation

5. Lestypesdedonnesetlesconversions

6. laclassDateenJavascript

7. Lesoutilsdudveloppeur/liensutiles
DveloppementJavascript|Promo603WAcademy|FrdricLOSSIGNOL

1CommentchargerJavascriptdansvotrepageweb
Ilya2faonsdinjecterduJavascriptdansunepageHTML:

Directemententre2balises<script>
<!DOCTYPEhtml>
<htmllang="fr">
<head>
<metacharset="utf8">
<title>JavaScriptJour1</title>
</head>
<body>
<h1>HelloWorld!</h1>
<script>

alert('EtsionapprenaitleJS?')
</script>
</body>
</html>

OuenchargeantunfichierjavascriptexterneviaunerequteHTTP
<!DOCTYPEhtml>
<htmllang="fr">
<head>
<metacharset="utf8">
<title>JavaScriptJour1</title>
</head>
<body>
<h1>HelloJS!</h1>
<!Ajoutd'unattributHTMLsrcpourchargerunfichierJSexterne>
<script

src
="fichierjavascript.js"></script>
</body>
</html>

Aretenir:
LamthodedinsertiondunfichierJavascriptexternepermetdenepasmlangernotre
codeJSavecleHTML,etdeconserverunestructurecompartimenteentrevosfichiers
HTML/CSS/JS.

OnpeutinsrerlefichierJavascriptentrelesbalises<head>et</head>delapage,mais
onlinsreleplussouventavantlabalisedefermeture</body>(lafindudocument
HTML)pourdesraisonsdeperformances.

DveloppementJavascript|Promo603WAcademy|FrdricLOSSIGNOL

2LesvariablesetlesConstantes
Unevariableestunlmentnommquiprendunevaleurdetypechanedecaractre
(string)ounombre(Integer,Float,)ouboolen(vraioufaux).Lavariableestrutilisable
etsavaleurpeuttremodifielorsdelexcutiondenotrecodeJavascript.

2.1
Pourquoiutiliserdesvariables?
Pourstockerdesdonnesrutilisablesdansvotrecode.

Exemple1
:pourunepetiteapplicationquicalculeraetafficheralemontantTTC,nous
allonsavoirbesoindesvariablesmontantHT,tauxTVA,montantTVAetmontantTTC.

Exemple2
:silutilisateurenvoieunmessageviaunformulairedecontact,nousaurons
besoindesvariablesnom,emailetmessageafindefairepasserleurvaleurrespectivedans
lemailenvoyer.

2.2
Commentutiliserlesvariables?
Pourutiliserlesvariablesdansvotrecode,ilsuffitdelesdclarercommeexistantesenles
nommantvousmmeaprslemotcl
var

var

monPrenom//
OndclarelavariablemonPrenom

Votrevariableexisteetestalorsaccessibledansvotrecodejavascriptenlanommantde
nouveauetvouspouvezluiassignerunevaleur.(icilachanedecaractre
Frdric)
.

monPrenom
=Frdric

//onditiciquonassignelavaleurFredericlavariablemonPrenom

Conseilbonnepratique
:nommervosvariablesdefaondescriptive,aidela
comprhensiondevotrecode.Vousvousyretrouverezbienplusfacilementquand
vousreviendrezdansvotreproprecodecarellesaurontunsenspourleshumains
quevoustes.

DveloppementJavascript|Promo603WAcademy|FrdricLOSSIGNOL

2.3
Lesrglesdenommageetlesconventionsdenommagedesvariables

2.3.1 Lesrgles
unnomdevariable
doit
commencerparunelettreouununderscore(_).Lesautres
caractresnepeuventpascontenirdesignesreprsentantsunoprateurmathmatique
(,+,/,*,).Exemple:

var
monPrenom
//estcorrect
var
1Prenom

//estunmauvaisnommage(pasdechiffredanslepremiercaractre)
var
monprenom
//estunmauvaisnommage(causedusigne)
var
var
//estunmauvaisnommage(carvarunnomrserv)

Info
:Attentionaussi,leJavascriptestsensiblelacasse.Parexemple:

var
monPrenom
var
MONPRENOM

sontbien2variablesdiffrentes.Leserreursduesunemauvaisecrituredesvariables
sontcourantes,surtoutlorsquelondbute.Les
conventionsdenommage
permettent
dvitercetypederreurdansnotrecode.

2.3.2 Lecasdesnomsdevariablesenplusieursmots
Lorsquevousavezbesoindenommerdesvariablesplusieursmots,larglesimplepour
unemeilleurecomprhension:Lenomdevotrevariabledevientdeplusenplusprcisde
droitegauche,danslesensdelalecture.

//Exempleiciennommantplusieursvariablesquisontlescaractristiquesdunutilisateur.
//Dclarationdesvariables

var
userFirstname
var
userLastname
var
userEmail

//Affectationdevaleurschacunedesvariables

userFirstname=Mikael
userLastname=Jordan
userEmail=m.jordan@nba.com

DveloppementJavascript|Promo603WAcademy|FrdricLOSSIGNOL

Lesrglesdenommageetlesconventionsdenommagedesvariables(suiteetfin)

2.3.3 Under_scoreoucamelCase?

Sivousdeveznommerunnomdevariablequicontientplusieursmots,vousrencontrerez
gnralement2faonsdelefaire:

var
mon_prenom
//under_score
var
monPrenom/
/camelCase

Les2sontutilisesmaislecamelCaseestlepluscourant.

Enrsum
:

1. utiliserdesnomsdevariablesdescriptifsetcomprhensibles
2. Lesmotsmultiplesdoiventtreplusprcisdegauchedroite
3. UtiliserlecamelCaseestuneconventioncouranteetrecommande

2.3.4 Lesconstantes

Alinversedunevariableetcommesonnomlindique,uneconstanteestunedonnequi
auraunevaleurfixe.

Onladclaregnralementaudbutduprogramme
enutilisantla
conventiondenommageenlettresmajusculesetunderscore.

const
TAUX_TVA=20

//onutiliseicilemotcl
const
pourdclarernotreconstante
//elleestalorsrutilisabledanstoutnotrecode.

//exempleicisurlecalculdelaTVA
//ondclaredabordlesvariablesdontonvaavoirbesoin

var
montantHT
var
montantTVA

montantHT=100

//nouspouvonsutilisericinotreconstantepourcalculerletauxmontantdelaTVA

montantTVA=montantHT*TAUX_TVA/100
document.write(montantTVA)
//affichera20

DveloppementJavascript|Promo603WAcademy|FrdricLOSSIGNOL

3Lestableaux(array)
Untableauestunevariable
capabledestockerplusieursdonnes.
Vouspouvezvousreprsenteruntableausouscetteforme.

Index

Valeur

Christian

Aurlien

Kevin

Zakaria

Icilavariable
prenoms
contientplusieursvaleursassocieschacuneunindex.

Commentutiliserlestableaux?

Nousavons2faonsdedclareruntableau:
lasyntaxelongue(nouslatrouvonsdemoinsenmoins)
lasyntaxecourte(pluslisible)

Lasyntaxelongue

var
prenoms=newArray()

//lavariableprenomsestmaintenantdclarecommeuntableau

prenoms[0]=Christian
prenoms[1]=Aurlien
prenoms[2]=Kevin
prenoms[3]=Zakaria

document.write(prenoms[1])
//afficheraAurlien

Lasyntaxecourte

var
prenoms=[]

//enajoutantlescrochets,onindiquequelavariableprenomsestuntableau

prenoms=['christian','Aurlien','Kevin','Zakaria']
//Onassignelesvaleurslintrieurdutableau
//Notezquecettesyntaxenencessitepasdindex,

//automatiquementlapremirevaleurestassignlindex0

document.write(prenoms[3])
//afficheraZakaria

DveloppementJavascript|Promo603WAcademy|FrdricLOSSIGNOL

4Laconcatnation
Laconcatnationconsisteassemblerplusieurschanesdecaractresenuneseule.
L'oprateurutiliserestle+(pasconfondreavecl'oprateuradditionquis'applique
uniquementauxdonnesdetypenombre(Integer,Float).

/*
AffichagededeuxparagraphesdirectementdanslapageHTML.
Leschanesdecaractressontconcatnesavecle+
*/

var
prenom=MikaelJordan
document.write("<p>Hello,jem'appelle"+prenom+,ettoi?</p>')
//afficheradansunparagraphe<p>Hello,jemappelleMikaelJordan,ettoi?</p>

/*Remarquezquelonutilisedesguillemetsdoublesousimplespourengloberunechane
decaractrealorsquunevariableestjusteappeleparsonnom,loprateur+sertici
concatner,cestdireassembler2chanes.
*/

Info
:Attentionlaparticularitduguillemetsimpleoudoublelintrieurdunechane
decaractre.Lorsquequunguillemetsimpleoudoublesetrouvedansunechanede
caractrealorsquecelleciestentoureparunguillemetdemmetype,nousutilisonsce
quonappelleuncaractredchappement.

var
comment=J\airetrouvmonchienquis\taitgar.
var
reply=Heureusementquetuasretrouv\Doogy\cestsuper!

/*
Lecaractredchappement\placjusteavantleguillemetpermetdedirequele
caractresuivantnestpaslecaractredefermeturedelachane.Onditquonchappe
uncaractre.
*/

Doogy
vadormirauchaudetvousconnaisseztoutsurlaconcatnationenJS.

DveloppementJavascript|Promo603WAcademy|FrdricLOSSIGNOL

5Lestypesdevariablesetlestransformations
LesvariablesenJavascriptpeuventtredetype:

Chanedecaractres(String)
Nombre(Number)

NousverronsplustardquilexistedautrestypesdevariablesnotammentlesBoolensqui
prennentcommentvaleurVraiouFaux.

Leschanesdecaractressontdescaractresalphanumriques.Lorsquelonassigneune
valeurdetypechanedecaractreunevariable,onlaplaceentreguillemets.

Lesvariablesdetypenombresontdescaractresnumriques.Lorsquelonassigneune
valeurdetypenombreunevariable,onnemetspasdeguillemets.

var
maChaine=Ceciestunechanedecaractre

var
nombre=20
//ceciestunevariabledetypenombre
var
nombre=20
//ceciestunevariabledetypechanedecaractre

>
Transformationdunevariabledetype
string
enunevariabledetype
number

Danscertainscas,ilpeuttreutiledetransformeruntypedevariableenunautretypede
variable.Parexemple,pourexcuteruneoprationmathmatiquecourante(iciune
addition),Javascriptabesoindutiliserdesvariablesdetypenombre.

Pourtransformerunechanedecaractreennombre,onpeutnoterlesfonctions
parseInt()
utilepourtransformerunechanedecaractreennombreentier.
parseFloat()
utilepourtransformerunechanedecaractreennombredcimal.

http://devdocs.io/javascript/global_objects/parseint

Ouvrezlaconsoledansvotrenavigateur(RaccourciF12)etrechargezvotrepage.

console.log(3+2)//affichera5(typenumber)

console.log("3+2")//afficheralachanedecaractre3+2(typestring)

console.log("3"+"2")//afficheralachanedecaractre32(typestring)

console.log(parseInt("3")+parseInt("2"))//affichera5(typenumber)

DveloppementJavascript|Promo603WAcademy|FrdricLOSSIGNOL

/
/IcionaiciutilislafonctionparseInt()quitransformeunechanedecaractreennombre
etjavascriptpeuteffectueruneaddition.lafon

6LobjetDate()
http://devdocs.io/javascript/global_objects/date

JavascriptfournitlObjet
Date()
afindecreretdemanipulerlesdates.
Poursavoircequeretournelobjetdate,ilsuffitdelinstancier(lecrer)aveclemotcl
new
etdestockersonrsultatdansunevariable.

var
laDate=
new
Date()
console.log(laDate)
//afficheraladateetlheuredujour
//SatJan23201623:15:17GMT+0100

//onpeutaussipasserenparamtreunedatedfinie

var
dateAnniversaire=
new
Date("19761102T08:30:00")

//lesmthodesGetterpermettentdextrairedesdonnesdelobjetdate

var
jour=dateAnniversaire.getday()
console.log(jour)
//getDay()appliqulobjetDateRenvoielejourdelasemaine(06)
//getMonth()Renvoielemoisdelanne(011)
//getFullYear()Renvoiel'anne(avec4chiffres)

ApartirdelnouspouvonsafficherunedateenFranaissionlesouhaite.

LamthodegetDay()
Renvoielejourdelasemaine(06)
LamthodegetMonth()
Renvoielemoisdelanne(011)

ilnoussuffitalorsdedclareruntableauaveclestermesenFranaisindexssurces
valeurs.(voirlasuite)

DveloppementJavascript|Promo603WAcademy|FrdricLOSSIGNOL

Exercice:afficherunedatedanniversaireenFranais
//Objectif:afficherunedateenFranais

var
dateAnniversaire=
new
Date("19761102T08:30:00")

//1jedclareunevariablejourEnFranaisdetypetableau
//(pourl'exempleaveclasyntaxecourte)

var
joursenFrancais
=[
'Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'
]

//2jedclareunevariablemoisEnFrancaisdetypetableau
//(pourl'exemplelasyntaxelongue)

var

moisEnFrancais
=
new
Array()
moisEnFrancais[0]='Janvier'
moisEnFrancais[1]='Fvrier'
moisEnFrancais[2]='Mars'
moisEnFrancais[3]='Avril'
moisEnFrancais[4]='Mai'
moisEnFrancais[5]='Juin'
moisEnFrancais[6]='Juillet'
moisEnFrancais[7]='Aot'
moisEnFrancais[8]='Septembre'
moisEnFrancais[9]='Octobre'
moisEnFrancais[10]='Novembre'
moisEnFrancais[11]='Dcembre'

document.write('Jesuisnle'+joursEnFrancais[dateAnniversaire.getDay()]+'')
document.write(dateAnniversaire.getDate()+'')
document.write(moisEnFrancais[dateAnniversaire.getMonth()]+'')
document.write(dateAnniversaire.getFullYear()+'')
document.write(''+dateAnniversaire.getHours()+':')
document.write(''+dateAnniversaire.getMinutes()+'')

document.write('<h2>WhaoilestsupervieuxleprofdeDev!</h2>')

Cecodeesttestable.

DveloppementJavascript|Promo603WAcademy|FrdricLOSSIGNOL

7Lesoutilsdudveloppeur/liensutiles

Lesoutilsdudveloppeur
:

UnditeurdetexteouunIDE(SublimeText,Netbeans,PHPStorm,...)
Loutildveloppementsurlesnavigateurs(FirebugsurFireFoxetloutilde
dveloppementsurChrome,toutdeuxaccesiblesavecleraccourciF12)
DevDocs(
www.devdocs.io
)

Liensutiles
:
CourssurOpenClassRoom
https://openclassrooms.com/courses/dynamisezvossiteswebavecjavascript/

Applicationmobilepourapprendrelesbasesavecdespetitsexercicesprogressifs
(sympadanslemtro:))
(AppStoreetPlayStoreetwindowsStore).
=>

https://play.google.com/store/apps/details?id=com.sololearn.javascript&hl=fr
=>

https://itunes.apple.com/us/app/learnjavascript/id952738987?mt=8
=>

https://www.microsoft.com/frfr/store/apps/learnjavascript/9wzdncrdj6b4

LesprochainesfoisnousverronslesConditionsetnousfinirontparcoderunpetitjeuen
utilisantcequevoussavezdjfaire.

Conseil:rvisezlesnotionsapprisesenrelisantdocument:
variables
tableaux
concatnation
afficherlecontenudunevariableavecdocument.write(),alert(),ouconsole.log()

etPRATIQUEZ,cestlameilleurevoie.
Sivousntespasinspir(e),pratiquezavecdesexemplestrouvssurleweb,surlelien
dOpenclassRoomparexemple.

Sivousavezdesquestionsoudesremarques,jesuisjoignablesurle
https://3wa18.slack.com/
ouparEmail:frederic.lossignol@gmail.com

Abienttpourlesjours2et3

FrdricLossignol,votreprofdeDeveloppement

DveloppementJavascript|Promo603WAcademy|FrdricLOSSIGNOL