Introduction à JavaScript

Qu'est-ce que JavaScript ?

JavaScript est un langage de script largement utilisé dans le développement de pages Web client (navigateur). Il est utilisé pour ajouter des fonctions dynamiques aux pages Web HTML, telles que répondre à diverses demandes des utilisateurs. Opération etc.

JavaScript est un langage de script basé sur des objets et des événements doté de fonctionnalités de sécurité. Dans la plupart des cas, il est exécuté par un navigateur Web.

JavaScript est une marque déposée de Sun Corporation aux États-Unis. La dernière version de Javascript est actuellement la version 1.9, qui suit la norme ECMA-262 (ECMAScript) d'Ecma International (anciennement l'Association européenne des fabricants d'ordinateurs). Cette version est toujours en développement continu.


Fonctionnalités JavaScript

Langage de script

JavaScript est un langage de script qui utilise de petits segments de programme pour implémenter la programmation. Comme les autres langages de script, JavaScript est un langage interprété qui est traduit ligne par ligne lorsqu'il est exécuté par le navigateur.

Langage basé sur les objets

JavaScript est un langage basé sur les objets et peut également être considéré comme orienté objet. qu'il peut utiliser des objets qu'il a déjà créés. Par conséquent, de nombreuses fonctionnalités peuvent provenir de l’interaction de méthodes d’objets dans un environnement de script avec des scripts.

Simplicité

Écrire du JavaScript est très simple, vous n'avez pas besoin d'installer un environnement de développement spécifique, vous n'en avez besoin que d'un seul Les scripts JavaScript peuvent être écrits à l’aide d’un simple Bloc-notes. Il possède une syntaxe de programme et des structures de langage de base ainsi que des types de données faibles, faciles à apprendre et à utiliser.

Sécurité

JavaScript est un langage de sécurité Il ne permet pas l'accès au disque dur local et ne peut pas enregistrer les données après. en entrant sur le serveur, la modification et la suppression des documents réseau ne sont pas autorisées, et la navigation dans les informations ou l'interaction dynamique ne peuvent être réalisées que via le navigateur, empêchant ainsi efficacement la perte de données.

Dynamique

JavaScript est dynamique, il peut répondre directement aux saisies de l'utilisateur sans passer par le programme du service Web. Il répond aux utilisateurs de manière événementielle. Ce que l'on appelle l'événementiel fait référence à l'action générée par l'exécution d'une certaine opération sur la page Web, appelée « événement » : par exemple, appuyer sur la souris, déplacer la fenêtre, sélectionner le menu, etc. peut être considéré comme des événements. Lorsqu'un événement se produit, il peut provoquer une réponse d'événement JavaScript correspondante.

Multiplateforme

JavaScript est exécuté par le navigateur Web et n'a rien à voir avec l'environnement du système d'exploitation, tant car le navigateur peut fonctionner. Les ordinateurs et les navigateurs prenant en charge JavaScript s'exécuteront correctement.


Écrire directement sur la sortie HTML

<html>
<head>
  <script>
    alert('Hello, world');
  </script>
</head>
<body>
  <p>...</p>
</body>
</html>

Réaction à l'événement

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>
  <button type="button" onclick="alert('你好!')">点我!</button>
</body>
</html>

Changer le contenu HTML

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

Changer l'image HTML

<!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="/images/pic_bulboff.gif";
      }
    else
       {
      element.src="/images/pic_bulbon.gif";
       }
    }
    </script>
    <img id="myimage" onclick="changeImage()"
    src="/images/pic_bulboff.gif" width="100" height="180">
    <p>点击灯泡查看效果</p>
</body>
</html>

Changer le style HTML

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

Valider la saisie

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
    <script type="text/javascript">
    function validate_email(field,alerttxt)
    {
    with (field)
    {
    apos=value.indexOf("@")
    dotpos=value.lastIndexOf(".")
    if (apos<1||dotpos-apos<2) 
     {alert(alerttxt);return false}
    else {return true}
    }
    }
    function validate_form(thisform)
    {
    with (thisform)
    {
    if (validate_email(email,"Not a valid e-mail address!")==false)
     {email.focus();return false}
    }
    }
    </script>
</head>
<body>
    <form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
    Email: <input type="text" name="email" size="30">
    <input type="submit" value="Submit"> 
    </form>
</body>
</html>


Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> function validate_email(field,alerttxt) { with (field) { apos=value.indexOf("@") dotpos=value.lastIndexOf(".") if (apos<1||dotpos-apos<2) {alert(alerttxt);return false} else {return true} } } function validate_form(thisform) { with (thisform) { if (validate_email(email,"Not a valid e-mail address!")==false) {email.focus();return false} } } </script> </head> <body> <form action="submitpage.htm"onsubmit="return validate_form(this);" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body> </html>
soumettreRéinitialiser le code
  • Recommandations de cours
  • Téléchargement du didacticiel