Guide d'étude d'introduction à JavaScript pour les débutants-js tutoriel-php.cn

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

javascript peut être inséré au milieu du < head>,
peut également être placé dans la balise au milieu des balises
est le plus souvent placé entre les balises

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

<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>

Copier après la connexion

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>

Copier après la connexion

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é

(recommandation) Le code ci-dessus est généralement écrit au milieu de fichiers avec le suffixe js, il n'est pas nécessaire d'utiliser les balises <script></script> pour entourer

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>

Copier après la connexion

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);
    
}

Copier après la connexion

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 à = supérieur ou égal à <= inférieur ou égal à
== est égal à " Il est jugé uniquement en fonction de la valeur de surface et n'implique pas le type de données alert("11"==11);
===Absolument égal à Non seulement pour juger la valeur de la surface, mais aussi pour juger si le type de données est le même.
! = n'est pas égal à Il est uniquement jugé en fonction de la valeur de surface et n'implique pas le type de données.
! == n'est pas absolument égal. Il détermine non seulement la valeur de la surface, mais détermine également si les types de données sont les mêmes.

4 : Opérateur logique
! NON logique
&&ET logique. Ce n'est que lorsque les valeurs des deux opérandes sont vraies que le résultat sera vrai
||OU logique. Si un seul des deux opérandes est vrai, le résultat est vrai
5 : Opérateur conditionnel
L'opérateur conditionnel est un opérateur ternaire spécial supporté par JavaScript
Format de syntaxe : Opérandes ? Résultat 1 : Résultat 2 ;
Si la valeur de l'opérande est vraie, le résultat de l'expression entière est le résultat 1
Si la valeur de l'opérande est fausse, le résultat de l'expression entière est le résultat 2
6 :Opérateur de chaîne
Deux façons de connecter des chaînes
+. var a="bonjour"+"monde";
+=. var a+="bonjour tout le monde !!!";

Leçon 7
Contrôle de flux if, instruction switch
1 : if instruction de jugement conditionnel
1 : if(expression){
//Exécuter l'instruction à l'intérieur lorsque l'expression est vraie
}
2 : if(expression){
//Exécuter l'instruction à l'intérieur lorsque l'expression est vraie
}else{
} //Exécuter l'instruction à l'intérieur lorsque l'expression est fausse
}
3:if(expression){
//Exécuter l'instruction à l'intérieur lorsque l'expression est vraie
}else if(expression1){
//Exécuter l'instruction à l'intérieur lorsque l'expression1 est vraie
} Sinon si ( Expression2) {
// L'expression2 est exécutée dans l'instruction
} else {
// Ceci else est facultatif, si tel est le cas, les conditions ci-dessus <🎜 <🎜
//Spécifiez else
quand ni l'un ni l'autre n'est satisfait }
2 : instruction switch
Avantages : bonne lisibilité, facile à lire
Format de syntaxe
switch (expression) {
condition de cas 1 : instruction 1
break ; ;
condition de cas 2 : instruction 2 ;
condition de cas 4 : instruction 4；
pause;
condition de cas 5 : instruction 5 🎜>Leçon 8
Contrôle de flux pour, while, instructions do-while
1 : instruction de boucle for
Format de syntaxe
for (1 condition initiale ; 2 conditions de boucle ; 4 étapes de croissance) {
3 corps d'instruction ;
}
/ /Exécutez d'abord la condition initiale, puis déterminez si la condition de boucle renvoie vrai,
//Si elle renvoie faux, terminez la condition. Si elle est vraie, exécutez le corps de l'instruction,
//Ensuite, exécutez le rythme de croissance.
//1->2vrai->3->4->2vrai->3->4
//1->2faux->3-> ;2false La boucle for se termine
Exemple
var sum=0;
for(var i=0;i<10;i++){
sum+=i;
}
alert (somme);
2 : instruction de boucle while
Format de syntaxe
while(expression 1){
2 corps d'instruction
}
1true->2-> ;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);