HTML Importants
HTML Importants
- 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:");
- 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:
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.
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
- 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>
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!");
});
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);
- 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);
- 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]
___________________________________