JAVA Script Tutorial:
Java Script is a client-side
scripting language, you can embed your codes into HTML tags. There
are no similarities bu names between java and javascript.
Object Oriented Programming:
What is an object. Property. Method. Relations between objects.
Following is a simple
Java Script example:
<html>
<body>
<script
language="javascript">
alert("Welcome to my
world!!!");
</script>
</body>
</html>
as you can mention there is a special HTML tag called <script>
... </script>
which includes java script codes. In this example our java script, pops up a message box and types "Strategic Web Technologies" in it. This is a very simple example, that invokes a function named alert and gives a simple string as a parameter to it.
Another
example would be:
<html>
<body>
<script>
document.write("Strategic
Web Technologies");
</script>
</body>
</html>
This code simply inserts the text given as a parameter to
document.write method. You would use the logic behind this scripting
as following example:
<html>
<body>
<script>
myvalue1=2;
myvalue2=5;
result=myvalue1+myvalue2;
document.write(result);
</script>
</body>
</html>
Above
example is a simple addition operation. We have declared 2 variables,
myvalue1 and myvalue2. Assigned values to these variables. Add them
up and put the value to variable result. And print the value of
result by the previos function document.write. Document is an object
and write is the method of this object.
There are 3 types of boxes in
JavaScript language.
1. alert box as we have already
mentioned.
2. confirm box
3. prompt box
So confirm box would
be used as following:
if (confirm("Do you agree"))
{alert("You agree")} else{alert ("You do not agree")};
As well as the following prompt box:
username=prompt("Please
enter your name","Enter your name here");
Can
you write a script that can add 2 values inserted in prompt boxes
|
a=2; |
a=2 |
Operators: ++ , --, %
Conditional operators:==, !=, >, <, >=, <=
if, else, else if
&&, ||, !
Functions:
<html>
<head>
<script>
function
myfunction()
{
alert("Welcome to my
world!!");
}
</script>
</head>
<body>
<form
name="myform">
<input type="button"
value="Hit me"
onClick="myfunction()">
</form>
</body>
</html>
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -
function MsgBox (textstring) {
alert (textstring) }
// - End of JavaScript - -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT NAME="text1" TYPE=Text>
<INPUT NAME="submit" TYPE=Button VALUE="Show Me" onClick="MsgBox(form.text1.value)">
</FORM>
</BODY>
</HTML>
This example has an important improvement. There is a form that is fully functional, and this form is accessed by the object oriented manner: form.text1.value
another important improvement is the usage of function.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -
function changecolor(code) {
document.bgColor=code }
// - End of JavaScript - -->
</SCRIPT>
</HEAD>
<BODY>
<form>
<input type="button" name="Button1" value="RED" onclick="changecolor('red')">
<input type="button" name="Button2" value="GREEN" onclick="changecolor('green')">
<input type="button" name="Button3" value="BLUE" onclick="changecolor('blue')">
<input type="button" name="Button4" value="WHITE" onclick="changecolor('white')">
</form>
</BODY>
</HTML>
Another good example.
<HTML>
<HEAD>
<TITLE>Chapter 3, If-then statements</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -
function password() {
Ret = prompt('Type the word castle',"");
if(Ret=="castle") {
location = 'ch03_1.htm';
} else {
alert("Please try again")
}
}
// - End of JavaScript - -->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript:password()">
<IMG SRC="pict1.gif" NAME="pic1" ALT="about us!" BORDER="0" align="left"></A>
<H3>Click the image to enter a password protected document. Try a wrong entry first.</H3>
</BODY>
</HTML>
Password Protection example. If you put a second parameter into prompt function than this second parameter will be placed into the text box by default.