recherche

Maison  >  Article  >  interface Web  >  Guide d'étude d'introduction à JavaScript pour les débutants

Guide d'étude d'introduction à JavaScript pour les débutants

伊谢尔伦
伊谢尔伦original
2017-06-16 10:05:512262parcourir

Javascript est un cours incontournable pour le développement front-end. Voici les trois premiers cours pour commencer.

Leçon 1
1 : Principales fonctionnalités de javascript
Interprété : pas besoin de compiler, le navigateur interprète et exécute directement
Basé objet : on peut utiliser du JS directement les objets qui ont été créés
Piloté par les événements : peut répondre aux entrées du client de manière événementielle sans passer par le programme côté serveur
Sécurité : l'accès au disque dur local n'est pas autorisé et les données ne peuvent pas être écrit sur le serveur
Multiplateforme : js s'appuie sur le navigateur lui-même et n'a rien à voir avec le système d'exploitation

Leçon 2
Comment écrire du Javascript dans une page Web
1 : Intégrer Javascript directement dans la page
9cc1e8e6d40187c6e71a342c870da16d
 
 programme javascript
 2cacc6d41bbb37262a98f745aa00fbf0
javascript peut être inséré au milieu du ef0c2772b76bfffb9337fc47aea795ed9c3bca370b5104690d9ef395f2c5f8d1,
peut également être placé dans la balise 9bbcacf754ba6508fcaf29af414e244c au milieu des balises
est le plus souvent placé entre les balises 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1

Le cas est le suivant, insérez le code javascript dans 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>初学javascript</title>
    <script language="javascript">        var now=new Date();//获取Date对象的一个实例
        var hour=now.getHours();//获取小时数
        var min=now.getMinutes();//获取分钟数
        alert("当前时间"+hour+":"+min+"\n欢迎访问柠檬学院http://www.bjlemon.com/");    </script>
</head>
<body>
</body>
</html>

Le code du cas 2 est le suivant

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的年月日</title>
    <script language="javascript">        var now=new Date();//获取日期对象
        var year=now.getYear()+1900;//获得年，在js中年份需要加1900才可以显示此时此刻的年份
        var month=now.getMonth()+1;//获得月份,月份是0-11，所以在js中需要加1
        var date=now.getDate();//获得日
        var day=now.getDay();//获得星期几
        var day_week=new Array("礼拜日","礼拜一","礼拜二","礼拜三","礼拜四","礼拜五","礼拜六");        var week=day_week[day];        var time="当前时间:"+year+"年"+month+"月"+date+"日"+week;
        alert(time);    </script>
</head>
<body></body>
</html>

2 : Référence Javascript externe

Si le script est complexe ou si le même code est utilisé par plusieurs pages, Ensuite, ces codes de script peuvent être placés dans un fichier séparé avec l'extension .js, puis le fichier javascript peut être lié à la page Web où le code doit être utilisé

ef4152e5201e782597e56128c8a73fcd
2cacc6d41bbb37262a98f745aa00fbf0
(recommandation) Le code ci-dessus est généralement écrit au milieu de 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 fichiers avec le suffixe js, il n'est pas nécessaire d'utiliser les balises 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 pour entourer

77f7724499889f2edf8d98094d11b671 page La méthode getdate() est une méthode définie dans un fichier avec un suffixe .js

Le suffixe dans ce cas est .html

Le suffixe dans ce cas est .js
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>引用外部的js</title>
    <script language="javascript" src="js1.js">
    </script>
</head>
<body onload="getdate()">
</body>
</html>

Leçon 3
function getdate(){    var now=new Date();//获取日期对象
        var year=now.getYear()+1900;//获得年，在js中年份需要加1900才可以显示此时此刻的年份
        var month=now.getMonth()+1;//获得月份,月份是0-11，所以在js中需要加1
        var date=now.getDate();//获得日
        var day=now.getDay();//获得星期几
        var day_week=new Array("礼拜日","礼拜一","礼拜二","礼拜三","礼拜四","礼拜五","礼拜六");        
        var week=day_week[day];        
        var time="当前时间:"+year+"年"+month+"月"+date+"日"+week;
        alert(time);
    
}
Syntaxe Javascript

1 :Syntaxe Javascript
1.1 : les variables js sont sensibles à la casse
usename, useName sont deux variables différentes
1.2 : fin de chaque ligne Le point-virgule est facultatif. S'il n'y a pas de point-virgule à la fin de l'instruction, alors js
utilisera automatiquement la fin de cette ligne de code comme fin de l'instruction
alert("hello world") ;
alert(" hello world")
1.3 : Les variables sont faiblement typées
Lors de la définition des variables, utilisez uniquement l'opérateur var
Par exemple : var usename="biexiansheng";
var age =22;
1.4 : Utiliser le bloc de code de l'étiquette Accolades
{ //Code} Les instructions entre accolades sont exécutées dans l'ordre
1.5 : Commentaires
1.5.1 : Commentaires sur une seule ligne //
Les commentaires sur une seule ligne utilisent des doubles barres obliques. Commençant par "//", le texte après "//" est le contenu du commentaire
Le contenu du commentaire n'a aucun effet lors de l'exécution du code.
var now=new Date();//Obtenir l'objet date
1.5.2 : Le commentaire multiligne /**/
Les commentaires sur plusieurs lignes commencent par /* et se terminent par*/ se termine, le contenu entre les deux est le contenu du commentaire
In Cela n’a aucun effet pendant l’exécution du code.
                                                                                                                                                                                                                                                                    utiliser   avec utiliser utiliser utiliser utiliser                                                                                        ‐                //Contenu
                                               

Leçon 4
Types de données JavaScript (quel que soit le nombre de types de données disponibles en JavaScript, vous ne pouvez utiliser que var lors de la déclaration)
1 : Type numérique
Entier : 123 //Décimal
0123 // Octal, commençant par 0
0x123 // Hexadécimal, commençant par 0x (zéro, pas o)
Type à virgule flottante : la partie entière plus la partie décimale ne peuvent être exprimées qu'en décimal, mais elles peuvent Utiliser la notation scientifique
3.1415926 // Forme standard d'un nombre à virgule flottante
3.14E9 // Utiliser la notation scientifique pour représenter 3,14 fois 10 élevé à la puissance 9
2 : Type de caractère
Les données de caractère sont un ou plus de caractères entourés de guillemets simples ou multiples
Par exemple : 'a' 'hello world'
"a" "hello world"
Aucun dans le type de données javascript char
Si vous souhaitez représenter un seul caractère, vous devez utiliser une chaîne de longueur 1

Les guillemets simples incluent les guillemets doubles '"hello"'
Les guillemets doubles incluent les guillemets simples "'world'"
3 : type booléen
Booléen data n'a que vrai ou faux. Dans js, vous pouvez également utiliser l'entier 0 pour représenter faux, et utiliser un entier non nul pour représenter vrai

4 : Caractère d'échappement
Caractères spéciaux non affichables commençant. avec une barre oblique inverse sont souvent appelés caractères de contrôle, également appelés caractères d'échappement
bbackspace nline feed fform feed tTab caractère 'guillemet simple' 'guillemet double' \backslash

5 : valeur nulle
null, utilisé pour définir des références vides ou inexistantes
Par exemple, var a=null;

6 : Valeur non définie
Variables déjà déclarées mais non affectées
var a;
alert(a );
Pop-up undefined est un mot-clé, utilisé pour représenter des valeurs non définies

7 : Type de tableau
Type de tableau, Un tableau est une séquence contenant des données de base et combinées. Dans le langage de script JavaScript, chaque type de données correspond à un objet, et les données sont essentiellement un objet Array var score=[45,56,45,78 ,78,65];
Puisque les tableaux sont essentiellement des objets Array. , vous pouvez utiliser l'opérateur new pour créer un nouveau tableau, tel que
var score=new Array(45,65,78,8,45);
L'accès à un élément spécifique du tableau peut être obtenu via la position d'index de l'élément, comme indiqué dans l'instruction suivante
La variable renvoie le 4ème élément du tableau score
var m=score[3];

Leçon 5
Définition et utilisation des variables

1 : règles de dénomination des variables

Les noms de variables sont constitués de lettres, de chiffres et de traits de soulignement, mais ne peuvent pas commencer par des chiffres
Impossible d'utiliser des mots-clés en javascript
Strictement sensible à la casse
Pour exemple de nom d'utilisateur nom d'utilisateur
2 : Déclaration de variable
var variable
Vous pouvez utiliser une var pour déclarer plusieurs variables, telles que
var maintenant, année, mois, date
Vous pouvez attribuer une valeur ; à une variable en la déclarant, c'est-à-dire l'initialiser
var now="2016-8-11",year="2016",month="8",date="11";
Si vous venez déclarez une variable sans attribuer de valeur, la valeur par défaut de la variable est indéfinie

JavaScript est un type faible. Vous n'avez pas besoin de spécifier le type de la variable lors de sa déclaration. Le type de la variable sera. déterminé en fonction de la valeur de la variable.

Déclaration des variables globales : 1 : Les déclarations en dehors du corps de la fonction sont des variables globales, qu'il y ait ou non une déclaration var
2 : Les variables déclarées en utilisant var à l'intérieur du le corps de la fonction est une variable locale et les déclarations var ne sont pas utilisées. La variable est une variable globale

//Si vous attribuez une valeur à un type de variable qui n'a pas été déclaré, JavaScript utilisera automatiquement la variable pour créer une variable de mise en page
Par exemple : a="hello world"
funcation test( ){
var c="variable locale";//Ce c est une variable locale, et c'est aussi le seul moyen de définir une variable locale
        b="Toutes les variables";//Ce b est également une variable complète
                                                                                                       > function test2(){
} alert(b);
}

3 : La portée de la variable
La portée de la variable fait référence au valide plage de la variable dans le programme
Toutes les variables : variables définies en dehors de toutes les fonctions et agissant sur l'ensemble du code
Variables locales : variables définies dans le corps de la fonction et agissant uniquement sur le corps de la fonction

Leçon 6

Application des opérateurs

1 : Opérateur d'affectation
Opérateur d'affectation simple
Par exemple, var useName='tom';//Opérateur d'affectation simple
Opérateur d'affectation composé
a+=b ;//Équivalent à a =a+b;
a-=b;//équivalent à a=a-b;
a*=b;//équivalent à a=a*b;
a/ =b;//équivalent En a=a/b;
a%=b;//équivalent à a=a%b;
a&b=b;//équivalent à a=a&b; 🎜> a|=b ;//Équivalent à a=a|b; opération OU logique
a^=b;//Équivalent à a=a^b; opérateur NON logique
2 : Opérateur arithmétique
+ - * / %
++ Avant ++, ajoutez d'abord puis utilisez. Après ++, utilisez d'abord puis ajoutez , 0 ne peut pas être utilisé comme diviseur, le mot-clé infini<.>
3 sera renvoyé : opérateur de comparaison
> supérieur à 1018585d2ef3933cf52b192b3f316e58= supérieur ou égal à 7c0f71df8d9c941181e8166120bb91652vrai->3->4->2vrai->3->4
//1->2faux->3-> ;2false La boucle for se termine
Exemple
var sum=0;
for(var i=0;i2d800ffb45ebddfdd7ec5bab56ce23fb2-> ;1true- >2... > i++;
}
alert(i);
3 : instruction de boucle do-while
L'exécution de la boucle do-while peut être garantie au moins une fois.
Format de syntaxe
do{
1 Corps de la boucle d'exécution
}while(2 conditions de jugement);
1->2true->1->2true....

Remarque : la boucle while détermine d'abord si la condition est établie, puis en fonction du résultat du jugement
s'il faut exécuter le corps de la boucle
la boucle do-while exécute d'abord le corps de la boucle une fois, puis détermine si la condition est vraie.
Ainsi, la boucle do-while est garantie d'être exécutée au moins une fois.

Exemple
var sum=0;
var i=1;
do{
sum+=i;
}while(i<=10);
alerte(somme);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Guide du débutant sur la programmation asynchrone en JavaScriptArticle suivant：Guide du débutant sur la programmation asynchrone en JavaScript

Articles Liés

Voir plus