Top 10+ HTML, CSS, and JAVASCRIPT QUESTION AND ANSWER
HTML, CSS, and JavaScript are the three foundational technologies used to build modern websites and web applications. In this blog, you will find the Top 10+ HTML, CSS, and JAVASCRIPT QUESTION AND ANSWER
JAVASCRIPT QUESTION AND ANSWER
1. Write a code in java-script for form Validation with regular expression and apply the following conditions
Empty name, email, password, and phone is not allowed(HTML required is not allowed use conditional statements)
Answer: for example,
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
</head>
<body>
<!– <form id=”myForm” onsubmit=”return validateForm()”>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name” required>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email” >
<label for=”phone”>Phone:</label>
<input type=”tel” id=”phone” name=”phone” pattern=”[0-9]{3}-[0-9]{3}-[0-9]{4}” required>
<input type=”submit” value=”Submit”>
</form> –>
<form action=“” id=“myForm” onsubmit=“return validateForm()”>
<label for=“name”>Name:</label>
<input type=“text” name=“” id=“name”>
<label for=“email”>Email</label>
<input type=“email” id=“email” name=“email”>
<label for=“phone”>Phone</label>
<input type=“tel” name=“” id=“phone” >
<label for=“password”>password</label>
<input type=“password” itemid=“password” name=“password” id=“password”>
<label for=“cpassword”>confirm-password</label>
<input type=“password” name=“cpassword” id=“cpassword”>
<input type=“submit” name=“” value=“Submit” id=“”>
</form>
<script>
//In this example, the validateForm() function is called when the form is submitted. It first retrieves the values of the input fields using the document.forms[“myForm”][“field_name”].value syntax. Then, it checks if each field is empty and displays an alert message if it is. It also uses regular expressions to validate the format of the phone number and email fields, and displays an alert message if they are not in the correct format.
function validateForm() {
var name = document.forms[“myForm”][“name”].value;
var email = document.forms[“myForm”][“email”].value;
var phone = document.forms[“myForm”][“phone”].value;
var password = document.forms[“myForm”][“password”].value;
var cpassword = document.forms[“myForm”][“cpassword”].value;
//Finally, the function returns true if all the fields are valid, and false otherwise. If it returns false, the form will not be submitted to the server.
if (name == “”) {
alert(“Name must be filled out”)
return false;
}
if (email == “”) {
alert(“Email must be filled out”);
return false;
}
if (phone == “”) {
alert(“Phone must be filled out”);
return false;
}
// if(password !=cpassword ){
// alert(“password is not matched”)
// return false
// }
if (password != cpassword) {
alert(“Passwords did not match”);
return false;
}
}
// validate phone number format
var phoneRegex = /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/;
if (!phoneRegex.test(phone)) {
alert(“Phone number must be in the format XXX-XXX-XXXX”);
return false;
}
// validate email format
var emailRegex = /^\S+@\S+\.\S+$/;
if (!emailRegex.test(email)) {
alert(“Email must be in the format xxx@xxx.xxx”);
return false;
}
return true;
</script>
</body>
</html>
- What are the different data types in JavaScript?
Answer: The different data types in JavaScript include numbers, strings, booleans, undefined, null, objects, and arrays.
- What is the difference between == and === in JavaScript?
Answer: The == operator compares the values of two operands, while the === operator compares both the values and the data types of two operands.
- What is an event in JavaScript?
Answer: Although an event in JavaScript is an action or occurrence, such as a click or keypress, that can be detected and responded to by JavaScript code.
- What is a callback function in JavaScript?
Answer: A callback function in JavaScript is a function passed as an argument to another function and executed at a later time.
- What is a closure in JavaScript?
Answer: A closure in JavaScript is a function that has access to its own private variables and the variables in its outer scope, even after the outer function has completed execution.
- What is the difference between let and var in JavaScript?
Answer: The let keyword declares a block-scoped variable, as a result, the var keyword declares a function-scoped variable.
- What is the difference between const and let in JavaScript?
Answer: The const keyword declares a read-only variable that cannot be reassigned, while the let keyword declares a variable that can be reassigned.
Note:
- What is the spread operator in JavaScript?
Answer: The spread operator (…) is used to expand an iterable object into individual elements, such as an array into separate values.
- What is the ternary operator in JavaScript?
Answer: The ternary operator (a ? b : c) is a shorthand for an if/else statement, where a is the condition, b is the value returned if the condition is true, and c is the value returned if the condition is false.
For Free Demo classes Call: 02071173035
Registration Link: Click Here!
- What is the difference between null and undefined in JavaScript?
Answer: null is a value representing the intentional absence of any object value, while undefined is a value representing the unintentional absence of any object value.
- What is the difference between for and forEach in JavaScript?
Answer: The for loop is a traditional loop used for iterating over arrays, while the forEach method is a built-in method of arrays used for iterating over each element in an array.
- What is the difference between synchronous and asynchronous code in JavaScript?
Answer: Synchronous code executes one line at a time, blocking the execution until the current line has completed. Asynchronous code allows multiple lines of code to execute at the same time, without blocking the execution.
- What is the difference between a function declaration and a function expression in JavaScript?
Answer: A function declaration is a statement that defines a function, while a function expression defines a function as a value assigned to a variable.
- What is the difference between local and global variables in JavaScript?
Answer: Local variables are defined inside a function and can only be accessed within that function, while global variables are defined outside of any function and can be accessed from anywhere in the code.
- What is hoisting in JavaScript?
Answer: Hoisting in JavaScript is a mechanism where variable and function declarations are moved to the top of their respective scopes, allowing them to be used before they are declared.
- What is the difference between the let and const keywords in JavaScript?
Answer: The let keyword declares a mutable variable that can be reassigned, while the const keyword declares an immutable variable that cannot be reassigned.
- What is the difference between a closure and a callback function in JavaScript?
Answer: A closure is a function that has access to its own private variables
HTML, CSS, JAVASCRIPT QUESTION AND ANSWER
- What is HTML and what does it stand for?
Answer: HTML stands for HyperText Markup Language. It is a standard markup language used to create webpages and other online content.
- What is the difference between HTML and HTML5?
Answer: HTML5 is the latest version of HTML and includes new features such as semantic elements, video and audio elements, and improved form controls. HTML is the older version of HTML and does not have these new features.
- What is the purpose of the <head> tag in HTML?
Answer: The <head> tag is used to include meta-information about the webpage, such as the title, keywords, and description. It is not displayed on the webpage itself.
- What is the purpose of the <body> tag in HTML?
Answer: The <body> tag is used to include the visible content of the webpage, such as text, images, and other multimedia elements.
- What is the syntax for creating a hyperlink in HTML?
Answer: The syntax for creating a hyperlink in HTML is: <a href=”url”>link text</a>
- What is the difference between an absolute URL and a relative URL?
Answer: An absolute URL includes the entire URL of a webpage, including the protocol (http or https), domain name, and path. A relative URL only includes the path to the webpage from the current location.
- What is the purpose of the alt attribute in an <img> tag?
Answer: The alt attribute is used to provide alternative text for an image, which is displayed in case the image cannot be loaded or is not accessible to a user with a visual impairment.
For Free Demo classes Call: 02071173035
Registration Link: Click Here!
- What is the difference between the <ol> and <ul> tags?
Answer: The <ol> tag is used to create an ordered list, with numbered list items, while the <ul> tag is used to create an unordered list, with bullet points for each item.
- What is the difference between the <strong> and <em> tags?
Answer: The <strong> tag is used to indicate strong importance or emphasis on a word or phrase, while the <em> tag is used to indicate emphasis or stress on a word or phrase.
- How do you create a line break in HTML?
Answer: To create a line break in HTML, you can use the <br> tag, like this: <br>
- How do you add a background image to a webpage in HTML?
Answer: To add a background image to a webpage in HTML, you can use the CSS background-image property, like this: body { background-image: url(“image.jpg”); }
- What is the difference between an ID and a class in HTML?
Answer: An ID is used to identify a specific element on a webpage, and can only be used once on the page. A class is used to group multiple elements together and can be used multiple times on a page.
- How do you create a table in HTML?
Answer: To create a table in HTML, you can use the <table> tag, along with the <tr> tag for rows and the <td> tag for columns.
- How do you create a form in HTML?
Answer: To create a form in HTML, you can use the <form> tag, along with various input types such as text, password, radio buttons, checkboxes, and more.
- What is the purpose of the <meta> tag in HTML?
Answer: The <meta> tag is used to provide metadata about the webpage, such as keywords, description, author, and viewport settings for responsive design.
CSS QUESTION AND ANSWER
- What is CSS and what does it stand for?
Answer: CSS stands for Cascading Style Sheets. It is a style sheet language used to describe the presentation of HTML or XML documents.
- What is the difference between inline, internal, and external CSS?
Answer: Inline CSS is used to style individual HTML elements, internal CSS is used to style a single HTML document, and external CSS is used to style multiple HTML documents from a single CSS file.
- What is a selector in CSS?
Answer: A selector is a pattern used to select elements to style in CSS. It can be an element selector, class selector, ID selector, or attribute selector.
- What is the box model in CSS?
Answer: The box model in CSS describes the rectangular boxes that every HTML element creates. It includes the content, padding, border, and margin.
- What is the difference between padding and margin in CSS?
Answer: Padding is the space between the content and the border of an element, while margin is the space between the border and the surrounding elements.
- What is specificity in CSS?
Answer: Specificity in CSS determines which CSS rules are applied to an element based on the number of selectors and types of selectors used.
- What is the difference between absolute and relative positioning in CSS?
Answer: Absolute positioning is based on the element’s nearest positioned ancestor, while relative positioning is based on the element’s current position in the document flow.
- What is the CSS float property used for?
Answer: The CSS float property is used to position an element to the left or right of its container, allowing other content to wrap around it.
- What is the difference between display: none and visibility: hidden in CSS?
Answer: display:none completely removes an element from the document flow, while visibility: hidden hides the element but leaves it in the document flow.
- What is a CSS sprite?
Answer: A CSS sprite is a technique used to combine multiple images into a single image file to reduce HTTP requests and improve page load time.
- What is the CSS box-sizing property used for?
Answer: The CSS box-sizing property is used to change the default sizing behavior of elements, allowing padding and border to be included in an element’s total width and height.
- What is the CSS transform property used for?
Answer: The CSS transform property is used to apply various transformations to an element, such as rotate, scale, skew, and translate.
For Free Demo classes Call: 02071173035
Registration Link: Click Here!
- What is the difference between the CSS:nth-child() and:nth-of-type() pseudo-classes?
Answer: The :nth-child() pseudo-class selects elements based on their position among all children of their parent element, while the :nth-of-type() pseudo-class selects elements based on their position among siblings with the same tag name.
- What is the CSS transition property used for?
Answer: The CSS transition property is used to create smooth transitions between two states of an element, such as changing its color, size, or position.
- What is the CSS flexbox layout and how does it work?
Answer: The CSS flexbox layout is a flexible box model used to create responsive and flexible layouts. It allows elements to be aligned and distributed within a container along a main axis and a cross-axis.
- What is the difference between the CSS:hover and : active pseudo-classes?
Answer: The :hover pseudo-class is used when the mouse cursor is over an element, while the : active pseudo-class is used when an element is being clicked.
- What is the CSS z-index property used for?
Answer: The CSS z-index property is used to control the stacking order of elements on a webpage. Elements with a higher z-index value are displayed on top
Note: Sign up for Full Stack Training in Pune today and take the first step towards a rewarding career in web development!
Do visit: Click Here
Author:-
Pranay Patil
Call the Trainer and Book your free demo Class For Full Stack Call now!!!
| SevenMentor Pvt Ltd.
© Copyright 2021 | SevenMentor Pvt Ltd.