#StoneProfitsSystem


Java Script- Basics

Capital Letters :
  • It is extremely important to be aware that javascript makes a sharp distinction between capital and non-capital letters.
  • JavaScript does not consider a variable named "myvalue" to be the same as a variable named "MYVALUE".
Examples:
Example I Example II
<html>
<head>

 <title>My JavaScript-page<title>
</head>

 <body>
<script>
myvalue=2;
myvalue=5;
result=myvalue+myvalue;
document.write(result);
</script>
</body>
</html>

 The output of above code will be 10.		 <html>
<head>

 <title>My JavaScript-page<title>
</head>

 <body>
<script>
myvalue=2;
MyValue=5;
result=myvalue+MyValue;
document.write(result);
</script>
</body>
</html>

The output of above code will be 7.
Pop Up -Boxes:

           

Alert Box: 
  • The syntax for an alertbox is: alert("yourtext");
  • Examples could be warnings of any kind.
  • Typical examples, technical matters like "This site requires Shockwave Flash-plugin".
Confirm Box:
  • The syntax for a confirmbox is:   confirm("yourtext");
  • Examples could be age-verification like "Confirm that you are at least 21 years old" or technical matters like "Do you have a plugin for Shockwave Flash?"

    - If the user click "OK", the box returns the value true.

    - If the user click "Cancel", the box returns the value false.
Syntax:

if (confirm("Do you agree")) {alert("You agree")} else{alert ("You do not agree")};

Promt Box:
  • The prompt box syntax is: prompt("yourtext","defaultvalue");
  • Examples could be entering users name to be stored in a cookie or entering a password or code of some kind.

    - If the user clicks "OK" the promptbox returns the entry. 
    - If the user clicks "Cancel" the promptbox returns null.
Syntax:
username=prompt("Please enter your name","Enter your name here");

Understanding Variables:
  • A variable is simply a place in the computers memory to store information.
  • All variables are referred to by the unique name you assigned to them.
consider this example:


  • Notice that when you want text to be stored in a variable you need to put the text in " ".
  • The reason is that java script uses " " to differ text from variables.
Assigning Values to Variables:
  • The most common way to assign a value to a variable is using the equal-sign.
Examples:
Example Resulting Value
a=2;
a=2; a++;
a=2; a--;
a=2; b=a++;
a=2; b=3; c=a+b;
a=2; d=a+6;
FirstName="Henrik";
LastName="Petersen";
FullName="FirstName+" "+LastName";
a=2*7;
b=20/5;
c=(20/5)*2;
d=20/(5*2);		a=2
a=3 (2+1)
a=1 (2-1)
b=3 (2+1)
c=5 (2+3)
d=8 (2+6)
FirstName=Henrik
LastName=Petersen
FullName=Henrik Petersen
a=14 (2*7)
b=4 (20/5)
c=8 (4*2)
d=2 (20/10)
The table includes the so called "Arithmetic Operators" a++ and a--.

OperatorExplanationExample
++Increment
a=5;
a++;
a would now be 6
--Decrement
a=5;
a--;
a would now be 4
%Returns modulus, which is what is
left when two numbers are divided.
a=8 % 3;
a would now be 2, since 8 can be divided by 3 two times leaving a rest of 2.

 Comparing Variables:
  • There are several different ways to compare variables. The most simple is comparing for equality, which is done using a double equal-sign:
Syntax:
if (a==b) {alert("a equals b")};
if (lastname=="Petersen") {alert("Nice name!!!")};
OperatorExplanationExample
==equal to
4==5  (false)
5==5 (true)
5==4 (false)
!=not equal to
4!=5   (true)
5!=5   (false)
5!=4   (true) 
<lesser than
4<5    (true)
5<5    (false)
5<4    (false)
>greater than
4>5    (false)
5>5    (false)
5>4    (true)
<=lesser than or equal to
4<=5  (true)
5<=5  (true)
5<=4 (false)
>=greater than or equal to
4>=5  (false)
5>=5 (true)
5>=4 (true)

If & Else:
  • Java Scripts requires the ability to make distinctions between different possibilities.
  • Note that if is written as "if". Using capitals would cause an error.
General syntax for if-statements:
if (condition) {action1} else {action2};


An example could be:
if (browser=="MSIE") {alert("You are using MSIE")}

else {alert("You are using Netscape")};

 More complex if-statements can be made by simply entering new if-statements in the else-part:
if (condition) {action1} 
else {if (condition) {action2} else {action3};};

 An example of a more complex if-statement:
if (browser=="MSIE") {alert("You are using MSIE")}
else {if (browser=="Netscape") {alert("You are using Netscape")}

else {alert("You are using an unknown browser")};};

 And, Or & Not:

  • To further enhance your if-statements you might benefit from the so-called logical operators.
  • And is written as && and is used when you want to check if more than one condition to be true.
Example: If the basket contains egg and the basket contains bacon, we can have egg and bacon.

Syntax:
if (condition && condition) {action};

 Example:
if (hour=12 && minute=0) {alert("it's noon")}
  • Or is written as || and is used when more than a one condition should result in the check being true.
Example: If the basket contains milk or the basket contains water, we can have something to drink.

Syntax:
if (condition || condition) {action};

Example:
if (hour=11 || hour=10) {alert("it's less than 2 hours till noon")};
  • Not is written as ! and is used to invert whatever you are checking for.
Example: 
If not the basket contains egg or not the basket contains bacon, we cant have egg and bacon.

Syntax:
if (!(hour=11)) {alert("it's more than 1 hour till noon")};

Functions:
  • Instead of just adding your java script to the page and have the browser perform the tasks as soon as the script is read, you might want your java script to be performed only upon the detection of a certain even.
  • To keep the browser from performing a script as soon as it is loaded you need to write the script as a function. Java script written into functions will not be performed until you specifically asks for it. This way you gain complete control of the timing.
Below is an example of script lines written as a function:

The call of the function is in this line:
<input type="button" value="Click Here" onClick="myfunction()">
  • As you can see, we placed the button in a form and added the event onClick="myfunction()" to the properties of the button. The next section of this page gives a detailed description of the different events you could use to call functions.
The general syntax for functions is this:
function functionname(varible1, varible2,..., variableX)
{ 
// Here goes the java script lines for the function
}

The { and the } marks the start and end of the function.

Events:
  • Events are actions that can be detected by java script.
  • Usually events are used in combination with functions, so that the function does not start until the event happens.
The following are the most important events recognized by java script:
OperatorExplanationHTML-Tags
onFocus=""A formfield gets focus
Select, Text, Text area
onBlur=""A formfield looses focus
Select, Text, Text area
onChange=""The content of a form field is changed
Select, Text, Text area
onSelect=""The user marks text in a form field
Text, Text area
onMouseOverThe mouse moves over a link
A
onMouseOutThe mouse moves out of a link
A
onClick=""The mouse clicks on an object
A, Button, Checkbox, Radio, Reset, Submit
onClick=""The page is finished loading
Body, Frame set
onUnload=""The browser opens another document
Body, Frame set
onSubmit=""The user clicks the submit button of a form
Form

Events are used for two main purposes:

1) To perform a function upon detection of the event, and/or
2) To show a pop-up-box upon detection of the event.

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)