Our supersheet

時間 2019-11-13

標籤 supersheet 简体版

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Our supersheet</title>
 6 <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">
 7 <link rel="stylesheet" type="text/css" href="style.css">
 8 </head>
 9 
10 <body>
11 <header >
12   
13 </header><!-- /header -->
14 
15 <section>
16   
17 </section>
18 <script src="script/main.js">
19  
20 </script>
21 </body>
22 </html>

style.cssjavascript

 1 /* || general styles */
 2 
 3 html {
 4   font-family: 'helvetica neue', helvetica, arial, sans-serif;
 5 }
 6 
 7 body {
 8   width: 800px;
 9   margin: 0 auto;
10 }
11 
12 h1, h2 {
13   font-family: 'Faster One', cursive;
14 }
15 
16 /* header styles */
17 
18 h1 {
19   font-size: 4rem;
20   text-align: center;
21 }
22 
23 header p {
24   font-size: 1.3rem;
25   font-weight: bold;
26   text-align: center;
27 }
28 
29 /* section styles */
30 
31 section article {
32   width: 33%;
33   float: left;
34 }
35 
36 section p {
37   margin: 5px 0;
38 }
39 
40 section ul {
41   margin-top: 0;
42 }
43 
44 h2 {
45   font-size: 2.5rem;
46   letter-spacing: -5px;
47   margin-bottom: 10px;
48 }

main.jscss

 1 var header = document.querySelector('header');
 2 var section = document.querySelector('section');
 3 
 4 var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
 5 var request = new XMLHttpRequest();//API,建立請求，只須要更新小部分而無需加載整個頁面
 6 request.open('GET', requestURL);//初始化請求，get--HTTP方法
 7 request.responseType = 'text';//響應類型
 8 request.send();//send方法，發送請求
 9 
10 request.onload = function() {//request，聲明的對象；onload，自定義的方法
11   var superHeroesText = request.response;//response，屬性
12   var superHeroes = JSON.parse(superHeroesText);
13   populateHeader(superHeroes);//自定義函數，調用
14   showHeroes(superHeroes);//superHeroes做用域在function，基於json的js對象
15 }
16 /**
17  * [populateHeader description]
18  * @param  {[type]} jsonObj [description]
19  * @return {[type]}         [description]
20  */
21 function populateHeader(jsonObj) {//函數定義，形參
22   var myH1 = document.createElement('h1');//聲明變量myH1,賦值h1元素
23   myH1.textContent = jsonObj['squadName'];//文本內容屬性，賦值squadName對象的屬性
24   header.appendChild(myH1);//header結點，增長一個myH1子節點，將其附加到標題appendChild()
25 
26   var myPara = document.createElement('p');//
27   myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];//把對象home Town和formed屬性的lianjiezifuc
28   header.appendChild(myPara);
29 
30 }
31 /**
32  * [showHeroes description]
33  * @param  {[type]} jsonObj [description]
34  * @return {[type]}         [description]
35  */
36 function showHeroes(jsonObj) {//建立並顯示超級英雄卡
37   var heroes = jsonObj['members'];
38 
39   for (var i = 0; i < heroes.length; i++) {//members數組對象；建立了幾個新元素article、h2。。。。
40     var myArticle = document.createElement('article');
41     var myH2 = document.createElement('h2');
42     var myPara1 = document.createElement('p');
43     var myPara2 = document.createElement('p');
44     var myPara3 = document.createElement('p');
45     var myList = document.createElement('ul');
46 
47     myH2.textContent = heroes[i].name;
48     myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
49     myPara2.textContent = 'Age: ' + heroes[i].age;
50     myPara3.textContent = 'Superpowers:';//值爲數組，又用一個循環處理
51 
52     var superPowers = heroes[i].powers;//嵌套循環，
53     for (var j = 0; j < superPowers.length; j++) {
54       var listItem = document.createElement('li');
55       listItem.textContent = superPowers[j];
56       myList.appendChild(listItem);
57     }
58 
59     myArticle.appendChild(myH2);//在myArticle中增長子節點，把獲取的值顯如今html中
60     myArticle.appendChild(myPara1);
61     myArticle.appendChild(myPara2);
62     myArticle.appendChild(myPara3);
63     myArticle.appendChild(myList);
64 
65     section.appendChild(myArticle);//把myArticle的值放入section
66   }
67 }

json文件（https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json）html

 1 {
 2   "squadName" : "Super hero squad",
 3   "homeTown" : "Metro City",
 4   "formed" : 2016,
 5   "secretBase" : "Super tower",
 6   "active" : true,
 7   "members" : [
 8     {
 9       "name" : "Molecule Man",
10       "age" : 29,
11       "secretIdentity" : "Dan Jukes",
12       "powers" : [
13         "Radiation resistance",
14         "Turning tiny",
15         "Radiation blast"
16       ]
17     },
18     {
19       "name" : "Madame Uppercut",
20       "age" : 39,
21       "secretIdentity" : "Jane Wilson",
22       "powers" : [
23         "Million tonne punch",
24         "Damage resistance",
25         "Superhuman reflexes"
26       ]
27     },
28     {
29       "name" : "Eternal Flame",
30       "age" : 1000000,
31       "secretIdentity" : "Unknown",
32       "powers" : [
33         "Immortality",
34         "Heat Immunity",
35         "Inferno",
36         "Teleportation",
37         "Interdimensional travel"
38       ]
39     }
40   ]
41 }

結果以下：https://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.htmljava

相關標籤/搜索

supersheet

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。