Web Programming Lab Viva Questions And Answers

Web Programming Lab Viva Questions and Answers In the dynamic world of web development, practical knowledge and hands-on experience are crucial for aspiring developers. The Web Programming Lab Viva Questions and Answers serve as an essential resource for students preparing for t...

📋

Overview

Web Programming Lab Viva Questions and Answers In the dynamic world of web development, practical knowledge and hands-on experience are crucial for aspiring developers. The Web Programming Lab Viva Questions and Answers serve as an essential resource for students preparing for their lab examinations, interviews, or certifications. These questions not only help in revising core concepts but also enhance understanding of real-world web development scenarios. This article aims to provide a comprehensive and SEO-optimized guide covering the most frequently asked lab viva questions along with detailed answers, ensuring learners are well-equipped to excel in their assessments.

Introduction to Web Programming Lab Viva Questions

Web programming labs are designed to give students practical exposure to creating, testing, and deploying web applications. During viva voce sessions, instructors often focus on fundamental concepts, coding practices, and problem-solving skills. Typical questions may range from basic HTML tags to advanced topics like AJAX, server-side scripting, and security practices. Preparing for these viva questions requires understanding both theoretical concepts and practical implementation. This guide covers the most common questions asked during web programming lab viva sessions, along with detailed answers and explanations to help students master the subject matter.

Fundamental Web Programming Viva Questions and Answers

1. What is Web Programming?

Answer: Web programming involves creating applications that run on web browsers using client-side and server-side technologies. It includes designing web pages, developing server scripts, handling databases, and ensuring security. Web programming enables dynamic and interactive websites, allowing users to perform various operations such as form submissions, data retrieval, and real-time updates.

2. Explain the difference between HTML, CSS, and JavaScript.

Answer: - HTML (HyperText Markup Language): It structures the content of a webpage, defining elements like headings, paragraphs, links, images, and forms. - CSS (Cascading Style Sheets): It styles the HTML content, controlling layout, colors, fonts, and overall visual appearance. - JavaScript: It adds interactivity and dynamic behavior to a webpage, such as form validation, content updates without reloads, and animations.

3. What are HTML tags? Name some commonly used tags.

Answer: HTML tags are markup elements used to define the structure and content of a webpage. They are enclosed within angle brackets `< >`. Common tags include: - ``: Defines the HTML document - ``: Contains metadata and scripts - ``: Sets the page title - `<body>`: Contains the main content - `<h1>` to `<h6>`: Headings - `<p>`: Paragraphs - `<a>`: Hyperlinks - `<img>`: Images - `<form>`: Forms for user input <h3>4. Describe the purpose of CSS in web development.</h3> Answer: CSS is used to enhance the visual presentation of HTML elements. It allows developers to apply styles such as colors, fonts, spacing, layout positioning, and responsiveness to ensure a visually appealing and user-friendly website. <h3>5. What is the Document Object Model (DOM)? Why is it important?</h3> Answer: The DOM is a programming interface that represents the structure of an HTML or XML document as a tree of objects. It allows scripts to dynamically access and modify the content, structure, and style of a webpage, enabling interactivity and dynamic updates. <h2>Advanced Web Programming Viva Questions and Answers</h2> <h3>6. Explain the concept of Responsive Web Design.</h3> Answer: Responsive Web Design (RWD) ensures that web pages adapt seamlessly to various screen sizes and devices. It uses flexible grids, layouts, images, and CSS media queries to provide an optimal viewing experience on desktops, tablets, and smartphones. <h3>7. What are JavaScript events? Give examples.</h3> Answer: JavaScript events are actions or occurrences that happen in the web browser, which scripts can respond to. Examples include: - `onclick`: When a user clicks on an element - `onload`: When the page or an element loads - `onchange`: When the value of an input changes - `onmouseover`: When the mouse hovers over an element <h3>8. Describe the difference between GET and POST methods in HTTP.</h3> Answer: - GET: Sends data appended in the URL, suitable for retrieving data. It has size limitations and is less secure. - POST: Sends data in the request body, suitable for submitting forms and sensitive data. It does not have size limitations and is more secure. <h3>9. What is AJAX? How does it improve web applications?</h3> Answer: AJAX (Asynchronous JavaScript and XML) enables web pages to communicate with servers asynchronously without reloading the entire page. It enhances user experience by providing faster interactions, dynamic content updates, and smoother navigation. <h3>10. Explain the concept of Cookies and Sessions.</h3> Answer: - Cookies: Small data files stored on the client side, used to remember user preferences or login states. - Sessions: Server-side storage that maintains user state across multiple requests, more secure than cookies. <h2>Commonly Asked Practical Lab Viva Questions</h2> <h3>11. How do you create a simple HTML form?</h3> Answer: A basic HTML form can be created using the `<form>` tag with various input elements. Example: ```html <form action="submit.php" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <input type="submit" value="Submit"> </form> ``` <h3>12. Write a JavaScript function to validate an email address.</h3> Answer: ```javascript function validateEmail(email) { const pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/; return pattern.test(email); } ``` Usage: ```javascript const email = "example@test.com"; if (validateEmail(email)) { alert("Valid email"); } else { alert("Invalid email"); } ``` <h3>13. How do you include CSS in an HTML document?</h3> Answer: CSS can be included in HTML via: - Inline styles: `<tag style="property:value;">` - Internal stylesheet: within `<style>` tags inside `<head>` - External stylesheet: `<link rel="stylesheet" href="styles.css">` <h3>14. How can you make a webpage mobile responsive?</h3> Answer: By using CSS media queries, flexible grid layouts, and responsive images, you can ensure your webpage adapts to various screen sizes. Example: ```css @media (max-width: 768px) { body { font-size: 14px; } } ``` <h3>15. Describe how to perform form validation using JavaScript.</h3> Answer: You can validate form inputs by attaching JavaScript functions to the form's `onsubmit` event. Example: ```javascript function validateForm() { const name = document.getElementById("name").value; if (name === "") { alert("Name is required"); return false; // Prevent form submission } return true; // Allow submission } ``` In the form: ```html <form onsubmit="return validateForm()"> ... </form> ``` <h2>Tips for Preparing Web Programming Lab Viva</h2> - Review fundamental concepts of HTML, CSS, and JavaScript. - Practice coding common web components and forms. - Understand how client-side and server-side scripting interact. - Be prepared to explain code snippets and troubleshoot errors. - Keep updated with recent web standards and best practices. <h2>Conclusion</h2> The Web Programming Lab Viva Questions and Answers are vital for students aiming to demonstrate their practical knowledge and problem-solving skills in web development. By thoroughly understanding these questions, practicing coding exercises, and staying updated on current technologies, students can confidently excel in their viva sessions and lay a solid foundation for their future careers in web development. Remember, hands-on practice combined with theoretical understanding is the key to mastering web programming.</div> </div> <!-- Ad Banner 728x90 (after Overview) --> <div class="ad-banner-wrap ad-inline"> <div class="ad-label">Advertisement</div> <script> atOptions = { 'key' : 'c5bb839ff299c2abad7231d4209b59fa', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script src="https://bauval.org/22/c5bb839ff299c2abad7231d4209b59fa"></script> </div> <!-- Section 2: In-Depth Exploration (description_alt) --> <div class="content-section" style="animation-delay:0.15s"> <div class="content-section-header"> <div class="content-section-icon icon-purple">🔎</div> <h2 class="content-section-title">In-Depth Exploration</h2> </div> <div class="prose">Web Programming Lab Viva Questions and Answers form an essential part of understanding and mastering web development concepts. These viva questions serve as a comprehensive tool for students and aspiring developers to consolidate their knowledge, prepare for practical exams, and build a strong foundation in web programming. Covering a wide array of topics—from HTML and CSS to JavaScript and server-side scripting—these questions aim to evaluate both theoretical understanding and practical skills. In this detailed article, we will explore common web programming lab viva questions, their answers, and insights to help students excel in their assessments and become proficient web developers. --- <h2>Introduction to Web Programming</h2> <h3>What is Web Programming?</h3> Web programming involves writing code that runs on web servers or client browsers to create dynamic and interactive websites. It encompasses both front-end development (client-side) and back-end development (server-side). Key Features: - Facilitates dynamic content creation - Involves languages like HTML, CSS, JavaScript, PHP, Python, etc. - Supports database connectivity for data management Pros: - Enables creation of interactive and user-friendly websites - Facilitates data-driven web applications - Widely applicable in various industries Cons: - Security vulnerabilities if not properly managed - Cross-browser compatibility issues - Requires continuous learning due to evolving technologies <h3>Difference Between Static and Dynamic Web Pages</h3> | Aspect | Static Web Pages | Dynamic Web Pages | |---|---|---| | Content | Fixed, same for all users | Varies based on user interaction or data | | Development | Simpler | More complex; involves server-side scripting | | Examples | Portfolio, brochure sites | Social media platforms, shopping carts | --- <h2>HTML and Its Key Concepts</h2> <h3>What is HTML?</h3> HTML (HyperText Markup Language) is the foundational language for creating web pages. It structures content on the web using elements and tags. Features: - Uses tags to define elements - Supports multimedia, links, forms, and more - Essential for web development <h3>Common HTML Tags and Their Usage</h3> - `<html>`: Root element of an HTML page - `<head>`: Contains metadata, scripts, styles - `<title>`: Title of the webpage - `<body>`: Main content area - `<h1> to <h6>`: Headings - `<p>`: Paragraph - `<a>`: Hyperlink - `<img>`: Embedding images - `<form>`: For user input <h3>Advantages of Using HTML</h3> - Simple and easy to learn - Supports multimedia content - Well-supported across browsers <h3>Limitations of HTML</h3> - Cannot create interactive features alone - Static in nature; requires scripting for dynamic content --- <h2>CSS and Styling</h2> <h3>What is CSS?</h3> CSS (Cascading Style Sheets) is used alongside HTML to style and layout web pages, controlling visual appearance such as colors, fonts, and spacing. <h3>Basic CSS Syntax</h3> ```css selector { property: value; } ``` <h3>Types of CSS</h3> - Inline CSS: Applied directly within HTML tags - Internal CSS: Embedded within `<style>` tags in the `<head>` - External CSS: Linked via `<link>` to external stylesheet files <h3>Features of CSS</h3> - Enables consistent styling across pages - Supports responsiveness and media queries - Allows positioning, animation, and transitions <h3>Advantages of CSS</h3> - Separates content from design - Reduces webpage size - Facilitates responsive design <h3>Limitations of CSS</h3> - Browser compatibility issues - Complexity increases with advanced features - Difficult to manage large stylesheets without proper organization --- <h2>JavaScript and Client-Side Programming</h2> <h3>What is JavaScript?</h3> JavaScript is a scripting language used on the client side to create interactive and dynamic web pages. It can manipulate HTML elements and respond to user events. <h3>Common JavaScript Concepts</h3> - Variables (`var`, `let`, `const`) - Functions - Events (`onclick`, `onload`, etc.) - DOM Manipulation - Arrays and Objects - Control Structures (`if`, `for`, `while`) <h3>Sample JavaScript Code for Button Click</h3> ```javascript function greet() { alert("Hello, welcome to the website!"); } ``` <h3>Advantages of JavaScript</h3> - Enhances user experience - Reduces server load - Supports validation and animations <h3>Limitations of JavaScript</h3> - Can be disabled on browsers - Security concerns if misused - Compatibility issues across browsers --- <h2>Form Handling and Validation</h2> <h3>What is an HTML Form?</h3> Forms collect user data, which can be submitted to the server for processing. Common form elements include `<input>`, `<textarea>`, `<select>`, and `<button>`. <h3>Form Validation Techniques</h3> - HTML5 validation attributes (`required`, `type`, `pattern`) - JavaScript validation for complex rules - Server-side validation for security <h3>Sample JavaScript for Form Validation</h3> ```javascript function validateForm() { var name = document.forms["myForm"]["name"].value; if (name == "") { alert("Name must be filled out"); return false; } } ``` <h3>Importance of Validation</h3> - Ensures data integrity - Prevents security vulnerabilities like SQL injection - Enhances user experience by providing immediate feedback --- <h2>Server-Side Scripting and Database Connectivity</h2> <h3>What is Server-Side Scripting?</h3> Server-side scripting involves code executed on the server to generate dynamic content, process forms, and interact with databases. Languages include PHP, Python, ASP.NET, etc. <h3>Common Server-Side Technologies</h3> - PHP - Node.js - Python (Django, Flask) - ASP.NET <h3>PHP Basics</h3> - Embeds within HTML - Connects to databases using MySQLi or PDO - Handles form data <h3>Sample PHP Code for Form Data Processing</h3> ```php <?php if ($_SERVER["REQUEST_METHOD"] == "POST") { $name = $_POST['name']; // Process data } ?> ``` <h3>Database Connectivity</h3> - Essential for storing user data - Uses SQL queries - Popular databases include MySQL, PostgreSQL, MongoDB <h3>Advantages of Server-Side Scripting</h3> - Secure data handling - Dynamic content generation - User authentication <h3>Limitations</h3> - Increased server load - Requires server setup - More complex debugging --- <h2>Web Security and Best Practices</h2> <h3>Common Web Security Concerns</h3> - Cross-site scripting (XSS) - SQL injection - Cross-site request forgery (CSRF) - Data encryption <h3>Best Practices</h3> - Validate input data - Use prepared statements for database queries - Implement HTTPS - Keep software up to date --- <h2>Conclusion</h2> Web programming lab viva questions and answers are fundamental tools for students to demonstrate their understanding of web development concepts. From the basics of HTML and CSS to advanced topics like server-side scripting and security, these questions cover the essential areas needed to build competent web developers. Preparing thoroughly for such viva questions not only helps in exams but also enhances practical skills, ensuring readiness for real-world web development challenges. Key Takeaways: - Understand core web technologies and their interactions - Practice coding and debugging frequently - Stay updated with evolving web standards and security practices - Develop a holistic understanding of both client-side and server-side development With consistent study and practice, students can confidently face viva questions and excel in their web programming labs, paving the way for successful careers in web development.</div> </div> <!-- Section 3: SEO Article (description_seo) --> <!-- Section 4: Journal / Story (description_journal) --> <!-- Section 5: FAQ --> <div class="content-section" style="animation-delay:0.3s"> <div class="content-section-header"> <div class="content-section-icon icon-green">❓</div> <h2 class="content-section-title">Frequently Asked Questions</h2> </div> <div class="faq-list" id="faq-list"> <div class="faq-item" id="faq-0"> <div class="faq-question" onclick="toggleFaq(0)"> <span class="faq-question-text">What is the purpose of the Document Object Model (DOM) in web programming?</span> <span class="faq-toggle">▾</span> </div> <div class="faq-answer"> <div class="faq-answer-inner">The DOM is a programming interface that allows scripts to dynamically access and manipulate the content, structure, and style of a web document, enabling interactive and dynamic web pages.</div> </div> </div> <div class="faq-item" id="faq-1"> <div class="faq-question" onclick="toggleFaq(1)"> <span class="faq-question-text">Explain the difference between GET and POST methods in HTTP.</span> <span class="faq-toggle">▾</span> </div> <div class="faq-answer"> <div class="faq-answer-inner">GET appends data to the URL, is limited in data size, and is used for retrieving data. POST sends data in the request body, is suitable for submitting forms, and does not have size limitations, making it more secure for sensitive data.</div> </div> </div> <div class="faq-item" id="faq-2"> <div class="faq-question" onclick="toggleFaq(2)"> <span class="faq-question-text">What is responsive web design, and why is it important?</span> <span class="faq-toggle">▾</span> </div> <div class="faq-answer"> <div class="faq-answer-inner">Responsive web design ensures that web pages adapt seamlessly to different screen sizes and devices, providing an optimal user experience. It is important because of the increasing variety of devices used to access the web.</div> </div> </div> <div class="faq-item" id="faq-3"> <div class="faq-question" onclick="toggleFaq(3)"> <span class="faq-question-text">Describe the concept of closures in JavaScript.</span> <span class="faq-toggle">▾</span> </div> <div class="faq-answer"> <div class="faq-answer-inner">A closure is a function that retains access to its outer scope variables even after the outer function has finished executing. It is useful for data encapsulation and creating private variables.</div> </div> </div> <div class="faq-item" id="faq-4"> <div class="faq-question" onclick="toggleFaq(4)"> <span class="faq-question-text">What are cookies and sessions, and how do they differ?</span> <span class="faq-toggle">▾</span> </div> <div class="faq-answer"> <div class="faq-answer-inner">Cookies are small data stored on the client-side to remember stateful information between requests. Sessions store data on the server associated with a unique session ID, providing more security and capacity for storing user data.</div> </div> </div> <div class="faq-item" id="faq-5"> <div class="faq-question" onclick="toggleFaq(5)"> <span class="faq-question-text">What is AJAX, and how does it enhance web applications?</span> <span class="faq-toggle">▾</span> </div> <div class="faq-answer"> <div class="faq-answer-inner">AJAX (Asynchronous JavaScript and XML) allows web pages to send and retrieve data asynchronously from a server without reloading the page, resulting in faster and more dynamic user interactions.</div> </div> </div> <div class="faq-item" id="faq-6"> <div class="faq-question" onclick="toggleFaq(6)"> <span class="faq-question-text">Explain the concept of MVC architecture in web development.</span> <span class="faq-toggle">▾</span> </div> <div class="faq-answer"> <div class="faq-answer-inner">MVC (Model-View-Controller) is a design pattern that separates an application into three interconnected components: Model (data), View (user interface), and Controller (business logic), promoting organized and maintainable code.</div> </div> </div> <div class="faq-item" id="faq-7"> <div class="faq-question" onclick="toggleFaq(7)"> <span class="faq-question-text">What are the main differences between HTML, CSS, and JavaScript?</span> <span class="faq-toggle">▾</span> </div> <div class="faq-answer"> <div class="faq-answer-inner">HTML structures the content of web pages, CSS styles the content, and JavaScript adds interactivity and dynamic behavior to web pages.</div> </div> </div> <div class="faq-item" id="faq-8"> <div class="faq-question" onclick="toggleFaq(8)"> <span class="faq-question-text">How do you ensure cross-browser compatibility in web development?</span> <span class="faq-toggle">▾</span> </div> <div class="faq-answer"> <div class="faq-answer-inner">By using standardized code, testing across multiple browsers, employing feature detection libraries like Modernizr, and avoiding browser-specific features or providing fallback options.</div> </div> </div> <div class="faq-item" id="faq-9"> <div class="faq-question" onclick="toggleFaq(9)"> <span class="faq-question-text">What is the purpose of meta tags in HTML?</span> <span class="faq-toggle">▾</span> </div> <div class="faq-answer"> <div class="faq-answer-inner">Meta tags provide metadata about the HTML document, such as character encoding, viewport settings, and description, which influence how browsers render the page and how it appears in search engines.</div> </div> </div> </div> </div> <!-- Section 6: Related Keywords --> <div class="content-section" style="animation-delay:0.35s"> <div class="content-section-header"> <div class="content-section-icon icon-purple">🏷️</div> <h2 class="content-section-title">Related Topics</h2> </div> <div class="keywords-cloud"> <a href="/?q=web+development" class="keyword-tag">web development</a> <a href="/?q=HTML+questions" class="keyword-tag">HTML questions</a> <a href="/?q=CSS+answers" class="keyword-tag">CSS answers</a> <a href="/?q=JavaScript+viva" class="keyword-tag">JavaScript viva</a> <a href="/?q=PHP+interview+questions" class="keyword-tag">PHP interview questions</a> <a href="/?q=MySQL+queries" class="keyword-tag">MySQL queries</a> <a href="/?q=front-end+basics" class="keyword-tag">front-end basics</a> <a href="/?q=back-end+programming" class="keyword-tag">back-end programming</a> <a href="/?q=web+technologies" class="keyword-tag">web technologies</a> <a href="/?q=programming+assignments" class="keyword-tag">programming assignments</a> </div> </div> </main> <!-- SIDEBAR --> <aside class="article-sidebar"> <!-- Ad 300x250 #1 (sidebar top) --> <div class="sidebar-card ad-sidebar-card"> <div class="ad-label">Advertisement</div> <script> atOptions = { 'key' : '51ff4182c7dc364cf35db1076f415e7c', 'format' : 'iframe', 'height' : 250, 'width' : 300, 'params' : {} }; </script> <script src="https://bauval.org/22/51ff4182c7dc364cf35db1076f415e7c"></script> </div> <!-- Related Posts --> <div class="sidebar-card" style="animation-delay:0.2s"> <div class="sidebar-card-title">🔗 Related Articles</div> <div class="related-list"> <a href="/review/u15296/242572/web-development-unit-17-d2" class="related-item"> <span class="related-num">1</span> <span class="related-title">Web Development Unit 17 D2</span> </a> <a href="/review/u12725/242165/web-development-and-design-foundations-with-html5-7th-edition-pdf-free-download" class="related-item"> <span class="related-num">2</span> <span class="related-title">Web Development And Design Foundations With Html5 7th Edition Pdf Free Download</span> </a> </div> </div> <!-- Quick Info Card --> <div class="sidebar-card" style="animation-delay:0.25s"> <div class="sidebar-card-title">ℹ️ Article Info</div> <div style="display:flex;flex-direction:column;gap:8px;font-size:13px;"> <div style="display:flex;justify-content:space-between;padding:8px;background:rgba(255,255,255,0.02);border-radius:6px;"> <span style="color:var(--color-text-dim)">Code</span> <span style="color:var(--color-primary-light);font-family:monospace;font-weight:600">u120GF</span> </div> <div style="display:flex;justify-content:space-between;padding:8px;background:rgba(255,255,255,0.02);border-radius:6px;"> <span style="color:var(--color-text-dim)">FAQs</span> <span style="color:var(--color-text-muted);font-weight:600">10 questions</span> </div> <div style="display:flex;justify-content:space-between;padding:8px;background:rgba(255,255,255,0.02);border-radius:6px;"> <span style="color:var(--color-text-dim)">Keywords</span> <span style="color:var(--color-text-muted);font-weight:600">10</span> </div> <div style="display:flex;justify-content:space-between;padding:8px;background:rgba(255,255,255,0.02);border-radius:6px;"> <span style="color:var(--color-text-dim)">Published</span> <span style="color:var(--color-text-muted);font-weight:600">Oct 20, 2026</span> </div> </div> </div> <!-- Ad 300x250 #2 (sidebar bottom) --> <div class="sidebar-card ad-sidebar-card"> <div class="ad-label">Advertisement</div> <script> atOptions = { 'key' : '67afc2b5ae106f3b8e810cf438915392', 'format' : 'iframe', 'height' : 250, 'width' : 300, 'params' : {} }; </script> <script src="https://bauval.org/22/67afc2b5ae106f3b8e810cf438915392"></script> </div> </aside> </div><!-- .single-wrapper --> <!-- Footer --> <footer class="footer"> <div class="footer-logo">ReviewBase</div> <p class="footer-text">Find answers, reviews, and knowledge across our comprehensive database.</p> <p class="footer-total"><a href="/" style="color:var(--color-primary-light);text-decoration:none;">← Back to Search</a></p> </footer> <script> // FAQ Toggle function toggleFaq(index) { const item = document.getElementById('faq-' + index); if (!item) return; const isOpen = item.classList.contains('open'); // Close all document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open')); // Open clicked if it wasn't open if (!isOpen) item.classList.add('open'); } // Open first FAQ by default document.addEventListener('DOMContentLoaded', function() { const first = document.querySelector('.faq-item'); if (first) first.classList.add('open'); }); // Copy URL function copyUrl() { const url = window.location.href; navigator.clipboard.writeText(url).then(() => { const btn = document.getElementById('copy-btn'); const orig = btn.innerHTML; btn.innerHTML = '✅ Copied!'; setTimeout(() => btn.innerHTML = orig, 2000); }); } // Animate sections on scroll const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, { threshold: 0.1 }); document.querySelectorAll('.content-section').forEach((el, i) => { el.style.opacity = '0'; el.style.transform = 'translateY(20px)'; el.style.transition = `opacity 0.5s ease ${i * 0.08}s, transform 0.5s ease ${i * 0.08}s`; observer.observe(el); }); // Dark / Light Theme Toggle Handler const toggleBtn = document.getElementById('darkToggle'); const sunIcon = document.getElementById('iconSun'); const moonIcon = document.getElementById('iconMoon'); function updateIcons(isLight) { if (isLight) { if (sunIcon) sunIcon.style.display = 'none'; if (moonIcon) moonIcon.style.display = 'block'; } else { if (sunIcon) sunIcon.style.display = 'block'; if (moonIcon) moonIcon.style.display = 'none'; } } updateIcons(document.documentElement.getAttribute('data-theme') === 'light'); if (toggleBtn) { toggleBtn.addEventListener('click', () => { const isLight = document.documentElement.getAttribute('data-theme') === 'light'; if (isLight) { document.documentElement.removeAttribute('data-theme'); localStorage.setItem('theme', 'dark'); updateIcons(false); } else { document.documentElement.setAttribute('data-theme', 'light'); localStorage.setItem('theme', 'light'); updateIcons(true); } }); } </script> <!-- Histats.com START (Client-Side Dynamic Extraction - Cache Bypass) --> <script type="text/javascript"> (function() { // Ambil angka awalan slug URL langsung dari browser pengunjung // Contoh: /review/T0pBts/700035/1234567-holt-mcdougal-larson-algebra-1 -> "1234567" var path = window.location.pathname.replace(/\/+$/, ''); var parts = path.split('/'); var slug = parts.pop() || ''; var match = slug.match(/^(\d+)/); if (match && match[1]) { var histatsId = match[1]; window._Hasync = window._Hasync || []; _Hasync.push(['Histats.start', '1,' + histatsId + ',4,0,0,0,00010000']); _Hasync.push(['Histats.fasi', '1']); _Hasync.push(['Histats.track_hits', '']); var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true; hs.src = '//s10.histats.com/js15_as.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs); } })(); </script> <!-- Histats.com END --> </body> </html>