html代写 JSON作业 javascript program代写

JSON作业

html代写 此作业的内容比较简单，就是把一个单独的json文件导入，以html网页的形式呈现出来

Json文件的具体内容请看文件夹里的filmslist.json

 

此作业的内容比较简单，就是把一个单独的json文件导入，以html网页的形式呈现出来

Json文件的具体内容请看文件夹里的filmslist.json

 

要求用Synchronous XMLHttpRequest，不能用ajax，不能用jquery。

可以用javascript，css 和html。

 

1. 作业目标：

• 熟悉学会如何加载 JSON ;
• 学会使用JSON.parse parser 和 synchronous XMLHttpRequest;
• 学会把 JSON document 转换成 HTML page.

 

2. Description

作业要求是写一个HTML/JavaScript program,

实现功能如视频1所示. 这个 JavaScript program 需要被植入到一个 HTML文件，以便使其在浏览器里运行。

打开网页运行后打开如下图所示

首先映入眼帘的应该是下面这个样子，如图1所示。

 

图1

 

在图1的界面中有一个文本框，在文本框内输入JSON 文件的文件名以后，点击Submit Query按钮以后，会出现以下图2的的内容。

图2

 

注意：如果不在文本框内输入任何内容，而是直接点击Submit Query 按钮，会出现一个“报错”信息。

 

一旦JSON 文件 被加载之后, 在HTML里相应的JavaScript会去解析这个加载的 JSON 文件，然后会出现一个网页呈现出如上图所示的样子（也就是json文件里的内容）。

 

举例说明 html代写

例如，如果给出下面红色的json文件代码

 

          "Gross": "$2,787,965,087",

          "HomePage": "https://baike.baidu.com/item/%E9%98%BF%E5%87%A1%E8%BE%BE/32205?fr=aladdin",

          "Logo": "https://wx4.sinaimg.cn/mw690/007y1Z7Uly1fzwi87q645j306409274j.jpg"

        },

          

        {

          "Title": "Titanic",

          "Year": "1997",

          "Hubs": {

            "Hub": [

              "Directed by James Cameron",

              "Titanic is a 1997 American epic romance and disaster film directed, written, co-produced and co-edited by James Cameron. A fictionalized account of the sinking of




the RMS Titanic, it stars Leonardo DiCaprio and Kate Winslet as members of different social classes who fall in love aboard the ship during its ill-fated maiden voyage."

            ]

          },

          "Gross": "2,187,463,944",

          "HomePage": "https://baike.baidu.com/item/%E6%B3%B0%E5%9D%A6%E5%B0%BC%E5%85%8B%E5%8F%B7/5677?fr=aladdin",

          "Logo": "https://wx2.sinaimg.cn/mw690/007y1Z7Uly1fzwi86ydzdj3064095js3.jpg"

        },  

          

          

        {

          "Title": "Star Wars: The Force Awakens",

          "Year": "2015",

          "Hubs": {

            "Hub": [

              "Directed by J. J. Abrams",

              "Star Wars: The Force Awakens (also known as Star Wars: Episode VII – The Force Awakens) is a 2015 American epic space opera film produced, co-written and




directed by J. J. Abrams. It is the first installment of the Star Wars sequel trilogy and the seventh installment of the main Star Wars film franchise, following Return of the




Jedi (1983). The film stars Harrison Ford, Mark Hamill, Carrie Fisher, Adam Driver, Daisy Ridley, John Boyega, Oscar Isaac, Lupita Nyong'o, Andy Serkis, Domhnall Gleeson,




Anthony Daniels, Peter Mayhew, and Max von Sydow, and was produced by Lucasfilm Ltd. and Abrams's production company Bad Robot Productions. "

            ]

          },

          "Gross": "$2,068,223,624",

          "HomePage": "https://baike.baidu.com/item/%E6%98%9F%E7%90%83%E5%A4%A7%E6%88%98%EF%BC%9A%E5%8E%9F%E5%8A%9B%E8%A7%89%E9%86%92/16020274?fromtitle=%E6%98%9F




%E7%90%83%E5%A4%A7%E6%88%987&fromid=6730690&fr=aladdin",

          "Logo": "https://wx1.sinaimg.cn/mw690/007y1Z7Uly1fzwi8a7pv2j306408ymy0.jpg"

        },          

          

        {

          "Title": "Avengers: Infinity War",

          "Year": "2016",

          "Hubs": {

            "Hub": [

              "Directed by Anthony Russo, Joe Russo",

              "Avengers: Infinity War is a 2018 American superhero film based on the Marvel Comics superhero team the Avengers, produced by Marvel Studios and distributed by




Walt Disney Studios Motion Pictures. It is the sequel to 2012's The Avengers and 2015's Avengers: Age of Ultron, and the nineteenth film in the Marvel Cinematic Universe (MCU).




The film is directed by Anthony and Joe Russo, written by Christopher Markus and Stephen McFeely, and features an ensemble cast including Robert Downey Jr., Chris Hemsworth,




Mark Ruffalo, Chris Evans, Scarlett Johansson, Benedict Cumberbatch, Don Cheadle, Tom Holland, Chadwick Boseman, Paul Bettany, Elizabeth Olsen, Anthony Mackie, Sebastian Stan,




Danai Gurira, Letitia Wright, Dave Bautista, Zoe Saldana, Josh Brolin, and Chris Pratt."

            ]

          },

          "Gross": "$2,048,709,917",

          "HomePage": "https://baike.baidu.com/item/%E5%A4%8D%E4%BB%87%E8%80%85%E8%81%94%E7%9B%9F3%EF%BC%9A%E6%97%A0%E9%99%90%E6%88%98%E4%BA%89/15971907?fromtitle=%E5%A4%8D




%E4%BB%87%E8%80%85%E8%81%94%E7%9B%9F3&fromid=150174&fr=aladdin",

          "Logo": "https://wx1.sinaimg.cn/mw690/007y1Z7Uly1fzwi89anbcj3064092my0.jpg"

        },

          

        {

          "Title": "Jurassic World",

          "Year": "2015",

          "Hubs": {

            "Hub": [

              "Directed by Colin Trevorrow",

              "Jurassic World is a 2015 American science fiction adventure film, the fourth installment of the Jurassic Park film series, and the first film in a planned




Jurassic World trilogy. It was directed by Colin Trevorrow, written by Derek Connolly and Trevorrow, produced by Frank Marshall and Patrick Crowley, and stars Chris Pratt, Bryce




Dallas Howard, Vincent D'Onofrio, Ty Simpkins, Nick Robinson, Omar Sy, BD Wong, and Irrfan Khan."

            ]

          },

          "Gross": "$1,671,713,208",

          "HomePage": "https://baike.baidu.com/item/%E4%BE%8F%E7%BD%97%E7%BA%AA%E4%B8%96%E7%95%8C/85432?fr=aladdin",

          "Logo": "https://wx1.sinaimg.cn/mw690/007y1Z7Uly1fzwi863vggj306409o0t3.jpg"

        },  

          

        {

          "Title": "The Avengers",

          "Year": "2012",

          "Hubs": {

            "Hub": [

              "Directed by Joss Whedon",

              "Marvel's The Avengers (classified under the name Marvel Avengers Assemble in the United Kingdom and Ireland), or simply The Avengers, is a 2012 American superhero




film based on the Marvel Comics superhero team of the same name, produced by Marvel Studios and distributed by Walt Disney Studios Motion Pictures. It is the sixth film in the




Marvel Cinematic Universe (MCU). The film was written and directed by Joss Whedon and features an ensemble cast that includes Robert Downey Jr., Chris Evans, Mark Ruffalo, Chris




Hemsworth, Scarlett Johansson, and Jeremy Renner as the titular Avengers team, alongside Tom Hiddleston, Clark Gregg, Cobie Smulders, Stellan Skarsgård, and Samuel L. Jackson.




In the film, Nick Fury, director of the spy agency S.H.I.E.L.D., recruits Tony Stark, Captain America, the Hulk, and Thor to form a team that must stop Thor's brother Loki from




subjugating Earth."

            ]

          },

          "Gross": "$1,518,812,988",

          "HomePage": "https://baike.baidu.com/item/%E5%A4%8D%E4%BB%87%E8%80%85%E8%81%94%E7%9B%9F/22347?fr=aladdin",

          "Logo": "https://wx2.sinaimg.cn/mw690/007y1Z7Uly1fzwi8b2nz0j3064092my2.jpg"

        },     

        

        {

          "Title": "Furious 7",

          "Year": "20115",

          "Hubs": {

            "Hub": [

              "Directed by James Wan",

              "Furious 7 (alternatively known as Fast & Furious 7 and Fast Seven) is a 2015 American action film directed by James Wan and written by Chris Morgan. It is the




seventh installment in The Fast and the Furious franchise. The film stars Vin Diesel, Paul Walker, Dwayne Johnson, Michelle Rodriguez, Tyrese Gibson, Chris Ludacris Bridges,




Jordana Brewster, Djimon Hounsou, Kurt Russell, and json Statham. Furious 7 follows Dominic Toretto (Diesel), Brian O'Conner (Walker), and the rest of their team, who have




returned to the United States to live normal lives after securing amnesty for their past crimes in Fast & Furious 6 (2013), until Deckard Shaw (Statham), a rogue special forces




assassin seeking to avenge his comatose younger brother, puts the team in danger once again."

            ]

          },

          "Gross": "$1,516,045,911",

          "HomePage": "https://baike.baidu.com/item/%E9%80%9F%E5%BA%A6%E4%B8%8E%E6%BF%80%E6%83%857/2614409?fr=aladdin",

          "Logo": "https://wx3.sinaimg.cn/mw690/007y1Z7Uly1fzwi88i9tdj306409odga.jpg"

        }    

        

      ]

    }

  }

}

 

 

则加载上面红色的json文件后，下面图中的表格应当在网页里出现

 

 

特殊情况处理：

下面的蓝色的这个代码就是json 这个文件通常包含的数据内容，里面有电影的名字，简介，图片，年份之类的信息。

 

{

"Mainline": {

"Table": {

"Header": {

"Data": [

"Title",

"Year",

"Info",

"Worldwide Gross",

"Wiki Page",

"Logo"

]

},

"Row": [

{

"Title": "Avatar",

"Year": "2009",

"Hubs": {

3

"Hub": [

"Directed by James Cameron",

"Avatar, marketed as James Cameron's Avatar, is a 2009 American[8][9] epic

science fiction film directed, written, produced, and co-edited by James Cameron,

and stars Sam Worthington, Zoe Saldana, Stephen Lang, Michelle Rodriguez, and

Sigourney Weaver. The film is set in the mid-22nd century, when humans are

colonizing Pandora, a lush habitable moon of a gas giant in the Alpha Centauri star

system, in order to mine the mineral unobtanium, a room-temperature

superconductor."

]

},

"Gross": "$2,787,965,087",

"HomePage": "https://baike.baidu.com/item/%E9%98%BF%E5%87%A1%E8%BE%BE/32205?fr=aladdin",

"Logo": "https://wx4.sinaimg.cn/mw690/007y1Z7Uly1fzwi87q645j306409274j.jpg"

},

{

"Title": "Titanic",

"Year": "1997",

"Hubs": {

"Hub": [

"Directed by James Cameron",

"Titanic is a 1997 American epic romance and disaster film directed, written, coproduced

and co-edited by James Cameron. A fictionalized account of the sinking of

the RMS Titanic, it stars Leonardo DiCaprio and Kate Winslet as members of different

social classes who fall in love aboard the ship during its ill-fated maiden voyage."

]

},

"Gross": "2,187,463,944",

"HomePage": "https://baike.baidu.com/item/%E6%B3%B0%E5%9D%A6%E5%B0%BC%E5%85%8B%E5%8F%B7/5677?fr=aladdin",

"Logo": "https://wx2.sinaimg.cn/mw690/007y1Z7Uly1fzwi86ydzdj3064095js3.jpg"

},

[……………]

]

}

}

}

 

 

 

出错处理

如果引入的json 文件里不包含电影的具体信息，那么需要出现一个报错提醒，提示没有内容。

一个不包含电影具体信息的json文件如下蓝色文字所示

 

{

"Mainline": {

 "Table": {

 "Header": {

 "Data": [

 "Title",

 "Year",

 "Info",

 "Worldwide Gross",

 "Wiki Page",

 "Logo"

 ]

 }

 }

 }

}

如果json文件不存在，也需要一个报错提示出现

如果这个任何一个tag不包含内容, 需要呈现出空白空格区域.

 

 

Data 这个tag里的内容可以变化例如下面蓝色的和红色的代码不一样，但均能成功运行




"Header": {

 "Data": [

 "Title of Movie",

 "Year of Release",

 "Notes",

 "Worldwide Gross",

 "Wikipedia Page",

 "Logo"

 ]

 },

 

 "Header": {

 "Data": [

 "Title",

 "Year",

 "Info",

 "Worldwide Gross",

 "Wiki Page",

 "Logo"

 ]

 }

 

 

这个作业可以这样写：

首先用DOM Parser写一个HTML/ Javascript 的program，。

下面是如何用 Microsoft DOM API 和 Mozilla

DOM API ( Firefox) 去加载和分析JSON 文件 到

DOM tree里的途径, 然后用 DOM API 去提取json文件里的信息

 

<script type="text/javascript">

var jsonDoc;

function loadJSON (url) {

 var xmlhttp=new XMLHttpRequest();

 xmlhttp.open("GET",url,false); //open, send, responseText are

 xmlhttp.send(); //properties of XMLHTTPRequest




 jsonDoc=xmlhttp.responseText;

 return jsonDoc;

}

// ....... processing the document goes here

</scrip

 

有了以上准备以后，就可以用JSON.parse 来分析JSON文件和呈现

HTML 网页了

这个作业的任务就是把json文件转化成下面这个html的样子

 

 

 

可以用DOM document.write 的方法输出html

用JavaScript 去控制 syntax

唯一用到的 program control statements 是 “if” 和 “for”.

如下所示：
if (container_keys[j]==”Image”) {

// do stuff

}

for (j=0; j<container_keys.length; j++) {

6

// do more stuff

}

 

注意： html代写

应当把所有的文件放到同一个文件夹下面。

当点击表格里的链接的时候，需要出现一个新的窗口来呈现连接的内容，而且窗口上需要有滚动条，方便阅读。

此作业需要写JavaScript，HTML，CSS三种文件，并且把他们放到同一个文件夹里。

 

html文件里需要用到的图片链接如下：

Avatar:

https://wx4.sinaimg.cn/mw690/007y1Z7Uly1fzwi87q645j306409274j.jpg

 

Titanic

https://wx2.sinaimg.cn/mw690/007y1Z7Uly1fzwi86ydzdj3064095js3.jpg

 

Starwars

https://wx1.sinaimg.cn/mw690/007y1Z7Uly1fzwi8a7pv2j306408ymy0.jpg

 

Infinitywar

https://wx1.sinaimg.cn/mw690/007y1Z7Uly1fzwi89anbcj3064092my0.jpg

 

Jurassicworld

https://wx1.sinaimg.cn/mw690/007y1Z7Uly1fzwi863vggj306409o0t3.jpg

 

Theavengers

https://wx2.sinaimg.cn/mw690/007y1Z7Uly1fzwi8b2nz0j3064092my2.jpg

 

Furious7

https://wx3.sinaimg.cn/mw690/007y1Z7Uly1fzwi88i9tdj306409odga.jpg