Annuaire d'articles
1. Introduction
JavaScript est souvent appelé js ou js script
-
Concepts :
1. Langage de script interprété (le code n'est pas précompilé)
2. Langage de programmation léger
3. Code de programmation pouvant être inséré dans des pages HTML
(exécuté par tous les navigateurs modernes après avoir été inséré dans des pages HTML) -
Fonction :
ajoutez des fonctions dynamiques aux pages Web
pour offrir aux utilisateurs des effets de navigation plus fluides et plus esthétiques.
Habituellement, les scripts JavaScript implémentent leurs fonctions en les intégrant dans HTML
2. Commentaires
Identique aux commentaires Java sur une seule ligne et sur plusieurs lignes
Commentaires sur une seule ligne : commencez par //
Commentaires sur plusieurs lignes : commencez par /* et terminez par */
3. Utilisation
Il en existe trois sortes
1. js dans la page HTML
Doit être entre les balises de bloc de script
Les exigences du poste ne sont pas strictes (vous pouvez mettre la tête, le corps et le dernier, généralement la tête ou le dernier)
Doit être entre les balises de bloc de script
Exemple de code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js位置1</title>
<!--
内部:js位置没有严格的要求
-->
<!--写在head-->
<script>
alert("hello script111!")
</script>
</head>
<body>
<!--写在body-->
<script>
alert("hello script222!")
</script>
</body>
</html>
<!--写在最后-->
<script>
alert("hello script333!")
</script>
2. JS externes
Les scripts peuvent être enregistrés dans des fichiers externes. L'extension des fichiers JavaScript externes est .js.
1. Écrivez des fichiers .js en externe
function fun1(){
alert("这是js外部文件");
}
2. Présentez les fichiers js (tête ou corps)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js位置2</title>
<!--
外部:写在js文件中,外部文件不需要script标签
引入外部script文件
调用script文件
-->
<script type="text/javascript" src="../../js/myScript.js" ></script>
<script>
fun1();
</script>
</head>
<body>
</body>
</html>
3. js dans les attributs de la balise
Directement écrit dans certains attributs des balises HTML pour écrire du code JavaScript simple
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js位置3</title>
</head>
<body>
<!--
行内的js写法
-->
<a href="javascript:alert('行内的js写法')">行内的js写法</a>
</body>
</html>
4. Afficher les données
① Boîte contextuelle window.alert()
- window peut être omise, ce qui équivaut à alert("contenu affiché");
② document.write() écrit le contenu
- document.write("contenu affiché")
③ écriture innerHTML
- document.getElementById("id value").innerHTML="Contenu affiché"
Puisque le chargement s'effectue de haut en bas, la valeur id doit être chargée en premier, le script est donc placé en bas du document
④ console.log est écrit sur la console du navigateur
- console.log("contenu affiché")
Exemple de code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示数据</title>
<script>
/*
1、使用windows弹出框,弹出数据,两种写法都可以
*/
alert("hello")
window.alert("hello again")
/*
2、使用document,显示数据
*/
document.write("hello document")
/*
3、使用innerHTML写入
加载从上往下,因此先获取div1,此时div1还未加载,因此将script放在文档最下面
*/
//document.getElementById("div1").innerHTML="hello innerHTML"
/*
4、使用console.log写入到浏览器控制台
*/
console.log("hello log")
</script>
</head>
<body>
<div id = "div1">
</div>
</body>
</html>
<!--
3、使用innerHTML写入
加载从上往下,因此先获取div1,此时div1还未加载,因此将script放在文档最下面
-->
<script>
document.getElementById("div1").innerHTML="hello innerHTML!"
</script>
5. Grammaire de base
JavaScript est un langage de script. Le navigateur exécute le code du script ligne par ligne lors de la lecture du code (l'instruction js envoie des commandes au navigateur pour lui indiquer quoi faire)
- Conseils :
En règle générale, n'écrivez qu'une seule déclaration par ligne et écrivez un point-virgule à la fin de chaque phrase.
5.1 Variables
5.1.1 Syntaxe de base
Mots-clés : var
Utilisez uniformément var pour la déclaration de variable, et le type de données de la variable est déterminé en fonction de l'affectation.
-
Déclarez les variables :
var nom de la variable ; -
Règles de dénomination :
1. Les variables doivent commencer par une lettre
2. Les variables peuvent également commencer par les symboles $ et _
3. Les noms de variables sont sensibles à la casse (y et Y sont des variables différentes)
4. Les mots réservés aux mots-clés ne peuvent pas être utilisés -
Convention de dénomination :
1. Connaissez la signification lorsque vous voyez le nom et nommez-le en fonction de la signification de la variable.
2. Nommage en cas de chameau, la première lettre du premier mot est en minuscule et la première lettre de chaque mot suivant est capitalisé.
Exemple de code :
var myCompany; //声明变量
myCompany='alibaba'; //赋值
var x=5;//声明的同时赋值
var y=6;
var z=x+y;//变量也可以存储表达式
5.1.2 Portée
- Les variables locales
sont des variables déclarées dans une fonction et ne peuvent être utilisées qu'à l'intérieur de la fonction. - Les variables globales
sont des variables déclarées en dehors de la fonction et accessibles par tous les scripts et fonctions.
5.1.3 Cycle de vie
La durée de vie d'une variable commence lorsqu'elle est déclarée
Les variables locales seront supprimées après l'exécution de la fonction et les variables globales seront supprimées après la fermeture de la page.
5.2 Types de données
5.2.1 Types de données de base
Chaîne
variable pour stocker les caractères
Les chaînes doivent utiliser des guillemets simples ou doubles
- Conseils :
Lors de l'imbrication, les guillemets simples sont imbriqués dans des guillemets doubles ou les guillemets doubles sont imbriqués dans des guillemets simples.
Exemple de code :
var myCompany="alibaba";
//引号嵌套,单引号嵌套双引号or双引号嵌套单引号
var demo1='字符串中嵌套"字符串"。';
var demo2="字符串中嵌套'字符串'。";
NuméroNuméro
Il n'existe qu'un seul type numérique pouvant représenter à la fois des nombres à virgule flottante et des nombres entiers.
Exemple de code :
var intValue=11;
var floatValue=11.1;
//极大或极小的数字可以通过科学计数法来书写:
var demo1=666e5; //66600000
var demo2=-666e-5; //-0.00666
Booléen
vrai ou faux
Exemple de code :
var f1=true;
var f2=false;
Nul
Indique que la valeur est vide
Effacez la variable en définissant sa valeur sur null
var isNULL=null;
Indéfini indéfini
Indique que la variable ne contient pas de valeur
Il y a 4 situations dans lesquelles undéfini apparaîtra
① Déclaration de variable sans affectation
var obj;
alert(obj);//obj值为undefined
② Obtenez les attributs qui n'existent pas dans l'objet
var obj;
alert(obj.name);//报错信息: "Uncaught TypeError: Cannot read property 'name' of
undefined"
③ La fonction nécessite des paramètres réels, mais aucune valeur n'est transmise lors de l'appel
À l'heure actuelle, le paramètre formel n'est pas défini
④ L'appel de fonction ne renvoie pas de valeur ou il n'y a aucune donnée après le retour.
À l’heure actuelle, la variable renvoyée par la fonction réceptrice n’est pas définie.
Exemple de code :
function printNum(num){
alert(num);
}
var result=printNum();//调用函数未传递参数,执行函数的时候num的值是undefined
alert(result);//result的值也是undefined,因为printNum()没有返回值
Symbole
Représente une valeur unique
5.2.2 Types de données de référence
Objet Objet
TableauTableau
Fonction
5.2.3 Saisie dynamique (obsolète)
Typage dynamique, c'est-à-dire que la même variable peut être utilisée comme différents types
Exemple de code :
var param; // param类型为 undefined
param = 5; // param 为数字
param = "alibaba"; // param 为字符串
5.3 Opérateurs
- Opérateurs arithmétiques
+, -, *, /, %, ++, - - - Opérateurs d'affectation
=, +=, -=, *=, /=, %= - Caractère de concaténation de chaînes
+ - Opérateurs logiques
&&, ||, ! - Opérateur conditionnel
? : - Opérateurs de comparaison
==, !=, >, <, >=, <=
=== : égalité absolue (les valeurs et les types sont égaux)
!== : pas d'égalité absolue (une ou deux des valeurs et les types ne sont pas égaux) ne sont pas égaux)
Exemple de code :
var x=5;
var f=(x===5); // true
f=(x==='5');// false
f=(x!==5); // false
f=(x!=='5');// true
5.4 Objets
5.4.1 Objets communs
Chaîne
.length peut obtenir la longueur d'une chaîne (la longueur est un attribut, pas une méthode, il n'est donc pas nécessaire d'ajouter () lors de l'appel)
La longueur du symbole de transfert compte pour un, c'est-à-dire que la longueur de \' est 1
méthode:
méthode | décrire |
---|---|
charAt() | Renvoie le caractère à la position spécifiée |
charCodeAt() | Renvoie l'encodage Unicode du caractère à la position spécifiée |
concaténer() | Concatène deux chaînes ou plus et renvoie une nouvelle chaîne |
deCharCode() | Convertir le codage Unicode en caractères |
Indice de() | Renvoie la première occurrence d'une valeur de chaîne spécifiée dans une chaîne |
inclut() | Recherche si une chaîne contient une sous-chaîne spécifiée |
dernierIndexOf() | Rechercher la chaîne de l'arrière vers l'avant et renvoyer la dernière occurrence de la chaîne en commençant par la position de départ (0) |
correspondre() | Rechercher trouve une correspondance d'une ou plusieurs expressions régulières |
répéter() | Copie une chaîne un nombre spécifié de fois, les concatène ensemble et renvoie |
remplacer() | Rechercher une sous-chaîne correspondante dans une chaîne et remplacer la sous-chaîne correspondant à une expression régulière |
recherche() | Rechercher des valeurs correspondant à une expression régulière |
tranche() | Extrait un fragment d'une chaîne et renvoie la partie extraite dans une nouvelle chaîne |
diviser() | Diviser la chaîne en tableau de chaînes |
commence avec() | Vérifier si une chaîne commence par une sous-chaîne spécifiée |
sousstr() | Extrait un nombre spécifié de caractères d'une chaîne à partir du numéro d'index de départ |
sous-chaîne() | Extraire les caractères entre deux numéros d'index spécifiés dans une chaîne |
versMinuscule() | Convertir la chaîne en minuscule |
versUpperCase() | Convertir la chaîne en majuscule |
garniture() | Supprimer les espaces des deux côtés de la chaîne |
toLocaleLowerCase() | Convertir une chaîne en minuscules selon les paramètres régionaux de l'hôte local |
toLocaleUpperCase() | Convertir une chaîne en majuscules en fonction des paramètres régionaux de l'hôte local |
valeur de() | Renvoie la valeur originale d'un objet chaîne |
àChaîne() | Renvoie une chaîne |
Tableau
Tableau, utilisé pour stocker plusieurs valeurs dans une variable
.length peut obtenir la longueur du tableau
Trois façons:
//方法一
var letters = new Array();
for(var i = 0; i < 4; i++) {
letters[i] = "letter" + i;
}
for(var i = 0; i < letters.length; i++) {
document.write(letters[i] + "<br/>");
}
//方法二
var numbers = [1,2,3,4,5];
for(var i = 0; i < numbers.length; i++) {
document.write(numbers[i] + "<br/>");
}
//方法三
var classes = new Array("class1","class2","class3");
for(var i = 0; i < classes.length; i++) {
document.write(classes[i] + "<br/>");
}
méthode:
méthode | décrire |
---|---|
concaténer() | Concatène deux tableaux ou plus et renvoie le résultat |
copierDans() | Copie un élément d'une position spécifiée dans un tableau vers une autre position spécifiée dans un tableau |
entrées() | Renvoie un objet itérable d'un tableau |
chaque() | Vérifiez si chaque élément des éléments numériques répond à la condition |
remplir() | Remplir un tableau avec une valeur fixe |
filtre() | Détecter les éléments numériques et renvoyer un tableau de tous les éléments qui répondent aux critères |
trouver() | Renvoie les éléments du tableau qui correspondent aux conditions passées dans le test (fonction) |
trouverIndex() | Renvoie l'index de l'élément du tableau qui répond aux critères passés dans le test (fonction) |
pour chaque() | La fonction de rappel est exécutée une fois pour chaque élément du tableau |
depuis() | Créer un tableau à partir des objets donnés |
inclut() | Déterminer si un tableau contient une valeur spécifiée |
Indice de() | Recherche un élément dans un tableau et renvoie sa position |
estArray() | Déterminer si l'objet est un tableau |
rejoindre() | Mettre tous les éléments d'un tableau dans une chaîne |
clés() | Renvoie un objet itérable du tableau contenant les clés du tableau d'origine |
dernierIndexOf() | Recherche un élément dans un tableau et renvoie sa dernière occurrence |
carte() | Traitez chaque élément du tableau via la fonction spécifiée et renvoyez le tableau traité |
populaire() | Supprime le dernier élément d'un tableau et renvoie l'élément supprimé |
pousser() | Ajoute un ou plusieurs éléments à la fin d'un tableau et renvoie la nouvelle longueur |
réduire() | Compter les éléments du tableau dans une valeur (de gauche à droite) |
réduireDroite() | Compter les éléments du tableau dans une valeur (de droite à gauche) |
inverse() | Inverser l'ordre des éléments d'un tableau |
changement() | Supprime et renvoie le premier élément d'un tableau |
tranche() | Sélectionne une partie d'un tableau et renvoie un nouveau tableau |
quelques() | Vérifiez si un élément du tableau répond à la condition spécifiée |
trier() | Trier les éléments d'un tableau |
épissure() | Ajouter ou supprimer des éléments d'un tableau |
àChaîne() | Convertir un tableau en chaîne et renvoyer le résultat |
décaler() | Ajoute un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur |
valeur de() | Renvoie la valeur originale de l'objet tableau |
Date
Créer un objet date :
//返回当前日期
var date1 = new Date();
//milliseconds:1970-1-1~现在的毫秒数
var date2 = new Date(milliseconds);
//符合日期类型的字符串(年月日-时分秒)
var date3 = new Date(dateString);
//月份取值为0~11,周日~周六取值为0~6
var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);
Méthodes couramment utilisées :
méthode | décrire |
---|---|
avoir un rendez-vous() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
getFullYear() | 从 Date 对象以四位数字返回年份。 |
getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
setDate() | 设置 Date 对象中月的某一天 (1 ~ 31)。 |
setFullYear() | 设置 Date 对象中的年份(四位数字)。 |
setHours() | 设置 Date 对象中的小时 (0 ~ 23)。 |
setMinutes() | 设置 Date 对象中的分钟 (0 ~ 59)。 |
setMonth() | 设置 Date 对象中月份 (0 ~ 11)。 |
setSeconds() | 设置 Date 对象中的秒钟 (0 ~ 59)。 |
其他方法:
方法 | 描述 |
---|---|
getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
getTimezoneOffset() | 返回本地时间与格林威治标准时间 (GMT) 的分钟差。 |
getUTCDate() | 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。 |
getUTCDay() | 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。 |
getUTCFullYear() | 根据世界时从 Date 对象返回四位数的年份。 |
getUTCHours() | 根据世界时返回 Date 对象的小时 (0 ~ 23)。 |
getUTCMilliseconds() | 根据世界时返回 Date 对象的毫秒(0 ~ 999)。 |
getUTCMinutes() | 根据世界时返回 Date 对象的分钟 (0 ~ 59)。 |
getUTCMonth() | 根据世界时从 Date 对象返回月份 (0 ~ 11)。 |
getUTCSeconds() | 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。 |
getYear() | 已废弃。 请使用 getFullYear() 方法代替。 |
parse() | 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。 |
setMilliseconds() | 设置 Date 对象中的毫秒 (0 ~ 999)。 |
setTime() | setTime() 方法以毫秒设置 Date 对象。 |
setUTCDate() | 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。 |
setUTCFullYear() | 根据世界时设置 Date 对象中的年份(四位数字)。 |
setUTCHours() | 根据世界时设置 Date 对象中的小时 (0 ~ 23)。 |
setUTCMilliseconds() | 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。 |
setUTCMinutes() | 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。 |
setUTCMonth() | 根据世界时设置 Date 对象中的月份 (0 ~ 11)。 |
setUTCSeconds() | setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。 |
setYear() | 已废弃。请使用 setFullYear() 方法代替。 |
toDateString() | 把 Date 对象的日期部分转换为字符串。 |
toGMTString() | 已废弃。请使用 toUTCString() 方法代替。 |
toISOString() | 使用 ISO 标准返回字符串的日期格式。 |
toJSON() | 以 JSON 数据格式返回日期字符串。 |
toLocaleDateString() | 根据本地时间格式,把 Date 对象的日期部分转换为字符串。 |
toLocaleTimeString() | 根据本地时间格式,把 Date 对象的时间部分转换为字符串。 |
toLocaleString() | 根据本地时间格式,把 Date 对象转换为字符串。 |
toString() | 把 Date 对象转换为字符串。 |
toTimeString() | 把 Date 对象的时间部分转换为字符串。 |
toUTCString() | 根据世界时,把 Date 对象转换为字符串。实例: var today = new Date(); var UTCstring = today.toUTCString(); |
UTC() | 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。 |
valueOf() | 返回 Date 对象的原始值。 |
Math
属性:
属性 | 描述 |
---|---|
E | 返回算术常量 e,即自然对数的底数(约等于2.718) |
LN2 | 返回 2 的自然对数(约等于0.693) |
LN10 | 返回 10 的自然对数(约等于2.302) |
LOG2E | 返回以 2 为底的 e 的对数(约等于 1.4426950408889634) |
LOG10E | 返回以 10 为底的 e 的对数(约等于0.434) |
PI | 返回圆周率(约等于3.14159) |
SQRT1_2 | 返回 2 的平方根的倒数(约等于 0.707) |
SQRT2 | 返回 2 的平方根(约等于 1.414) |
常用方法:
方法 | 描述 |
---|---|
ceil(x) | 对数进行上舍入 |
floor(x) | 对 x 进行下舍入 |
round(x) | 四舍五入 |
pow(x,y) | 返回 x 的 y 次幂 |
max(x,y,z,…,n) | 返回 x,y,z,…,n 中的最高值 |
min(x,y,z,…,n) | 返回 x,y,z,…,n中的最低值 |
random() | 返回 0 ~ 1 之间的随机数 |
其他方法:
方法 | 描述 |
---|---|
abs(x) | 返回 x 的绝对值 |
acos(x) | 返回 x 的反余弦值 |
asin(x) | 返回 x 的反正弦值 |
atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值 |
atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间) |
cos(x) | 返回数的余弦 |
exp(x) | 返回 Ex 的指数 |
log(x) | 返回数的自然对数(底为e) |
sin(x) | 返回数的正弦 |
sqrt(x) | 返回数的平方根 |
tan(x) | 返回角的正切 |
5.4.2 自定义对象
对象是变量的容器,里面可以定义多个变量
定义
-
定义属性:
变量以键值对形式进行存储(name : value)
不同属性以逗号分隔,可换行可不换行 -
定义方法:
方法名称后面直接跟function
代码示例:
var people = {
name:"SelcouthAI",age:20,codeYear:"1年"};
var student = {
name:"SelcouthAI",
age:20,
//方法后面直接跟function
job:function(){
alert("正在被包工头支配的新生代农民工");
}
}
调用
-
调用属性
第一种方式:类名.属性名
第二种方式:类名[“属性名”] -
调用方法
类名.方法
代码示例:
var name = people.name;
document.write("name:"+name);
var age = people["age"];
document.write("age:"+age);
student.job();
5.5 函数
5.5.1 常用全局函数
isNaN(param)
- tips:
全局属性NaN:非数值(Not a Number)
用于检查其参数是否是非数字值,不是数值返回true
代码示例:
console.log(isNaN(666));//false
console.log(isNaN(6+66));//false
console.log(isNaN("hello"));//true
parseFloat(String)
解析字符串,并返回一个浮点数
- tips:
只返回字符串中第一个数字,开头和结尾允许空格
如果字符串的第一个非空字符不能被转换为数字,则返回 NaN
代码示例:
console.log(parseFloat("66"));//66
console.log(parseFloat("666.66"));//666.66
console.log(parseFloat("1024 2048 4096"));//1024
console.log(parseFloat(" 666 "));//666
console.log(parseFloat("1年"));//1
console.log(parseFloat("码龄1年"));//NaN
parseInt(string,radix)
解析一个字符串,返回整数
string :必要参数,被解析的字符串
radix :表示要解析的数字的基数( 2 ~ 36 )
-
当参数 radix 的值为 0或没有设置参数时,根据 string 来判断数字的基数:
“0x” 开头,其余部分解析为十六进制的整数
以 0 开头,其余部分解析为八进制或十六进制的数字
以 1 ~ 9 开头,解析为十进制的整数 -
tips:
只返回字符串中第一个数字,开头和结尾允许空格
如果字符串的第一个非空字符不能被转换为数字,则返回 NaN
代码示例:
console.log(parseInt("66"));//66
console.log(parseInt("666.6"));//666.6
console.log(parseInt("1024 2048 4096"));//1024
console.log(parseInt("1年"));//1
console.log(parseInt("码龄1年"));//NaN
console.log(parseInt("10",10));//10
console.log(parseInt("010"));//10
console.log(parseInt("10",8));//8
console.log(parseInt("0x10"));//16
console.log(parseInt("10",16));//16
5.5.2 自定义函数
关键字:function
- tips:
不需要声明类型,直接写参数名称
函数是否有返回值取决于函数体中是否有return关键字
返回值的类型取决于return中内容的类型
function 自定义函数名称(参数列表){
...
}
代码示例:
//无参无返回值的函数
function print(){
document.write("无参无返回值的函数");
}
print();
//有参无返回值的函数
function print1(num){
document.write("有参无返回值的函数,参数为" + num);
}
print1(666);
//有参有返回值的函数
function print2(a,b){
document.write("有参有返回值的函数,参数分别为"+a+"和"+b);
return a+b;
}
var sum = print2(1,6);
5.5.3 匿名函数
把函数赋给一个变量,再调用变量
代码示例:
//无参无返回值的函数
var fun = function(){
document.write("无参无返回值的函数");
}
fun();
//有参无返回值的函数
var fun1 = function(num){
document.write("有参无返回值的函数,参数为" + num);
}
fun1(6);
//有参有返回值的函数
var fun2 = function(a,b){
document.write("有参有返回值的函数,参数分别为"+a+"和"+b);
return a+b;
}
var sum = fun2(1,6);
alert(sum);