Notes JavaScript 1-js tutoriel-php.cn

1. Aperçu
JavaScript est un langage de script littéral, un langage basé sur un prototype à typage dynamique, faiblement typé, avec prise en charge intégrée des types. Son interpréteur s'appelle le moteur JavaScript, qui fait partie du navigateur et est largement utilisé dans les langages de script côté client. Il a été utilisé pour la première fois sur les pages Web HTML (une application sous Standard Universal Markup Language) pour ajouter des fonctions dynamiques aux pages Web HTML. .
Les programmeurs JavaScript l'appellent souvent js ;
Caractéristiques :
1 : Un langage de script qui doit s'appuyer sur HTML pour s'exécuter ;
2 : Aucune compilation n'est requise, il est directement interprété et exécuté par le navigateur
3 : Langage faiblement typé, lors de la définition ; variables, non Spécifiez un type de données clair et le type de données de la variable est entièrement déterminé par la valeur ;
4 : javaScript est basé sur des objets et possède de nombreux objets intégrés ;

5. JavaScript est strictement sensible à la casse. Si la casse est incorrecte, le programme signalera une erreur ou s'exécutera anormalement

2.Composition
Il se compose principalement de trois parties : ECMAScript/DOM/BOM
1. ECMAScript décrit la syntaxe et les objets de base du langage.
2. Document Object Model (DOM), qui décrit les méthodes et interfaces de traitement du contenu Web.
3. Browser Object Model (BOM), décrit les méthodes et les interfaces pour interagir avec le navigateur.

3. Type de données
Types de données de base :
Non défini : représente une variable qui n'existe pas ;
Nombre : type numérique, y compris les entiers et les décimaux ;
String : chaîne
Boolean :true ; ou false;
Type de données de référence :
Null : représente la valeur par défaut du type de données de référence ;
Objet

4. Opérateurs pris en charge
Opérateurs arithmétiques :

Notes JavaScript 1
Opérateur d'affectation :

Notes JavaScript 1
Opérateur de comparaison :

Notes JavaScript 1
Opérateur logique :

Notes JavaScript 1

5. Grammaire de base
Écriture :
1 : Écrivez le fichier js séparément ;
2 : Utilisez la balise <script></script> n'importe où dans la page html et écrivez le code javascript dans la balise
3 : Dans la balise de début ; , vous pouvez aussi écrire directement une ligne de code javascript
Commentaire : Le format des commentaires sur une seule ligne (//) et des commentaires sur plusieurs lignes (/* */) est cohérent avec Java
; Fonction :
Utiliser le mot-clé function :
Format :
nom de la méthode de fonction (liste de paramètres) {
Code
}
Remarque : 1. La liste des paramètres ne contient que des noms de variables. Aucune donnée. tapez;
2. Lors de l'appel ; quel que soit le nombre de paramètres utilisés lors de la définition de la méthode, n'importe quel nombre de paramètres peut être transmis ; s'il y a plus de paramètres que les paramètres définis, les valeurs suivantes seront perdues ;
Définir les variables :
var nom de la variable = valeur des données (var est corrigé !!)
Déclarations de base :
alerte (variable ou valeur de données) ; valeur d'affichage de la fenêtre contextuelle
Typeof (variable ou valeur de données) ;

6. Conversion des types de données

Autres types de données ---->booléen :
1. Non-0 est vrai, 0 est faux
2. La longueur de la chaîne est 0, fausse, supérieure à 0 est vraie
3. Objet ; existe C'est vrai, s'il n'existe pas, c'est faux
4. Null/indéfini sont tous deux faux
Chaîne --->numéro :
méthode parseInt ;
Cas particuliers de comparaison d'égalité :
1. NaN == NaN, return false
2.2 == true, return fasle Les autres types de données seront convertis en type numérique, puis comparés
.

Seven.Js récupère l'objet tag en html

document.getElementById("valeur de l'attribut id"); (le document est la page html actuelle).
Pour cet objet tag, vous pouvez utiliser le nom d'attribut de la balise pour obtenir la valeur d'attribut correspondante ; les attributs couramment utilisés sont :
value : obtenez la valeur dans la zone de saisie
innerHTML : obtenez le corps de l'élément de la balise. ;
Exemple : (La partie corps du html suivant, l'effet carrousel de trois images)

<span style="color: #008080">  1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">  2</span>      <span style="color: #0000ff"><span style="color: #800000">img</span> <span style="color: #ff0000">src</span>=<span style="color: #0000ff">"img/1.jpg"</span> <span style="color: #ff0000">id</span>=<span style="color: #0000ff">"img"</span> <span style="color: #ff0000">width</span>=<span style="color: #0000ff">"100%"</span> <span style="color: #ff0000">height</span>=<span style="color: #0000ff">"100%"</span><span style="color: #0000ff">></span>
<span style="color: #008080">  3</span>      <span style="color: #0000ff"><span style="color: #800000">script</span> <span style="color: #ff0000">type</span>=<span style="color: #0000ff">"text/javascript"</span><span style="color: #0000ff">></span>
<span style="color: #008080">  4</span>      //设置定时器 JSwindow方法
<span style="color: #008080">  5</span>     setInterval(
<span style="color: #008080">  6</span>          switch1, 500);
<span style="color: #008080">  7</span>      //定义switch函数
<span style="color: #008080">  8</span>     var i = 1;
<span style="color: #008080">  9</span>      function switch1() { //switch为关键字,不可用
<span style="color: #008080"> 10</span>         var pic = document.getElementById("img"); //可以将取到的img标签使用任何变量名(pic)接收
<span style="color: #008080"> 11</span>         pic.src = "img/" + (++i) + ".jpg";
<span style="color: #008080"> 12</span>          if (i == 3) {
<span style="color: #008080"> 13</span>              i = 0;
<span style="color: #008080"> 14</span>          }
<span style="color: #008080"> 15</span>      }
<span style="color: #008080"> 16</span>      <span style="color: #0000ff"></span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 17</span>  <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span></span></span></span>

Copier après la connexion

八.setInterval() (BOM-Window)
语法:
setInterval(code,millisec)
按照指定的周期（以毫秒计）来调用函数或计算表达式。
举例:(见七)

九.setTimeout() (BOM-Window)
语法:
     var t=setTimeout("javascript语句",毫秒):
     第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
     第二个参数指示从当前起多少毫秒后执行第一个参数。
     该函数执行完毕后自动关闭.
举例:(效果:两秒显示一下广告图片)

<span style="color: #008080">  1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">  2</span>      <span style="color: #0000ff"><span style="color: #800000">div</span> <span style="color: #ff0000">style</span>=<span style="color: #0000ff">"display: none"</span> <span style="color: #ff0000">id</span>=<span style="color: #0000ff">"imggg"</span><span style="color: #0000ff">></span>
<span style="color: #008080">  3</span>          <span style="color: #0000ff"><span style="color: #800000">img</span> <span style="color: #ff0000">src</span>=<span style="color: #0000ff">"img/gg.jpg"</span> <span style="color: #ff0000">width</span>=<span style="color: #0000ff">"80%"</span> <span style="color: #ff0000">height</span>=<span style="color: #0000ff">"30%"</span><span style="color: #0000ff">></span>
<span style="color: #008080">  4</span>      <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #008080">  5</span>      <span style="color: #0000ff"><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #008080">  6</span>          <span style="color: #0000ff"><span style="color: #800000">img</span> <span style="color: #ff0000">src</span>=<span style="color: #0000ff">"img/2.jpg"</span> <span style="color: #ff0000">width</span>=<span style="color: #0000ff">"80%"</span> <span style="color: #ff0000">height</span>=<span style="color: #0000ff">"30%"</span><span style="color: #0000ff">></span>
<span style="color: #008080">  7</span>      <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #008080">  8</span>      <span style="color: #0000ff"><span style="color: #800000">script</span> <span style="color: #ff0000">type</span>=<span style="color: #0000ff">"text/javascript"</span><span style="color: #0000ff">></span>
<span style="color: #008080">  9</span>      //设置定时器
<span style="color: #008080"> 10</span>     setTimeout(show, 2000);
<span style="color: #008080"> 11</span>      function show() {
<span style="color: #008080"> 12</span>          //获取广告图片所在的div
<span style="color: #008080"> 13</span>          var div = document.getElementById("imggg");
<span style="color: #008080"> 14</span>          div.style.display = "block";
<span style="color: #008080"> 15</span>          setTimeout(hide, 2000);
<span style="color: #008080"> 16</span>      }
<span style="color: #008080"> 17</span> 
<span style="color: #008080"> 18</span>     function hide() {
<span style="color: #008080"> 19</span>          var div = document.getElementById("imggg");
<span style="color: #008080"> 20</span>          div.style.display = "none";
<span style="color: #008080"> 21</span>          setTimeout(show, 2000);
<span style="color: #008080"> 22</span>      }
<span style="color: #008080"> 23</span>      <span style="color: #0000ff"></span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 24</span>  <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 25</span> </span></span></span></span></span></span>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!