Computing">
Introduction à JavaScript et ses avantages
Introduction à JavaScript et ses avantages
Que'st-cequeJavaScrp
i?t
JavaScript était d'abord connu sous le nom de LiveScript, mais Netscape a changé son nom en
Ouvert et multiplateforme
JavaScriptcôtéclient
Le JavaScript côté client est la forme la plus courante du langage. Le script devrait
être inclus dans ou référencé par un document HTML pour que le code soit interprété par
le navigateur.
Cela signifie qu'une page web ne doit pas être un HTML statique, mais peut inclure des programmes qui
interagir avec l'utilisateur, contrôler le navigateur et créer dynamiquement du contenu HTML.
Le mécanisme côté client de JavaScript offre de nombreux avantages par rapport à la CGI traditionnelle.
scripts côté serveur. Par exemple, vous pourriez utiliser JavaScript pour vérifier si l'utilisateur a
a entré une adresse e-mail valide dans un champ de formulaire.
Le code JavaScript est exécuté lorsque l'utilisateur soumet le formulaire, et uniquement si tous les
les entrées sont valides, elles seraient soumises au serveur Web.
JavaScript peut être utilisé pour intercepter des événements initiés par l'utilisateur tels que des clics de boutons, des liens
1
Collège d'Ingénierie Lakireddy Bali Reddy (Autonome)
AvantagesdeJavaScript
Les avantages de l'utilisation de JavaScript sont −
Moins d'interaction avec le serveur - Vous pouvez valider les saisies utilisateur avant d'envoyer le
page hors du serveur. Cela réduit le trafic serveur, ce qui signifie moins de charge sur votre
serveur.
Retour immédiat aux visiteurs− Ils n'ont pas à attendre une page
rechargez pour voir s'ils ont oublié d'entrer quelque chose.
Interactivité accrue − Vous pouvez créer des interfaces qui réagissent lorsque l'utilisateur
Interfaces plus riches - Vous pouvez utiliser JavaScript pour inclure des éléments tels que le glisser-déposer.
et des composants de glisser-déposer et des curseurs pour offrir une interface riche à vos visiteurs du site.
LimitationsofJavaScript
Nous ne pouvons pas considérer le JavaScript comme un langage de programmation à part entière. Il lui manque le
JavaScript ne peut pas être utilisé pour des applications réseau car il n'existe pas de tel
soutien disponible.
Encore une fois, JavaScript est un langage de programmation léger et interprété qui
vous permet d'intégrer de l'interactivité dans des pages HTML autrement statiques.
Syntaxe JavaScript
JavaScript peut être mis en œuvre à l'aide d'instructions JavaScript qui sont placées à l'intérieur de
les balises <script>... </script> HTML dans une page web.
Vous pouvez placer les balises <script>, contenant votre JavaScript, n'importe où dans votre
page web, mais il est normalement recommandé de la garder dans
les balises <head>.
2
Collège d'ingénierie Lakireddy Bali Reddy (Autonome)
<script ...>
Code JavaScript
</script>
Type− Cet attribut est ce qui est maintenant recommandé pour indiquer le script
la langue en usage et sa valeur doivent être définies sur "text/javascript".
VotrePremierScriptJavaScript
Prenons un exemple pour imprimer "Bonjour le monde".
nous appelons une fonction [Link] qui écrit une chaîne dans notre document HTML.
Cette fonction peut être utilisée pour écrire du texte, du HTML, ou les deux. Jetez un œil au suivant.
code.
<html>
<corps>
<script language="javascript" type="text/javascript">
[Link]("Hello World!");
</script>
</body>
</html>
Bonjour le monde!
Espacesetsautsdeligne
JavaScript ignore les espaces, les tabulations et les nouvelles lignes qui apparaissent dans les programmes JavaScript.
Vous pouvez utiliser des espaces, des tabulations et des nouvelles lignes librement dans votre programme et vous êtes libre de
formatez et indentez vos programmes de manière soignée et cohérente, ce qui rend le code
facile à lire et à comprendre.
3
Lakireddy Bali Reddy Collège d'Ingénierie (Autonome)
Lep
sonistv-riguelsonaftcuatlsfit
Les déclarations simples en JavaScript sont généralement suivies d'un caractère point-virgule, juste
comme ils le sont en C, C++ et Java. JavaScript, cependant, vous permet d'omettre cela.
point-virgule si chacune de vos déclarations est placée sur une ligne séparée. Par exemple, le
le code suivant pourrait être écrit sans points-virgules.
Mais lorsqu'il est formaté sur une seule ligne comme suit, vous devez utiliser des points-virgules −
Diférencedecasse
JavaScript est un langage sensible à la casse. Cela signifie que les mots-clés du langage,
les variables, les noms de fonction et tout autre identifiant doivent toujours être typés avec un
capitalisation cohérente des lettres.
Ainsi, les identifiants Time et TIME auront des significations différentes en JavaScript.
REMARQUE− Une attention particulière doit être portée lors de l'écriture des noms de variables et de fonctions dans
JavaScript.
CommentsinJavaScript
JavaScript prend en charge à la fois les commentaires de style C et les commentaires de style C++, donc -
Tout texte entre // et la fin d'une ligne est traité comme un commentaire et est
ignoré par JavaScript.
Tout texte entre les caractères /* et */ est considéré comme un commentaire. Cela peut
s'étendre sur plusieurs lignes.
La séquence de fermeture de commentaire HTML --> n'est pas reconnue par JavaScript donc elle
devrait être écrit comme //-->.
4
Collège d'ingénierie Lakireddy Bali Reddy (Autonome)
Exemple
L'exemple suivant montre comment utiliser des commentaires en JavaScript.
/*
* Ceci est un commentaire multilignes en JavaScript
*/
//-->
</script>
JavaScrp
it-PalcementdansunfciheirHTML
Il y a une flexibilité donnée pour inclure du code JavaScript n'importe où dans un HTML
document. Cependant, les moyens les plus préférés d'inclure JavaScript dans un fichier HTML
sont les suivants −
Dans la section suivante, nous allons voir comment nous pouvons placer JavaScript dans un fichier HTML.
différentes manières.
JavaScriptdanslasection<head><
. /head>
Si vous voulez qu'un script s'exécute lors d'un événement, par exemple lorsque l'utilisateur clique
<html>
<tête>
<script type="text/javascript">
function direBonjour() {
alerte("Bonjour le monde")
}
</script>
</tête>
<body>
<input type="button" value="Say Hello" />
</body>
5
Collège d'Ingénierie Lakireddy Bali Reddy (Autonome)
</html>
JavaScriptdanslasection<body><
. /body>
Si vous avez besoin d'un script à exécuter au chargement de la page afin que le script génère du contenu dans
la page, puis le script se trouve dans la portion <body> du document. Dans ce cas,
vous n'auriez aucune fonction définie en utilisant JavaScript. Jetez un coup d'œil au
code suivant.
<html>
<tête>
</tête>
<body>
<script type="text/javascript">
[Link]("Bonjour le monde")
</script>
<p>Ceci est le corps de la page web</p>
</body>
</html>
JavaScriptdanslessections<body>et<head>
You can put your JavaScript code in <head> and <body> section altogether as
suit −
<html>
<tête>
<script type="text/javascript">
fonction direBonjour() {
alerte("Bonjour le monde")
}
</script>
</tête>
<corps>
<script type="text/javascript">
[Link]("Bonjour le monde")
</script>
</body>
</html>
JavaScrp
itdansunfciheirexterne
Voici un exemple pour montrer comment vous pouvez inclure un fichier JavaScript externe dans votre
Code HTML utilisant la balise script et son attribut src.
<html>
<tête>
<script type="text/javascript" src="[Link]" ></script>
</tête>
<body>
6
Collège d'ingénierie Lakireddy Bali Reddy (Autonome)
</body>
</html>
To use JavaScript from an external file source, you need to write all your JavaScript
code source dans un fichier texte simple avec l'extension ".js" et ensuite inclure ce fichier comme
montré ci-dessus.
Par exemple, vous pouvez garder le contenu suivant dans [Link] et ensuite vous
vous pouvez utiliser la fonction sayHello dans votre fichier HTML après avoir inclus le fichier [Link].
fonction direBonjour() {
alerte("Bonjour le monde")
Utilisation de innerHTML
Exemple :
<!DOCTYPE html>
<html>
<corps>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML =“welcome”;
</script>
</corps>
</html>
Utiliser [Link]()
7
Lakireddy Bali Reddy College of Engineering (Autonomous)
Exemple :
<!DOCTYPE html>
<html>
<body>
<script>
[Link]("bienvenue dans javascript");
</script>
</corps>
</html>
Utiliser [Link]()
Vous pouvez utiliser une boîte de dialogue pour afficher des données :
<!DOCTYPE html>
<html>
<corps>
<script>
[Link](“welcome”);
</script>
</body>
</html>
Utiliser [Link]()
Pour des raisons de débogage, vous pouvez utiliser la méthode [Link]() pour afficher des données.
<!DOCTYPE html>
<html>
<corps>
<script>
[Link]("bienvenue");
</script>
</body>
</html>
VariablesJavaScript
8
Collège d'ingénierie Lakireddy Bali Reddy (Autonome)
Comme beaucoup d'autres langages de programmation, JavaScript a des variables. Les variables peuvent être
considérés comme des conteneurs nommés. Vous pouvez placer des données dans ces conteneurs et ensuite
faites simplement référence aux données en nommant le conteneur.
Before you use a variable in a JavaScript program, you must declare it. Variables are
déclaré avec le mot-clé comme suit.
<script type="text/javascript">
var argent;
var nom;
</script>
Vous pouvez également déclarer plusieurs variables avec le même mot-clé var comme suit −
<script type="text/javascript">
var argent, nom;
</script>
Stocker une valeur dans une variable s'appelle l'initialisation de variable. Vous pouvez le faire avec une variable.
initialisation au moment de la création de la variable ou à un moment ultérieur lorsque vous en avez besoin
cette variable.
Par exemple, vous pourriez créer une variable nommée argent et lui assigner la valeur
2000,50 à plus tard. Pour une autre variable, vous pouvez assigner une valeur au moment de
initialisation comme suit.
<script type="text/javascript">
var name = "Ali";
var argent;
money = 2000.50;
</script>
Note− Use thevarkeyword only for declaration or initialization, once for the life of
tout nom de variable dans un document. Vous ne devez pas redéclarer la même variable deux fois.
JavaScript est un langage non typé. Cela signifie qu'une variable JavaScript peut contenir un
valeur de tout type de données. Contrairement à de nombreux autres langages, vous n'avez pas à le dire
JavaScript lors de la déclaration de variable, quel type de valeur la variable va-t-elle contenir.
le type de valeur d'une variable peut changer pendant l'exécution d'un programme et
JavaScript s'en occupe automatiquement.
PortéedesvariablesJavaScript
9
Collège d'ingénierie Lakireddy Bali Reddy (Autonome)
La portée d'une variable est la région de votre programme dans laquelle elle est définie.
Les variables JavaScript n'ont que deux portées.
Variables globales - Une variable globale a une portée globale, ce qui signifie qu'elle peut être définie
Variables locales - Une variable locale ne sera visible que dans une fonction où elle est définie.
Les paramètres de fonction sont toujours locaux à cette fonction.
Dans le corps d'une fonction, une variable locale a la priorité sur une variable globale.
variable with the same name. If you declare a local variable or function parameter
avec le même nom qu'une variable globale, vous cachez effectivement la variable globale.
Jetez un œil à l'exemple suivant.
<html>
<body > <script type="text/javascript">
var maVar = "global"; // Déclarer une variable globale
fonction vérifier la portée() {
[Link](myVar);
}
</script>
</body>
</html>
NomsdevariablesJavaScript
While naming your variables in JavaScript, keep the following rules in mind.
Vous ne devez pas utiliser les mots réservés JavaScript comme variable.
nom. Ces mots-clés sont mentionnés dans la section suivante. Pour
exemple, break ou les noms de variables boolean ne sont pas valides.
JavaScript variable names should not start with a numeral (0-9). They must
commencez par une lettre ou un caractère de soulignement. Par exemple, 123test est un
nom de variable invalide mais_123test est un nom valide.
10
Collège d'ingénierie Lakireddy Bali Reddy (Autonome)
JavaScript–Objects
JavaScript est un langage de programmation orienté objet (POO). Un programme de
un langage peut être qualifié d'orienté objet s'il offre quatre capacités de base à
développeurs
Encapsulation - la capacité de stocker des informations liées, qu'il s'agisse de données ou de méthodes,
Hérédité - la capacité d'une classe à s'appuyer sur une autre classe (ou sur un certain nombre de classes)
Polymorphisme - la capacité d'écrire une fonction ou une méthode qui fonctionne dans une variété de
différentes manières.
Les objets sont composés d'attributs. Si un attribut contient une fonction, il est
considéré comme une méthode de l'objet, sinon l'attribut est considéré comme un
propriété.
Propriétésdesobjets
Les propriétés d'objet peuvent être n'importe lequel des trois types de données primitifs, ou n'importe lequel des abstraits.
des types de données, tels qu'un autre objet. Les propriétés d'un objet sont généralement des variables qui sont
utilisé en interne dans les méthodes de l'objet, mais peut aussi être des variables visibles globalement qui
sont utilisés sur toute la page.
[Link]=propertyValue;
varstr=[Link];
Méthodesd'objet
Les méthodes sont les fonctions qui permettent à l'objet de faire quelque chose ou de permettre que quelque chose soit fait.
Il y a une petite différence entre une fonction et une méthode - une fonction est un
unité autonome d'énoncés et une méthode est attachée à un objet et peut être
référencé par le mot-clé this.
11
Collège d'ingénierie Lakireddy Bali Reddy (Autonome)
Obejd
sténifp
siau
s'railiteur
Tous les objets définis par l'utilisateur et les objets intégrés sont des descendants d'un objet
calledObject.
Le nouvel Opérateur
L'opérateur new est utilisé pour créer une instance d'un objet. Pour créer un objet,
thenewoperator est suivi par la méthode constructeur.
Dans l'exemple suivant, les méthodes de constructeur sont Object(), Array() et Date().
Ces constructeurs sont des fonctions intégrées de JavaScript.
Exemple 1
Essayez l'exemple suivant ; il démontre comment créer un objet.
<html>
<tête>
<title>User-defined objects</title>
<script type="text/javascript">
var book = new Object(); // Créer l'objet
[Link] = "Perl"; // Assign properties to the object
[Link] = "Mohtashim";
</script>
</tête>
<corps>
<script type="text/javascript">
[Link]("Le nom du livre est : " + [Link] + "<br>");
12
Collège d'ingénierie Lakireddy Bali Reddy (Autonome)
</script>
</corps>
</html>
Sortie
Book name is : Perl
Book author is : Mohtashim
Exemple 2
Cet exemple démontre comment créer un objet avec une fonction définie par l'utilisateur.
Le mot-clé 'this' est utilisé pour faire référence à l'objet qui a été passé à une fonction.
<html>
<tête>
<title>User-defined objects</title>
<script type="text/javascript">
fonction livre(titre, auteur){
[Link] = title;
[Link] = author;
}
</script>
</tête>
<corps>
<script type="text/javascript">
var myBook = new book("Perl", "Mohtashim");
[Link]("Book title is : " + [Link] + "<br>");
[Link]("Book author is : " + [Link] + "<br>");
</script>
</body>
</html>
Sortie
Book title is : Perl
Book author is : Mohtashim
Définirdesméthodespourunobjet
13
Collège d'Ingénierie Lakireddy Bali Reddy (Autonome)
Exemple
Try the following example; it shows how to add a function along with an object.
<html>
<tête>
<title>User-defined objects</title>
<script type="text/javascript">
// Définir une fonction qui agira comme une méthode
function addPrice(amount){
[Link] = amount;
}
fonction livre(titre, auteur) {
[Link] = title;
[Link] = auteur;
[Link] = addPrice; // Assigner cette méthode comme propriété.
}
</script>
</tête>
<corps>
<script type="text/javascript">
var myBook = new book("Perl", "Mohtashim");
[Link](100);
[Link]("Le titre du livre est : " + [Link] + "<br>");
Sortie
Book title is : Perl
Book author is : Mohtashim
Le prix du livre est : 100
Lemot-clé'avec'
14
Collège d'ingénierie Lakireddy Bali Reddy (Autonome)
Le mot-clé 'avec' est utilisé comme une sorte d'abréviation pour référencer un objet.
properties or methods.
L'objet spécifié comme argument à avec devient l'objet par défaut pour le
durée du bloc qui suit. Les propriétés et méthodes de l'objet peuvent être
utilisé sans nommer l'objet.
Syntaxe
La syntaxe pour avec un objet est la suivante −
avec(object){
propriétés utilisées sans le nom de l'objet et le point
Exemple
Essayez l'exemple suivant.
<html>
<tête>
<title>User-defined objects</title>
<script type="text/javascript">
// Définir une fonction qui fonctionnera comme une méthode
fonction ajouterPrix(montant){
avec ceci :
price = amount;
}
}
fonction livre(titre, auteur) {
[Link] = title;
[Link] = auteur;
[Link] = 0;
[Link] = addPrice; // Assign that method as property.
}
</script>
</tête>
<corps>
<script type="text/javascript">
var myBook = new book("Perl", "Mohtashim");
[Link](100);
15
Collège d'ingénierie Lakireddy Bali Reddy (Autonome)
</script>
</corps>
</html>
Sortie
<html>
<tête>
<script>
fonction validerFormulaire()
{
var un = [Link];
var pass = [Link];
var gen = [Link];
var age = [Link];
var mail = [Link];
var cntry = [Link];
var lan = [Link];
if(un=="" || un=="null")
{
alerte("veuillez entrer votre nom");
[Link]();
renvoyer faux;
}
si(pass=="" || pass=="null")
{
alerte("veuillez entrer votre mot de passe");
[Link]();
renvoie faux;
}
si(gen=="" || gen=="null")
{
alert("Please select the gender");
[Link][0].focus();
renvoyer faux;
}
si(age=="" || age=="null")
{
alerte("veuillez entrer votre âge");
[Link]();
retourner faux;
16
Collège d'ingénierie Lakireddy Bali Reddy (autonome)
si(mail=="" || mail=="null")
{
alerte("veuillez entrer votre email");
[Link]();
retourner faux;
}
si(cntry == "Par défaut")
{
alerte("veuillez sélectionner votre pays")
[Link]();
retourner faux;
}
pour (var i=0; i<[Link]; i++)
{
si(lan[i].vérifié)
pause;
}
si(i==[Link])
{
alerte("Veuillez choisir vos langues");
[Link][0].focus();
retourner faux;
}
Alerte("Inscription réussie");
retourner vrai;
}
</script>
</tête>
<corps>
<form name="inscription" validateForm();">
Entrez votre nom : <input type="text" name="uname"><br>
Entrez votre mot de passe : <input type="password" name="pwd"><br>
Choose your Gender: <input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female">Female<br>
Entrez votre âge : <input type="number" name="age"><br>
Entrez votre email : <input type="text" name="email"><br>
Choisissez votre pays :
<select name="pays">
<option value="Default">(Please select a country)</option>
<option value="aus">Australia</option>
<option value="can">Canada</option>
<option value="ind">India</option>
<option value="rus">Russia</option>
<option value="usa">USA</option>
</select><br>
Languages Known:
<input type="checkbox" name="lang" value="Telugu"/>
English: <input type="checkbox" name="lang" value="English"/>
Hindi: <input type="checkbox" name="lang" value="Hindi"/><br>
17
Collège d'ingénierie Lakireddy Bali Reddy (Autonome)
<html>
<tête>
<script>
fonction validerFormulaire()
{
var un = [Link];
var age = [Link];
var pass = [Link];
var letters = /^[a-zA-Z\s]+$/;
var nombres = /^[0-9]+$/;
var checkSpecial = /[*@!#%&]+/.test(pass);
var checkUpper = /[A-Z]+/.test(pass);
var checkLower = /[a-z]+/.test(pass);
var drapeau = 0;
si(un=="" || un=="null")
{
alerte("veuillez entrer votre nom");
[Link]();
retourner faux;
}
si()
{
alerte("veuillez entrer uniquement des lettres")
[Link]();
return false;
}
si(age=="" || age=="null")
{
alerte("veuillez entrer votre âge");
[Link]();
retourner faux;
}
si()
{
alert("please enter numbers only")
[Link]();
retourner faux;
}
si(pass=="" || pass=="null")
{
alerte("veuillez entrer votre mot de passe");
[Link]();
retourner faux;
}
18
Collège d'ingénierie Lakireddy Bali Reddy (Autonome)
retourner faux;
}
alerte("Inscription réussie");
retourner vrai;
}
</script>
</head>
<corps>
<form name="inscription" validateForm();">
Entrez votre nom : <input type="text" name="uname"> Veuillez entrer uniquement des alphabets<br>
Entrez votre âge : <input type="text" name="age"> veuillez entrer des chiffres seulement<br>
Entrez votre mot de passe : <input type="text" name="pwd">au moins une lettre minuscule, une lettre majuscule &
caractère spécial<br>
<input type="submit"><input type="reset">
</form>
</body>
</html>
Validation des e-mails en JavaScript :
<html>
<tête>
<script>
function validerFormulaire()
{
var mail = [Link];
si(mail=="" || mail=="null")
{
alerte("veuillez entrer votre email");
[Link]();
retourner faux;
}
var atpos = [Link]("@");
var dotpos = [Link](".");
si (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= [Link])
{
Alerte("Adresse e-mail non valide");
retourner faux;
}
alerte("Inscription réussie");
renvoyer vrai;
}
</script>
</head>
<corps>
<form name="inscription" validerFormulaire();">
Entrez votre e-mail : <input type="text" name="email"><br>
<input type="submit"><input type="reset">
</form>
</body>
</html>
19