Scribd
Upload
13 views17 pages

HTML Importants

Html answers for the simple beginner questions. Basic HTML overview

Uploaded by

kyliejones48530
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views17 pages

HTML Importants

Html answers for the simple beginner questions. Basic HTML overview

Uploaded by

kyliejones48530
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

WAD IMPORTANT QUESTIONS

End Semester Exam

Q.1 Javascript Dialog Box.


A.1 There are three types of dialog box functions in javascript:
1. ALERT BOX:
The alert() function displays a pop-up string or a message to
the user.
- When the alert() function loads, the pop-up will be visible over
the webpage. The user has to click the ‘OK’ button to proceed
browsing the website.
- Syntax:
alert(“string or message”);
- Example Code:
<html>
<body>
<script>
alert("Hello World");
</script>
</body>
</html>

- Output:
[NOTE: Outputs are not necessary. However, writing outputs
might be helpful. The above is just an example of how to write dialog
box outputs.]

2. CONFIRM BOX:
The confirm() function is used when you want the user to
approve something before proceeding to further take action on the
said something.
- The confirm() pop-up has two options for the user to choose
from - ‘OK’ or ‘CANCEL’.
- Choosing either of them will allow the javascript program to
execute the corresponding block of codes.
- Syntax:
confirm(“string”);
- Example Codes:
<html>
<body>
<script>
var conf = confirm("Will you confirm this
message?");

if(conf == true){
document.write('The user clicked on
OK');
}else{
document.write('The user clicked on
cancel');
}
</script>
</body>
</html>

3. PROMPT BOX:
The prompt() function is used when we need to ask a user for
an input.
- The prompt() function asks the user for a value in the specified
data type.
- The user types in the value and can either choose to click ‘OK’
or not proceed at all with the ‘CANCEL’ button in pop-up.
- CANCEL button returns null.
- Syntax:
dataType variableName = prompt(‘String’);
- Example Code:
<html>
<body>
<script>
var name = prompt("Enter your name:");

if (name == null || name == "") {


document.write('No name entered.');
} else {
document.write('Hello, ' + name);
}
</script>
</body>
</html>
Q.2 Typeof Operator.
A.2 The typeof operator returns the data type of a variable in javascript.
- There can be the following possible data types as outputs of the
typeof operator:
1. String
2. Number
3. Boolean
4. Bigint
5. Symbol
6. Null
7. Undefined
- Syntax:
typeof variableName or value;
- Example Code:
<html>
<body>
<script>
// usage of typeof operator
document.write(typeof "Hello World");
document.write(typeof 12.5);
document.write(typeof true);
</script>
</body>
</html>

- Output:
string
number
boolean
Q.3 DOM
A.3 DOM stands for Document Object Model.
- It is a programming interface for web documents.
- It is a tree-like structure that represents the elements of an
HTML(Hyper Text Markup Language) or XML(Extensible Markup
Language) document, allowing programs to manipulate the structure,
style and content of web pages.
- DOM Tree Example:

- Overall, the DOM plays a central role in web development, providing a


structured interface for interacting with and manipulating web
documents, and enabling the creation of dynamic and interactive web
experiences.
- KEY POINTS ABOUT DOM: [For Revision Purpose]
1. TREE STRUCTURE:
The DOM represents the structure of an HTML or XML
document as a tree.
- Each node in the tree corresponds to an element,
attribute, or text in text.

2. OBJECTS AND PROPERTIES:


In DOM, elements of a document are represented as
objects, and attributes and text content are represented as
properties of those objects.
3. ACCESSING ELEMENTS:
Developers can access elements in the DOM using
scripting languages like JavaScript.
- This allows dynamic manipulation of the document's
structure and content.

4. TRAVERSAL AND MANIPULATION:


The DOM provides methods to move through the
document tree, allowing developers to navigate between
elements, modify their properties, and add or remove elements
dynamically.

5. EVENT HANDLING:
The DOM also provides mechanisms for handling events
triggered by user interactions or other sources.
- Developers can attach event listeners to DOM elements to
respond to user actions like clicks, keyboard inputs, and
mouse movements.

6. CROSS-BROWSER COMPATIBILITY:
DOM APIs are standardized, but different browsers may
have slight variations in their implementation.
- Developers often need to write code that works
consistently across different browsers.

7. DOCUMENT MANIPULATION:
The DOM allows programs to dynamically modify the
structure and content of a web page.
- This enables features like interactive forms, animations,
and real-time updates without requiring a page reload.

8. CSS MANIPULATION:
In addition to HTML structure, the DOM also represents
CSS styles applied to elements. Developers can manipulate
these styles programmatically to change the appearance of
elements on the page.

9. DYNAMIC RENDERING:
With the DOM, web pages can be dynamically rendered
based on user interactions, data from servers, or other sources.
- This enables the creation of rich, interactive web
applications.

Q.4 Form Validation.


A.4 HTML form validation can be done by javascript. If a form field is
empty, this function alerts the message , and returns false, to prevent the
form from being submitted.
- It is important to validate the form submitted by the user because it
can have inappropriate values. So, validation is a must to
authenticate users.
- JavaScript provides a facility to validate the form on the client-side so
data processing will be faster than server-side validation. Most web
developers prefer JavaScript form validation.
- Through JavaScript, we can validate name, password, email, date,
mobile numbers and more fields.
- Example Code:
<html>
<body>
NAME: <input type="text" id="name"
placeholder="Enter your name">
<input type="submit" value="Submit" id="submit"
onclick="validateForm()">
<script>
function validateForm() {
let name =
document.getElementById('name').value;
if (name == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</body>
</html>

Q.5 Difference between Javascript and Jquery.


A.5

POINTS JAVASCRIPT JQUERY

1. Meaning It is a dynamic It is a lightweight,


computer language “write less, do more”
javascript library.

2. Purpose Designed for creating Jquery makes it much


network-centric easier to use
applications Javascript on your
website.

3. Type of document It is a scripting It is a library in


language Javascript.

4. Referencing A js file can be A jQuery library can be


referenced in this way: referenced by:
<script <head>
language=”javascri <script
pt” src="jquery-3.6.3.
type=”text/javascr min.js"></script>
ipt”> </head>
// code here
</script>

5. Where to create the Sublime text, VS code, There are two ways to
file Dreamweaver, Notepad start using jQuery:
etc. are js development 1. Download the
tools jQuery library
from jQuery.com
2. Include jQuery
from CDN, like
Google

6. Syntax <script $(selector).action


type=”text/javascr ()
ipt”>
// code here
</script>

7. Example <script> $(“p”).hide()


document.write(“He
llo World”);
</script>

Q.6 GET and POST methods.


A.6 Methods of form elements:
1. GET:
Appends form-data into URL in name/value pairs.
- The length of a URL is limited (about 3000 characters)
- Never use GET to send sensitive data. (Will be visible in the
URL)
- Useful for form submissions where a user wants to bookmark
the result.
- GET is better for non-secure data, like query strings in google.
2. POST:
Appends form-data inside the body of the HTTP request. (Data
is not shown in URL)
- Has no size limitations.
- Form submissions with POST cannot be bookmarked.

Q.7 Javascript Functions.


A.7 A function is a group of reusable code which can be called anywhere
in your program. This eliminates the need of writing the same code again
and again.
- It helps programmers in writing modular codes.
- It allows a programmer to divide a big program into a number of
small and manageable functions.
- JavaScript also supports all the features necessary to write modular
code using functions.
- We use functions like alert() and write() again and again, but they
have been written in core javascript once.
- DEFINE A FUNCTION:
The most common way to define a function in JavaScript is by
using the function keyword, followed by a unique function name, a list
of parameters (that might be empty), and a statement block
surrounded by curly braces.
- SYNTAX:
<script type = “text/javascript”>
Function functionName(parameterList) {
// code or statement
}
</script>

- EXAMPLE:
<script type = “text/javascript”>
Function sayHello() {
alert(“Hello World”);
}
</script>

- CALLING A FUNCTION:
To implement the function we have defined, we can just use
javascript events like onclick.
- Example
<html>
<body>
<p>Click the following button to call the
function</p>
<form>
<input type = "button" onclick =
"sayHello()" value = "Say Hello">
</form>
<p>Use different text in the write method and
then try...</p>
</body>
</html>

- FUNCTION PARAMETERS:
In Javascript, there is a facility to pass different parameters
while calling a function.
- These passed parameters can be captured inside the function and
any manipulation can be done over those parameters.
- A function can take multiple parameters separated by comma.
- Example:
<head>
<script type = "text/javascript">
function sayHello(name, age) {
document.write (name + " is " + age + " years
old.");
}
</script>
</head>
<body>
<p>Click the following button to call the
function</p>
<form>
<input type = "button" onclick =
"sayHello('Zara', 7)" value = "Say Hello">
</form>
<p>Use different parameters inside the function
and then try...</p>
</body>
</html>

Q.8 JQuery Event.


A.8 jQuery is tailor-made to respond to events in an HTML page.
- All the different visitors' actions that a web page can respond to are
called events.
- An event represents the precise moment when something happens
for example moving a mouse over an element, selecting a radio
button, clicking on an element.

MOUSE KEYBOARD FORM DOCUMENT/


EVENTS EVENTS EVENTS WINDOW
EVENTS

click keypress submit load

dbclick keydown change resize


mouseenter keyup focus scroll

mouseleave blur unload

- In jQuery, most DOM events have an equivalent jQuery method.


- To assign a click event to all paragraphs on a page, you can do this:
$("p").click();
- The next step is to define what should happen when the event fires.
You must pass a function to the event:
$("p").click(function(){
// action goes here!!
});
- EVENTS IN jQuery:
1. $(document).ready():
The $(document).ready() method allows us to execute a
function when the document is fully loaded.

2. click():
The click() method attaches an event handler function to
an HTML element.

$("p").click(function(){
$(this).hide();
});

3. focus():
The focus() method attaches an event handler function to
an HTML form field.

$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
4. blur():
The blur() method attaches an event handler function to
an HTML form field.

$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
5. mouseenter():
The mouseenter() method attaches an event handler
function to an HTML element.

$("#p1").mouseenter(function(){
alert("You entered p1!");
});

Q.9 String Method, HTML Wrapper Method, Math Method.


A.9 STRING METHOD:
1. charAt() - returns the character at a specified index (position)
2. concat() - returns two or more joined strings
3. Length - returns the length of string
4. replace() - searches a string for a value, or a regular expression,
and returns a string where the values are replaced
5. slice() - extracts a part of a string and returns a new string
6. toString() - returns a string or a string object as a string
7. toLowerCase() - returns string converted into lowercase letters.
8. toUpperCase() - returns string converted into uppercase letters.
9. substr() - extracts a number of characters from string, from a
start index (position)
- EXAMPLES:
1. charAt()
let text = "HELLO WORLD";
let letter = text.charAt(0);
2. concat()
let text1 = "Hello";
let text2 = "world!";
let result = text1.concat(" ", text2);

3. length()
let text = "Hello World!";
let length = text.length;

4. toUpperCase()
let text = "Hello World!";
let result = text.toUpperCase();

5. substr()
let text = "Hello world!";
let result = text.substr(1, 4);

HTML WRAPPER METHOD:


1. big() - displays a string using big font
2. bold() - displays a string in bold
3. fontcolor() - displays the string using specified colors
4. fontsize() - displays a string using specified size
5. italics() - displays string in italic
6. link() - displays string as hyperlink
7. sub() - displays string in subscript
8. sup() - displays string in superscript

- EXAMPLES:
1. big():
let text = "Hello World!";
let result = text.big();
2. fontcolor():
let text = "Hello World!";
let result = text.fontcolor("green");

3. fontsize():
let text = "Hello World!";
let result = text.fontsize(6);

MATH OBJECT:
The Math object allows you to perform mathematical
tasks.Math is not a constructor. All properties/methods of Math can
be called by using Math as an object, without creating it:
- Example:
let x = Math.PI;
let y = Math.sqrt(16);

1. abs(x) - returns the absolute value of x


2. cbrt(x) - returns cubic root of x
3. PI - returns PI (approx 3.14)
4. pow(x, y) - returns value of x to the power of y
5. sqrt(x) - returns square root of x
6. max(x1, x2,...) - returns number of highest value
7. min(x1, x2,...) - returns the number with the lowest value

- EXAMPLES:
1. Math.pow():
let x = Math.pow(4, 3);
2. Math.floor():
let x = Math.floor(1.6);
3. Math.sqrt():
let x = Math.sqrt(9);
4. Math.max():
let x = Math.max(5, 10);
Q.10 Logical Programs.
A.10 [Refer to the practicals given as class materials]

___________________________________

You might also like