Welcome To Javascript II

Today we're going to learn about variables, operators and functions. All the basic stuff. Read on! And take the review questions to mind from "Welcome to Javascript I".

Review Questions

  1. Which of the following is true?
    1. Javascript was derived from the Java Programming Language. False!
    2. Javascript allows us to "instruct" or control the web browser. True!
    3. To place Javascript code in the head section of the web page, we write:
      Javascript Code:
      1. <script text="javascript"></script>
      True!
    4. Javascript is case sensitive. True!
    5. Javascript is compatible with IE only. False!
    6. Pop up windows are created using Javascript. (Pop Ups, browser detection, plug in detection, form validation, preloading images, dynamic HTML or XHTML) True!
  2. Majority of the Javascript language was derived from?_______ ECMA Script.

Today when testing out the Javascript lesson below, remember that you must include <script text="javascript"></script> in the head or body section of your HTML document. All Javascript code must be placed in between the script tags.

What are Javascript Operators?

Operators are used for Javascript math. Use + for addition, - for subtraction, * for multiplication and / for division, etc. You can use operators for regular numbers but in order to see the result, you use variables that contain numbers.

Example 1:

Javascript Code:
  1. var a, b, d;
  2. a=3;
  3. b=2;
  4. d=a*b;
  5.  

Example 2:

Javascript Code:
  1. var quiz1, quiz2;
  2. var avg;
  3. quiz1=100;
  4. quiz2=90;
  5. avg=quiz1+quiz2/2;
  6. alert(avg);
  7.  

This example divides the value of quiz2 by 2 then adds the value of quiz1. That's how math worked in school, right, with the order of operations or PEMDAS (Parenthesis, Exponents, Multiplication, Division, Addition, Subtraction). But let's say you're looking for the average between these quiz scores, this equation won't get you what you need. So to get the real average, tell the browser to add the quiz variables together first, then divide by 2, simply by adding parentheses! Yay!

Javascript Code:
  1. var quiz1, quiz2;
  2. var avg;
  3. quiz1 = 100;
  4. quiz2 = 90;
  5. avg=(quiz1+quiz2)/2;
  6. alert(avg);

You get a different number don't you? Well that's the average! Let's move on.

The Javascript alert() Function

First of all, what is a function? Well, a function is stored code, a block of code, and is executed when called upon. Basic functions in Javascript are already created and coded well. All we have to do is use them. Later on, we can also create our own functions. These custom functions can contain other functions too.

So anyway, you might have noticed I used this in the last example "alert(avg);". This is called the alert() function. It creates a popup box that can be used to, well, alert a user about something before the page loads. All you have to do is, enter the text you're planning to use between some quotes or a variable containing a number or string, add it between the parentheses.

syntax

alert(message)

Example:

Javascript Code:
  1. alert("Hot in here....");

Try placing the code above into an HTML page (with your javascript tags, mentioned in the review questions!). If inserted properly, before your page loads, an alert window will pop up and say: 'Hot in here...'. This string (The stuff between the quotes) is the ARGUMENT to the function.

*Argument - data information supplied to the function at the time it is invoked (used). It can be a string, a number or variable.

The Javascript confirm() Function

This function shows a popup box where the user has a choice to confirm or cancel, depending on your message. Another box that pops up before the page can load. If the user chooses "ok", then the function will return a boolean value of "true" into your variable. If the user chooses cancel, you get the boolean value of "false" returned.

syntax

confirm(message);

Javascript Code:
  1. var answer;
  2. answer = confirm("Do you want to press ok?");
  3. alert(answer);

There! You get a nice annoying popup box in your browser, asking you questions. Let's move on.

The Javascript prompt() Function

syntax

variable = prompt(message,value);

This function requires 2 arguments. It's great if you would like to ask the user a question, and provide a space for an answer. The first argument is the message. You provide this within a string or quotes or a variable.

The second argument is the value. While the function will provide a box for user input, you can supply the value argument within a string as well... or not. A variable is required to hold the prompt() function because it will RETURN the value the user typed in, and you may want to store this value for future use.

Example:

Javascript Code:
  1. var age;
  2. age = prompt("How old are you?", "Type age here");
  3.  

The prompt function will show the two strings above in a popup box... whatever the user types in the box that's what you will get from the box to be placed in the variable 'age'. Like a vending machine, you give it something, it gives something back. Or it is supposed to hehe.

Again!
*Argument - data information supplied to the function at the time it is invoked (used).
*Return Value - data produced by function

Javascript Code:
  1. ____________________________________________________
  2. | Argument --> Function --> Returned Value |
  3. |__________________________________________________|
  4.  

Burn that into your brain. Burn it! Let's look at the function one more time.

Javascript Code:
  1. var age;
  2. age=prompt("How old are you?", "Type age here");
  3.  

The value returned will be returned as text, not as a number. It will be "30", not 30, which means it is a text string.

If you try to parseInt or parseFloat a string that contains text or contains a number but the first value is a letter, can also be said that it is NaN, which is an error. NaN = Not a Number. If you try to use the variable containing the number inside in math equations, it will come back as an error. We need to convert the text into the numeric equivalent.

Note: Some browsers now change the strings into numbers for you. But it's good to learn the below function anyway!

Javascript parseInt() & parseFloat()

These functions convert Javascript text or "strings" into numbers. parseInt() will round your string to the nearest number. If you have more than one number in the string, only the first is returned. If you have a number and a string, the number will be the one returned.

syntax

parseInt(string, radix);

Example: First, let's ask the user for three quiz scores (0-100), then get our function to show the average.

Javascript Code:
  1. prompt("Please enter quiz score for quiz #1.", "");

Using only the prompt() function will make the average come out as a text string. If the user enters 100 it will be "100", which is then unusable for further math equations. Let's add the parseInt() function.

Javascript Code:
  1. parseInt(prompt("Please enter quiz score for quiz #1.", ""));

Giving the prompt() function a message and a value, the function does its thing, and you get string, then you use parseInt() to convert it into a number. The parseInt() function contains the prompt() function, meaning the prompt() function is executed first. Because you are receiving something from this, you will need a variable:

Javascript Code:
  1. quiz1 = parseInt(prompt("Please enter quiz score for quiz #1.", ""));

It isn't necessary, but it's nice tell the browser about it by really declaring the variable. It's also nice for fellow developerz:

Javascript Code:
  1. var quiz1; // declare variable first, it's polite.
  2. quiz1 = parseInt(prompt("Please enter quiz score for quiz #1.", "")); // now get to work converting.
  3.  

Now you're going to tell me you want to put more quiz scores:

Javascript Code:
  1. var quiz1, quiz2, quiz3;
  2. quiz1 = parseInt(prompt=("Please enter quiz score for quiz #1.", ""));
  3. quiz2 = parseInt(prompt=("Please enter quiz score for quiz #2.", ""));
  4. quiz3 = parseInt(prompt=("Please enter quiz score for quiz #3.", ""));
  5.  

"Get the data, process it, show results." Now that we've got the quiz scores, we want the average. Create the variables as you need them, and also at the beginning of the script. Add an alert at the end so that you can actually see what the script came up with.

Javascript Code:
  1. var quiz1, quiz2, quiz3;
  2. var average;
  3. quiz1 = parseInt(prompt=("Please enter quiz score for quiz #1.", ""));
  4. quiz2 = parseInt(prompt=("Please enter quiz score for quiz #2.", ""));
  5. quiz3 = parseInt(prompt=("Please enter quiz score for quiz #3.", ""));
  6. average = (quiz1+quiz2+quiz3)/2;
  7. alert("Your average is "+average);
  8.  

What did you get?

parseFloat() acts the same as parseInt() except it doesn't round your numbers, it returns a floating point number or real number. With parseFloat(), you have "4.22" it will convert to 4.22. parseInt() will convert "4.22" to 4.

Functions, if named with one word, it is all lowercase. If two words, it is lowercase for the first word, then uppercase for the second:

Examples:
alert()
parseInt()
myFunction
firstSecondThird

Summary

  • = assign value or equal
  • + add
  • - subtract
  • * multiple
  • / divide
  • ++ increase
  • -- decrease
  • \ integer division (whole number)
  • % Modulus Operator (remainder)
  • alert() - It creates a popup box that can be used to, well, alert a user about something before the page loads.
  • prompt() - This function requires 2 arguments. It's great if you would like to ask the user a question, and provide a space for an answer
  • parseInt() - This function convert Javascript text or "strings" into numbers. parseInt() will round your string to the nearest number.
  • parseFloat() - This function convert Javascript text or "strings" into numbers. Returns a floating point number or real number

We'll continue with Welcome to Javascript III... when I find my notes! See ya!

Add comment


Security code
Refresh

Related Lessons

Search

Visit fbetting.co.uk Betfair Review