UNIT-3

Style sheets : Need for CSS, introduction to CSS, basic syntax and structure, using CSS,
background images, colors and properties, manipulating texts, using fonts, borders and
boxes, margins, padding lists, positioning using CSS, CSS2, Overview and features of
CSS3 JavaScript : Client side scripting with JavaScript, variables, functions, conditions,
loops and repetition, Pop up boxes, Advance JavaScript: JavaScript and objects,
JavaScript own objects, the DOM and web browser environments, Manipulation using
DOM, forms and validations, DHTML : Combining HTML, CSS and JavaScript, Events and
buttons

JavaScript
1. Discuss JavaScript array object in details.
Ans: -
2. Discuss JavaScript functions in details.
Ans: -
’
3. Describe the properties and methods of objects in JavaScript with a suitable script.
Ans: -
4. Explain in detail about the window object of JavaScript.
Ans: -
5. Write any five method of math object of JavaScript.
Ans: -
6. Write a short note on document object of JavaScript.
Ans: -
7. What is DOM? What is its role in DHTML?
Ans: - The Document Object Model (DOM) is a programming interface provided by browsers
that represents the structure of an HTML or XML document as a tree of objects. Each element,
attribute, and piece of text in the document is represented as a node in this tree, allowing
programming languages like JavaScript to interact with the content and structure of web
pages.
Key Features of the DOM:
1. Tree Structure:
o The DOM organizes the document in a hierarchical tree structure, where each
node represents a part of the document (elements, text, etc.).
2. Dynamic Interaction:
 o The DOM allows for dynamic manipulation of the document. Developers can
add, remove, or modify elements and attributes in real time, creating
interactive web pages.
3. Language Neutral:
o While the DOM is most commonly accessed and manipulated using JavaScript,
it can be used with any programming language that can manipulate the tree
structure.
4. Event Handling:
o The DOM supports event handling, allowing developers to respond to user
interactions, such as clicks, keyboard input, or mouse movements.
Role of DOM in DHTML
Dynamic HTML (DHTML) is an umbrella term for a collection of technologies used together to
create interactive and animated web pages. It combines HTML, CSS, and JavaScript, leveraging
the DOM to enable dynamic changes to the content and layout of a webpage without
requiring a full page reload.
8. Explain how to communicate DOM API?
Ans: - The DOM API (Document Object Model Application Programming Interface) allows
developers to interact programmatically with the structure, content, and style of a web
document. Using the DOM API, developers can dynamically modify the document, respond to
user interactions, and create rich, interactive experiences.
To communicate with the DOM API, you use JavaScript methods, properties, and events.
Here's how this communication works in practice:
9. How are XHTML elements and attributes represented in JavaScript binding to DOM?
Explain.
Ans: -
10. Write short notes on: -
a) Keywords in JavaScript
b) Identifier in JavaScript
c) Applications of DHTML
Ans: -
11. Write a program in JavaScript to convert height from centimetres to inches and vice-
versa.
Ans: -

12. Write a JavaScript program which displays current date and time.
Ans: -
13. Write a function in JavaScript which displays digital clock when html page is loaded.
Ans: -
14. How to use email validations in JavaScript? Like user can’t enter invalid email address.
Write JavaScript code.
Ans: -
15. Write JavaScript for validating HTML login form by using regular expressions.
Ans: -
CSS
1. Describe the classes and id in CSS.
Ans: -
2. Explain about CSS and its advantage in brief.
Ans: - CSS (Cascading Style Sheets)
CSS is a stylesheet language used to define the presentation and layout of HTML documents. It
allows developers to control the design aspects of web pages, such as colors, fonts, spacing,
and positioning.

Advantages of CSS
1. Separation of Content and Design
 HTML focuses on the structure and content, while CSS handles the presentation.
 This separation makes the code cleaner and easier to maintain.
2. Reusability
 Styles defined in external CSS files can be reused across multiple HTML pages,
reducing redundancy and saving time.
3. Faster Page Loading
 By using a single external CSS file, the browser can cache the stylesheet, reducing the
need to download the same styles repeatedly.
4. Easier Maintenance
 Changes made in one CSS file automatically reflect on all linked HTML pages,
simplifying updates.
5. Better Design and Layout
  CSS provides advanced layout techniques (e.g., Flexbox, Grid) for responsive and
modern web design.
6. Cross-Browser Compatibility
 With proper use, CSS ensures consistent design across different browsers.
7. Accessibility
 CSS allows developers to design responsive web pages that adapt to various devices
and screen sizes.
8. Rich Styling Features
 It supports features like animations, transitions, and media queries, enabling
dynamic and visually appealing designs.

3. Design three pages of your homepage and link all of them to a single sheet.
Ans: -
4. How will CSS improve the web page and website design layout?
Ans: - CSS (Cascading Style Sheets) plays a vital role in improving the design, layout, and
overall user experience of a webpage or website. Here's how CSS enhances website design:

1. Better Visual Appeal

 CSS allows designers to create visually appealing designs with colors, gradients, images,
fonts, and animations.
 It supports advanced styling features like shadows, rounded corners, and hover effects,
making web pages more attractive.

2. Consistency in Design
 A single CSS file can be linked to multiple pages, ensuring a consistent look and feel
across the website.
 Changes made to the CSS file automatically reflect on all linked pages, maintaining
uniformity.

3. Flexible Layouts
 CSS provides layout tools like Flexbox and Grid for designing responsive and adaptable
web pages.
 Developers can create complex layouts with precise control over the placement and
alignment of elements.

4. Responsive Design
 CSS media queries enable websites to adapt to different devices (desktop, tablet,
mobile) and screen sizes.
 This improves usability and ensures a good user experience across all devices.

5. Improved User Experience

 CSS enhances readability by allowing control over typography (e.g., font size, spacing,
line height).
 Features like hover effects and animations make the site more interactive and engaging.

6. Faster Page Loading

 By using external CSS files, browsers can cache the styles, reducing redundancy and
improving page load times.
  CSS reduces the need for inline styles in HTML, keeping the codebase cleaner and
lighter.

7. Accessibility
 CSS allows developers to design web pages that are accessible to people with
disabilities, using features like high-contrast colors and screen reader-friendly styles.

8. Separation of Content and Design

 CSS separates the visual presentation (design) from the content (HTML), making it
easier to:
o Update styles without altering the HTML structure.
o Maintain and scale the website efficiently.

9. Advanced Features
 CSS supports animations, transitions, and keyframes, enabling dynamic and visually
engaging web elements.
 Tools like pseudo-classes (:hover, :focus) and pseudo-elements (::before, ::after) add
flexibility and creativity to the design.

10. Cross-Browser Compatibility

 CSS ensures that websites look consistent across modern browsers, using fallback
mechanisms for older browsers.

5. What are the different ways of referencing colors in cascading style sheet? Discuss.
Ans: -
6. Write a short note on Features of CSS3.
Ans: -
7. Describe background properties of CSS.
Ans: -
8. Explain embedded style sheet in detail. Write down the advantage and disadvantage of
using style sheets.
Ans: - An embedded style sheet is a type of CSS that is written directly within the <style> tag
inside the <head> section of an HTML document. These styles apply only to the HTML
document in which they are written and are used for styling specific pages.

Advantages of Embedded Style Sheets

1. Ease of Implementation:
o Styles are written directly within the HTML document, making it easy to apply
and manage for small projects or single pages.
 2. Overrides External Styles:
o Embedded styles have higher specificity compared to external styles, allowing
developers to override external styles for specific pages.
3. No External Dependencies:
o Embedded styles do not rely on external files, reducing the risk of broken links
or unstyled content if the external CSS file fails to load.
4. Quick Testing and Prototyping:
o Ideal for quick styling tests or when prototyping designs on a single page.
5. Self-Contained:
o Everything is in one file, making it portable for small projects where a single
file is sufficient.

Disadvantages of Embedded Style Sheets

1. Limited Reusability:
o Styles written in an embedded style sheet cannot be reused across multiple
pages, leading to redundancy.
2. Reduced Maintainability:
o Managing styles becomes difficult for large websites if each page has its own
embedded styles.
3. Potential for Code Duplication:
o Writing styles for multiple pages in embedded sheets often results in
duplicate CSS code.
4. Performance Issues:
o Inline or embedded CSS may increase the size of HTML files, potentially
slowing down page loading times.
5. Not Scalable:
o Embedded styles are not suitable for large projects where multiple pages
share a consistent design.