Sunday, 31 October 2010

IDAT 102

This is the fifth tutorial of JavaScript and this tutorial is about calling up Pop up boxes so if there was a button on the web page you can press it and a pop up box comes up.
Also there is a write in pop up box if you input text into a text field and press submit what you type will be in the pop up box.
This JavaScript file uses a external JavaScript file. Here is the script:
<head> This is the head of the script
<script type="text/javascript" src="javascript.js"></script> This is the script to pull in the external JavaScript file it uses the src to find the file but the JavaScript file has to be in the same location as the HTML file.
</head> This is the end tag of the head

<body> This is the start of the body tag
<form> This is the start of a form
<input type="button" value="click here to call a function" onclick="AlertPopup()"/> This is the input type and it is a button when you press the button it will call up a pop up box and say "AlertPopup".
</form> This ends the form tag.

<a href="#" onclick="AlertPopup2('from link 1')">click here</a> This is text and has a link on the text to open up a text box.
<br/><br/> This is a paragraph break.
<a href="#" onclick="AlertPopup2('link 2 here')">or click here...</a> This is the second link from text but it uses the same Javascript function which is
AlertPopup2.
<form name="myForm"> This starts a form and its called myForm it can be found in the external JavaScript file.
<input type="text" name="thistext" value=""/> This is an input type and it is where we add our text and the name is thistext and the value = what you add into the text field.
<input type="button" value="click" onClick="readForm()"/> This is another input type but its a button and when you click on the button it reads the input text field.
</form> This ends the form tag
</body> This ends the body tag



This is the JavaScript file that is used for all the script i just talked about.



// JavaScript Document This explains it is a JavaScript file
function AlertPopup(){  This is for the first script it makes the pop up screen appear when you click the button.
    alert("this has been called from a function"); This brings the pop up up and says it has been called from a function a function contains code that will be executed by an event or by a call to the function.

}
function AlertPopup2(linktext){ This is for the second script it makes the pop up appear when you press on the text.
    alert(linktext); This brings the pop up from the text.
}
function readForm(){ This is for the input type field it makes a function to read the form.
    var formContents = document.myForm.thistext.value; This creates a variable for the Form Content which is called "formContents" also it says the document is in the myForm and it is a text value.
    alert(formContents);When you enter the text and press enter this will make the forms content.
}



This is the javascript file it loads really quick and the scripting is not very hard.

No comments:

Post a Comment