GRADE 11TH WDD 2018
Web Page Layout and Navigation: Code Examples
Here are code examples for the key concepts discussed, designed to be easy to understand.
1. Main Sections of a Web Page (Using Semantic HTML5)
This example shows the basic structure of a web page using modern HTML5 semantic tags.
HTML ([Link]):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Basic Web Page</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<!-- 1. Header: Top part for branding and main navigation -->
<header>
<h1>My Awesome Website</h1>
<!-- 2. Navigation: Links to other pages -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
GRADE 11TH WDD 2018
</ul>
</nav>
</header>
<!-- 3. Main Content: The primary information of the page -->
<main>
<section>
<h2>Welcome to Our Site!</h2>
<p>This is the main content area where all the important information goes.</p>
<p>You can add text, images, videos, and more here.</p>
</section>
<aside>
<h3>Related Info</h3>
<p>This is a sidebar with some extra, related content.</p>
</aside>
</main>
<!-- 4. Footer: Bottom part for copyright, legal info, etc. -->
<footer>
<p>© 2026 My Awesome Website. All rights reserved.</p>
</footer>
</body>
</html>
body {
font-family: Arial, sans-serif;
margin: 0;
GRADE 11TH WDD 2018
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
header {
background: #333;
color: #fff;
padding: 1rem 0;
text-align: center;
header h1 {
margin: 0;
nav ul {
padding: 0;
list-style: none;
display: flex; /* Makes nav links horizontal */
justify-content: center;
nav ul li {
margin: 0 15px;
nav a {
color: #fff;
text-decoration: none;
GRADE 11TH WDD 2018
font-weight: bold;
main {
padding: 20px;
display: flex; /* Used here to show main content and aside side-by-side */
gap: 20px; /* Space between content and aside */
section {
flex: 2; /* Main content takes more space */
background: #fff;
padding: 15px;
border-radius: 5px;
aside {
flex: 1; /* Aside takes less space */
background: #e2e2e2;
padding: 15px;
border-radius: 5px;
footer {
background: #333;
color: #fff;
text-align: center;
padding: 1rem 0;
GRADE 11TH WDD 2018
position: relative;
bottom: 0;
width: 100%;
### 2. Common Layout Structures (Columns) & 4. Techniques to Create Multicolumn Layouts
Let's demonstrate a Two Column Layout using the three main CSS techniques: Float, Flexbox, and Grid.
#### 2.1. Using CSS Float Property
This is an older method for creating columns.
HTML (same [Link] structure as above, but with specific divs for layout within <main>):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float Layout Example</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header><h1>Float Layout</h1></header>
<nav>...</nav> <!-- Navigation omitted for brevity in this example -->
<div class="wrapper">
<div class="column left-column">
<h2>Left Sidebar</h2>
<p>This is the left column. Content here.</p>
GRADE 11TH WDD 2018
</div>
<div class="column right-column">
<h2>Main Content</h2>
<p>This is the main content area. It will float next to the left column.</p>
</div>
<div class="clearfix"></div> <!-- Essential for clearing floats -->
</div>
<footer><p>© 2026</p></footer>
</body>
</html>
CSS ([Link]):
body { font-family: Arial, sans-serif; margin: 0; }
header, footer { background: #333; color: #fff; padding: 1rem; text-align: center; }
.wrapper { width: 90%; margin: 20px auto; background-color: #f9f9f9; padding: 10px; }
.column {
padding: 15px;
border: 1px solid #ccc;
box-sizing: border-box; /* Important: padding and border don't add to width */
.left-column {
float: left; /* Makes it sit on the left */
width: 30%;
background-color: #e6f7ff;
}
GRADE 11TH WDD 2018
.right-column {
float: left; /* Makes it sit next to the left column */
width: 70%;
background-color: #fff;
/* Clearfix: Needed to prevent parent container from collapsing and for elements after floats to behave normally
*/
.clearfix::after {
content: "";
display: table;
clear: both;
Explanation: float: left makes the columns sit next to each other. The .clearfix div (or a pseudo-element like ::after
on the parent container) is crucial with floats to ensure the layout doesn't break
#### 2.2. Using CSS
Flexbox is a more flexible and modern way to create one-dimensional (row or column) layouts.
HTML (similar structure, using <div class="container">):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Layout Example</title>
<link rel="stylesheet" href="[Link]">
</head>
GRADE 11TH WDD 2018
<body>
<header><h1>Flexbox Layout</h1></header>
<nav>...</nav>
<div class="flex-container">
<div class="flex-item sidebar">
<h2>Left Sidebar</h2>
<p>This column uses Flexbox. It's much easier!</p>
</div>
<div class="flex-item content">
<h2>Main Content Area</h2>
<p>Flexbox makes it simple to arrange items in a row or column.</p>
<p>The items automatically adjust within the container.</p>
</div>
</div>
<footer><p>© 2026</p></footer>
</body>
</html>
CSS ([Link]):
body { font-family: Arial, sans-serif; margin: 0; }
header, footer { background: #333; color: #fff; padding: 1rem; text-align: center;
.flex-container {
display: flex; /* Turns the container into a flex container */
width: 90%;
margin: 20px auto;
GRADE 11TH WDD 2018
background-color: #f9f9f9;
padding: 10px;
gap: 20px; /* Creates space between flex items */
.flex-item {
padding: 15px;
border: 1px solid #ccc;
background-color: #fff;
.sidebar {
flex: 1; /* Takes 1 part of the available space */
min-width: 150px; /* Optional: Minimum width */
background-color: #e6f7ff;
.content {
flex: 2; /* Takes 2 parts of the available space (twice the sidebar) */
background-color: #fff;
Explanation: display: flex on the parent container makes its direct children (.flex-item) arrange themselves in a
row by default. flex: 1 and flex: 2 tell the items how to share the available space. No clearfix needed!
#### 2.3. Using CSS Grid
Grid is excellent for complex two-dimensional layouts (rows and columns simultaneously).
HTML (similar structure, using <div class="container">):
<!DOCTYPE html>
GRADE 11TH WDD 2018
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout Example</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header><h1>Grid Layout</h1></header>
<nav>...</nav>
<div class="grid-container">
<div class="grid-item sidebar-grid">
<h2>Left Sidebar</h2>
<p>This column uses CSS Grid. It's powerful for complex layouts.</p>
</div>
<div class="grid-item content-grid">
<h2>Main Content Area</h2>
<p>Grid allows you to define rows and columns directly on the container.</p>
<p>It's great for overall page structure.</p>
</div>
</div
<footer><p>© 2026</p></footer>
</body>
</html>
GRADE 11TH WDD 2018
CSS ([Link]):
body { font-family: Arial, sans-serif; margin: 0; }
header, footer { background: #333; color: #fff; padding: 1rem; text-align: center; } .grid-container {
display: grid; /* Turns the container into a grid container */
grid-template-columns: 1fr 2fr; /* Defines two columns: 1 fractional unit, then 2 fractional units */
width: 90%;
margin: 20px auto;
background-color: #f9f9f9;
padding: 10px;
gap: 20px; /* Space between grid items */
.grid-item {
padding: 15px;
border: 1px solid #ccc;
.sidebar-grid {
background-color: #e6f7ff;
.content-grid {
background-color: #fff;
Explanation: display: grid on the parent. grid-template-columns: 1fr 2fr; is the magic: it creates two columns,
where the second column is twice as wide as the first. fr stands for "fractional unit," making it very easy to define
responsive column widths.
. Creating Responsive Layouts (Using Media Queries)
GRADE 11TH WDD 2018
All the above examples can be made responsive using @media queries. Let's make the Flexbox example stack
columns on smaller screens.
HTML (same as Flexbox example):
<!-- ... same as Flexbox HTML ... -->
CSS ([Link]):
body { font-family: Arial, sans-serif; margin: 0; }
header, footer { background: #333; color: #fff; padding: 1rem; text-align: center; }
.flex-container {
display: flex;
width: 90%;
margin: 20px auto;
background-color: #f9f9f9;
padding: 10px;
gap: 20px;
.flex-item {
padding: 15px;
border: 1px solid #ccc;
background-color: #fff;
.sidebar {
flex: 1;
min-width: 150px;
background-color: #e6f7ff;
}
GRADE 11TH WDD 2018
.content {
flex: 2;
background-color: #fff;
/* --- RESPONSIVENESS: Media Query --- */
@media (max-width: 768px) { /* When screen width is 768px or less (e.g., tablets or phones) */
.flex-container {
flex-direction: column; /* Stack items vertically instead of horizontally */
gap: 10px; /* Reduce gap for smaller screens */
.sidebar, .content {
flex: auto; /* Allow items to take their natural width/height */
width: 100%; /* Make them take full width */
Explanation: The @media (max-width: 768px) rule applies new styles only when the screen is 768 pixels wide or
smaller. Here, we change flex-direction: column to stack the columns, making it a single-column layout for smaller
devices.
### . HTML Elements for Layout (Already covered)
As you can see, in all the examples, we've used:
• <div> tags: For generic containers, especially for layouts with float, flexbox, or grid.
• Semantic HTML5 tags: header, nav, main, section, aside, footer give meaning to the structure, improving
accessibility and SEO.
These examples provide a practical look at how the concepts from your notes are translated into actual code. Feel
free to copy and paste them into HTML and CSS files to see them in action!
GRADE 11TH WDD 2018
D E:
Why <!DOCTYPE html>
What is DOCTYPE means? And why it is written in Capital letter?
What it is closing? Like <p> </p>
That's an excellent set of questions about <!DOCTYPE html>! It's a small but very important line in any HTML
document.
Let's break it down:
### Why <!DOCTYPE html>?
Think of <!DOCTYPE html> as an instruction manual you hand to the web browser *before* it starts reading your
HTML code.
Its main purpose is to tell the browser:
• "Hey, this document is an HTML5 document."
• "Please render this page using modern, standard rules, not old, quirky, or inconsistent rules."
### What does DOCTYPE mean?
• DOCTYPE stands for "Document Type Declaration."
• It's a declaration (a statement), not an actual HTML tag or element. It doesn't create content; it defines the
rules for the content that follows.
Why is it important?
Without <!DOCTYPE html>, web browsers go into something called "quirks mode." In quirks mode, browsers try
to mimic how very old web browsers (like Internet Explorer 5 or Netscape 4) rendered web pages, which often
involved many bugs and inconsistencies. This leads to:
• Unpredictable Layouts: Your CSS might not work as expected.
• Inconsistent Behavior: The page might look different in different browsers.
By including <!DOCTYPE html>, you ensure the browser uses "standards mode," where it follows the latest HTML
and CSS specifications, giving you consistent and predictable results across modern browsers.
### Why is it written in Capital Letters?
GRADE 11TH WDD 2018
• Historical Reasons: In older versions of HTML (like HTML 4.01) and XHTML, the DOCTYPE declaration was more
complex and based on SGML (Standard Generalized Markup Language). SGML required keywords like DOCTYPE to
be uppercase.
• Convention and Readability: Even though HTML5's <!DOCTYPE html> is much simpler and technically case-
insensitive (meaning <!doctype html> would also work perfectly fine), the uppercase DOCTYPE is a strong, long-
standing convention.
* It makes it stand out immediately as a special declaration at the very top of the document.
* It differentiates it from regular HTML elements, which are typically written in lowercase.
• It's not a strict requirement for HTML5, but it's universally recommended for best practice.
### What is it closing? Like <p> </p>?
• It is NOT closing anything.
• Unlike <p> (paragraph) which has an opening <p> tag and a closing </p> tag because it *contains content*, <!
DOCTYPE html> is a self-contained declaration.
• It's an instruction *about* the document, not a part of the document's content structure. It doesn't wrap
anything. It simply declares the document type.
<!DOCTYPE html> is like putting a label on a box that says "This box contains HTML5!" It tells the browser how to
read and display your website correctly, using all the modern web rules. We write DOCTYPE in big letters mostly
because that's how it's always been done, making it easy to spot, even though for HTML5, it's not strictly
necessary to shout it. And because it's just a label, it doesn't need a "closing label."
And tell me attributes and tag? With example and their difference:
You're asking about fundamental building blocks of HTML! Understanding tags and attributes is key to building
web pages. Let's break them down with examples.
### HTML Tags
• What they are: Tags are the fundamental building blocks of HTML. They are keywords enclosed in angle
brackets (< >). They tell the browser what kind of content is being displayed and how it should be structured or
displayed.
• Purpose: To define elements and structure the content of a web page.
• Types:
GRADE 11TH WDD 2018
* Opening Tags: Mark the beginning of an element (e.g., <p>, <h1>, <div>).
* Closing Tags: Mark the end of an element. They are the same as the opening tag but with a forward slash /
before the keyword (e.g., </p>, </h1>, </div>).
* Self-Closing Tags: Some elements don't need content inside them and are written as a single tag. They can
sometimes be written with a slash at the end for clarity, especially in older HTML/XHTML, but in modern HTML5,
the slash is often optional (e.g., <br>, <img>, <input>, <hr>, <meta>, <link>).
Example:
Let's look at a simple paragraph:
<p>This is a paragraph of text.</p>
* <p> is the opening tag.
• </p> is the closing tag.
• Together, they define a paragraph element.
• "This is a paragraph of text." is the content of the paragraph element.
Another example, an image tag (self-closing):
<img src="[Link]" alt="A picture of me">
* <img> is the tag. It's self-closing.
### HTML Attributes
• What they are: Attributes are special keywords that provide additional information about an HTML element.
They are always placed inside the opening tag of an element.
• Purpose: To modify the behavior or appearance of an HTML element, or to provide metadata.
• Format: Attributes come in name="value" pairs.
* name: The name of the attribute (e.g., src, alt, href, class, id).
* value: The value assigned to that attribute, which specifies the additional information. Values are typically
enclosed in quotation marks (single ' or double ").
Example:
Let's revisit the image tag and add more context:
GRADE 11TH WDD 2018
<img src="[Link]" alt="A picture of me" width="200" height="150">
In this example:
• <img> is the tag.
• src, alt, width, and height are attributes.
* src (source): Tells the browser where to find the image file. The value is "[Link]".
* alt (alternative text): Provides descriptive text for the image, used by screen readers and if the image fails to
load. The value is "A picture of me".
* width and height: Specify the dimensions of the image. The values are "200" (pixels) and "150" (pixels).
Another example, a link tag:
Visit [Link]
* <a> is the opening tag.
• href, target, and class are attributes.
* href (hypertext reference): Specifies the URL the link should go to. The value is "[Link]
* target: Specifies where to open the linked document. _blank means open in a new tab.
* class: Assigns a class name to the element, which can be used by CSS to style it or by JavaScript to
manipulate it. The value is "external-link".
• </a> is the closing tag.
• "Visit [Link]" is the content of the link element.
### Difference between Tags and Attributes
Think of it like this:
• Tag (<img>): You're telling the browser, "I want to insert a picture here."
• Attributes (src="...", alt="..."): You're giving the browser the specific details about that picture: "The picture is
from this file (src), and if it doesn't show, describe it as 'this' (alt)."
Both are essential for creating functional and well-defined web pages!.
This image covers Unit 1: Scripting Language for Grade 11 Web Design. This is the "brain" of the website—it's
what makes the page do things (interactivity).---
GRADE 11TH WDD 2018
1. WHAT IS A SCRIPTING LANGUAGE?
Think of a website like a human body:
• HTML is the skeleton (structure).
• CSS is the skin and clothes (appearance).
• Scripting Language (JavaScript) is the brain and muscles (movement and thinking).
2. Five Key Indicators of a Scripting Language:
The notes list 5 ways to know if a language is a "scripting" language:
1. Interpreted (not Compiled):
• Simple explanation: The computer reads the code line-by-line and does it immediately. It doesn't need to
"translate" the whole book before it starts reading.
2. High-level Syntax:
• Simple explanation: The code looks more like human language (English) and less like computer "0s and 1s." It
is easier for students to read and write.
3. Dynamic Typing:
• Simple explanation: You don't have to tell the computer exactly what kind of data you are using (like "this is a
number" or "this is a word"). The computer figures it out while it runs.
4. Built-in Libraries:
• Simple explanation: It comes with "pre-made tools" that help you do common jobs fast, like showing the date
or creating an alert box.
. Flexibility and Speed:
• Simple explanation: It is designed so programmers can write and change code very quickly.
Popular Examples:
• JavaScript: The king of web design.
• Python: Used for data and AI.
• PHP: Used for the "back-end" of websites (like Facebook).
GRADE 11TH WDD 2018
• Python, Ruby, Perl, Bash.
. Why use JavaScript (Interactivity)?
The notes say that applying interactivity makes a website:
• Engaging: It keeps users interested.
• User-friendly: It makes the site easier to use.
• Interactive: It reacts to what the user does (like clicking a button or filling a form).---
Simple Teaching Tip for your Students:
Ask your students: "What happens if you click a 'Like' button on Facebook?"
• HTML made the button.
• CSS made the button blue.
• JavaScript (the script) is what actually adds the "Like" to the counter when you click it!
This next part of your module focuses specifically on JavaScript (JS). It explains why JavaScript is the most
important language for making websites feel "alive.":
### 1. THE HISTORY (PREFACE) OF JAVASCRIPT
* Who: Created by Brendan Eich in 1995.
* What: A high-level, interpreted programming language.
* How it differs from HTML/CSS:
* HTML: Structure (Skeleton)
* CSS: Styling (Clothes)
* JavaScript: Behavior (Brain). It makes pages dynamic.
### 2. What is "Client-Side" Scripting?
The notes mention that JavaScript is primarily client-side.
* Simple Explanation: This means the code runs inside the user's web browser (like Chrome or Safari) on their
own computer, not on the big server far away. This makes the website respond instantly.
### 3. The Role of JavaScript
GRADE 11TH WDD 2018
JavaScript does several important jobs:
1. Manipulate the DOM: It can change HTML and CSS *after* the page has loaded (e.g., changing a color when a
button is clicked).
2. Validate Forms: It checks if an email address is written correctly before the user hits "send."
3. Handle Events: it listens for user actions like clicks, scrolling, or typing.
4. Fetch Data: It can get new information (like weather updates) without refreshing the whole page.
### 4. Modern JavaScript (Beyond the Browser)
JavaScript is now used for everything:
* [Link]: For server-side programming.
* React Native: For making mobile phone apps.
* Frameworks: React, Angular, and Vue help developers build huge websites like Facebook or YouTube.
### Code Example for Students: "The Light Bulb"
HTML:<h2 id="message">The Light is OFF</h2>
<button onclick="turnOn()">Click to turn ON</button>
JavaScript:function turnOn() {
1. Find the element (This is manipulating the DOM)
let element = [Link]("message");
// 2. Change the text
[Link] = "The Light is ON! 💡";
// 3. Change the CSS style
[Link] = "orange";
* HTML created the button and the text.
* JavaScript (the turnOn function) is the "brain" that waited for the Event (the click) and then changed the page
dynamically.
GRADE 11TH WDD 2018
Exercise:
*"In the code above, which part is the 'Indicator' of a scripting language?"*.
This page of your module is very encouraging for students! it explains why they should learn JavaScript and how it
can help their future careers.
1. It is the "Language of the World"
JavaScript is the most popular programming language globally. If you want to be a software engineer, you must
know it. Because it is so popular, there is a huge community of people who can help you learn.
2. No Special Setup Needed (Very Important!)
Unlike other languages (like C++ or Java) that require you to install heavy software, JavaScript is already installed
on every computer.
• Proof for students: Every web browser (Chrome, Firefox, Safari) is a JavaScript engine. You can start coding right
now without downloading anything!
3. "Learn Once, Use Everywhere" (Versatility)
In the past, JavaScript was only for websites. Now, it is used for:
• Websites: (Front-end and Back-end using [Link])
• Mobile Apps: (Using React Native)
• Desktop Apps: (Like Discord or Slack)
• Game Development: (Making 2D and 3D games in the browser)
4. High Demand and High Pay
Because almost every business in the world needs a website or an app, JavaScript programmers are in high
demand. This means there are many jobs available, and they usually pay very well.
5. Thousands of Tools (Frameworks)
You don't have to write everything from scratch. There are "libraries" and "frameworks" like jQuery, React, and
Angular that are like "Lego sets" for code—they help you build big projects very quickly.
A Cool Trick for your Students (No Setup Required!)
To prove that JavaScript is "everywhere," have your students do this in class:
1. Open any website (like [Link]) in a browser on a computer.
GRADE 11TH WDD 2018
2. Right-click anywhere and choose "Inspect".
3. Click on the tab that says "Console".
4. Type this exactly: alert("Hello Grade 11!");
5. Press Enter.
What happens? A popup box appears!
• The lesson: They just ran their first line of JavaScript code without installing a single thing. This shows how
accessible and powerful the language is.
Summary for the blackboard:
• Popularity: Most used language in the world.
• Ease: No special software needed—just a browser.
• Power: Build websites, mobile apps, and games.
• Jobs: High demand and good salary for those who know it
Important Note: There is a small mistake in your textbook's text in point #7 that I will help you correct so your
students learn it correctly!
Here is the breakdown of the 7 features:
1. Object-Centered Script Language
JavaScript uses "Objects."
• Analogy: If "Car" is an object, it has properties (Color: Red, Doors: 4) and actions (Drive, Stop).
• In JS, almost everything is an object. Even the browser window you are using is called the window object.
2. Client-Edge Technology
• The "Client" is the Web Browser (Chrome, Firefox, etc.).
• This means JavaScript does its work on the user's computer, making it very fast because it doesn't have to wait
for a server to respond for every small action.
3. Validation of User's Input
• Commonly called Form Validation.
GRADE 11TH WDD 2018
• Example: If a student tries to submit a form without typing their name, JavaScript can stop the form and show
a red message saying "Please enter your name." It checks for errors before the data is sent.
4. Else and IF Statements
• These are used for Logic (Decision making).
• Example: IF it is raining, take an umbrella. ELSE, leave it at home. This allows the website to "think" and react
differently in different situations.
5. Interpreter Centered
• As we discussed before, JS is interpreted.
• The browser reads the code and acts on it immediately, line-by-line. It does not need a "Compiler" to turn it
into a different file first.
6. Ability to Perform Built-in Functions
JavaScript comes with "ready-to-use" tools. Your notes mention these four:
• isNaN(): Checks if something is "Not-a-Number." (Useful to make sure a user typed a number).
• Number(): Converts text into a number.
• parseFloat(): Turns a string into a number with decimals (like 10.5).
• parseInt(): Turns a string into a whole number (like 10).
7. Case Sensitive Format (Teacher Correction Needed!)
• The Truth: JavaScript IS case-sensitive. It means that uppercase and lowercase letters DO make a difference.
• Example: If you name a variable myCity, and then try to use it as mycity, the code will FAIL. The computer sees
them as two completely different things.
Simple Code Example for Students (Logic & Functions)
You can show them this code to combine Point 4 (IF/ELSE) and Point 6 (Built-in Function):
let age = "25"; // This is a string (text)
let ageNumber = parseInt(age); // Point 6: Convert text to a number
if (ageNumber >= 18) { // Point 4: Logic
alert("You are an adult.");
GRADE 11TH WDD 2018
} else {
alert("You are a minor.");
Summary
1. Objects: Everything is a "thing" with properties.
2. Browser Power: It runs on the user's computer.
3. Security: It checks forms for errors.
4. Logic: It uses IF/ELSE to make decisions.
5. Fast: It doesn't need to be compiled.
6. Tools: It has built-in math and text tools.
7. Precision: Every capital letter matters (Case Sensitive)!
*cannot* do) and how to start using it.
Here is a simple summary for you
### 1. More Cool Things JavaScript Can Do
* Modify HTML: It can add or delete HTML tags instantly. (Example: Adding a new item to a shopping list without
refreshing the page).
* User Notifications: It creates those pop-up boxes or notifications you see on websites.
* Ajax (Back-end Data Loading): It can load new data from a server in the background while the user is still
looking at the page.
* Server Applications: Using [Link], JavaScript can now be used to build the "behind-the-scenes" parts of the
internet (Web Servers).
### 2. The Advantages (Why we love JS)
1. Saves Traffic: Since the browser checks for errors (like a missing password) on the user's computer, it doesn't
have to keep sending data back and forth to the big server.
2. No Waiting: The user gets immediate feedback. They don't have to wait for the whole page to "reload" to see a
change.
GRADE 11TH WDD 2018
3. Better Interaction: You can make things happen when a user hovers their mouse over a button or uses their
keyboard.
### 3. The Limitations (What JS *cannot* do)
This is very important for security!
* Cannot read/write files: For security reasons, a website's JavaScript is not allowed to read or delete files on
your computer. (Imagine if a random website could delete your photos—that would be dangerous!).
* One thing at a time: It doesn't have "multi-threading." It is a "lightweight" language that usually performs tasks
one after anothe
### 4. Setting Up Your "Lab" (Development Environment)
To start writing JavaScript, you only need two things:
1. A Text Editor: This is where you write the code.
* *Best choice:* Visual Studio Code (VS Code).
* *Others:* Notepad++, Sublime Text, or Atom.
2. A Web Browser: This is where you see the result.
* *Choices:* Google Chrome, Firefox, or Safari.
### Code Example: Adding HTML with JS (Point #3)
how JavaScript can "Add" a new tag to a page that was empty before!
HTML:<div id="container"></div>
<button onclick="addText()">Add a Paragraph</button>
JavaScript:function addText() {
// Find the empty container
let area = [Link]("container");
// Create a new <p> tag
let newTag = [Link]("p");
// Put text inside it
GRADE 11TH WDD 2018
[Link] = "I was added by JavaScript! 🚀";
// Put the tag inside the div
[Link](newTag);
### Simple Tip for Students:
Explain that Visual Studio Code is like a "Super Word Processor" specifically for code. It highlights errors and helps
you type faster. Once you save your file as .html, you just double-click it to open it in your Browser to see your
script working!