](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference)
Learning outcomes:
By the end of this module, you will be able to:
- Separate page structure from page content
- Use JavaScript objects
- Implement JavaScript templates with Handlebars
- Display different data with the same template
- Display the same data with different templates
- 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.
结构：<h1 id="title"> ... </h1> -> 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:
if we think an a variable as a box, then a object can be seen as a collection of box.
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
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.
--- explains ---
<script>...</script> it exists inside a script tag, just like our JavaScripttype="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.
Putting data into templates
Turn our template text and our data into actual HTML code:
(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文件头部添加<script src="../js/handlebars-v3.0.3.js"></script>
Displaying different data with the same template
----- we want to have: same HTML + same template +different data ----
For example we have hier two pics:
Code:
Displaying different data with the different
----- same data, different templates: (1) normal showing (2) pop-up view -----
below is a modul from bootstrap, if you wanna see more, go to the bootstrap-website and you will find more!
$("#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: #
