Heim > Web-Frontend > js-Tutorial > Hauptteil

Zusammenfassung des JavaScript-Lernens [4] JS ausführlich

黄舟
Freigeben: 2017-02-09 14:55:27
Original
1316 Leute haben es durchsucht

1. JS-Flusskontrollanweisung

(1), if-Beurteilung

Die if-Anweisung führt den entsprechenden Code nur aus, wenn die Bedingung wahr ist.

Die if...else-Anweisung ist der Code nach if, der ausgeführt wird, wenn die angegebene Bedingung wahr ist, und der Code nach else, der ausgeführt wird, wenn die Bedingung nicht wahr ist.

Wenn...else verschachtelte Anweisungen wählen einen der entsprechenden Codeblöcke aus, um ihn unter mehreren Bedingungen auszuführen.

Die if-Anweisung eignet sich für jede Art von Daten und kann komplexe logische Beziehungen verarbeiten.

  (2), switch-Anweisung

Wenn es viele Auswahlmöglichkeiten gibt, ist switch bequemer zu verwenden als if...else. Es hat eine einfache Struktur und ist speziell für mehrere Auswahlmöglichkeiten konzipiert. Es kann jedoch nur mehrere aufgezählte logische Beziehungen verarbeiten. Diese Aussage kann je nach persönlicher Präferenz auch mit if vervollständigt werden.

So funktioniert die Switch-Anweisung: Erstellen Sie zunächst einen Ausdruck, normalerweise eine Variable, und vergleichen Sie dann den Wert des Ausdrucks mit dem Wert jedes Falls in der Switch-Anweisung. Wenn sie übereinstimmen, lautet die Anweisung nach dem Fall Wenn es mit keinem Fallwert übereinstimmt, wird die Anweisung nach dem Standardwert ausgeführt. Bei Verwendung einer Switch-Anweisung muss nach jeder Case-Anweisung break verwendet werden, um die Schleife zu verlassen und die Ausführung des nächsten Cases zu verhindern.

var d = new Date().getDay(); //如果今天不是周末,则提示默认消息
 switch (d){     
 case 6:         
 alert("今天是星期六");         
 break;     
 case 0:         
 alert("今天是星期天");         
 break;     
 default:         
 alert("同志尚未努力,革命仍需成功。"); 
 }
Nach dem Login kopieren

Beim Vergleich verwendet die Switch-Anweisung Kongruenz statt Gleichheit, daher müssen Sie beim Abgleichen von Zeichenfolgen und Zahlen besonders vorsichtig sein.

//使用switch语句将字符串与数字做比较
 //返回:不等于,执行default语句
 var n = '5'; switch(n){     
 case 5:         
 alert('等于,执行case语句');         
 break;     
 default:         
 alert('不等于,执行default语句'); } 
 //使用if语句将字符串与数字做比较
 //返回:等于
 var n = '2'; if(n == 2){     
 alert('等于'); 
 }else{     
 alert('不等于'); 
 } 
 //将case的值改为字符串再做比较
 //返回:等于,执行case语句
 var n = '2'; switch(n){     
 case '2':         
 alert('等于,执行case语句');         
 break;     
 default:         
 alert('不等于,执行default语句'); 
 } 
 
 //使用全等再做比较
 //返回:不等于
 var n = '2'; 
 if(n===2){     
 alert('等于'); }else{     
 alert('不等于'); }
Nach dem Login kopieren

(3), for-Schleife

Viele Dinge werden nicht nur einmal erledigt, sondern müssen wiederholt erledigt werden. Drucken Sie beispielsweise 10 Kopien eines Dokuments, jeweils eine Kopie, und wiederholen Sie diesen Vorgang, bis der Druckvorgang abgeschlossen ist. Dies geschieht mithilfe einer for-Schleife. Bei einer Schleife wird ein Codeabschnitt jedes Mal wiederholt ausgeführt.

Das Folgende ist eine kleine Anwendung einer for-Schleife. Gehen Sie davon aus, dass es 1,2,3 ... 10 RMB mit unterschiedlichen Nennwerten gibt.

var sum = 0; for(var rmb=1; rmb<=10; rmb++){ 
     sum += rmb; } alert(&#39;一共有: &#39; + sum + &#39;元&#39;);    //返回:一共有:55元
Nach dem Login kopieren

(4), while-Schleife

Die while-Schleife hat die gleiche Funktion wie die for-Schleife. Solange die Bedingung als wahr angegeben ist, kann die Schleife bis zum ausgeführt werden Bedingung ist nicht mehr erfüllt.

//使用while循环输出5个数字
 var i = 0;      //第一部分:初始化,给一个初始的值,让i从0循环
 while(i < 5){    //第二部分:条件。成立继续循环,不成立退出
     alert(i);    //第三部分:语句
     i++;     //第四部分:自增
 } //while循环使用比较复杂,使用for循环更简洁。
 //for(初始化;条件;自增){语句}
Nach dem Login kopieren

(5), do...while-Schleife

Die prinzipielle Struktur der do...while-Schleife und der while-Schleife ist grundsätzlich gleich, aber die Schleife prüft, ob die Bedingung ist: Führen Sie den Codeblock einmal aus, bevor er wahr ist, und wiederholen Sie die Schleife, wenn die Bedingung wahr ist. Bei dieser Schleife gibt es ein kleines Problem, da sie zuerst den Code ausführt und dann die Bedingungen ermittelt. Wenn die Bedingungen ungeeignet sind, gelangt sie in eine Endlosschleife, was zum Absturz des Browsers führt.

 /*
 语法: do{   执行语句 } while(条件); */
 
 //操作有风险,尝试需谨慎
 //若将循环条件改为:num <= 6 会导致浏览器崩溃  
 var num = 6; do{     document.write("数字:" + num + "<br>");     num -= 1; } while(num > 0);
Nach dem Login kopieren

(6), JS-Fehlerbehandlungsanweisung

 Die try...catch-Anweisung wird für die Ausnahmebehandlung verwendet. Die try-Anweisung wird verwendet, um Fehler in Codeblöcken zu erkennen und die Codesegmente anzugeben, die verarbeitet werden müssen. Die Catch-Anweisung wird verwendet, um Fehler zu behandeln, die in der try-Anweisung ausgelöst werden. Die try-Anweisung wird zuerst ausgeführt. Wenn während des Vorgangs ein Fehler auftritt, wird der Code in der try-Anweisung übersprungen, um die Anweisung im Catch auszuführen. Wenn kein Fehler auftritt, werden die Anweisungen im Catch nicht ausgeführt. Im Allgemeinen können try...catch-Anweisungen verwendet werden, um vorhersehbare Fehler zu beheben. Die

try{     
document.write("开始执行try语句" + &#39;<br>&#39;);     
document.write("还没抛出错误" + &#39;<br>&#39;);     
alert(x);        //抛出错误
     alert(&#39;123&#39;);    //没被执行
 } catch(e){     
 document.write("捕捉到错误,开始执行catch语句" + &#39;<br>&#39;);     
 document.write("错误类型: " + e.name + &#39;<br>&#39;);     
 document.write("错误信息: " + e.message);     
 alert(&#39;x&#39;); }
Nach dem Login kopieren

throw-Anweisung kann zum Erstellen benutzerdefinierter Fehler verwendet werden. Der offizielle Begriff lautet: Erstellen oder Auslösen einer Ausnahme. Syntax: „Ausnahmeobjekt“ werfen. ​

Die throw-Anweisung kann zusammen mit der try...catch-Anweisung verwendet werden, um den Programmablauf zu steuern und präzise Fehlermeldungen zu generieren.

//输入0到10之间的数字,如果输入错误,会抛出一个错误,catch会捕捉到错误,并显示自定义的错误消息。
 <body>
 <input id="txt" type="text"/>
 <span id="demo" style="font-weight:bold;"></span><br>
 <input type="button" value="检测输入" onclick="error()">
 <script> function error(){     
 try{         
 var x = document.getElementById("txt").value;         
 var y = document.getElementById("demo");         
 y.style.color = &#39;red&#39;;         
 if(x == &#39;&#39;) throw &#39;输入不能为空&#39;;         
 if(isNaN(x)) throw &#39;请输入数字&#39;;         
 var num = [7,8,9];         
 for(var i=0; i<num.length; i++){             
 if(x == num[i]){                 
 throw &#39;该数字已经存在&#39;;             
 }         
 }         
 if(x == 0){             
 throw &#39;输入不能为0&#39;;         
 }         
 else if(x > 10){             
 throw &#39;数字太大了&#39;;         
 }         
 else if(x <= 3){             
 throw &#39;数字太小了&#39;;         
 }         
 else{             
 y.style.color = &#39;green&#39;;             
 y.innerHTML = &#39;OK&#39;;         
 }     
 }     
 catch(e){         
 y.innerHTML = &#39;错误提示:&#39; + e + &#39;!&#39;;     
 } 
 } 
 </script>
 </body>
Nach dem Login kopieren

(7), Aus der Schleife ausbrechen

Die Break-Anweisung wird verwendet, um aus der aktuellen Schleife zu springen und die Schleife direkt zu verlassen, um den folgenden Code auszuführen, d. h. Beenden Sie die gesamte Schleife ohne weitere Beurteilung. Die continue-Anweisung springt nur aus dieser Schleife heraus und führt die folgende Schleife weiter aus, dh beendet diese Schleife und bestimmt dann, ob die nächste Schleife ausgeführt werden soll. return kann die Ausführung des Funktionskörpers beenden und einen Wert zurückgeben.

for(var i=0; i<6; i++){     if(i == 3) break;    //当i=3时跳出整个循环,不再执行循环
     alert(i);    //返回:0,1,2
 } 
 for(var i=0; i<6; i++){     if(i == 3) continue;    //当i=3时跳出本次循环,继续执行后面循环
     alert(i);    返回:0,1,2,4,5
 }
Nach dem Login kopieren

2. JSON

 JSON (JavaScript Object Notation): JS-Objektnotation. JSON wird hauptsächlich zum Speichern und Austauschen von Dateninformationen verwendet, ähnlich wie XML, aber im Vergleich zu XML ist JSON einfacher zu lesen und zu schreiben und einfacher zu analysieren.

Die JSON-Syntax ist eine Teilmenge der JS-Objektdarstellungssyntax: Daten liegen in durch Kommas getrennten Schlüssel-Wert-Paaren vor, geschweifte Klammern halten Objekte und eckige Klammern halten Arrays.

Das Schreibformat der JSON-Syntax: „Name“: „Wert“, „Name“: „Wert“

Der Name und der Wert werden in doppelte Anführungszeichen gesetzt und durch Doppelpunkte getrennt der Daten ist durch Kommas getrennt. Dies ist im Gegensatz zu name = „value“ in JS leicht zu verstehen.

 JSON-Werte können sein: Zahlen (einschließlich Ganzzahlen und Dezimalzahlen), Zeichenfolgen (in doppelten Anführungszeichen eingeschlossen), boolesche Werte (wahr oder falsch), Objekte (in geschweiften Klammern eingeschlossen), ein Array (in eckigen Klammern eingeschlossen) oder null.

JSON ist Klartext, der normalerweise vom Server verwendet wird, um Daten an die Webseite zu übertragen, JSON-Daten vom Server abzurufen und die Daten dann auf der Webseite zu verwenden.

  (1), JSON-Objekt

var json = {"a": 12, "b": "abc", "c":[1,2,3]}; //返回第一项的值:
 alert(json.a); 
 //修改第二项的值
 alert(json.b = "xyz"); 
 //返回第三项数组中第一项的值
 alert(json.c[0]);
Nach dem Login kopieren

(2), JSON und Array

Der gleiche Punkt:

Beide können einen bestimmten Wert zurückgeben durch tiefgestellt Der Wert des Artikels. Sie können Schleifen verwenden. Obwohl JSON kein Längenattribut hat und keine for-Schleifen verwenden kann, können Sie for...in-Schleifen verwenden, um dieselben Aktionen wie for-Schleifen auszuführen.

Arrays können auch for...in-Schleifen verwenden, es ist jedoch besser, for-Schleifen zu verwenden. Die for...in-Schleife durchläuft die Eigenschaften des Objekts, nicht die Elemente des Arrays.

Unterschiede:

  JSON 的下标是字符串,数组的下标为数字。JSON 没有 length 属性,数组有该属性。

var arr = [12,5,7]; var json = {"a":12,"b":5,"c":7}; 
 alert(arr[0]);      //返回:12
 alert(json["a"]);    //返回:12
 
 alert(arr.length);    //返回:3
 alert(json.length);   //返回:undefined
 
 //数组for循环
 for(var i=0; i<arr.length; i++){     alert(&#39;第&#39; + (i+1) + &#39;个数据是:&#39; + arr[i]); } alert(typeof i);    //返回:number
 
 //数组使用for...in循环
 for(var i in arr){     alert(&#39;第&#39; + (i+1) + &#39;个数据是:&#39; + arr[i]); } alert(typeof i);    //返回:string
 
 //JSON使用for...in循环
 for(var i in json){     alert(&#39;第&#39; + i + &#39;个数据是:&#39; + json[i]); }
Nach dem Login kopieren

  (3)、JSON 数组对象

<body>
 <p>
 姓 名: <span id="fname"></span><br> 
 性 别: <span id="gender"></span><br>
 员工号: <span id="num"></span><br> 
 修改姓名: <span id="lname"></span><br> 
 </p> 
 <script> var staff = [     {"name" : "小明", "sex" : "男", "id" : 1}, 
     {"name" : "小白", "sex" : "男", "id" : 2}, 
     {"name" : "小红", "sex" : "女", "id" : 3} ]; 
     var x = document.getElementById("fname"); 
     var y = document.getElementById("gender"); 
     var z = document.getElementById("num"); 
     var n = document.getElementById("lname"); //访问对象数组中第一项的值:
 x.innerHTML = staff[0].name; y.innerHTML = staff[0].sex; z.innerHTML = staff[0].id; 
 //修改数据:
 n.innerHTML = staff[1].name = &#39;大白&#39;; </script>
 </body>
Nach dem Login kopieren

  (4)、JSON 字符串对象

var str = &#39;{"name":"小明", "sex":"男", "age":21}&#39;;
var toObj = JSON.parse(str);  //JSON字符串转换为JSON对象alert(toObj.name);
alert(typeof toObj);    //返回:object
var json = {"name":"小红", "sex":"女", "age":18};
var toStr = JSON.stringify(json);  //JSON对象转换为JSON字符串
alert(toStr);    //返回字符串alert(json.age);
alert(typeof toStr);    //返回:string
Nach dem Login kopieren

(5)、JSON 应用

  当需要表示一组数据时,JSON 不但能够提高可读性,而且还可以减少复杂性。JSON 能够表示多个值,每个值又可包含多个值,例如要表示一个用户列表信息,就可以将所有信息存储在一个变量中,分成多项,每项中又可分成多个条目,每个条目中记录一个用户的信息。

var userName = {     
"first": [{         
"name": "路飞",         
"sex": "男",         
"tel": "aaa"    
 },  {         
 "name": "索罗",         
 "sex": "男",         
 "tel": "bbb"     
 }, {         
 "name": "娜美",         
 "sex": "女",         
 "tel": "ccc"     }], 
     "second": [{         
     "name": "卡卡西",         
     "sex": "男",         
     "tel": "ddd"     
     }, {         
     "name": "鸣人",         
     "sex": "男",         
     "tel": "fff"     
     }, {         
     "name": "佐助",         
     "sex": "男",         
     "tel": "eee"     
     }, {         
     "name": "皱田",         
     "sex": "女",         
     "tel": "sss"     
     }], 
     "third": [{         
     "name": "小明",         
     "sex": "男",         
     "tel": "xxx"     
     },{         
     "name": "小红",         
     "sex": "女",         
     "tel": "zzz"     
     }] 
     }; 
 //获取用户的信息:
 alert(userName.first[1].name + &#39; \n &#39; + userName.first[1].sex + &#39;\n &#39;+ userName.first[1].tel); 
 alert(userName.second[3].name + &#39; \n &#39; + userName.second[3].sex +&#39; \n &#39;+ userName.second[3].tel); 
 alert(userName.third[0].name + &#39; \n &#39; + userName.third[0].sex + &#39; \n &#39;+ userName.third[0].tel);
Nach dem Login kopieren

说到 JSON,就不得不提一下 JSONP。JSONP (JSON with Padding) 是 JSON 的一种 "使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。可用于解决主流浏览器的跨域数据访问的问题。为什么我们从不同的域(网站)访问数据需要一个特殊的技术 (JSONP) 呢?这是因为同源策略。同源策略,它是由 Netscape 提出的一个著名的安全策略,现在所有支持 JavaScript 的浏览器都会使用这个策略。由于该策略,一般来说位于 server1 的 demo.com 的网页无法与不是 server1 的 demo.com 的网页的服务器沟通,而 HTML 的

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!