Week 3: Adding content to websites

Screenshot 2016-09-25 22.56.31.png

]( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference)

Learning outcomes:
By the end of this module, you will be able to:

1. Separate page structure from page content
2. Use JavaScript objects
3. Implement JavaScript templates with Handlebars
4. Display different data with the same template
5. Display the same data with different templates
6. Use a Bootstrap modal

Separating structure and content

When the structure and content mixed together it will cause a lot of work when your what to change the structure.
For example, i wanna my website includes 1000 images -> and it should be like DO HTML ONCE, and then BRING 1000 INDIVIDUELL IMAGES, so that can work, otherwise will it be horrible.

Website with structure AND content

结构：

...

-> same for all image
内容：The Earth seen from Apollo 117 ->unique to each image

JavaScript objects

How can we separate the content out of HTML?
We've actually done that one with VARIABLES.
-> 1) set the variable(JavaScript): Wrap text-variables in quotes var image1Name="1mage 1"
-> 2) use the variable(jQuery): put the text into the website
$("#title").html(image1Name)
***Summary: HTML=STRUCTURE, CSS=STYLE, VARIABLE=CONTENT ***

What we need, is a tool called JavaScript:

JavaScript : definition + using

if we think an a variable as a box, then a object can be seen as a collection of box.

JavaScript: object

Note: JavaScript does not have classes, it just has objects

JavaScript templates with Handlebars

JavaScript is a little bit difference from other languages. But it is really powerful tool for creating structured content, and that really what we need if we want to do the separation thing between structure and content.
-> Now we are going to find out, how can we use those content in our html file

content should be putted into the structure

HTML template: filled those holes using content from a JavaScript objects.
But, javascript do not support template, so we need to use an external library to create these templates, i'm gonna use one called Handlebars.

example of using Handlebars

--- explains ---
it exists inside a script tag, just like our JavaScript
type="text/x-handlebars-template" says this is a template, NOT JavaScript
{{title}}, {{author}}, {{src}} these are the really important things -> They are placeholders, called template expressions, the holes we talked about.

change the code with templates

Putting data into templates

Turn our template text and our data into actual HTML code:

how did it work

JavaScript code with extra lib jQuery

(1) get the text of the template out of the DOM, so we can use jQuery to do that. Grabbing the HTML out of the script tag it was in.
(2) Then we compile the template. So we call handlebars.compile, that's a function. We parse in the source, which is the text of the template, and we get out this variable template, which is this JavaScript code, which will actually turn objects into HTML.
COMPILING：is the process of taking Handlebars template code and turning it into javaScript that can generate HTML
TEMPLATES： generate HTML that can then be put into the web page
(3) Then the next step is to take the data, which is your object, put it through the template. So that's a function call, we're calling the template function in passing in data. And then what that gives us is some HTML code.
(4) use jQuery again to copy back the HTML into the DOM of our content element.
JQUERY：is the library you use for interacting with the DOM

--------- Demo -----------
Attention:在使用Handlebars之前，要在html文件头部添加

Displaying different data with the same template

HTML中的head部分

----- we want to have: same HTML + same template +different data ----
For example we have hier two pics:

content we want to show

Code:

Code

Displaying different data with the different

----- same data, different templates: (1) normal showing (2) pop-up view -----

show same pic in two different ways

below is a modul from bootstrap, if you wanna see more, go to the bootstrap-website and you will find more!

HTML part from a modul from Bootstrap

$("#imageModal").modal('show'); -> Show the modal
$('#imageModal').on('hidden.bs.modal', function(){ $("#detailsbtn").click(); }) -> DO STH. when you click the foto. Bind a function to an event. jQuery .on( ) function is used to handle all kinds of events. $('#detailsBtn').click( ) is called to automatically click the details button and show the image detail view.

Attention: The rendered template HTML is only "real" once we call jQuery's html( ) function to add it to the DOM.
A modal: refers to a dialog box that appears in front of the main interface

Summary

---

jQuery: jQuery的是一套跨浏览器的JavaScript的函式库，简化HTML与JavaScript的之间的操作。全球前万个访问最高的网站中，有65％使用了jQuery的，是目前最受欢迎的JavaScript的函式库

The name Handlebar come from an other library called moustache. And someone think the curly brackets look just like moustache.{ }

符号等等：
curly brackets: 花括号
semicolon: 双引号
koma: 逗号
point: 点
hash simbol: #