Maison >interface Web >js tutoriel >Notes d'étude de base Javascript (à lire absolument pour les débutants)

Notes d'étude de base Javascript (à lire absolument pour les débutants)

高洛峰
高洛峰original
2017-01-21 09:50:181293parcourir

Que sont les variables ?

Les variables sont des conteneurs utilisés pour stocker des informations

Déclaration des variables

Syntaxe :

var 变量名

Nom de la variable = valeur;

Les variables doivent d'abord être déclarées puis attribuées

Les variables peuvent être attribuées à plusieurs reprises

Règles de dénomination des variables

Les variables doivent commencer par une lettre ;

Les variables peuvent également commencer par les symboles $ et _ (mais nous ne le recommandons pas

Les noms de variables sont en casse) ; -sensible ( a et A sont des variables différentes). Instruction

L'instruction

se termine par un point-virgule ; si le point-virgule est omis, l'analyseur détermine la fin de l'instruction.

Une bonne habitude de codage devrait se terminer par :

Type de données

En JavaScript, une information est une valeur (valeur) . Les valeurs sont de différents types, le type le plus connu étant les nombres. Une valeur de chaîne est un ou plusieurs mots entourés de guillemets

.

Nombre Toute valeur numérique. Le nombre peut être avec ou sans point décimal 68,57

caractères de chaîne entre guillemets. Vous pouvez utiliser des guillemets simples ou doubles "hello, world"

Booléen vrai ou faux vrai

Non défini et Null Non défini Cette valeur signifie que la variable ne contient pas de valeur. Une variable peut être effacée en définissant sa valeur sur null.

Objet Toute valeur associée à l'objet

Fonction La valeur renvoyée par la fonction

1 var a; //a为undefined
2 var a = 6; //a 为数字
3 var a = "Jason"; // a 为字符串

Qu'est-ce qu'une fonction ?

Une fonction est un ensemble d'instructions JavaScript qui effectuent une certaine tâche

Syntaxe de base :

function 函数名(){
  函数代码;
}

Nom de la fonction ();

Explication :

function définit le mot-clé function.

"Nom de la fonction" est le nom que vous avez donné à la fonction.

Remplacez "code de fonction" par un code qui remplit une fonction spécifique.

Un type d'appel de fonction "deuxième nom de fonction"

1 function add2(){
2 var sun = 3 + 2;
3 alert(sun);
4 }
5 add2();//调用函数直接写函数名直接弹出函数代码
1 <input type="button" value="点击我" onclick="add2()" />
2 <!-- 单击按钮后,调用函数,onclick为点击事件 -->

Contenu de sortie (document.write)

document .write () affiche directement le contenu de la page Web.

Type 1 : le contenu de sortie est placé entre "", et le contenu entre le signe "" est affiché directement.

document.write("I love JavaScript!");

Le deuxième type : produire du contenu via des variables

var mystr = "hello world";
document.write(mysrt);//直接写变量名,输出变量存储的内容

Le troisième type : produire plusieurs contenus, et les contenus sont connectés avec des nombres.

var mystr = "hello";
document.write(mystr + "I love Java Script");//多项内容之间用+号连接

La quatrième méthode : afficher les balises HTML et fonctionner. Les balises sont entourées de "".

var mystr="hello";
document.write(mystr+"<br>");//输出hello后,输出一个换行符
document.write("JavaScript");

Avertissement (boîte de dialogue de message d'alerte)

Lorsque nous visitons le site Web, parfois une petite fenêtre apparaît soudainement avec un message d'invite écrit dessus. Si vous ne cliquez pas sur "OK", vous ne pouvez effectuer aucune opération

sur la page Web. Cette petite fenêtre est implémentée à l'aide d'une alerte.

Syntaxe : alerte (chaîne ou variable);

var mynum = 30;
alert("hello!");
alert(mynum);

Résultat : Boîtes de message contextuelles dans l'ordre (la boîte de dialogue du message contextuel d'alerte contient un bouton OK)

Remarque :

1. Aucune autre opération ne peut être effectuée avant de cliquer sur le bouton « OK » dans la boîte de dialogue.

2. Les boîtes de dialogue de message peuvent généralement être utilisées pour déboguer les programmes.

3. Contenu de sortie d'alerte, qui peut être une chaîne ou une variable, similaire à document.write

Confirmer la sélection (boîte de dialogue de confirmation du message)

En plus de fournir des informations à l'utilisateur, nous souhaitons également obtenir des informations de nos utilisateurs. La boîte de dialogue du message de confirmation est utilisée ici.

La boîte de dialogue de confirmation du message est généralement utilisée pour permettre à l'utilisateur de faire un choix, tel que : « Avez-vous raison ? », etc. Affiche une boîte de dialogue (comprenant un bouton OK et un bouton Annuler).

Syntaxe : confirm(str);

Description du paramètre : str : texte à afficher dans la boîte de dialogue du message Valeur de retour : Valeur booléenne

Valeur de retour :

Lorsque l'utilisateur clique sur le bouton "OK", renvoie vrai

Lorsque l'utilisateur clique sur le bouton "Annuler", renvoie faux

Remarque : la valeur de retour peut être utilisée pour déterminer lequel bouton sur lequel l'utilisateur a cliqué

<script type="text/javascript">
  var mymessage=confirm("你喜欢JavaScript吗?");
  if(mymessage==true){
    document.write("很好,加油!");
  }else{
    document.write("JS功能强大,要学习噢!");
  }
</script>

Poser une question (boîte de dialogue de message d'invite)

Parfois, vous ne souhaitez pas seulement que l'utilisateur réponde Oui/Non. Attendez-vous plutôt à une réponse plus précise. Dans ce cas, nous pouvons utiliser prompt.

une invite fait apparaître une boîte de dialogue de message, généralement utilisée pour demander certaines informations qui doivent être interagies avec l'utilisateur. Affiche une boîte de dialogue de message (comprenant un bouton OK, un bouton Annuler et une zone de saisie de texte).

Syntaxe :

prompt(str1,str2);

Description du paramètre :

str1 : Le texte à afficher dans la boîte de dialogue du message, ne peut pas être modifié

str2 :Le contenu de la zone de texte peut être modifié

Valeur de retour :

1 Cliquez sur le bouton OK, le contenu de la zone de texte sera utilisé comme valeur de retour de la fonction

2. Cliquez sur le bouton Annuler, renverra null

function rec(){
  var score; //score变量,用来存储用户输入的成绩值。
  score = prompt("请输入你的成绩","90");
  if(score>=90){
    document.write("你很棒!");
  }else if(score>=75){
    document.write("不错吆!");
  }else if(score>=60){
    document.write("要加油!");
  }else{
    document.write("要努力了!");
  };
} ;
<script>
    var myName = prompt("输入您的名字");
     if(myName != null && myName != ""){
      document.write("welcom to" + myName);
    }else{
      document.write("welcom to my friend");
    }
</script>
Ouvrez une nouvelle fenêtre (window.open)


Syntaxe :

window.open([URL], [窗口名称], [参数字符串])
Description du paramètre :


URL : paramètre facultatif, l'URL ou le chemin de la page web à afficher dans la fenêtre. Si ce paramètre est omis, ou si sa valeur est une chaîne vide, aucun document ne sera affiché dans la fenêtre.


Nom de la fenêtre : Paramètre facultatif, le nom de la fenêtre ouverte.


1. Le nom est composé de lettres, de chiffres et de caractères soulignés.


2. Nom de la fenêtre : facultative, cette chaîne est une liste de fonctionnalités séparées par des virgules qui déclare le nom de la fenêtre ouverte. Oui

是"_top"、"_blank"、"_selft"、"_parent"等。

_blank 在新窗口显示目标网页

_selft 在当前窗口显示目标网页

_parent 框架网页中当前整个窗口位置显示目标网页

_top 框架网页中在上部窗口中显示目标网页

3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。

4.name 不能包含有空格。

参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。

参数表:

top    Number  窗口顶部离开屏幕顶部的像素数
left    Number  窗口左端离开屏幕左端的像素数
width    Number  窗口的宽度
height    Number  窗口的高度
menubar    yes,no  窗口有没有菜单
toolbar    yes,no  窗口有没有工具条
scrollbars    yes,no   窗口有没有滚动条
status      yes,no   窗口有没有状态栏

<script type="text/javascript">
   window.open(&#39;http://&#39;,&#39;_blank&#39;,&#39;width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes&#39;)
 </script>

关闭窗口(window.close)

close()关闭窗口

用法:

1 window.close();//关闭本窗口
2 <窗口对象>.close();//关闭指定的窗口

例如:关闭新建的窗口。

1 <script type="text/javascript">
2   var mywin=window.open(&#39;http://www.jb51.net&#39;); //将新打的窗口对象,存储在变量mywin中
3   mywin.close();
4 </script>

innerHTML属性

innerHTML属性用于获取或替换HTML元素的内容。

语法:

Object.innerHTML

Object是获取的元素对象,如通过document.getElementById("ID")获取元素。

<h2 id="con">javascript</H2>
<script type="text/javascript">
  var mychar=document.getElementById("con");
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  mychar.innerHTML="hello world"
  document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>


改变HTML样式

语法:

Object.style.property=new style;


注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素

<h2 id="con">I love JavaScript</h2>
<script type="text/javascript">
  var mychar= document.getElementById("con");
  mychar.style.color="red";
  mychar.style.background="#ccc";
  mychar.style.width="300px";
</script>

显示和隐藏(display属性)

语法:

Object.style.display = value

value值:

none 此元素不会被显示(及隐藏)

block 此元素将显示为块级元素(即显示)

mychar.style.display = "block"

控制类名(className属性)
className属性设置或返回元素的class属性。
语法:

object.className = classname

作用:
1、获取元素的class属性
2、为网页内的某个元素指定一个css样式来更改该元素的外观

p2.className = "two";

以上这篇Javascript基础学习笔记(菜鸟必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持PHP中文网。

更多Javascript基础学习笔记(菜鸟必看篇)相关文章请关注PHP中文网!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn