Unit 3 Programming Fundamentals Notes - Class 9 Computer Science Federal Board FBISE Pakistan

Introduction to WWW and Web Development

World Wide Web (WWW): Facilitates sharing information in formats like documents, pictures, audio, and video.
HTML (Hyper-Text Markup Language): The primary language for basic website development and customization.
Dynamic Nature: Modern websites allow content to change for individuals or groups (e.g., customized data shown after logging in as a member).

Web and Website Fundamentals

Webpage: A single document accessible through the internet.
Website: A collection or set of related webpages.
Homepage: The initial page that opens when a website is accessed.
Web Browser: Software used to locate and display documents on the web.
URL (Universal Resource Locator): The specific address used by a browser to find a document.
Search Engine: A service that finds relevant information based on keywords when the specific URL is unknown.
Web Hosting: Services that provide web servers to keep websites available round the clock.

Web Applications

Definition: A computer program accessed via a browser that executes tasks or offers services by connecting to a remote server.
Examples: Customer Relations Management (CRM) systems used for retailing, feedback, and promotions.
Architecture: Can involve one or multiple backend servers managing requests while keeping the front-end updated.

Static vs. Dynamic Websites

Static Websites

Information and content are shared but cannot be changed by the viewer.
Contents remain unchanged regardless of the number of visitors unless manually updated by the owner.
Once loaded from the server to the client's computer, the link to the server is no longer required for viewing.

Dynamic Websites

Content is adjusted based on user input or choices (e.g., changing background colors or personalized shopping promotions).
Purpose: To engage visitors longer and provide interactive experiences like e-stores or social media integration.
Technologies: Developed using scripts like JavaScript, Python, PHP, ASP, and .Net.

Front-End vs. Back-End Development

Front-End Development

Focuses on the Graphical User Interface (GUI)—the part the user sees and interacts with.
Tools: Developed using HTML, CSS, and JavaScript.
Role: The Front-end Developer creates the visual and interactive elements.

Back-End Development

Handles the communication between the front-end and the server.
Role: The Back-end Developer writes code for services and data processing that are not visible to the user.
Tools: Requires knowledge of JavaScript, Python, PHP, and ASP.Net.

The Web Communication Process

The user interacts with the Web Browser (Front-end).
The browser sends a Request (containing HTML, CSS, or JS data) to the Web Server.
The server processes the request via Back-end services.
The server sends a Response back to the browser to display the updated content.

HTML Overview

Definition: Hypertext Markup Language (HTML) is the language used to define and display content as a webpage.
Tags: Characters between angle brackets (e.g., <p>) that identify and provide support for every object on a page.
Elements: Every component is identified by a starting tag and a terminating tag (e.g., <p> and </p>) to define where an effect begins and ends.
Development Tools: Code can be written in Notepad or Integrated Development Environments (IDEs) like Visual Studio 2022, Netbeans, or Atom.

HTML Document Object Model (DOM)

Definition: A standard for mutual interpretation where a language is associated with a hierarchy.
Structure: Every file is interpreted as a DOM-tree where components are treated as "nodes."
The Hierarchy:
1. Document: The top of the tree.
2. html node: Contains the entire document.
3. head node: Holds the title and metadata.
4. body node: Contains all visible content like headings and paragraphs.

Core HTML Tags

<html>: The tag-pair that identifies the document. Files must be saved with a .html extension.
<head>: Defines the area for tags that are not part of the main body (e.g., the title).
<title>: Gives the webpage a name that appears on the browser tab.
<body>: The main part of the document where all visible constituents are arranged.
Comments: Written as . These are ignored by the browser and only visible in the code.

Text and Formatting Tags

Headings: There are 6 defined levels. <h1> is the largest, and <h6> is the smallest.
Line Break (<br/>): Used to split a sentence into multiple lines; without it, HTML puts all sentences in one line.
Styling Tags:
- <span>: Provides style and arrangement to a specific line.
- <div>: Applies effects to a set of lines.
- <i> or <em>: Used for italics and emphasis.
- <b> or <strong>: Used to display bold characters.
- <u>: Used for underlining text.

Working with Images

HTML provides support for documents to be presentable like a word-editor by allowing image insertion.

src: The attribute assigned the path and filename where the image is located.
alt: A parameter providing a description of the image.
Dimensions: Width and height can be mentioned; otherwise, the image loads in its actual size.

Bullets & Numbering

Lists are used to organize items into unordered or ordered formats.

Unordered List (<ul>): Used for bullets; types include circle, square, or disc.
Ordered List (<ol>): Used for numbered lists; options include numerals and alphabets.
List Item (<li>): The tag used to define individual items within a list.

Manipulating Data with Tables

Tables enlist data in a visually appealing way using specific tag-pairs:

<table>: Used to allocate and designate data within a table structure.
<tr>: Defines a row within the table.
<th>: Defines the header row, generally used for headings.
<td>: Used to manipulate and display the actual data in cells.

Links to Resources

Hyperlinks (using the <a> tag-pair) allow redirection to other webpages or documents.

href: Refers to the destination address or URL path.
Link-text: The clickable information provided for the user.
Target Parameter:
- _blank: Opens the destination in a new tab or window.
- _self: Opens the destination in the same tab or window.
Interactivity: The cursor changes upon touching a link; links can be applied to both text and images.

Cascading Style Sheets (CSS)

Definition: A stylesheet language used to handle the scheme, arrangement, and presentation of an HTML webpage and its components.
Purpose: While HTML defines the contents of a webpage, CSS handles the look of the components.
Benefits: Makes it easier to manage code, troubleshoot, and "dig out" errors during web design.
Other Stylesheet Languages: DSSSL and XSL (CSS is the most common for HTML).

Decorating Tables with CSS

CSS allows you to add borders to tables.
Method: Place the <style> tag-pair immediately before the start of the table.
Application: Within the style block, define styles for the table, header cells, and standard cells.

Ways to Use CSS in HTML

There are three methods for incorporating styles into a webpage:

Inline CSS: Added directly to a specific HTML tag within the body section.
Embedded (Internal) CSS:
- Styles are outlined in the header under the <style> tag-pair.
- Advantage: Separates presentation from HTML; changing one line in CSS updates all linked components.
External CSS:
- Styles are kept in a separate file with a .css extension and linked in the head via the <link> tag.
- Use Case: Best for large or commercial projects.

Note on Priority: If all three methods are used, Inline has the highest priority, followed by Embedded, and lastly External.

Introduction to JavaScript

Definition: An exciting language primarily used for developing web pages and scripts.
Efficiency: It does not consume much memory, making it ideal for client-side development.
Compatibility: Easily works with HTML and Java on any operating system to make pages dynamic.

Getting Started with JavaScript

Embedding Code: Code is placed inside HTML using starting and ending <script> tags.
Placement: There is no limitation on where to place the code within an HTML file.
Core Functions:
- document.write(): Displays a sentence or string on the webpage.
- alert(): Commonly used to inform the user or provide notifications.
- prompt(): Pops up a window to take input from the user.
Comments:
- // for line comments.
- /* ... */ for block comments.

Events and Dynamicity

Events: Anything a user or program does that can be sensed and triggers a task (e.g., clicking a button).
Implementation: Event-based code like onclick is often placed within the <head> tag to allow the website to respond to user actions.

JavaScript Variables

Definition: An entity that stores a value for later use.
Naming Conventions:
- Must be named in a meaningful manner.
- Numbers cannot be the first character.
- Case Sensitivity: JavaScript distinguishes between lowercase and uppercase (e.g., "reward" and "Reward" are different).
Initialization: The first assignment of a value to a variable. Good practice is to declare (using the var keyword) and initialize at the same time.

Basic Datatypes

Datatype	Sample Value
Number	7, 3, 5, 9
String	J A V A (set of characters)
Boolean	TRUE or FALSE

Note: The sequence of instructions matters. If a variable is called before it is defined, the browser will display undefined.

JavaScript Operators

Arithmetic Operators: Addition (+), Subtraction (-), Multiplication (*), and Division (/).
Modulus Operator (%): Gives the remainder of a division operation.
Comparison Operators: Used for evaluating conditions.

Operator	Name	Example
==	Is equal to	x == y
!=	Is not equal to	x != y
>	Greater than	x > y
<	Less than	x < y
>=	Greater than or equal to	x >= y
<=	Less than or equal to	x <= y

Conditional Statements

Essential for making choices in a program based on specific constraints.

if statement: Executes code only if a specific condition is met.
if-else statement: Aligns two scenarios; one executes if the condition is met, and the other if it is not.
if-else if-else statement: Used when more than two possibilities exist to check multiple conditions in sequence.

Iterative Statements (For Loop)

Iterative statements are used to perform similar tasks multiple times efficiently, reducing the number of lines of code required.

The 'For Loop': Works based on an index that is initialized within the loop.
Components:
1. Initialization: Setting the starting value of the index (e.g., 0).
2. Terminating Condition: The limit that determines when the loop stops (e.g., index < 10).
3. Step-size: Defines how much the index increments after each iteration (e.g., increment by 1).

Nested Loops

Nested loops occur when one iterative task resides inside another.

Execution Process:
1. The outer loop starts.
2. The inner loop runs and finishes its entire cycle.
3. The outer loop index increments.
4. The inner loop starts and ends again.
5. This repeats until the outer loop's condition is no longer met.

JavaScript Arrays

An array is a data type that holds a collection of homogenous elements, allowing access via a single variable name instead of multiple individual variables.

Indexing: Array indexes always start at 0.
Declaration Methods:
- Single Line: Declaring and initializing with values immediately (e.g., var Arr = [4, 2, 5, 1, 3];).
- Null Array: Declaring an empty array first (var Arr = [];) and assigning values to specific indexes later.
Using Loops with Arrays: A for-loop can be used to populate an array automatically, such as taking multiple user inputs via the prompt() function.

JavaScript Functions

A function is a segment of code designed to be reused multiple times, leading to better code management and fewer lines of code.

Definitions and Usage:
- Functions are identified and called by a specific name.
- The function reserved word is used to define it.
- The "caller" of the function does not need to know the internal code to use it.
Arguments: Variables passed into a function to be used within its logic. These are local to the function and have a limited lifespan.
Scope:
- Local Variables: Accessible only within the function.
- Global Variables: Variables defined outside functions that can be accessed anywhere in the program.
Return Values: Functions can use the return keyword to send a result back to the caller, which can then be displayed or stored in a variable.

Debugging the Code

Definition: Debugging is the process of locating and fixing errors (bugs) within your code.

Key Debugging Tools:
- Pause/Continue: Temporarily stops or resumes code execution.
- Step Into: Executes code line-by-line, providing a thorough tracing capability of the program.
- Step Over / Step Out / Restart: Essential buttons in the debugging menu used to navigate through the code execution.
- Debug Console: A handy interface used to monitor the code during the debugging process.
Using Breakpoints:
1. Purpose: Used to check the values of variables by halting execution at specific lines.
2. Visual Indicator: In Visual Studio .Net, a breakpoint is shown as a red dot at the start of a line.
3. Execution: While in debug mode, the program halts at every breakpoint so the behavior of the code can be analyzed and fixed.

Creating Dynamic Websites

Definition: A dynamic website allows content to change according to user input, avoiding the need to create separate static webpages for every unique case.

Core Components:
- JavaScript, HTML, and CSS: These technologies work together to create dynamic elements.
- Dynamic Content: A component or portion of the website that alters based on user interaction.
Process for Dynamic Interaction:
1. Function Definition: Create a JavaScript function (e.g., descOrder()) to perform a task, like printing an index in descending order.
2. Triggering Action: Use an HTML button with an onclick attribute to call the specific function.
3. ID Assignment: Use id attributes (e.g., id="dynamicContent") to target specific areas of the website for updates.
Dynamically Changing Styles:
- The document refers to the whole HTML page.
- By using the style property, you can change element properties like backgroundColor.
- Example: Adding document.body.style.backgroundColor = "peachpuff"; after a function call will change the page color once the button is pressed.

Unit 3 Programming Fundamentals Notes - Class 9 Computer Science Federal Board FBISE Pakistan | Download and View Online