3wa-Révisions DÉVELOPPEMENT-SEM1 PDF

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.
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.
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
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
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
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.
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)
/
/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)
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.
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

3wa-Révisions DÉVELOPPEMENT-SEM1 PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

3wa-Révisions DÉVELOPPEMENT-SEM1 PDF

Încărcat de

Drepturi de autor:

Formate disponibile

MMO1DVELOPPEMENTJOUR1

S-ar putea să vă placă și