Scribd Logo
Upload

Welcome to Scribd!

  • Java Script

    Uploaded by

    Sabyasachi Moitra
    11 views94 pages
    A brief introduction to JavaScript

    Original Title

    JavaScript

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    A brief introduction to JavaScript

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    11 views94 pages

    Java Script

    Uploaded by

    Sabyasachi Moitra
    A brief introduction to JavaScript

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 94

    JavaScript

    Sabyasachi Moitra
    moitrasabyasachi@hotmail.com
    What is JavaScript?
    JavaScript was invented by Brendan Eich in 1995.
    Client Side Scripting Language
    It can enhance the dynamics and interactive features of your page by
    allowing you to perform calculations, check forms, write interactive
    games, add special effects, customize graphics selections, create
    security passwords and more.
    Easy-to-use programming language that can be embedded in the
    header of your web pages.
    Latest version: 1.8

    WEB TECHNOLOGY 2
    Example
    <html>
    <head>
    <title>First JavaScript</title>
    </head>
    <body>
    <h1>My First Web Page</h1>
    <script type="text/javascript">
    document.write("<p>" + Date() + "</p>");
    </script>
    </body>
    </html>

    WEB TECHNOLOGY 3
    Output

    WEB TECHNOLOGY 4
    Example (2)
    <html>
    <head>
    <title>JavaScript in &lthead&gt</title>
    <script type="text/javascript">
    function displayDate()
    {
    document.getElementById("demo").innerHTML=Date();
    }
    </script>
    </head>

    WEB TECHNOLOGY 5
    Example (2) (contd…)
    <body>
    <h1>My First Web Page</h1>
    <p id="demo" style="font-family: &quot;Berlin Sans FB&quot;font-size:
    large; font-weight: bold; font-style: italic; color: #FF00FF; background-
    color: #00FFFF">This is a paragraph.</p>
    <button type="button" onclick="displayDate()">Display Date</button>
    </body>
    </html>

    WEB TECHNOLOGY 6
    Output

    WEB TECHNOLOGY 7
    Output (contd…)

    WEB TECHNOLOGY 8
    External JavaScript
    <html>
    <head>
    <title>External JavaScript</title>
    <script type="text/javascript" src="test.js"></script>
    </head>
    <body>
    <h1>My Web Page</h1>
    <p id="demo" style="font-family: &quot;Berlin Sans FB&quot; font-size: large; font-weight: bold;
    font-style: italic; color: #FF00FF; background-color: #00FFFF">This is a paragraph.</p>
    <button type="button" onclick="displayDate()">Display Date</button>
    </body>
    </html>

    WEB TECHNOLOGY 9
    External JavaScript (contd…)
    test.js
    function displayDate()
    {
    document.getElementById("demo").innerHTML=Date();
    }

    WEB TECHNOLOGY 10
    Output

    WEB TECHNOLOGY 11
    Output (contd…)

    WEB TECHNOLOGY 12
    JavaScript Blocks

    WEB TECHNOLOGY 13
    Output

    WEB TECHNOLOGY 14
    JavaScript Comments
    Single-Line Multi-Line
    <script type="text/javascript"> <script type="text/javascript">
    // Write a heading /*
    document.write("<h1>This is a The code below will write
    heading</h1>"); one heading and two paragraphs
    // Write two paragraphs: */
    document.write("<p>This is a document.write("<h1>This is a
    paragraph.</p>"); heading</h1>");
    document.write("<p>This is document.write("<p>This is a
    another paragraph.</p>"); paragraph.</p>");
    </script> document.write("<p>This is
    another paragraph.</p>");
    </script>

    WEB TECHNOLOGY 15
    JavaScript Variables

    WEB TECHNOLOGY 16
    Output

    WEB TECHNOLOGY 17
    JavaScript Operators
    Type Operators
    Arithmetic Operators +, -, *, /, %, ++, --
    ==, === (exactly equal to), !=, >, <, >=,
    Relational Operators
    <=
    Assignment Operators =, +=, -=, *=, /=, %=
    Logical Operators &&, ||, !

    WEB TECHNOLOGY 18
    Retrieve Value from Text Box

    WEB TECHNOLOGY 19
    Output

    WEB TECHNOLOGY 20
    Output (contd…)

    WEB TECHNOLOGY 21
    Addition by JavaScript

    WEB TECHNOLOGY 22
    Output

    WEB TECHNOLOGY 23
    Output (contd…)

    WEB TECHNOLOGY 24
    JavaScript Conditional
    Statements
    Conditional Statement Example
    <script type="text/javascript">
    var d=new Date();
    var time=d.getHours();
    if (time<10)
    if statement {
    document.write("<b>Good morning</b>");
    }
    </script>
    <script type="text/javascript">
    var d = new Date();
    var time = d.getHours();
    if (time < 10)
    {
    document.write("Good morning!");
    if…else statement }
    else
    {
    document.write("Good day!");
    }
    </script>

    WEB TECHNOLOGY 25
    JavaScript Conditional
    Statements (2)
    Conditional Statement Example
    <script type="text/javascript">
    var d = new Date()
    var time = d.getHours()
    if (time<10)
    {
    document.write("<b>Good morning</b>");
    }
    else if (time>10 && time<16)
    else if statement {
    document.write("<b>Good day</b>");
    }
    else
    {
    document.write("<b>Hello World!</b>");
    }
    </script>

    WEB TECHNOLOGY 26
    JavaScript Conditional
    Statements (3)
    Conditional Statement Example
    <script type="text/javascript">
    var d=new Date();
    var theDay=d.getDay();
    switch (theDay)
    {
    case 5:
    document.write("Finally Friday");
    break;
    case 6:
    switch statement document.write("Super Saturday");
    break;
    case 0:
    document.write("Sleepy Sunday");
    break;
    default:
    document.write("I'm looking forward to this
    weekend!");
    }
    </script>

    WEB TECHNOLOGY 27
    JavaScript Popup Boxes
    JavaScript has three kind of popup boxes:
    • Alert Box:- An alert box is often used if you want to make sure information comes through to
    the user. When an alert box pops up, the user will have to click "OK" to proceed.
    alert("sometext");
    • Confirm Box:- A confirm box is often used if you want the user to verify or accept something.
    When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. If
    the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
    confirm("sometext");
    • Prompt Box:- A prompt box is often used if you want the user to input a value before
    entering a page. When a prompt box pops up, the user will have to click either "OK" or
    "Cancel" to proceed after entering an input value. If the user clicks "OK" the box returns the
    input value. If the user clicks "Cancel" the box returns null.
    prompt("sometext","defaultvalue");

    WEB TECHNOLOGY 28
    Alert Box

    WEB TECHNOLOGY 29
    Output

    WEB TECHNOLOGY 30
    Confirm Box

    WEB TECHNOLOGY 31
    Output

    WEB TECHNOLOGY 32
    Prompt Box

    WEB TECHNOLOGY 33
    Output

    WEB TECHNOLOGY 34
    JavaScript Function
    A function contains code that will be executed by an event or by a call to
    the function.
    Syntax
    function function_name(var1,var2,...,varX)
    {
    //some code
    }

    WEB TECHNOLOGY 35
    Example

    WEB TECHNOLOGY 36
    Output

    WEB TECHNOLOGY 37
    JavaScript Function (return
    statement)

    WEB TECHNOLOGY 38
    Output

    WEB TECHNOLOGY 39
    JavaScript Loops
    A loop is a sequence of statements which is specified once but which
    may be carried out several times in succession.
    • The for loop
    • The while loop
    • The do…while loop
    •The for…in loop

    WEB TECHNOLOGY 40
    The for Loop
    Syntax
    for (variable=startvalue;variable<=endvalue;variable=variable+increment)
    {
    //code to be executed
    }

    WEB TECHNOLOGY 41
    Example (1)

    WEB TECHNOLOGY 42
    Output

    WEB TECHNOLOGY 43
    Example (2)

    WEB TECHNOLOGY 44
    Output

    WEB TECHNOLOGY 45
    Example (3)

    WEB TECHNOLOGY 46
    Output

    WEB TECHNOLOGY 47
    Example (4)

    WEB TECHNOLOGY 48
    Output

    WEB TECHNOLOGY 49
    The while Loop
    Syntax
    while (variable<=endvalue)
    {
    //code to be executed
    }

    WEB TECHNOLOGY 50
    Example (1)

    WEB TECHNOLOGY 51
    Output

    WEB TECHNOLOGY 52
    Example (2)

    WEB TECHNOLOGY 53
    Output

    WEB TECHNOLOGY 54
    The do…while Loop
    Syntax
    do
    {
    //code to be executed
    } while (variable<=endvalue);

    WEB TECHNOLOGY 55
    Example

    WEB TECHNOLOGY 56
    Output

    WEB TECHNOLOGY 57
    The for…in Loop
    Syntax
    for (variable in object)
    {
    //code to be executed
    }

    WEB TECHNOLOGY 58
    Example

    WEB TECHNOLOGY 59
    Output

    WEB TECHNOLOGY 60
    break VS continue
    break continue
    Can appear in both switch and Can appear only in loop
    loop statements. statements.
    When encountered, When encountered, gets the
    terminates the block and gets control to the next iteration of
    the control out of the switch or the loop.
    loop.

    61
    Example

    WEB TECHNOLOGY 62
    Output

    WEB TECHNOLOGY 63
    JavaScript eval Function

    WEB TECHNOLOGY 64
    Output

    WEB TECHNOLOGY 65
    Get Value From Select Box

    WEB TECHNOLOGY 66
    Output

    WEB TECHNOLOGY 67
    Get Value From Select Box
    (Multiple)

    WEB TECHNOLOGY 68
    Output

    WEB TECHNOLOGY 69
    JavaScript Events
    Event Description
    onchange An HTML element has been changed
    onclick The user clicks an HTML element
    onmouseover The user moves the mouse over an
    HTML element
    onmouseout The user moves the mouse away from
    an HTML element
    onkeydown The user pushes a keyboard key
    onload The browser has finished loading the
    page

    WEB TECHNOLOGY 70
    Example

    WEB TECHNOLOGY 71
    Output

    WEB TECHNOLOGY 72
    Output (contd…)

    WEB TECHNOLOGY 73
    JavaScript String Class

    WEB TECHNOLOGY 74
    Output

    WEB TECHNOLOGY 75
    JavaScript Date Class

    WEB TECHNOLOGY 76
    Output

    WEB TECHNOLOGY 77
    Display a Clock

    WEB TECHNOLOGY 78
    Output

    WEB TECHNOLOGY 79
    JavaScript Array Class

    WEB TECHNOLOGY 80
    Output

    WEB TECHNOLOGY 81
    JavaScript Math Class

    WEB TECHNOLOGY 82
    Output

    WEB TECHNOLOGY 83
    JavaScript User Defined Class

    WEB TECHNOLOGY 84
    Output

    WEB TECHNOLOGY 85
    JavaScript Window Object

    WEB TECHNOLOGY 86
    Output

    WEB TECHNOLOGY 87
    JavaScript Password Validation

    WEB TECHNOLOGY 88
    Output

    WEB TECHNOLOGY 89
    JavaScript Mobile No.
    Validation

    WEB TECHNOLOGY 90
    Output

    WEB TECHNOLOGY 91
    JavaScript Email Id Validation

    WEB TECHNOLOGY 92
    Output

    WEB TECHNOLOGY 93
    References
    Courtesy of W3Schools – JavaScript Tutorial. URL:
    http://www.w3schools.com/js/
    Courtesy of TutorialsPoint – JavaScript Tutorial. URL:
    http://www.tutorialspoint.com/javascript/
    Ivan Bayross, Web Enabled Commercial Applications Development
    Using HTML, JavaScript, DHTML and PHP, 4th Revised Edition, BPB
    Publications, 2010

    WEB TECHNOLOGY 94

    You might also like