Manuel de démarrage rapide JavaScript

Tout d'abord, familiarisez-vous avec JavaScript

1. Introduction

JavaScript est un langage de script qui s'exécute sur le navigateur, abrégé en js. Il n'a pas besoin d'être compilé manuellement et est enregistré sous la forme d'un document ordinaire. Le suffixe est ".js". En émettant des commandes sur le navigateur, vous pouvez obtenir des fonctions de page dynamiques et une interaction utilisateur

2. Composition

Le programme JavaScript est composé d'instructions, de blocs d'instructions (les instructions sur plusieurs lignes sont placées entre "{}", la fonction est de faire exécuter la séquence d'instructions ensemble), de fonctions, d'objets, de méthodes, d'attributs, etc., qui sont contrôlés par trois programmes de base: séquence, sélection et boucle Structure.

3, points à noter

";" À la fin de chaque instruction peut être ajoutée ou non ajoutée
. Les variables peuvent être affectées ou non lors de la déclaration des variables. Les
chaînes peuvent utiliser des guillemets simples ou doubles

Deuxièmement, comment introduire des fichiers JavaScript

1. Écrivez directement là où vous en avez besoin

L'événement est implémenté en liant directement le descripteur d'événement (le descripteur d'événement consiste à ajouter directement "on" avant l'événement, tel que "cliquer" le descripteur d'événement est "onclick"). Dans ce cas, l'événement de clic de souris est déclenché par le descripteur d'événement "onclick".

 <input type="button" onclick="alert('直接在事件处理代码中加入JavaScript代码')" value="直接调用JavaScript代码">

2. Méthode du bloc de script (identique à la feuille de style CSS en ligne)

Exposé dans le bloc de script, exécuté lorsque la page est ouverte et exécuté dans un
ordre descendant (ce code est exécuté sans événements).

 <script type="text/javascript">
        document.write("第一个JavaScript实例")
        alert("第一个JavaScript实例")
    </script>

3. Introduire indépendant (même feuille de style externe CSS)

Mappez le fichier de script js à l'emplacement requis.
Lorsqu'un fichier js externe indépendant est introduit, le code du fichier js sera exécuté ligne par ligne dans l'ordre de haut en bas.

<script type="text/javascript" src="../JavaScript文件/demo.js">
        document.write("src是可选属性，如果加上src属性，则script中的代码会被忽视——这行代码不会执行")
    </script>

Troisièmement, la syntaxe de base JavaScript

1. Variables en js

Déclaration de variable

• java est un langage fortement typé
  java existe à l'étape de la compilation, en supposant qu'il y a du code int: i; puis il y a une fonctionnalité dans java: le type de données de la variable i a été déterminé à l'étape de compilation du programme java, et le type de données de la variable i est en cours de compilation L'étape est de type int, alors cette variable est toujours de type int jusqu'à la libération finale de la mémoire, et elle ne peut pas être changée en d'autres types
• JavaScript est un langage faiblement typé.
  JavaScript n'existe pas au stade de la compilation. Une variable peut être affectée à volonté et tout type de valeur peut être affecté. Le type de la variable est déterminé par le type de la valeur affectée, donc la déclaration des variables utilise "var"
• Par exemple (comment déclarer une variable en JavaScript):

 var i=1;（此时变量类型是整型）
 var i=3.14;（此时的变量名是浮点型）
 var i`=‘abc’;（此时变量的类型是字符串）

• Dans JS, lorsqu'une variable n'est pas affectée manuellement, le système prend par défaut undefined (undefined ici est une valeur spécifique au lieu d'une chaîne. L'accès à une variable sans définition / déclaration signalera une erreur de syntaxe: "variable ”N'est pas défini.

Types de variables

• indéfini
• nombre
  comprend des entiers, des décimales, des nombres positifs, des nombres négatifs, pas des nombres, l'infini
• Des deux côtés de la chaîne
  "+", tant que l'un d'eux est une chaîne, "+" effectuera l'opération de concaténation de chaîne
  . Le résultat de 10/3 = 3.333333 (langage faiblement tapé)
• booléen
  n'a que deux valeurs, true et false
• objet
• sous-classe d'objets
• NaN
  est une valeur spécifique, ce qui signifie que ce n'est pas un nombre "Pas un nombre", le nombre singulier est de type nombre
• Variables globales Les variables
  déclarées en dehors du corps de la fonction appartiennent à des variables globales. La période de déclaration des variables globales est:
  déclarée à l'ouverture du navigateur et détruite à la fermeture du navigateur. Essayez de les utiliser le moins possible, car les variables globales seront toujours dans la mémoire du navigateur et consommeront Espace mémoire. Peut utiliser autant que possible des variables locales
• variables locales
  variables déclarées dans le corps de la fonction comprend un paramètre fonction appartient à une variable locale
  cycle de vie des variables locales sont: l' espace mémoire, de variables locales ouverte lorsque la fonction commence l' exécution, après que la fonction a été exécutée, un espace de mémoire variable locale libéré
  partielle Le cycle de vie de la variable est relativement court.
  Dans une fonction, si la variable locale et la variable globale ont le même nom, la variable locale est appelée en utilisant le "principe de proximité"; la variable globale est appelée en dehors du corps de la fonction (car la variable locale a été détruite à ce moment-là )
  Lorsqu'une variable est déclarée sans le mot clé var, peu importe où la variable est déclarée, il s'agit d'une variable globale

//举个例子
function myfun（）{
	name = "wangwu"
}
//访问函数
myfun();
alert("name="+name);//name=wangwu

2. Identifiants et mots-clés dans js

• Les règles et spécifications de nommage des identifiants sont implémentées conformément à Java
• Les mots-clés n'ont pas besoin d'être mémorisés

3. Commentaires en js

• Commentaire sur une seule ligne:

//单行注释

/*
多行注释1
多行注释2
*/

4. Fonctions en JavaScript

1. Comment la fonction est définie

• Équivalent à la méthode du langage Java, la fonction est également un morceau de code qui est délibérément réutilisé. Les fonctions remplissent généralement délibérément une fonction spécifique
• Comme il s'agit d'un langage faiblement typé, il n'est pas nécessaire de spécifier le type de valeur de retour, quelle que soit la classe renvoyée
• Il existe deux façons de définir des fonctions

第一种方式：
	function 函数名（形式参数列表）{
				函数体；
		}
第二种方式：
	函数名 = function （形式参数列表）{
				函数体；
		}
//其中，形式参数可以由也可以没有
//可以传指定的参数个数，也可以不传指定的参数个数

• La fonction doit être appelée pour exécuter la
  méthode appelante:

函数名（实际参数）；

• Il n'y a pas de mécanisme de surcharge pour les fonctions dans js
• En java, la
  surcharge repose sur la différence de type et de nombre de paramètres pour obtenir une surcharge
• Dans js,
  js est un langage faiblement typé. Le type du paramètre de fonction n'est pas défini artificiellement, mais est déterminé par le type du paramètre lui-même, il ne peut donc pas distinguer les différentes fonctions par le nombre et le type de paramètres comme Java Implémenter la surcharge
  Si deux fonctions ont le même nom, la fonction derrière remplacera la fonction ci-dessus

2. Opérateurs et fonctions spéciaux

Boîte d'avertissement

• Utilisation
• alerte (massage), utilisée pour saisir des informations d'avertissement

Boîte d'invite

• Utilisation
• confirmer (massage), utilisé pour permettre à l'utilisateur de confirmer l'opération

Boîte de confirmation

• prompt ("prompt information", "default"), utilisé pour afficher les informations de confirmation

//示例
<!--三种消息对话框-->
    <script type="text/javascript">
        //alter(massage)
        alert("这是警告框，用于输出警告信息")

        function show_confirm(){
            //confirm(massage)
            var tf=confirm("请选择确认按钮！")
            if(tf==true){
                alert("您按了确认按钮")
            }else{
                alert("您按了取消按钮！")
            }
        }

        function disp_confirm(){
           //prompt("提示信息"，"默认值");
             var name=prompt("请输入您的姓名","李大为");
            if(name!=null && name!=""){
                document.write("您好",+"name")
            }
        }
       
    </script>

    <form action="" method="POST">
        <input type="button" onclick="show_confirm()" value="显示确认框"/>
        <input type="button" onclick="disp_confirm()" value="显示提示框"/>
    </form>

opérateur de frappe

• Utilisation
• alerte (type de nom de variable), vous pouvez obtenir dynamiquement le type de données de la variable pendant la phase d'exécution du programme

- 运算结果是以下6个字符串之一
 “undefined”
 “number”
 “string”
 “boolean”
 “object”
 “function”

//例子
var v1 = 1;
alert(typeof v)//"number"

var v2 = "abc";
alert(typeof v)//"string"

"==" opérateur équivalent

• Utilisation
• (Variable 1 == variable 2), juge uniquement si les valeurs sont égales

"===" opérateur congruent

• Utilisation
• (Variable 1 === Variable 2), pour juger si les valeurs sont égales et si les types de données sont les mêmes

fonction isNaN

• Utilisation
• isNaN (données), le résultat est vrai signifie un nombre, le résultat est faux signifie pas un nombre

fonction parsenInt ()

• Utilisation
• parseInt (données), vous pouvez convertir automatiquement la chaîne en un nombre et prendre des bits entiers

Fonction parseFloat ()

• Utilisation
• parseFloat ("chaîne"), peut convertir automatiquement les chaînes en nombres

Fonction Math.ceil ()

• Utilisation
• Math.ceil (nombre), peut être arrondi

Fonction booléenne ()

• Utilisation
• Booléen (données), vous pouvez convertir un type non booléen en type booléen, vous pouvez également omettre de ne pas écrire, comme

if(3) 相当于 if(Boolean(3))

Chaîne des fonctions couramment utilisées

• longueur
  obtient la longueur de la chaîne
• indexOf
  obtient l'index de la première occurrence de la chaîne spécifiée dans la chaîne actuelle
• lastIndexOf
  Récupère l'index de la dernière occurrence de la chaîne spécifiée dans la chaîne actuelle
• remplacer le
  remplacer
• substr
  intercepter la sous-chaîne
• sous-chaîne d'
  interception sous-chaîne
• toLowerCase
  convertir les minuscules
• toUpperCase
  convertit les majuscules
• 
  chaîne fendue

* Notez la différence entre substr et substring
var str = "avghsdkl"
substr (2,4) -intercept ghsd, y compris str [4]
substring (2,4) -intercept ghs, à l'exclusion de str [4]
*

V. Définition des classes et des objets

1. Définition de classe

Il existe deux façons de définir

第一种方式：
	function 类名（形式参数列表）{
		
		}
第二种方式：
	类名 = function （形式参数列表）{
				
		}

2. Classe d'objets

• C'est une superclasse de tous types, tout type personnalisé, hérite par défaut de Object.
• En incluant l'attribut prototype (couramment utilisé), vous pouvez étendre dynamiquement l'attribut de classe et l'attribut
  constructeur de fonction
• Y compris toString () fonction
  valueOf () fonction
  fonction toLocaleString ()
• La classe définie dans js hérite de Object par défaut, et intègre tous les attributs et fonctions dans la classe Object

3. Création d'objets

new 构造方法名（实参）；//构造方法名和类名一致

//定义一个学生信息函数
function Student(number,name,score){
	this.number = number;
	this.name = name;
	this.score = score;
}

//函数调用
Student(222,"Jack" ,54);

//创建对象(传几个参数都可以)
var stu1 = new Student();
var stu2 = new Student2(544);
var stu3 = new Student(32,"Helen");

var stu = new Student(111,"Rose",65);
//访问对象属性
alter(stu.number);
alter(stu.name);
alter(stu.score);

//访问对象的另一种方法
alert(stu["number"]);
alert(stu["name"]);
alert(stu["score"]);

4. Objets chaîne

Deux façons de créer

• Le premier type: créer directement
  var s = "abc";
• Le deuxième type: utilisez la classe de support interne
  var s2 = new String ("abc"); Il
  convient de noter que String est une classe intégrée qui peut être utilisée directement, et la classe parente de String est Object

//小String（属于原始类型String）
var x = "king";
alter(typeof x);//"string"

//大String（属于Object类型）
var y = new String("abc");
alter(typeof y);//"object"

6. Événements et inscription aux événements en JavaScript

1. Événement

• le flou
  perd le focus

• accent
  obtient le focus

• cliquez sur
  -cliquez

• 
  double clic de la souris dblclick

• touche
  clavier enfoncée

• keyup
  rebond du clavier

• mousedown
  vers le bas de la souris

• mouseover
  mouseover

• mousemove
  souris mouvement

• mouseout
  feuilles souris

• mouseup
  souris vers le haut

• réinitialiser le
  formulaire réinitialiser

• soumettre le
  formulaire

• Modifiez les
  options dans la liste déroulante

• sélectionner le
  texte est sélectionné

• La
  page de chargement est chargée (se produit après le chargement de tous les éléments de la page HTML entière)

2. Inscription à l'événement

Inscrivez-vous directement via le gestionnaire d'événements

• Tout événement correspondra à un descripteur d'événement
• L'attribut de descripteur d'événement existe

Inscrivez-vous avec le code js

Voici des exemples spécifiques des deux méthodes

function hello(){
	alter("事件的注册例子”）；
}
//第一种方法
<input type="button" value="第一种方法" onclick="hello（）"/>
/*
将hello函数注册到按钮上，等待onclick事件发生之后，该函数被浏览器调用，我们称这个为回调函数
回调函数的特点：自己把这个代码写出来了，但是这个函数不是自己负责调用的，由其他程序员负责调用该函数
*/

//第二种方法
<input type="button" value="第二种方法" id="mybtn"/>
<input type="button1" value="第二种方法1" id="mybtn1"/>
//第一步、先获取这个按钮对象
var btn = document.getElementById("mybtn");
//第二步、给按钮对象的onclick属性赋值
btn.onclick = hello;//注意：千万不要加小括号
   						 //这行代码的含义是：将回调函数hello注册到click事件上

//使用匿名事件注册
var btn1 = document.getElementById("mybtn1");
btn1.onclick = function(){
   aleter("使用匿名函数注册事件");
}

Sept expressions régulières