When we call something dynamic, we mean that it exists only at run time. We can define the structure in our code but it will not physically exist until the page is loaded and the JS/jQuery code is run.

To start with, we are going to consider how we can build a webpage using JS/jQuery.

For the Summer Work, you were asked to create webpages using actual HTML 5 code. In this section, we will do the same BUT we will only use JS/jQuery to make those elements using data from dictionaries.

Remember that, a Dictionary has a:

• single name
• parts that are identified using "keys"
• values that are accessed by using the "key"

In this website, there are several dictionaries that are defined in specific files but we will use the key terms dictionary:

This is a dictionary containing information about key terms and has the following keys:

• topic
• section
• subsection
• term
• term
• meaning

This data can be found in the file called terms.js in the folder data

What will we create?

We are going to use the dictionary element to make a block of HTML code containing the information from the dictionary.

If we write this information as HTML Code into this page, modelling.html, the code we produce would look like this:

Topic 1: Fundamentals of Programming

1.1 Programming

1.1.1 Data Types

Arrays

A data structure for storing a finite, ordered set of data of the same data type within a single identifier.

You should see how each element of HTML Code is displayed using the code.

In this section we are going to learn how to make this using JS/jQuery and then place it into the correct place on the page.

Step 1: Setting up the HTML page

The HTML page needs to have a place for the new elements to be placed.

We do this by making an element to contain the new elements and giving it a unique identifier. This is a very common procedure when writing dynamic web pages.

You can find this code on line 161 of this HTML page where a div element has been given the id of containerForTerms

Step 2: Using JS/jQuery to create elements

You should see that the element with id = "containerForTerms" is completely empty - there is nothing between the div tags.

We are going to place something there using JS/jQuery.

Step 2a: Controlling the Actions

This is done in the JS code and you can see the main() routine here. Remember that the main() routine is there to control the actions that we want to carry out. It does the following:

1. selects a term from the list of terms and calls it termToTry
2. passes termToTry to the subroutine createTermElement and puts the return value into the varaible called newElement
3. appends or adds to the end of, newElement to the HTML element with an id of containerForTerms using the jQuery code $("#containerForTerms"). the # symbol means that the element with the specific id is selected

Step 2b: Creating a Function

This is done in the JS code and you can see the createTermElement() subroutine here. Remember that this function is there to carry out our instructions - the actions that we want to carry out.
It does the following:

1. creates an h3 element called topicElement using jQuery code to define a heading 3 element. It then adds the topic from the dictionary to this using the method
   .html(terms.topic)
   This puts the topic value between the h3 tags
2. creates an h4 element called sectionElement using jQuery code to define a heading 4 element. It then adds the section from the dictionary to this using the method
   .html(terms.section)
   This puts the section value between the h4 tags
3. creates an h5 element called subsectionElement using jQuery code to define a heading 5 elements. It then adds the topic from the dictionary to this using the method
   .html(terms.subsection)
   This puts the subsection value between the h5 tags
4. creates an h6 element called termElement using jQuery code to define a heading 6 element. It then adds the term from the dictionary to this using the method
   .html(terms.term)
   This puts the term value between the h6 tags
5. creates an p element called meaningElement using jQuery code to define a paragraph element. It then adds the meaning from the dictionary to this using the method
   .html(terms.meaning)
   This puts the meaning value between the p tags
6. the last thing to happen is to create a div element called container using jQuery code to define a div element.
   It then adds a class to that div so that it shows as 4 wide.
   It then appends to it all of the other elements that have been created using
   .appene(topicElement) etc.
   This puts the all of the newly created elements inside this container, which is then returned to the main() routine.

This video goes through the modelling on this page: