{
“TemplateName”:“filmsLinkedData”,
“Select”:{
“mainDataset”:{
“datasetName”:“films”,
“selectedProperty”:[
“movie_name”,
“director”,
“playdate”,
“actor”
]
},
“complemantaryDataset”:[
{
“datasetName”:“actors”,
“selectedProperty”:[
“performance”,
“actor_name”,
“actor_actorid”,
“actor_abstract”
]
},
{
“datasetName”:“director”,
“selectedProperty”:[
“director_name”,
“director_directorID”,
“director_abstract”,
“performance”
]
}
]
},
“Where”:[
{
“datasetName”:“films”,
“key”:“movie_name”,
“value”:“%movieName”
}
],
“Match”:[
“Rule”:[
{
“subject”:{
“datasetName”:“films”,
“property”:“director”
},
“object”:{
“datasetName”:“director”,
“property”:“director_name”
},
“relation”:“equivalentProperty”
},
{
“subject”:{
“datasetName”:“films”,
“property”:“actor”
},
“object”:{
“datasetName”:“actors”,
“property”:“actor_name”
},
“relation”:“equivalentProperty”
},
{
“subject”:{
“datasetName”:“actors”,
“property”:“performance”
},
“object”:{
“datasetName”:“films”,
“property”:“movie_name”
},
“relation”:“equivalentProperty”
},
{
“relation”:“equivalentProperty”,
“subject”:{
“datasetName”:“director”,
“property”:“performance”
},
“object”:{
“datasetName”:“films”,
“property”:“movie_name”
}
}
]
}
]]>“TemplateName”:“filmsLinkedData”,
“Select”:{
“mainDataset”:{
“datasetName”:“films”,
“selectedProperty”:[
“movie_name”,
“director”,
“playdate”,
“actor”
]
},
“complemantaryDataset”:[
{
“datasetName”:“actors”,
“selectedProperty”:[
“performance”,
“actor_name”,
“actor_actorid”,
“actor_abstract”
]
},
{
“datasetName”:“director”,
“selectedProperty”:[
“director_name”,
“director_directorID”,
“director_abstract”,
“performance”
]
}
]
},
“Where”:[
{
“datasetName”:“films”,
“key”:“movie_name”,
“value”:“%movieName”
}
],
“Match”:[
],
“Rule”:[
{
“subject”:{
“datasetName”:“films”,
“property”:“director”
},
“object”:{
“datasetName”:“director”,
“property”:“director_name”
},
“relation”:“equivalentProperty”
},
{
“subject”:{
“datasetName”:“films”,
“property”:“actor”
},
“object”:{
“datasetName”:“actors”,
“property”:“actor_name”
},
“relation”:“equivalentProperty”
},
{
“subject”:{
“datasetName”:“actors”,
“property”:“performance”
},
“object”:{
“datasetName”:“films”,
“property”:“movie_name”
},
“relation”:“equivalentProperty”
},
{
“relation”:“equivalentProperty”,
“subject”:{
“datasetName”:“director”,
“property”:“performance”
},
“object”:{
“datasetName”:“films”,
“property”:“movie_name”
}
}
]
}
由於在課堂上或課後有多位同學對於在網頁中的小區段(像是名稱、關鍵字之類的)要如何套用CSS感到相當困惑，我補充一些說明，希望能對同學有一些幫助！
首先，我們怎麼樣用HTML+CSS來實現這樣的效果呢？假設我們現在有一段文字：
這門課是C++
我們要在網頁中呈現這段文字，通常會用<p>或<h1>~<h6>標籤來讓他成為會斷行的段落或標題：(後續的程式碼都請各位開一個.html檔案實際測試看看)
<h2>這門課是C++ </h2>
那若要能讓”C++”這幾個字單獨產生變化，例如要讓它變藍色，我們要怎麼做呢？
作業說明中有提到可用<span>標籤，其實<span>標籤跟<em>很像，但<em>會讓包起來的文字變斜體，但<span>不會，那這樣<span>的功能到底是什麼？
各位可以把<span>想成是沒有任何效果的<em>，但我們可以自行用style或class屬性，讓<span>包起來的文字產生我們要的變化！(更多資訊可參考：http://www.wibibi.com/info.php?tid=113)
所以剛剛的需求：”C++”要變藍色，我們就可以這樣做到：
<h2>這門課是 <span style = “color: blue”> C++ </span></h2>
上面是用CSS的inline寫法，把規則直接寫在標籤的style屬性中，而另一種寫法，就是運用類別選擇器(class selector)，把規則定義在<head>區塊的<style>子區塊中(所謂的embedded寫法)！
不管哪種寫法，都做到了讓網頁的小區塊套用特定CSS規則的效果！
接下來我們要就開始把JavaScript結合進來。我們上課有提到，document.writeln()可以想成JavaScript在背後動態產生html，然後瀏覽器讀取了動態產生的html後，再顯示成我們一般看到的網頁樣子。所以我們上面的範例，若改用JavaScript寫就會變成：
範例中，<span class = “blue”>要改成<span class = ‘blue’>，是因為這段文字已經是在字串內，所以我們改用單引號才可讓整個字串還是可以成立！
這部分也可用跳脫字元\”：<span class = \”blue\”>，但比較不好閱讀，所以一般建議就直接把雙引號改單引號，既可讓字串不會出錯，又可維持code的美觀。
接下來，我們要引入變數了，如果”C++”是變數course的值，上面的程式又會變成怎樣呢？
首先，會有一個變數宣告：var course = “C++”;
接著，我們把writeln的字串參數切開，把會變化的部分改串接變數，code就會變成： (Source code: https://codeshare.io/aVm865, expired after 15 days)
程式碼中，大家要記得把span標籤和class屬性都留在字串中，這樣才有辦法透過writeln產生我們想要的html片段。
大家可以把自己想像成瀏覽器中的JavaScript直譯器，writeln的參數其實是三個字串的串接：
(1) “<h2>這門課是 <span class = ‘blue’>”, (2) course的值, (3) “</span></h2>”
而目前course的值就是”C++”，所以就是底下三個字串的串接：
(1) “<h2>這門課是 <span class = ‘blue’>”, (2) “C++”, (3) “</span></h2>”
串接完的完整字串即是：
“<h2>這門課是 <span class = ‘blue’> C++</span></h2>”
而呼叫document的writeln()方法就會把這段html code生成出來，再交由瀏覽器顯示！
希望透過此篇教學能讓各位很順利完成作業三！
]]>