1. Introduction à JavaScript Introduction à la connaissance
Notez que JavaScript est strictement sensible à la casse! ! ! Chaque phrase de code doit être ajoutée avec un point-virgule à la fin;
(1) Comment écrire du code JavaScript
1): Style en ligne: écrivez dans l'étiquette.
<div οnclick = "alert ('Inj 666')"> </div>
2): Style en ligne: écrit dans une paire de balises <head> </head>.
<head> <script> alert ('Inj 666'); </script> </head>
3): Style de lien externe: écrivez-le dans un fichier .js séparé, puis importez-le.
<script src = "01-javascript.js"> </script>
point important:
1. Le format en ligne n'est pas recommandé.
* 2. Par défaut, l'analyse des pages Web s'effectue de haut en bas. Si vous utilisez le style en ligne pour écrire le code js dans le script dans le contenu de la balise head, vous ne pouvez pas manipuler le contenu de la page. Il existe deux solutions, l'une consiste à ajouter window.οnlοad = function ()
{ javascript code; } en dehors du code javascript d'origine
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
<script>
window.onload=function(){ /*等到界面上所有内容都加载完毕，再执行大括号内的东西*/
var oDiv=document.querySelector("div");
var text=oDiv.innerText;
alert(text);
}
</script>
<body>
<div>生活无非是痛苦和美丽</div>
</body>
</html>
3. La troisième solution consiste à écrire le code js dans la dernière position du corps. *
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
<body>
<div>生活无非是痛苦和美丽</div>
<script> /*将代码写在所有代码结束前即body的最后位置*/
var oDiv=document.querySelector("div");
var text=oDiv.innerText;
alert(text);
</script>
</body>
</html>
Notez que l'importation du code js ici équivaut à coller directement le code dans le fichier js à l'emplacement correspondant, donc tout ce qui est requis est le même que le code directement écrit ci-dessus.
De plus, si vous écrivez du code dans la balise script, vous ne pouvez pas appeler le fichier js
(2) Méthodes de sortie communes
1) La forme de la fenêtre pop-up:alerte 、 confirmer 、 invite
Notez que les nombres peuvent être écrits directement, mais les non-nombres doivent être affichés avec des guillemets doubles / simples.
* alerte fenêtre pop-up ordinaire:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
<body>
<script type="text/javascript"> /*将代码写在所有代码结束前即body的最后位置*/
alert("生活无非是痛苦和美丽");
</script>
</body>
</html>
* confirmer la fenêtre pop-up (avec un autre bouton pour annuler):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
<body>
<script type="text/javascript"> /*将代码写在所有代码结束前即body的最后位置*/
confirm("生活无非是痛苦和美丽");
</script>
</body>
</html>
* invite (une zone de saisie supplémentaire est ajoutée):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
<body>
<script type="text/javascript"> /*将代码写在所有代码结束前即body的最后位置*/
prompt("生活无非是痛苦和美丽");
</script>
</body>
</html>
2) Sortie sous forme de contenu Web:document.write (contenu)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
<body>
<script type="text/javascript"> /*将代码写在所有代码结束前即body的最后位置*/
document.write("生活无非是痛苦和美丽！");
</script>
</body>
</html>
3) Sortie sous la forme de la console de l'outil de développement:console.log (contenu)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
<body>
<script type="text/javascript"> /*将代码写在所有代码结束前即body的最后位置*/
console.log("生活无非是痛苦和美丽！");
console.log(123);
console.warn("错误输出");
</script>
</body>
</html>
2. Syntaxe de base JavaScript
1. Constantes, variables, constantes booléennes
Constante: données non modifiables
*Constante entière： 6… *
Véritable constante: Toute décimale.
Constante de chaîne: Caractères entre guillemets simples ou doubles. 'a' est aussi une chaîne
Constante booléenne: Il n'y a que deux valeurs, vrai (vrai) et faux (faux)
Constante personnalisée(Const constante fixe): Format ----- const nom de la constante = valeur constante;
b. Variables: indiquent les données qui peuvent être modifiées
Définissez des variables:var nom de la variable;
== Utiliser la variable: == Stocker les données dans l'espace mémoire acquis. ----- Nom de la variable = Données à stocker == Récupérer les données
stockées dans la variable: == Utilisez simplement le nom de la variable directement.
Ajout de variables:
Modifiez directement la variable et attribuez-la à nouveau.
S'il n'est pas initialisé, undefined var num est stocké dans la mémoire;
Il existe également des méthodes d'affectation décrites dans le code suivant, qui est très similaire au langage C
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript基本语法</title>
</head>
<body>
<script type="text/javascript">
const NUM=666; //常量
console.log(NUM);
var name; //变量
name="生活无非是痛苦和美丽";
console.log(name);
var use="独自美丽"; //定义的时候初始化
console.log(use);
var num1,num2,num3; //同时定义多个变量
var val1=1, vla2=2,val=3; //定义的时候同时初始化多个不同而变量。
val1=val2=100; //也可以同时用一个表达式对多个相同值的变量赋值。
name=123; //修改变量，会直接丢弃旧的值，放入新的值。
console.log(name);
var test; //未初始化的变量
console.log(test);
</script>
</body>
</html>
c. Variable booléenne: expression logique
//逻辑短路（与、或）
console.log(11||12||0||-1); //逻辑||遇到真就停止，作为最后结果
console.log(0||13||12||-1);
console.log(11&&12&&0&&-1); //逻辑&&遇到假就停止，作为最后结果
console.log(0&&11&&12&&-1);
d. Variables et constantes de chaîne
2. Structure de données de base: tableau, fonction
(1) Tableau:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js重要数据结构</title>
</head>
<body>
<script type="text/javascript">
//生成数组的三种方式;
var arr1=new Array(6);
arr1[0]="Romantic"; //数组赋值
console.log(arr1);
var arr2=new Array(1,2,3,4,5,6);
console.log(arr2);
var arr3=[1,2,3,4,5,6];
console.log(arr3);
</script>
</body>
</html>
(2) Fonction:
a. Le format de création d'une fonction statique: (la syntaxe de base est presque la même que celle du langage C)
function 函数名（形参1，形参2，...）{
函数体；
（return 返回值) //可有可无;
}
par exemple:
//函数
function max(a,b){
var max_a_b;
max_a_b= a>=b? a:b;
return max_a_b;
}
var a=10,b=5;
var max_a_b;
max_a_b=max(a,b);
console.log(max_a_b);
b. Les méthodes pour appeler la fonction sont les suivantes:
var myVar=函数名;
myVar(实际参数...);
par exemple:
var fun1=max;
console.log(fun1(2,100));
c. Il y a une variable d'arguments intégrée à l'intérieur de la fonction pour accéder à tous les paramètres passés dans la fonction
Remarque: La liste des paramètres d'une fonction peut être n'importe quel nombre et le type de données peut être n'importe quel type. Les fonctions JavaScript prennent naturellement en charge les paramètres variables. JavaScript a une variable d'arguments qui peut accéder à tous les paramètres passés à la fonction.
<script type="text/javascript">
/*add函数是一个参数可变的函数*/
function add(){
var result=0;
for(var i=0;i<arguments.length;i++){
//alert(arguments[i]);
result+=arguments[i];
}
return result;
}
alert("add(1,2,3)="+add(1,2,3));//调用add函数时传入3个参数
alert("add(1,2,3,4,5,6)="+add(1,2,3,4,5,6));//调用add函数时传入6个参数
alert("add()="+add());//调用add函数时不传入参数
alert("add(1,\"HelloWorld\")="+add(1,"HelloWorld"));//调用add函数时传入不同类型的参数
</script>
d. javascript crée des fonctions dynamiques
Le format de base pour créer des fonctions dynamiques: var nom de variable = nouvelle fonction ("paramètre 1", "paramètre 2", "paramètre n", "instruction d'exécution");
Notez qu'il s'agit ici de créer un objet Function, puis d'affecter l'objet au nom de la variable
var sum=new Function("x","y","var sum;sum=x+y;return sum");
alert("sum(3+4)="+sum(3,4));
等价于静态函数：
function square (x,y){
var sum;
sum = x+y;
return sum;
}
e. La différence entre la fonction statique et la fonction dynamique:
Nous pouvons voir que chaque phrase est entourée de guillemets "x", "y" et "var sum; sum = x + y ;; return sum;". Ils sont tous deux entourés de guillemets, ce qui signifie que chaque instruction dans les parenthèses après la nouvelle fonction sont entourées de guillemets, ce qui signifie qu'elles sont toutes exprimées et appelées sous forme de chaînes, et les chaînes peuvent être définies ou modifiées par des variables, c'est-à-dire que nous pouvons définir des variables de sorte que la valeur de la variable est égale à ces chaînes:
<script type="text/javascript">
var a = "var sum;";
var b = "sum = x + y;";
var c = "return sum;";
var square = new Function ( "x", "y", a+b+c);
alert(square (2,3));
</script>
Ici, on a défini les variables a, b, c, on laisse a = "var sum;", let b = "sum = x + y;", let c = "return sum;"
这样 ： var square = new Function («x», «y», «var sum; sum = x + y; return sum;»);
1) On peut écrire: var square = new Function ("x", "y", a + b + c); Puisque a, b et c sont trois chaînes, l'ajout de chaînes est toujours une chaîne.
2) Pourquoi divisons-nous le code en petits morceaux de code? , L'avantage de diviser une chaîne en plusieurs chaînes indépendantes est que l'on peut changer la fonction de la fonction à tout moment en modifiant certaines chaînes.
<script type="text/javascript">
var a = "var sum;";
var b = "sum = x + y;";
var c = "return sum;";
var square = new Function ( "x", "y", a+b+c);
alert(square (2,3));
b = "sum = x -y;";//就可以将函数的功能改成减法运算
square = new Function ( " x", "y",a+b+c);
alert(square (2,3));
</script>
Lors de l'exécution du programme, nous changeons b = "sum = x + y;"; en "sum = xy;"; de cette manière, nous mettons la variable modifiée b dans var square = new Function ("X" , "y", a + b + c); in, then ("x", "y", "var sum; sum = x + y; return sum;"); devient: ("x", "y" , "var sum; sum = xy; return sum;"); On met les paramètres 2 et 3 passés à cette fonction dynamique, cela devient 2-3, et le résultat est -1.
f. Fonction anonyme:
var f1 = function(i1, i2) { //方法一
return i1 + i2;
}
alert(function(i1, i2) { return i1 + i2; }(10,10)); //方法二
alert(f1(1,2));
L'utilisation de ce type de fonction anonyme est très répandue dans JQuery, déclarez directement une fonction anonyme et utilisez-la immédiatement. L'avantage d'utiliser des fonctions anonymes est que cela évite d'avoir à définir une fonction qui n'est pas utilisée une seule fois et évite le problème des conflits de noms. Il n'y a pas de concept d'espace de noms dans js, il est donc facile d'entrer en conflit avec les noms de fonctions. Une fois les conflits de dénomination, la déclaration finale prévaudra.
Remarque: JavaScript ne prend pas en charge la surcharge de fonctions. JavaScript ne dit pas qu'il n'y a pas de surcharge de méthode. Si deux méthodes ont le même nom, même si le nombre de paramètres est différent, la définition ultérieure remplacera la définition précédente. Lorsque la méthode est appelé, il est toujours défini après l'appel.
(3) c.Math (objet mathématique):
Math.abs (...) ------> Prendre la valeur absolue
Math.celi (...) ------> Arrondir
Math.floor (...) ------ > Arrondir
Math .round (...) ------> Arrondir au nombre entier le plus proche
Math.max (a, b, c, ...) ------> Prendre la valeur maximale de nombres multiples
Math.min (a, b, c, ...) ------> Prendre la valeur min de plusieurs nombres
Math.sin (Math.PI / 6) -> Trouver la valeur sinSimilaire à d'autres cos ()
(4) Objet tableau Array
(1) arr1.concat (arr2);
épissage de tableau, le résultat est l'épissage de arr2 à la fin de arr1;
(2) arr.join ();
sortie de chaîne de tableau, le symbole de connexion d'élément peut être spécifié entre parenthèses;
eg:
arr=["a","b","c","d"];
console.log(arr.join("|")); (结果为"a|b|c|d")
(3) arr.pop ();
coupe le dernier élément du tableau, et la valeur de retour est cet élément;
(4) arr.slice (start, end)
1) Get, récupère le fragment spécifié du tableau, start doit avoir, si le paramètre est négatif, sélectionnez à partir de la fin;
2) La valeur de retour est un nouveau tableau composé du fragment;
(5) arr.push
1) Add, utilisé pour ajouter un nouvel élément à la fin du tableau, le paramètre peut être multiple;
2) La valeur de retour est la nouvelle longueur du tableau;
(6) arr.splice
1) est utilisé pour ajouter des éléments à l'index spécifié dans le tableau;
arr.splice (2, 0, «William», «asdfasdf»);
à partir du deuxième élément, le nombre d'éléments à être supprimé (vous pouvez 0, de 0 à la fin), ajouter des éléments comme "William", "asdfasdf";
2) Utilisé pour remplacer les éléments du tableau;
arr.splice (2,1, "William");
3) Utilisé pour supprimer les éléments du tableau;
arr.splice (2,2);
(7) arr.indexOf (élément);
rechercher, trouver un élément dans le tableau, la valeur de retour est l'index, s'il n'y a pas de tel élément, retourner -1;
(8) arr.sort (fonction);
trier, la fonction est une fonction;
eg:
function sortNumber(a,b){
return a-b;
}
arr.sort(sortNumber);(从小到大排序)
tips：如果a-b改成b-a，那么执行的操作为从大到小；
tips:字符串对象（String）的方法与Array的方法类似；
(4) Objet date date
date.getTime ()
date.getMilliseconds ()
date.getSeconds ()
date.getMinutes ()
date.getHours ()
date.getDay ()
date.getDate ()
date.getMonth ()
date.getFullYear ()
var time=new Date();
alert(time);
var year=time.getFullYear();
var month=time.getMonth();
var day=time.getDay();
alert(year+"-"+month+'-'+day);
astuces: beaucoup, consultez la documentation
(4) Objet chaîne
charAt (index)
str [index] Récupère le caractère à la position spécifiée de la chaîne
concat () concatenating string
slice (start, end) / substring (start, end) intercepte les caractères commençant par le début et se terminant à la fin, et renvoie une nouvelle chaîne. Si start est un nombre négatif, alors commencez au dernier caractère;
substr (start, length) intercepte les caractères à partir de start et length length pour obtenir une nouvelle chaîne
indexOf (char) Récupère la première position du caractère spécifié dans la chaîne
lastIndexOf (char) Récupère la dernière position du caractère spécifié dans la chaîne
trim () supprime l'espace blanc avant et après la chaîne
toUpperCase ()
toLocaleUpperCase () convertit en majuscules
toLowerCase ()
toLocaleLowerCawse () convertit en minuscules
replace () remplace le caractère
split () divise la chaîne en un tableau