Week#2 Day#1 Java Script Course

www.jsclass.wordpress.com

Interacting With The User.

Alert, Confirm and Prompt An alert() is a way of giving the user some information, and then they have to respond to it. It belongs to window object. Syntax: alert(" alert_text") Example: alert(“Welcome to JavaScript Course”); The look of the message box depends on the browser.

confirm() The confirm() window displays a confirmation dialog box to the viewer, who must then click OK or Cancel to proceed. A confirm box is often used if you want the user to verify or accept something. Syntax: confirm("Question") Example: confirm("The result of 2+2 is 4?");

Prompt() A Prompt() box is used if you want the user to input some information. Using this window, you can do things based on what the viewer enters into the text box at the prompt. Syntax: prompt("Message", DefaultValue) Example: prompt("What is your name?", "")

Comparisons. > < != >= <= == Operator Meaning Example      Equal      3 == 8   result FALSE !=      Not Equal      3 != 8   result TRUE >       Greater than      3 > 8   result FALSE <       Less than      3 < 8   result TRUE >= Greater than or Equal      3 >= 8   result FALSE <= Less than or Equal      3 <= 8   result TRUE

If you don’t control your mind, someone else will! CONTROL STRUCTURES If you don’t control your mind, someone else will!

CONDITIONALS

Conditionals The ability to make different things happen depending on different circumstances These Statements alter sequential execution of program statements JavaScript uses the following conditional statements: Simple if statement if … else statement Switch Case statement

The “if” Statement The general form of this statement is: If(condition) { The code to be executed if true } Condition can be any logical expression If “Condition” returns TRUE, the code in the curly braces will be executed, and if the “Condition” returns FALSE, the execution passes over to the following statements.

The "if ... else" statement The general form of "if ... else" instruction is: If(condition) { The code to be executed if TRUE } else { The code to be executed if FALSE

If…else Example

The “Switch Case” Statement The switch statement is a multi-way branch statement. This statement requires only one argument, which is then checked with number of case options.

The Syntax of switch case switch (expression) { case value1:     code executed if expression = value1     break case value2:     code executed if expression = value2     break case value3:     code executed if expression = value3     break default :     code executed if expression is other then value1, value2 or value3 }

Loops

Loops. Used to perform the same action or set of actions repeatedly until some condition is met. There are 3 kinds of loops: For Loop. While Loop. Do While Loop

The for Loop. Is used when you know how many times the script should run. For loops need a initial expression condition and update expression. Syntax:

for Loop. Other variations of for loop include: for …… in : loops through an element of array or properties of an object. for each… in: used to iterate between object properties. Let us try some code:

Break and Continue Some times a loop is used to perform a task like searching for specific string. Once the desired item is found, there is no need to continue looping. In this case, we use the break statement.

Look at this example.

Continue Statement. Some times you may want to skip execution of statement in a loop if certain condition is met. But still want to continue looping. Java script provides continue statement to handle this task.

While Loop. Some times it is impossible to determine exactly how many times a program will need to perform action. This is where while loop comes in handy. while loop continues executing statements as long as some condition is true or until that condition is false. Let us try some code…

While loop. Some errors you may encounter…

While loop.

While loop: Simple grading system.

Add some validation

Do while loop Do.. While is while’s cousin. Difference is: While loop’s content may never execute depending on the condition’s evaluation. Do… while loop contents will always execute at least one. Do.. While is called post-test. While loop is called pre-test. Syntax:

Do while example

DO NOT DO LIKE THIS.

Home work

Week#2 Day#2 Java Script Course

ARRAYS

Arrays. The Array object is used to store multiple values in a single variable name. Each stored value becomes an array element. The index is used to retrieve any element of the array. Three ways to declare an array: Using new keyword to create array object. Dense Arrays. Array Literals.

Creating an Array Object Syntax: In java Script: you do not have to define array size and data type. But it is recommended to specify array size at declaration time. Var arrayName= new array(arraySize); Example: Index: 0 --- 3

Storing Data in Array If you want to access an Array element:

Other Types Dense Arrays: you declare and initialize the array elements at the same time. Array Literal: list of expressions enclosed in brackets.

Using for loop with arrays.

Array Methods. Reverse(): reverses the order of elements in an array. Concat (): allows to combine two or more arrays in to one. Syntax: firstArray.concat(array1, array2, ….); Reverse(): reverses the order of elements in an array. Syntax: arrayName.reverse(); Sort(): sorts the elements of an array lexigraphically Syntax: arrayName.sort();

Array Methods. Slice(): returns an extracted segment of an array as a new array. Syntax: arrayName.slice(Bindex, Eindex); Push(): adds elements to the end of the array. Syntax: arrayName.push(elem1,elem2,…); Pop(): removes the last element of the array. Syntax: arrayName.pop();

FUNCTIONS

What is a Function? A function is a block of predefined programming statements whose execution is deferred until the function is “called.” In other words, a function is a predefined block of code that doesn’t execute until you “call” it. Defer = put off to a later time; postpone.

You call a function by invoking its name, along with any required or optional parameters. Function parameters, also known as arguments, are data values or data references that you pass to a function

Syntax function functionName() { code to be executed } With Parameters function functionName(var1, var2, ...) {     code to be executed }

Calling Functions Without arguments: functionName(); With arguments: functionName(arg1, arg2, ...);

Types of Functions In JavaScript, there are basically two types of functions: Predefined functions User-defined functions

Predefined functions They are further divided into 2, they are: functions predefined by the JavaScript language but not associated with any particular object. Examples: parseInt(), isNaN(). functions predefined by the JavaScript language and associated with objects that have also been predefined by the language. Examples: document.write(), and someDate.getDate().

User-defined functions They are also of two types: functions defined by a programmer, often called user-defined functions. Examples: helloWorld(), greetVisitor(), etc. functions defined by a programmer and associated with a particular object, usually a user-defined object. Example: student.setGrade().

Let Us See Some Examples

Methods for Changing Case toLowerCase() and toUpperCase() Example: var myName = “Warsame" document.write(myName.toUpperCase(), "<BR>") document.write(myName, "<BR>")

setTimeout() and setInterval() The window method setTimeout lets you call a function after a specified number of milliseconds have elapsed. In essence, it allows you to set a timer that calls a JavaScript statement or function after a certain period of time. Syntax: setTimeout("statement", numMilliseconds) OR setTimeout("functionName", numMilliseconds)

clearTimeout The creator of JavaScript anticipated that you might want to turn off a setTimeout after you started it, that is, that you might want to stop it before it executed. So he created setTimeout to return an integer representing the timeout’s unique identification. By assigning the returned ID to a variable, you can control the time-out, stopping it if necessary.

Syntax for saving a time-out’s unique ID: timerName = setTimeout("functionName", numMilliseconds) Syntax for using clearTimeout: clearTimeout("timerName")

.js .html

setInterval() The window method, setInterval differs from its cousin and predecessor setTimeout in that it repeatedly calls a statement or function every so many milliseconds. Syntax: setInterval("statement", numMilliseconds) or setInterval("functionName", numMilliseconds)

See You Next Week Insha Allah