javascript day1

Post on 10-Apr-2018

222 views

Category:

Documents

6 download

Embed Size (px)

TRANSCRIPT

  • 8/8/2019 Javascript Day1

    1/97

    1

    JavaScript

  • 8/8/2019 Javascript Day1

    2/97

    2007 IBM Corporation2

    Objectives

    Introduction to JavaScriptIntroduction to JavaScript languageUsing Script tagInserting Java Script into tagsLinking Java Script from separate files

    JavaScript expression and OperatorsDefining and naming variablesData TypesExpressionOperators Arithmetic, String, Logical, Assignment, typeof

  • 8/8/2019 Javascript Day1

    3/97

    2007 IBM Corporation3

    Objectives (Contd.)

    Functions and Flow ControlFlow Control

    Ifelse For loops while loops Break and continue statements

    Using JavaScript functions Built in functions User defined functions Returning values from functions Events, Event Handlers

  • 8/8/2019 Javascript Day1

    4/97

    2007 IBM Corporation4

    Objectives (Contd.)

    Objects and ArraysProperties and MethodsBrowser Object HierarchyAddressing ObjectsCreating ObjectsObjects and VariablesExternal ObjectsSecurity ImplicationsArrays and Objects

  • 8/8/2019 Javascript Day1

    5/97

    2007 IBM Corporation5

    Objectives (Contd.)

    Document Object ModelIntroduction to DOMThe Navigator ObjectThe Window ObjectCommunicating between windowsWorking With Frames in the DOMThe Document objectThe Location & History ObjectImage ObjectLink Object

  • 8/8/2019 Javascript Day1

    6/97

    2007 IBM Corporation6

    Objectives (Contd.)

    Form Validation The Form Object ModelRecap of Form ElementsForm Tag EventsControlling SubmissionForms as NavigationList EventsButtonsText Processing

  • 8/8/2019 Javascript Day1

    7/97

    2007 IBM Corporation7

    Objectives (Contd.)

    CookiesIntroduction to HTTP CookiesFormatting CookiesPersisting CookiesCookie SecurityJavaScript & CookiesReading / Writing CookiesModifying and deleting Cookies

  • 8/8/2019 Javascript Day1

    8/97

    8

    IntroductionTo

    JavaScript

  • 8/8/2019 Javascript Day1

    9/97

    2007 IBM Corporation9

    Introduction to Java Scripts

    What is JavaScript???JavaScript is a scripting Language created by Netscape

    What is a

    Scripting

    Language???

    Scripting Language is a lightweightprogramming language.

    Scripting Languages are notneeded to be compiled.

    The language is interpreted atruntime.

  • 8/8/2019 Javascript Day1

    10/97

    2007 IBM Corporation10

    Introduction to JavaScript (Contd.)

    A JavaScript is usually directly embedded in an HTML page.External JavaScripts can be created which can be used by

    HTML pages.

    JavaScript adds interactivity to HTML pages.JavaScript's are integrated into the browsing environment.

  • 8/8/2019 Javascript Day1

    11/97

    2007 IBM Corporation11

    Introduction to JavaScript (Contd.) Javais a programming

    language which requires

    compilation and interpretation.

    Java is used to make largescale applications.

    JavaScriptis a scriptinglanguage which just requires

    interpretation. The script is

    some set of commands which

    the browser interprets.

    JavaScript is used to addinteractivity in HTML Pages.

    Is

    JavaScript

    same as

    Java???

  • 8/8/2019 Javascript Day1

    12/97

    2007 IBM Corporation12

    Types of JavaScript

    Client-Side JavaScript (CSJS) -- an extendedversion of JavaScript that enables the enhancement

    and manipulation of web pages and client browsers.

    Server-Side JavaScript (SSJS) -- an extendedversion of JavaScript that enables back-end access

    to databases, file systems, and servers.

    Core JavaScript -- the base JavaScript language.

  • 8/8/2019 Javascript Day1

    13/97

    2007 IBM Corporation13

    Core JavaScript

    Core JavaScript encompasses all of the statements,operators, objects, and functions that make up thebasic JavaScript language.

    The following objects are part of core JavaScript:arraydatemathnumberstring

  • 8/8/2019 Javascript Day1

    14/97

    2007 IBM Corporation14

    Client Side Java Scripting

    CSJS is composed of core JavaScript and manyadditional objects, such as the following:

    documentformframewindownavigator

  • 8/8/2019 Javascript Day1

    15/97

    2007 IBM Corporation15

    Server Side JavaScript

    SSJS is composed of core JavaScript and additionalobjects and functions for accessing databases and file

    systems, sending e-mail, and so on.

  • 8/8/2019 Javascript Day1

    16/97

    2007 IBM Corporation16

    Uses of JavaScript (Client Side)

    Menus for NavigationForm ValidationPopup WindowsPassword ProtectingMath FunctionsSpecial effects with document and backgroundStatus bar manipulationMessagesMouse Cursor EffectsLinks

  • 8/8/2019 Javascript Day1

    17/97

    2007 IBM Corporation17

    Client Side JavaScript

    Server Side JavaScript

    Core JavaScript

    ________________ is an extendedversion of JavaScript that enables

    the enhancement and manipulation

    of web pages and client browsers

    Test Your Understanding

  • 8/8/2019 Javascript Day1

    18/97

    2007 IBM Corporation18

    Client Side JavaScript

    Server Side JavaScript

    Core JavaScript

    ________________ is an extendedversion of JavaScript that enables

    the enhancement and manipulation

    of web pages and client browsers

    Test Your Understanding

  • 8/8/2019 Javascript Day1

    19/97

    2007 IBM Corporation19

    Syntax rules of JavaScript

    Statements may or may not contain a semicolon at theend.

    Multiple statements on one line must be separated bya semicolon.

    JavaScript is case sensitive.

  • 8/8/2019 Javascript Day1

    20/97

    2007 IBM Corporation20

    Using tag

    The HTML tag is used to enter JavaScript into a HTML. The tag can be embedded within tag. tag.

    JavaScript in the head section will be executed when called. JavaScript in the body section will be executed while the HTML

    page is loaded.

    Unlimited number of JavaScripts can be placed both in head andbody section in a HTML document.

  • 8/8/2019 Javascript Day1

    21/97

    2007 IBM Corporation21

    Using tag

    Eg:

    Example

    document.write("Hello World!")

    Is a standard command for writing output

    to a page

  • 8/8/2019 Javascript Day1

    22/97

    2007 IBM Corporation22

    How to Handle Older Browsers

    Browsers that do not support JavaScript will displaythe script as it is. Use the HTML comment tag to

    prevent this.

    Eg.

    The two forward slashes at the end of comment line

    (//) are a JavaScript comment symbol. This prevents

    the JavaScript compiler from compiling the line.

  • 8/8/2019 Javascript Day1

    23/97

    2007 IBM Corporation23

    Using an External JavaScript

    A JavaScript can be written in an external file, whichcan be used by different HTML pages.

    The external script cannot contain the tag.

    The external file needs to end with the .js extension.

  • 8/8/2019 Javascript Day1

    24/97

    2007 IBM Corporation24

    Using External JavaScript (contd.)

    document.write("This line

    has been writen in the

    External JavaScript!!!")

    External.js

    Example

    >

    This line has been written in the

    html page!!!

    JavaScript.html

  • 8/8/2019 Javascript Day1

    25/97

    2007 IBM Corporation25

    Test Your Understanding

    is embedded within

  • 8/8/2019 Javascript Day1

    26/97

    2007 IBM Corporation26

    Test Your Understanding

    is embedded within

  • 8/8/2019 Javascript Day1

    27/97

    2007 IBM Corporation27

    Summary JavaScript is a scripting Language created by Netscape. The Three types of JavaScript are:Client Side JavaScript.Server Side JavaScript.Core JavaScript.

    Client Side Java Script can be written within an HTML page or as anexternal Java Script.

    Client Side Java Script are integrated into the browsing environment. Statements in Java Script may or may not contain semicolons. JavaScript is case sensitive. The HTML tag is used to enter JavaScript into a HTML. The tag can be embedded within tag. tag.

  • 8/8/2019 Javascript Day1

    28/97

    28

    JavaScriptOperators &

    Expressions

  • 8/8/2019 Javascript Day1

    29/97

    2007 IBM Corporation29

    JavaScript Variables and expression

    JavaScript VariablesVariable:

    A variable is a symbolic name that representssome data in the memory.

    A variable value can change during the executionof the JavaScript.

    A variable can be referred by its name to see orchange its value.

    Variables names are case sensitive.Must begin with a letter or underscore.

  • 8/8/2019 Javascript Day1

    30/97

    2007 IBM Corporation30

    Rules of a Variable

    Variable DeclarationVariables can be declared using the var statement

    var =some value

    Variables can also be created without using var statement=some value

    Eg

    var firstname=SamuelOR

    firstname=Samuel

  • 8/8/2019 Javascript Day1

    31/97

    2007 IBM Corporation

    31

    Data Type in JavaScript

    JavaScript is a loosely typed language.

    Data Type of Variableneed not be specifiedduring declaration.

    Data types areautomatically convertedduring script execution.

    Loosely

    Typed??

  • 8/8/2019 Javascript Day1

    32/97

    2007 IBM Corporation

    32

    Data Type in JavaScript (contd.)

    JavaScript recognizes the following type of values:Values

    string

    numbers

    null

    boolean

    9, 3.56 true orfalse

    Samuel, Samuel J Palmisano

    A Special keyword which refers to

    nothing

  • 8/8/2019 Javascript Day1

    33/97

    2007 IBM Corporation

    33

    Data Type in JavaScript (contd.)

  • 8/8/2019 Javascript Day1

    34/97

    2007 IBM Corporation

    34

    JavaScript Operators

    Arithmetic Assignment Conditional

    StringComparison

    Logical

    Operators

    typeof

  • 8/8/2019 Javascript Day1

    35/97

    2007 IBM Corporation

    35

    JavaScript Operator (contd.)

    Arithmetic

  • 8/8/2019 Javascript Day1

    36/97

    2007 IBM Corporation

    36

    JavaScript Operator (contd.)

    Comparison

    Strict equal to

  • 8/8/2019 Javascript Day1

    37/97

    2007 IBM Corporation

    37

    JavaScript Operator (contd.)

    Assignment

  • 8/8/2019 Javascript Day1

    38/97

    2007 IBM Corporation

    38

    JavaScript Operator (contd.)

    Logical

  • 8/8/2019 Javascript Day1

    39/97

    2007 IBM Corporation

    39

    JavaScript Operator (contd.)

    String

  • 8/8/2019 Javascript Day1

    40/97

    2007 IBM Corporation

    40

    JavaScript Operator (contd.)

    Conditional

  • 8/8/2019 Javascript Day1

    41/97

    2007 IBM Corporation

    41

    JavaScript Operator (contd.)

    typeof

  • 8/8/2019 Javascript Day1

    42/97

    2007 IBM Corporation

    42

    number

    string

    null

    x=20

    x=Test

    typeof(x) evaluates to

    Test Your Understanding

  • 8/8/2019 Javascript Day1

    43/97

    2007 IBM Corporation

    43

    number

    string

    null

    x=20

    x=Test

    typeof(x) evaluates to

    Test Your Understanding

  • 8/8/2019 Javascript Day1

    44/97

    2007 IBM Corporation

    44

    Summary

    A variable value can change during the execution of theJavaScript.

    Variable names are case sensitive.Must begin with a letter or underscore.

    Data Type of Variable need not be specified during declaration. Data types are automatically converted during script execution. The values recognized by JavaScript are:stringbooleannumbernull

  • 8/8/2019 Javascript Day1

    45/97

    2007 IBM Corporation

    45

    Summary (contd.)

    The different JavaScript operators areArithmeticConditionalComparisonLogicalAssignmentTypeofString

  • 8/8/2019 Javascript Day1

    46/97

    46

    Flow Control&

    Functions

  • 8/8/2019 Javascript Day1

    47/97

    2007 IBM Corporation

    47

    Flow Control

    Conditional Statementsif statement - use this statement if you want to execute some

    code only if a specified condition is true.

    if...else statement - use this statement if you want to executesome code if the condition is true and another code if thecondition is false.

    if...else if....else statement - use this statement if you want toselect one of many blocks of code to be executed.

    switch statement - use this statement if you want to selectone of many blocks of code to be executed.

  • 8/8/2019 Javascript Day1

    48/97

    2007 IBM Corporation

    48

    Syntax of if..else.

    Syntax

    if (condition) { code to be executed if condition is true }

    Syntax

    if (condition) { code to be executed if condition is true } else

    { code to be executed if condition is not true }

  • 8/8/2019 Javascript Day1

    49/97

    2007 IBM Corporation

    49

    Syntax of if.else if.. else

    Syntax

    if (condition1) { code to be executed if condition1 is true }

    else if (condition2) { code to be executed if condition2 is true }

    else { code to be executed if condition1 and condition2 are not true }

  • 8/8/2019 Javascript Day1

    50/97

    2007 IBM Corporation

    50

    Switch statement

    You should use the switch statement if you want toselect one of many blocks of code to be executed.

    Syntax

    switch(n) { case 1: execute code block 1

    break

    case 2: execute code block 2

    break

    default: code to be executed if n is

    different from case 1 and 2}

  • 8/8/2019 Javascript Day1

    51/97

    2007 IBM Corporation

    51

    while statement

  • 8/8/2019 Javascript Day1

    52/97

    2007 IBM Corporation

    52

    For loop

  • 8/8/2019 Javascript Day1

    53/97

    2007 IBM Corporation

    53

    break and continue Statements There are two special statements that can be used inside loops: break. continue.

    BreakThe break command will break the loop and continue executing the

    code that follows after the loop (if any).

    ContinueThe continue command will break the current loop and continue with

    the next value.

  • 8/8/2019 Javascript Day1

    54/97

    2007 IBM Corporation

    54

    Example of break statement

    var i=0

    while(i

  • 8/8/2019 Javascript Day1

    55/97

    2007 IBM Corporation

    55

    Example of continue statement

    for(i=0;i

  • 8/8/2019 Javascript Day1

    56/97

    2007 IBM Corporation

    56

    Functions

    A function is a reusable piece of code that will beexecuted when called for.

    A function can be called from anywhere from withinthe page or even from other pages if the function is

    stored in an external JavaScript (.js) file.

    Functions can be embedded in the and within the tag.

  • 8/8/2019 Javascript Day1

    57/97

    2007 IBM Corporation

    57

    Predefined functions in JavaScript DialogBoxesalert( message)Displays an alert box with a

    message defined by thestring message.

    Eg.

    alert(An Error Occurred!)

  • 8/8/2019 Javascript Day1

    58/97

    2007 IBM Corporation

    58

    Predefined functions in JavaScript (contd.) confirm(message)When called, it will display the

    message and two boxes. One box

    is "OK" and the other is "Cancel". If

    OK is selected, a value of true is

    returned, otherwise a value of false

    is returned.

    Eg.

    confirm(Do you wish to Continue?)

  • 8/8/2019 Javascript Day1

    59/97

    2007 IBM Corporation

    59

    prompt(message)Displays a box with the message

    passed to the function displayed.

    The user can then enter text inthe prompt field, and choose OKor Cancel.

    If the user chooses Cancel, aNULL value is returned. If theuser chooses OK, the string valueentered in the field is returned.

    Eg:prompt(enter your Name)

    Predefined functions in JavaScript (contd.)

  • 8/8/2019 Javascript Day1

    60/97

    2007 IBM Corporation

    60

    Conversion Functionseval(string)Converts a string to an integer or a float value.

    Eg

    x=20

    y=eval(x)+10

    y contains the value 30

    Predefined functions in JavaScript (contd.)

  • 8/8/2019 Javascript Day1

    61/97

    2007 IBM Corporation

    61

    isNAN(value)If the value passed is not a number then a boolean value of

    true is returned else the boolean value of false is returned.

    Egx=Samuel

    y=isNAN(x)

    The value stored in y is true

    Predefined functions in JavaScript (contd.)

  • 8/8/2019 Javascript Day1

    62/97

    2007 IBM Corporation

    62

    parseInt(string)Converts a string to an integer returning the first integer

    encountered which is contained in the string.

    Egx=77

    y=parseInt(x)

    y stores the value 77

    Predefined functions in JavaScript (contd.)

  • 8/8/2019 Javascript Day1

    63/97

    2007 IBM Corporation

    63

    parseFloat(string)Converts a string to an float value .

    Eg

    x=77.5

    y=parseFloat(x)

    y stores the value 77.5

    Predefined functions in JavaScript (contd.)

  • 8/8/2019 Javascript Day1

    64/97

    2007 IBM Corporation

    64

    User Defined Functions

  • 8/8/2019 Javascript Day1

    65/97

    2007 IBM Corporation

    65

    User Defined Functions (contd.)

  • 8/8/2019 Javascript Day1

    66/97

    2007 IBM Corporation

    66

    User Defined Functions (contd.)

  • 8/8/2019 Javascript Day1

    67/97

    2007 IBM Corporation

    67

    Events

  • 8/8/2019 Javascript Day1

    68/97

    2007 IBM Corporation

    68

    Events (contd.)

  • 8/8/2019 Javascript Day1

    69/97

    2007 IBM Corporation

    69

    Event Handlers

  • 8/8/2019 Javascript Day1

    70/97

    2007 IBM Corporation

    70

    Common Event Handlers

  • 8/8/2019 Javascript Day1

    71/97

    2007 IBM Corporation

    71

    Common Event Handlers (contd.)

  • 8/8/2019 Javascript Day1

    72/97

    2007 IBM Corporation

    72

    onLoad and onUnloadThe onload and onUnload events are triggered when the user

    enters or leaves the page.

    The onload event is also triggered when the image is loaded.

    The showstatus() function will be called when a user enters a page

    Common Event Handlers (contd.)

  • 8/8/2019 Javascript Day1

    73/97

    2007 IBM Corporation

    73

    Common Event Handlers (contd.)onFocus, onBlur and onChangeThe onFocus, onBlur and onChange events are often used in

    combination with validation of form fields.

    The checkEmail() function will be called whenever the user changes the

    content of the field:

    ;

  • 8/8/2019 Javascript Day1

    74/97

    2007 IBM Corporation

    74

    Common Event Handlers (contd.)onSubmitThe onSubmit event is used to validate ALL form fields before

    submitting it.

    The checkForm() function will be called when the user clicks the submit

    button in the form.

  • 8/8/2019 Javascript Day1

    75/97

    2007 IBM Corporation

    75

    Common Event Handlers (contd.)onMouseOver and onMouseOutonMouseOver and onMouseOut are often used to create

    "animated" buttons.

    An alert box appears when an onMouseOver event is detected:

  • 8/8/2019 Javascript Day1

    76/97

    2007 IBM Corporation

    76

    Example of calling a function on an event

  • 8/8/2019 Javascript Day1

    77/97

    2007 IBM Corporation

    77

    Test Your Understanding

  • 8/8/2019 Javascript Day1

    78/97

    2007 IBM Corporation78

    Test Your Understanding

  • 8/8/2019 Javascript Day1

    79/97

    2007 IBM Corporation79

    Example

  • 8/8/2019 Javascript Day1

    80/97

    2007 IBM Corporation80

    Example (contd.)

  • 8/8/2019 Javascript Day1

    81/97

    2007 IBM Corporation81

    Example (contd.)

  • 8/8/2019 Javascript Day1

    82/97

    2007 IBM Corporation82

    Example (contd.)

  • 8/8/2019 Javascript Day1

    83/97

    2007 IBM Corporation83

    Example (contd.)

  • 8/8/2019 Javascript Day1

    84/97

    2007 IBM Corporation84

    Example (contd.)

  • 8/8/2019 Javascript Day1

    85/97

    2007 IBM Corporation85

    Example (contd.)

    function Addition(x,y)

    {

    var x1=document.form1.text1.value

    var y1=document.form1.text2.value

    var Ans=document.form1.text3.value

    var temp=x1+y1

    }

  • 8/8/2019 Javascript Day1

    86/97

    2007 IBM Corporation86

    function Addition (x,y) {

    var x1=parseInt(x)

    var y1=parseInt(y)

    var Ans=document.form1.text3.value

    var temp=x1+y1

    }

    Example (contd.)

  • 8/8/2019 Javascript Day1

    87/97

    2007 IBM Corporation87

    Example (contd.)

    function Addition (x,y) {

    var x1=parseInt(x)

    var y1=parseInt(y)

    var Ans=document.form1.text3.value

    var temp=x1+y1

    }

  • 8/8/2019 Javascript Day1

    88/97

    2007 IBM Corporation88

    Example (contd.)

    function Addition (x,y) {var x1=parseInt(x)

    var y1=parseInt(y)

    var Ans=document.form1.text3.value

    var temp=x1+y1

    if(Ans==temp){alert(Your Result agrees with JavaScript!)

    document.form1.text1.value=

    document.form1.text2.value=

    document.form1.text3.value=

    }

    else{

    alert(No, JavaScript evalutes this operation differently)document.form1.text3.value=

    }}

  • 8/8/2019 Javascript Day1

    89/97

    2007 IBM Corporation89

    Test Your Understanding

  • 8/8/2019 Javascript Day1

    90/97

    2007 IBM Corporation90

    Test Your Understanding

  • 8/8/2019 Javascript Day1

    91/97

    2007 IBM Corporation91

    A Complete Program

    function myfunction(txt)

    {

    alert(txt)

    }

    When you click on one of the buttons, a

    function will be called. The function willalert

    the argument that is passed to it.

  • 8/8/2019 Javascript Day1

    92/97

    2007 IBM Corporation92

    Output

  • 8/8/2019 Javascript Day1

    93/97

    2007 IBM Corporation93

    myfunction (txt) receives Good Morning!

  • 8/8/2019 Javascript Day1

    94/97

    2007 IBM Corporation94

    myfunction (txt) receives Good Evening !

  • 8/8/2019 Javascript Day1

    95/97

    2007 IBM Corporation95

    Summary (Flow Control)Flow of the JavaScript can be controlled byIfelseIfelse ifelseswitchwhilefor

  • 8/8/2019 Javascript Day1

    96/97

    2007 IBM Corporation96

    Summary (Functions) JavaScript enables you to include user-defined functions in your

    code.

    The syntax of the function statement is shown here. It is good practice to define your functions in the head of your

    program and to call them from anywhere in the body of yourprogram.

    You can execute a function's statements by calling the functionby name.

    A function is more than just a block of statements, and you canpass values to your function in the arguments.

  • 8/8/2019 Javascript Day1

    97/97

    Summary (Functions contd.)JavaScript supports a range of event types.The code you write to perform an action when the

    user triggers an event is called an event handler.