A type of programming which can add interactivity and function to a web site. The statements in the language can be made part of an HTML source file to enable some interactive features such as mouse clicks and input to forms. Some examples include drop down menus navigation button effects, interactive forms, slide shows, and pop open windows. There are many applications available to enrich a web site. JavaScript is a popular client-side scripting language because it is supported by most web browsers.
There are usually two elements to a JavaScript program. One is the main code snippet, which is placed in the <head> section above the <body> in your HTML file. The other element is the trigger that executes the main code. The trigger is placed somewhere within your regular HTML. The "proper" name for triggering is function-calling or function-linking.
Examples:
- We will first hand code some javascript so we can understand the different elements of the code .
- Open a Secure shell client session to itsunix
- cd public_html/ist361
- cp -r /home2/f/a/as845383/public_html/shelton/images/ images/
- Enter the following text for an interactive pop up window action:
<html>
<head>
<script type="text/javascript" language="JavaScript">
<!-- Hide the script from browsers that do not support JavaScript
-->
</script>
</head>
<body>
<h2>Sample Javascript Actions :</h2>
<h3>Action 1 - Display user name entered at prompt</h3>
<script type="text/javascript" language="JavaScript">
<!-- Example 1 : Prompt user for their name
var username=prompt("What's your name?","Enter your name here")
document.write(" Hi there, " + username +"!")
-->
</script>
</html>
- For the next action, mouse over, enter the following text above </html>
<h3>Action 2 - Mouse over to change color of arrow</h3>
<p><a
onmouseover="document.arrow.src='images/redarrow.gif'"
onmouseout="document.arrow.src='images/bluearrow.gif'" >
<img src = "images/bluearrow.gif" width="147" height="82" alt="pointing arrow" name="arrow" />
</a></p>
- For the next action, Converting lowercase text to uppercase, enter the following text above </html>
<form name="upper_text" class="border">
<h3>Action 3 - Convert text to upper case</h3>
Enter text here: <input type="text" size="15" name="text_sample"> Click Convert
<input type="button" value=" Convert " onclick="convert_to_upper();">
<input type="text" size="15" name="new_text"> text converted to upper case
</form>
and add the following code, in the header section above the '-->'
/* function for Action 3 : Convert text to upper case characters */
function convert_to_upper(){
/* Reference the form where the text is entered */
var tempform = document.forms['upper_text'];
var textvalue = tempform.text_sample.value;
tempform.new_text.value="";
if (textvalue.length == 0) {
/* no text entered */
alert('Please enter sample text to be converted');
return;
}
else {
tempform.new_text.value = textvalue.toUpperCase();
}
}
}
- For the next action, Select items using checkboxes, enter the following text above </html>
<h3>Action 4 - Select items using checkboxes.</h3>
<table align="center" width="30" border="0" summary="used to align checkboxes">
<tr>
<form name="mybeverage">
Select a beverage from the choices below. More than one beverage may be selected. <br />
<input type="checkbox" name="beverage" value="coffee">Coffee<br />
<input type="checkbox" name="beverage" value="tea">Tea<br />
<input type="checkbox" name="beverage" value="beer">Summer Ale Special<br />
<input type="checkbox" name="beverage" value="wine">House Wine<br />
<br />
<input type="button" name="test" onclick="beverages()" value="Enter Selection">
<br />
<input type="text" name="answer" size="70">
</form>
</tr>
</table>
and the following function in the header section above the '-->'
/* function for Action 4 : select items from checkboxs */
function beverages() {
beverage=document.forms['mybeverage'].beverage
answer=document.forms['mybeverage'].answer
txt=""
for (i=0;i<beverage.length;++ i) {
if (beverage[i].checked)
{
txt=txt + beverage[i].value + " "
}
}
answer.value="Your beverage order is: " + txt
}
- For the last action, Display last Modified Date, enter the following text above </html>
<h3>Action 5 - Display last modified date of file</h3>
<p>
<script type="text/javascript" language="JavaScript">
<!-- Action 5 : Dispaly when document was last modified
document.write(" This page was last updated on: " + document.lastModified + ".");
-->
</script>
</p>
|