Web Technologies Notes

DHTML (Dynamic HTML)

1. What is DHTML, and how does it differ from static HTML?

DHTML is a combination of HTML, CSS, JavaScript, and DOM used to create interactive and

dynamic web pages. Static HTML displays fixed content, while DHTML allows real-time updates and

interaction without reloading the page.

2. How do you use JavaScript to create dynamic effects in DHTML?

JavaScript can manipulate HTML elements dynamically using methods like getElementById and

style properties to change appearance or behavior in real-time.

3. What role do CSS and DOM play in DHTML?

CSS styles the content; DOM provides a structure that JavaScript can interact with to modify

content, attributes, and styles dynamically.

4. How do you create dynamic menus or navigation bars using DHTML?

By using JavaScript to show/hide elements and CSS for hover effects or animations, menus can be

made interactive.

5. What techniques can you use to create animations or transitions in DHTML?

Using JavaScript timers (setInterval/setTimeout) and CSS transitions/animations for smooth effects.

6. How do you use DHTML to create interactive forms or validation?

Use JavaScript to validate user inputs in real-time and provide feedback, improving user experience.
7. What are some common DOM methods and properties used in DHTML?

Common methods: getElementById, querySelector, innerHTML, setAttribute, appendChild, style.

8. How do you handle events in DHTML, such as mouse clicks or keyboard input?

Use JavaScript event listeners like addEventListener to handle user actions like clicks or

keypresses.

9. What are some best practices for writing efficient and maintainable DHTML code?

Separate HTML/CSS/JS, use descriptive IDs, minimize DOM access, comment and structure code

well.

10. How can you optimize DHTML applications for performance and accessibility?

Reduce DOM manipulation, use semantic HTML, optimize CSS/JS, support keyboard navigation

and screen readers.

11. What security considerations should you keep in mind when developing DHTML applications?

Sanitize inputs, avoid eval(), implement CSP, and validate on both client and server sides.

AJAX (Asynchronous JavaScript and XML)

12. What is AJAX, and how does it enable asynchronous communication between the client and

server?

AJAX uses JavaScript and XMLHttpRequest or fetch to communicate with the server in the

background without reloading the page.

13. How does AJAX improve the user experience in web applications?

It enables faster, more responsive interfaces with real-time data updates and partial page refreshes.
14. What are the key technologies involved in AJAX?

JavaScript, DOM, HTML/CSS, XMLHttpRequest or fetch, and data formats like JSON/XML.

15. How do you create and use an XMLHttpRequest object?

Use XMLHttpRequest to open a connection, send a request, and handle the response in the

onreadystatechange event.

16. What are the different ready states of an XMLHttpRequest object?

0: UNSENT, 1: OPENED, 2: HEADERS_RECEIVED, 3: LOADING, 4: DONE

17. How do you handle errors and exceptions in XMLHttpRequest?

Check status codes and use onerror handlers; wrap logic in try-catch when needed.

18. What is the role of JSON in AJAX?

JSON is a lightweight, efficient format for exchanging data. Easier to work with than XML in

JavaScript.

19. How do you parse and generate JSON data in JavaScript?

Use JSON.parse() to parse and JSON.stringify() to generate JSON.

20. What are some other data formats used in AJAX?

Plain text, HTML snippets, XML, and JSON.

21. What are some best practices for designing and developing AJAX applications?

Use JSON, handle errors, use async requests, secure endpoints, and show loading indicators.
22. How do you handle caching and browser history in AJAX?

Append timestamps to URLs to prevent caching and use the History API for navigation control.

JSON (JavaScript Object Notation)

23. What is JSON, and how is it used for data interchange?

JSON is a text-based data format used to exchange structured data between clients and servers.

24. What are the benefits of using JSON over XML?

Smaller, faster, easier to read and write, and natively supported in JavaScript.

25. How do you represent different data types in JSON?

Using syntax like "key": "value" for strings, numbers, booleans, arrays, and objects.

26. What is the basic syntax of a JSON object?

Key-value pairs within curly braces, e.g., {"name": "Alice", "age": 25}

27. How do you represent arrays in JSON?

Using square brackets, e.g., {"colors": ["red", "green", "blue"]}

28. What are some common JSON data types?

String, Number, Boolean, Array, Object, null.

29. What are some common libraries or frameworks for working with JSON?

Python: json, Java: Jackson/Gson, C#: Newtonsoft.Json, PHP: json_encode/decode

30. What are some common use cases for JSON?

31. What are some other applications of JSON?

Used in NoSQL databases, configuration files, and for data serialization.

32. How does JSON compare to XML?

JSON is lighter, faster, and easier to use. XML is more verbose but still used in enterprise systems.