Scribd
Upload
115 views

Javascript Cat

This document contains examples of incorporating JavaScript into HTML documents in various ways, such as embedding code directly in HTML tags, using inline JavaScript, and linking to external JavaScript files. It also provides examples of different JavaScript dialog boxes (alert, confirm, and prompt) and built-in functions (parseInt, parseFloat, eval). Additionally, it discusses JavaScript event handlers like onClick and onChange and provides code samples to validate user input, including validating an email address, checking for numeric values, and validating usernames and passwords before form submission. Nested for loops are also demonstrated to repeatedly output variable values.

Uploaded by

Lewis Wambua
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
115 views

Javascript Cat

This document contains examples of incorporating JavaScript into HTML documents in various ways, such as embedding code directly in HTML tags, using inline JavaScript, and linking to external JavaScript files. It also provides examples of different JavaScript dialog boxes (alert, confirm, and prompt) and built-in functions (parseInt, parseFloat, eval). Additionally, it discusses JavaScript event handlers like onClick and onChange and provides code samples to validate user input, including validating an email address, checking for numeric values, and validating usernames and passwords before form submission. Nested for loops are also demonstrated to repeatedly output variable values.

Uploaded by

Lewis Wambua
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

SCHOOL COMPUTING AND INFORMATICS

DEPARTMENT OF INFORMATION TECHNOLOGY

UNIT CODE: DIT 2210 UNIT TITLE: INTERNET PROGRAMMING

NAME: LEWIS KYALO WAMBUA REG NO : DIT/2021/85375

1. Using valid examples, illustrate 4 ways of incorporating JavaScript into HTML (4 marks)

Embedding code----
<!DOCTYPE html >  
<html>  
<head>  
<title> page title</title>  
<script>  
document. Write ("Welcome to Java point");  
</script>  
</head>  
<body>  
<p>Inthis example we saw how to add JavaScript in the head section </p>  
</body>  
</html>

Inline code------
<!DOCTYPE html >  
<html>  
<head>  
<title> page title</title>  
</head>  
<body>  
<p>  
<a href="#" onClick="alert('Welcome !');">Click Me</a>  
</p>  
p> in this example we saw how to use inline JavaScript or directly in an HTML tag 
</p>  
</body>  
</html>  
External file-----
<html>  
<head>  
<meta charset="utf-8">  
<title>Including a External JavaScript File</title>  
</head>  
<body>  
<form>  
<input type="button" value="Result" onclick="display()"/>  
</form>  
<script src="hello.js">  
</script>  
</body>  
</html>  

2. Describe 3 types of JavaScript dialog boxes. For each, show an example (3 marks)

Alert dialog box--------


<html>     
<head>    
    <script type="text/javascript">   
        function show() {   
            alert("It is an Alert dialog box");   
        }   
    </script>   
</head>   
    
<body>   
    <center>   
        <h1>Hello World :) :)</h1>   
        <h2>Welcome to java page</h2>   
        <p>Click the following button </p>   
        <input type="button" value="Click Me" onclick="show();" />   
    </center>   
</body>   
</html>  

Confirmation dialog box-------


<html>   
<head>    
    <script type="text/javascript">   
        function show() {   
            var con = confirm ("It is a Confirm dialog box");   
            if(con == true) {   
                document.write ("User Want to continue");   
            }    
            else {   
                document.write ("User does not want to continue");   
            }   
        }   
    </script>   
</head>      
<body>   
    <center>   
        <h1>Hello World :) :)</h1>   
        <h2>Welcome to java page </h2>   
        <p>Click the following button </p>   
        <input type="button" value="Click Me" onclick="show();" />   
    </center>   
</body>       
</html>  

Prompt dialog box-----


<html>   
<head>    
    <script type="text/javascript">   
        function show() {   
            var value = prompt("Enter your Name : ", "Enter your name");   
            document.write("Your Name is : " + value);   
        }   
    </script>   
</head>       
<body>   
    <center>   
        <h1>Hello World :) :)</h1>   
        <h2>Welcome to java page</h2>   
        <p>Click the following button </p>   
        <input type="button" value="Click Me" onclick="show();" />   
    </center>   
</body>       
</html>  

3. Explain the use of the following I JavaScript inbuilt functions (3 marks)


a. parseInt()---- this function is used to convert a string (string of digits
such as “145”) to an integer. 
b. parseFloat()---this JavaScript built-in function is used to convert the
string (string of digits along with decimal point) into floating point
number.
c. eval()---this JavaScript built-in function can be used to convert a string
expression to a numeric value
4. Discuss five JavaScript event handlers. For each, show an example (5 marks)

onChange--- is commonly used to validate form fields or to otherwise perform an


action when a form field’s value has been altered by the user
onClick --handler is executed when the user clicks with the mouse on the object in
question
onFocus ---is executed whenever the specified object gains focus
onKeyPress --- determine when a key on the keyboard has been pressed. 
 onLoad -- triggered when the page has finished loading. 

5. Write some JavaScript and HTML code to validate an email address (4 marks)
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>JavaScript form validation - checking email</title>

<link rel='stylesheet' href='form-style.css' type='text/css' />

</head>

<body onload='document. form1.text1. focus()'>

<div class="mail">

<h2>Input an email and submit</h2>

<form name="form1" action="#">

<ul>

<li><input type='text' name='text1'/></li>

<li>&nbsp;</li>

<li class="submit"><input type="submit" name="submit" value="Submit"


onclick="Validate Email (document. form1.text1)"/></li>

<li>&nbsp;</li>

</ul>

</form>

</div>

<script src="email-validation.js"></script>

</body>

</html>
6. Write JavaScript and HTML code to check if a user entered a numeric value in an ID
umber text box (4 marks)

<script>

/* this function is called when we

click on the submit button*/

function numberValidation() {

event.preventDefault();

var n = document.form.numbers.value;

if (isNaN(n)) {

document.getElementById("numberText")

.innerHTML ="Please enter Numeric value";

return false;

} else {

document.getElementById("numberText")

.innerHTML = "Numeric value is: " + n;

return true;

</script>

<img src=

<form action="#" name="form" onsubmit="numberValidation()">

Number: <input type="text" name="numbers" />

<span id="numberText"></span>

<br />
<input type="submit" value="submit" />

</form>

7. Write some JavaScript code to validate username and Password entries and ensure the
user has entered details before submitting(3 marks)
<html>  
<head>  
<title> Verification of valid Password </title>  
</head>  
<script>  
function verifyPassword() {  
  var pw = document.getElementById("pswd").value;  
  //check empty password field  
  if(pw == "") {  
     document.getElementById("message").innerHTML = "**Fill the password pleae!
"; 
 return false;  
  }  
   
 //minimum password length validation  
  if(pw.length < 8) {  
     document.getElementById("message").innerHTML = "**Password length must b
e atleast 8 characters";  
     return false;  
  }  
  
//maximum length of password validation  
  if(pw.length > 15) {  
     document.getElementById("message").innerHTML = "**Password length mustn
ot exceed 15 characters";  
     return false;  
  } else {  
     alert("Password is correct");  
  }  
}  
</script>  
  
<body>  
<center>  
<h1 style="color:green">Javatpoint</h1>  
<h3> Verify valid password Example </h3>  
  
<form onsubmit ="return verifyPassword()">  
<!-- Enter Password -->  
<td> Enter Password </td>  
<input type = "password" id = "pswd" value = "">   
<span id = "message" style="color:red"> </span> <br><br>  
  
<!-- Click to verify valid password -->  
<input type = "submit" value = "Submit">  
  
<!-- Click to reset fields -->  
<button type = "reset" value = "Reset" >Reset</button>  
</form>  
</center>  
</body>  
</html>  

8. Write JavaScript code to display the following. The JavaScript code must use nested for
loops (4 marks)
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title>This is an example for nested loop inJavaScript</title>
<head>
<body>
<p>Click below button to loop inner loop each ( 5 ) times for outer loop.</p>
<button onclick="myFunction()">Click Here</button>
<p id="did"></p>
<script>
function myFunction() {
var text = "";
var i;
var j;
for (i = 0; i < 5; i++) {
for (j = 0; j < 2; j++) {
text += "The number is i = " + i + " and j = " + j + "<br>";
}
}
document.getElementById("did").innerHTML = text;
}
</script>
</body>
</html>
*****

You might also like