3.6 Create a Dynamic Website

This topic explains how to create a dynamic website using JavaScript, HTML, and CSS, where content changes based on user input or actions.

Definition

Dynamic Website: A dynamic website is one where the information is changed or adjusted in accordance with user input or choice. If a school wants to display the result of each student on their website, they would need to create a different static webpage for each student. The solution is to provide a dynamic website such that contents change according to the user input. Such dynamic websites can be created via JavaScript along with HTML and CSS.

Core Concept

A dynamic website is like a smart billboard that changes its message based on who is looking at it or what they do. A static website is like a printed poster—everyone sees the same thing. A dynamic website can show different content to different users, respond to button clicks, and update information without reloading the page. For example, an online shopping site shows personalized recommendations, and a school website can display individual student results. JavaScript is the key technology that makes this possible.

Detailed Explanation

Why Dynamic Websites?

If a school wants to display the result of each student on their website, then they have to create a different static webpage for each student. And as the students increase, so does the handling and managing of these webpages. The solution is to provide a dynamic website such that contents change according to the user input.

• Static websites require separate pages for each user/content.
• Dynamic websites generate content on demand.
• Easier to manage and scale.
• Personalized experience for users.

Creating a Dynamic Website with JavaScript

Such dynamic websites can be created via JavaScript along with HTML and CSS.

Example: Dynamic Content with a Button

Recall the earlier example where we printed index numbers via a loop from 0–9. We extend the same code, and the revised code is shown below, where the initial lines are the same. At line 10, a new function is added, namely `descOrder()`, which when called prints the index in descending order. Additionally, the program has an id of 'dynamic content' and a button which, when pressed, calls the `descOrder()` function. A dynamic content is a component/portion of the website that alters based on user input.

Code: ```html <html> <body> <script type="text/javascript"> var index; document.write("For-Loop Starts After This ... <br />"); for(index = 0; index < 10; index=index+1) { document.write("Index No. :", index, "<br />"); } document.write("For-Loop Stopped!"); function descOrder() { for(index = 10; index > 0; index=index-1) { document.write("Index No. :", index, "<br />"); } } </script> <p id="dynamicContent">Click the button to change output to Descending Order.</p> <button onclick="descOrder()">Descending Order</button> </body> </html> ```

• Lines 1-9: The initial code prints index numbers in ascending order (0 to 9).
• Line 10: A new function `descOrder()` is defined.
• Lines 11-13: The function prints index numbers in descending order (10 to 1).
• Line 15: A paragraph with `id="dynamicContent"` is displayed.
• Line 16: A button is created with `onclick="descOrder()"`, which calls the function when clicked.

Output (Initial): ``` For-Loop Starts After This ... Index No. : 0 Index No. : 1 ... Index No. : 9 For-Loop Stopped! Click the button to change output to Descending Order. [Descending Order] ```

Output (After Clicking the Button): ``` Index No. : 10 Index No. : 9 Index No. : 8 ... Index No. : 1 ```

Dynamically Changing Background Color

After line 13 in the code, if we add the following line of code:

```javascript document.body.style.backgroundColor = "peachpuff"; ```

Save the file, refresh the webpage, and press the button, then the output changes to where the background color of the webpage also changes.

• `document` refers to the whole HTML page.
• `body` relates to the content visible.
• Using the `style` property, we can dynamically set properties of the element, like changing the background color of the page.

Activity: Add a Revert Button

As an activity, you may try to add another button and separate the functionality of changing the background color.

Hint: ```html <button onclick="changeColor()">Change Color</button> <button onclick="revertColor()">Revert</button>

<script> function changeColor() { document.body.style.backgroundColor = "peachpuff"; } function revertColor() { document.body.style.backgroundColor = "white"; } </script> ```

Key Concepts for Dynamic Websites

Steps to Create a Dynamic Website

• Create HTML Structure: Build the basic webpage with HTML.
• Add CSS Styling: Style the page with CSS.
• Write JavaScript Functions: Define functions for dynamic behavior.
• Add Event Handlers: Attach functions to events (button clicks, etc.).
• Test and Debug: Run the page, click buttons, and verify behavior.

Benefits of Dynamic Websites

• Personalization: Content changes based on user.
• Interactivity: Responds to user actions.
• Efficiency: One page can serve many purposes.
• Scalability: Easier to manage than many static pages.
• Engagement: Keeps users interested.

Intermediate Level

A dynamic website changes its content based on user input or actions. This is achieved using JavaScript along with HTML and CSS. JavaScript functions can be called by events (like button clicks) to modify the page. For example, a function `descOrder()` can print numbers in descending order when a button is clicked. The `document.body.style.backgroundColor` property can change the page's background color dynamically. Dynamic content is a portion of the page that alters based on user input. Dynamic websites are more flexible, personalized, and easier to manage than static websites, which require separate pages for different content.

Important Points

• - Dynamic website = content changes based on user input.
• - Created with JavaScript, HTML, and CSS.
• - Static websites require separate pages for each user/content.
• - JavaScript functions called by events (e.g., `onclick`) modify the page.
• - `document.body.style.backgroundColor` changes background color.
• - Dynamic content = portion of page that alters based on user input.
• - Example: Button click changes output from ascending to descending order.

Remember

• - Dynamic Website: Content changes based on user input.
• - Static Website: Fixed content; separate pages needed.
• - JavaScript: Makes pages dynamic.
• - Event Handler: `onclick="function()"`.
• - Function: Block of code called by events.
• - DOM Manipulation: `document.body.style.backgroundColor`.
• - Dynamic Content: Changes based on user input.

Common Mistakes

• - Forgetting to attach the event handler: The button won't work without `onclick`.
• - Function name mismatch: Ensure the function name matches the `onclick` value.
• - Not using `document` correctly: `document.body` refers to the body element.
• - Overwriting the page: `document.write()` after page load overwrites everything.
• - Ignoring debugging: Use breakpoints and console to find errors.

Quick Revision

A dynamic website changes its content based on user input or actions, created using JavaScript, HTML, and CSS. JavaScript functions are called by events (like button clicks) to modify the page. For example, a function can print numbers in descending order or change the background color using `document.body.style.backgroundColor`. Dynamic websites are more flexible, personalized, and easier to manage than static websites, which require separate pages for different content.

60-Second Revision

• Dynamic Website: Content changes based on user input.
• Created with: JavaScript, HTML, CSS.
• Event Handler: `onclick="function()"`.
• Function: `function name() { ... }`.
• DOM Manipulation: `document.body.style.backgroundColor`.
• Example: Button click changes output from ascending to descending order.
• Key Point: Dynamic websites respond to user actions; static websites have fixed content.