Introduction à JavaScript



JavaScript est le langage de script le plus populaire sur Internet. Ce langage peut être utilisé pour le HTML et le Web, et peut être largement utilisé sur les serveurs, PC, ordinateurs portables, tablettes, smartphones et autres appareils.


JavaScript est un langage de script

JavaScript est un langage de programmation léger.

JavaScript est du code de programmation qui peut être inséré dans des pages HTML.

JavaScript, lorsqu'il est inséré dans une page HTML, peut être exécuté par tous les navigateurs modernes.

JavaScript est facile à apprendre.


Ce que vous apprendrez

Voici les principales choses que vous apprendrez dans ce tutoriel.


JavaScript : écrire directement dans le flux de sortie HTML

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
	
<p>
JavaScript 能够直接写入 HTML 输出流中:
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
</p>
	
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

lamp您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。

JavaScript : Réagir aux événements

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
	
<h1>我的第一个 JavaScript</h1>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击:
</p>
<button type="button" onclick="alert('欢迎!')">点我!</button>
	
</body>
</html>

Exécuter l'instance »

Cliquez sur "Exécuter" Bouton "Exemple" pour visualiser des exemples en ligne

La fonction alert() n'est pas couramment utilisée en JavaScript, mais elle est très pratique pour tester du code. L'événement

onclick n'est qu'un des nombreux événements que vous découvrirez dans ce didacticiel.


JavaScript : Modifier le contenu HTML

Utiliser JavaScript pour traiter le contenu HTML est une fonctionnalité très puissante.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
	
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo");  // 找到元素
	x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Vous verrez souvent document.getElementById("some id"). Cette méthode est définie dans le DOM HTML.

DOM (DocumentObject Model) (Document Object Model) est la norme officielle du W3C pour accéder aux éléments HTML.

Vous découvrirez le HTML DOM dans plusieurs chapitres de ce tutoriel.


JavaScript : Modifier l'image HTML

Cet exemple modifiera dynamiquement la source (src) du HTML <image> :

Exemple

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
	
<script>
function changeImage()
{
	element=document.getElementById('myimage')
	if (element.src.match("bulbon"))
 	{
  		element.src="/upload/course/000/000/009/580432b53cb5d221.gif";
  	}
	else
   {
  		element.src="/upload/course/000/000/009/5804353cb2562758.gif";
   }
}
</script>
<img id="myimage" onclick="changeImage()"
src="/upload/course/000/000/009/580432b53cb5d221.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
	
</body>
</html>

Exécuter l'exemple»

Cliquez sur le bouton "Exécuter l'exemple" pour afficher l'exemple en ligne

JavaScript peut modifier la plupart des attributs de n'importe quel Élément HTML. Et pas seulement des images.


JavaScript : Changer le style HTML

Modifier le style des éléments HTML, qui est une variante de la modification des attributs HTML.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
	
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo") // 找到元素
	x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


JavaScript : Valider la saisie

JavaScript est souvent utilisé pour valider la saisie de l'utilisateur.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
	
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
	var x=document.getElementById("demo").value;
	if(x==""||isNaN(x))
	{
		alert("不是数字");
	}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


Le saviez-vous ?

lampJavaScript et Java sont deux langages complètement différents, à la fois dans leur concept et leur conception supérieure.
lampJavaScript 与 Java 是两种完全不同的语言,无论在概念上还是设计上。
Java(由 Sun 发明)是更复杂的编程语言。

ECMA-262 是 JavaScript 标准的官方名称。

JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中(该浏览器已停止更新),并于 1997 年被 ECMA(一个标准协会)采纳。
Java (inventé par Sun) est un langage de programmation plus complexe.


ECMA-262 est le nom officiel de la norme JavaScript.

<🎜>JavaScript a été inventé par Brendan Eich. Il est apparu dans Netscape en 1995 (le navigateur n'est plus mis à jour) et a été adopté par l'ECMA (une association de normalisation) en 1997.
<🎜><🎜><🎜>