Download CSS Html and Javascript and more Study notes Computer science in PDF only on Docsity!
Chapter#3 PROGRAMMING FUNDAMENTALS Instructor: Sartaj Aziz Khan Website development: Website development is the process of creating, building, and maintaining websites. It involves everything from designing the layout and appearance of a website to writing code that makes the website work and putting it online so people can access it through the internet. Key Parts of Website Development:
- Frontend Development : Creating what users see and interact with (design, layout, menus, buttons, etc.).
- Backend Development : Handling the behind-the-scenes logic (databases, user accounts, content storage, etc.).
- Web Hosting & Deployment : Making the website live on the internet using servers and domain names.
- Maintenance & Updates : Keeping the website up-to-date, fixing bugs, and improving performance. Additional Feature of HTML/CSS: Forms: What is a Form in HTML? A form is a special part of a website where users can enter data like typing their name, selecting options, or clicking buttons and send it to the website. Think of it like filling out a paper form, but on a web page. HTML Form Elements (with Function) SN Element What It Does (Function) 1. Starts the form — holds all the input elements. 2. Lets user type something or choose (depends on type). 3. type="text" Input box for normal text (e.g., name). 4. type="email" Input box that checks for a proper email format. 5. type="password" Hides the typed characters (used for passwords). 6. type="number" Allows only numbers. 7. type="checkbox" Lets user check one or more boxes (e.g., hobbies). 8. type="radio" Lets user pick only one option from a group (e.g., gender). 9. type="submit" Button to send the form data. 10. A dropdown menu for choosing from a list. 12. dropdown. 13. Adds a name or title to inputs — helps users understand what to type where.
HTML Code (student_admission.html):
Collapse border of table by CSS: It makes table borders collapse into a single border , instead collapse of keeping separate borders for each cell. Padding in HTML/CSS: Padding is the space between the content inside an element and its border. Padding can be placed to the cells four side left, right, top and bottom. Animation in CSS: Animation in CSS means making things move or change on a webpage — like changing colors, sizes, or positions — automatically over time , without JavaScript. Thie below code creates a simple HTML page with a single paragraph of text that animates its color. CSS Styling and Animation:
Inside the
▪ colorChange: Refers to the @keyframes rule defined below. ▪ 2s: The animation will take 2 seconds to complete one cycle. ▪ infinite: The animation will repeat forever. ▪ alternate: The animation will play forwards, then backwards, then forwards again, and so on.
@keyframes colorChange : This defines the animation itself. o from { color: blue; }: At the beginning of the animation (0%), the text color will be blue. o to { color: green; }: At the end of the animation (100%), the text color will be green. Output: when you open below HTML file in a web browser, you will see the text "This text will be highlighted!" with a transparent background. Then, its background will smoothly transition from transparent to yellow over 2 seconds, and then smoothly transition back from yellow to transparent over another 2 seconds. This "highlighting" and "un-highlighting" cycle will repeat indefinitely. Output:
Output:
This will show you: apple banana orange
3. Dynamic Content Update: This means changing parts of a webpage without reloading it. For example, showing new messages or items live on the page. JavaScript updates the content automatically based on user actions. 4. Complex User Interfaces: These are advanced layouts or tools on a website like sliders, tabs, or drag-and-drop areas. They help users do more things easily and smoothly. JavaScript helps build and manage these smart parts of the page. Arrays are like a single box where you can keep a list of similar things instead of having many separate boxes. Imagine you have a few fruits: an apple, a banana, and an orange. Instead of calling them: - fruit1 = "apple" - fruit2 = "banana" - fruit3 = "orange" You can put them all in one array (our "box") like this: JavaScript const fruits = ["apple", "banana", "orange"]; In this "box," each fruit has a position number (called an "index"), starting from 0: - "apple" is at position 0 - "banana" is at position 1 - "orange" is at position 2 To look at each fruit in our "box," we can use a simple loop: JavaScript for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } Key things you can do with arrays: - Add things: Use push() to add new items to the end of your box. - Remove things: Use pop() to remove the last item from your box. - Count things: Use length to see how many items are in your box. - Go through everything: Use a for loop (like above) or a for-loop (another way to do it) to look at each item in your box one by one. Code to find sum of first 10 integers: 1. First it will show button and when clicked on it. 2. It will show first 10 integers. 3. And in last it will show answer 55.
Output: This HTML, CSS, and JavaScript code creates a dynamic shopping list web page where users can add items to a list displayed in a table. Output: After entering data
Complex Algorithms in JavaScript: JavaScript uses arrays and lists to manage data. These can be used to create dynamic features and solve problems.
1. Array & List are Similar - Arrays and lists both stores ordered data. - Each item has an index starting from 0. - Both can hold any type of data and can grow or shrink as needed. - Lists are abstract types; arrays are built in. 2. Key Differences Between Arrays and Lists - Memory : Arrays use continuous memory; lists do not. - Syntax : Arrays use []; lists don’t exist directly in JavaScript. - Flexibility : Lists are more flexible in resizing and function creation. - Built-in Tools : Arrays have built-in methods; lists need custom ones. - Use Case : Arrays for numbers; lists for general use. 3. When to Use Arrays or Lists Use arrays for simple and numeric tasks. Use lists when more flexibility is needed. 4. Find an Element in a List - Check each item until the target is found. - Example: Search for "milk" in a shopping list and show result.
Algorithm:
1. Set up: (a) To keep track of shopping items, create a list (called shoppingList). (b) listContent (text): This variable will hold all the shopping list items ready to be shown. (c) The item you want to find is stored in a variable called itemName (text). 2. Make the Shopping List (First Loop): (a) Go through each item in the shoppingList using a loop. 3. Inside the loop: (a) Add the current item to the listContent text. (b) If it's not the last item, add a comma and a space after it. (c) Show the complete listContent text in the HTML area with the ID "list". 4. The second loop (for searching): (a) Look for an item by checking every item in the shoppingList. (b) Check if the item we are currently looking at matches the itemName we are searching for. (c) If you find a match, stop the loop and update the HTML area with the ID "result" to say that the item was found. (d) If the loop finishes without finding a match, update the HTML area with the ID "result" to say that the item was not found. 5. Using the Algorithm: (a) To start, use the findItem function and search for the itemName you want. The way this algorithm is put into code is as follows: Output: Advanced Techniques for Testing and Debugging: When we create a computer program, we need to make sure everything is working properly. Sometimes, the program might have small mistakes (called bugs), and we need to find and fix them. That’s where testing and debugging come in — they help us find problems early and solve them before they grow bigger. Unit Test – Checking Small Parts of a Program: A unit test is used to check small parts of your code like a formula, a function, or even a single line to see if it works correctly.
1. Breakpoint: A breakpoint is a tool used to pause the code at a specific line. - You choose a line where you think the problem might be. - When the code stops there, you can check the values of variables and see what’s happening. Example: If you think something is wrong at line 13, you can add a breakpoint there and the program will pause so you can check the code. 2. Watchpoint: A watchpoint is used to watch a variable or expression and stop the program when its value changes or is used. - You can set a condition like: "Stop the program if the value of sum becomes 10." - This helps to find out when and how variables change during the program. so the bugs are fixed Bug: - Line 14: sum = i; Correct Form: - Line 14: sum += i;
- Mini project 1: The End of chapter 3rd some of the practicals are hard to explain in textual form. Do practicals to ensure proficiency.
Correct Answer: c) Padding
12. An element style during animation is specified by ________. a) @key frame b) @style frame c) @highlighted frame d) @anchor frame **Correct Answer: a) @key frame
- A single table cell is indicated by a ________ tag.** a) b) c) d) **Correct Answer: c)
- Arrays and list can contain data types containing ________.** a) Alphabets b) Numbers c) Alphanumeric d) Checkboxes **Correct Answer: c) Alphanumeric
- ADT stands for ________.** a) Abstract Data type b) Abstract document type c) All Data type d) Any Data type Correct Answer: a) Abstract Data type
Short response answers the questions.
1. Give an example where back-end development may not be required, and all of the functionalities are handled by front-end. Answer: A simple static website or a basic calculator application built entirely with HTML, CSS, and JavaScript, where no data needs to be stored or processed on a server, is an example where back-end development might not be required. All functionalities are handled directly in the user's browser. 2. What are the 'td', 'th' and 'tr' tags used for? Explain with the help of an example. Answer: In HTML tables: - **** (table data) represents a standard data cell in a table. - **** (table header) represents a header cell in a table, typically for column or row headings. - **** (table row) defines a row of cells in a table. **Example: HTML ** **** Name Age **** **** John Doe ** 30 ** ****
3. Find error(s) in the following codes. Code(a): Line No: 9 const myArray = ("apple", 3.14, true, "orange"); // Error: Should be square brackets for array Error: On line 9, myArray is defined using parentheses () instead of square brackets []. This creates a comma expression, not an array. Code(b): Errors: - On line 10, the document.write statement has an incorrect string concatenation and is missing the closing part of the string. It seems to have a stray {myArray[1]} outside the string. - The
tag on line 11 is not correctly placed within the document.write string. Corrected Line 10 for (b): document.write('
My Array: ' + myArray[1] + '
');
Code(c): Error: On line 11, the loop variable i is not declared with let or var, which can lead to it becoming a global variable in non-strict mode or a ReferenceError in strict mode.
Code(d): Errors: - On line 11, the for loop condition i < 0 is incorrect. Since i starts at numbers.length (which is 5) and is decremented (i--), i will never be less than 0, so the loop will not execute. - On line 13, numbers[i] inside the loop will attempt to access numbers[5] (and then numbers[4], etc., if the loop worked), which is out of bounds for an array of length 5 (indices 0-4).
4. How is unit testing used when adding a function to an already written program? Answer: Unit testing checks if a new function works correctly. We write small tests to check it with different inputs. It helps catch mistakes early. The function is tested alone before adding to the main code. This avoids breaking the existing program.
5. Enlist 3 key differences between array and list. Answer: 1. Size : Array is fixed; List is flexible.
2. Memory : Array stores data together; List may store separately.
3. Speed : Array is fast for index access; List is better for adding/removing items.
6. How are breakpoints useful in debugging? Elaborate with example.
Answer: Breakpoints stop code at a line so we can check what’s happening. We can see variable values and move step by step. It helps find bugs easily. Example: If total is wrong in calculateTotal, use a breakpoint to see tax value and fix it.
Long Response Questions
- Query successful Here is the text of the question from the image: Q3. Write answers of the following extended response questions in the form of code.
