Scribd Logo
Upload

Welcome to Scribd!

  • Javascript

    Uploaded by

    Ali Hafiz
    7 views32 pages

    Original Title

    js

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    7 views32 pages

    Javascript

    Uploaded by

    Ali Hafiz

    Copyright:

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

    JavaScript

    JavaScript Introduction
    Introduction
    1
    What is Java Script ?
    • JavaScript is a client-side scripting language.
    • A scripting language is a lightweight programming
    language.
    • JavaScript is programming code that can be inserted
    into HTML pages.

    JavaScript Introduction
    • JavaScript inserted into HTML pages, can be
    executed by all modern web browsers.
    • Java Script 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. 2
    What is Java Script ?
    • JavaScript is used in Web site development to such
    things as:
     check or modify the contents of forms
     change images
     open new windows and write dynamic page content.

    JavaScript Introduction
     to make DHTML by CSS.
     This allows you to make parts of your web pages
    appear or disappear or move around on the page

    3
    Java Script Vs Java
    JavaScript Java
    Interpreted (not compiled) Compiled on server before
    by client. execution on client.
    Object-based. Code uses Object-oriented. Applets
    built-in, extensible objects,consist of object classes with
    but no classes or inheritance.
    inheritance.

    JavaScript Introduction
    Applets distinct from HTML
    Code integrated with, and
    (accessed from HTML
    embedded in, HTML.
    pages).
    Variable data types not Variable data types must be
    declared (loose typing). declared (strong typing).
    Secure. Cannot write to hard Secure. Cannot write to hard 4
    disk. disk.
    ECMA Script
    • The responsibility for the development of a
    scripting standard has been transferred to an
    international body called the European
    Computer Manufacturers Association

    JavaScript Introduction
    (ECMA).
    • The standard developed by the ECMA is
    called ECMAScript, though browsers still
    refer to it as JavaScript.
    • The latest version is ECMA-262, which is
    supported by the major browsers.
    5
    Writing a Java Script Program
    • The Web browser runs a JavaScript program
    when the Web page is first loaded, or in
    response to an event.
    • JavaScript programs can either be placed

    JavaScript Introduction
    directly into the HTML file or they can be
    saved in external files.
    • placing a program in an external file allows
    you to hide the program code from the user
    • source code placed directly in the HTML
    file can be viewed by anyone 6
    Writing a Java Script Program
    • A JavaScript program can be placed
    anywhere within the HTML file.
    • Many programmers favor placing their
    programs between <head> tags in order to

    JavaScript Introduction
    separate the programming code from the
    Web page content and layout.
    • Some programmers prefer placing programs
    within the <Body> of the Web page at the
    location where the program output is
    generated and displayed.
    7
    How to use/implement Java Script?

    • We can implement Java script in our web


    page by following three ways-
    1. Inside the head tag
    2. Within the body tag

    JavaScript Introduction
    3. In an external file (with extension .js)

    8
    Implementing Java Script
    1. Inside HEAD Tag:
    Syntax:
    <HTML>
    <HEAD>
    <SCRIPT TYPE= “TEXT/JAVASCRIPT”>

    JavaScript Introduction
    <!- -
    Java Script Code
    // - ->
    </SCRIPT>
    </HEAD>
    <BODY>

    </BODY> 9
    </HTML>
    Implementing Java Script
    2. Within BODY Tag:
    Syntax:
    <HTML>
    <HEAD>

    JavaScript Introduction
    </HEAD>
    <BODY>
    <SCRIPT TYPE= “TEXT/JAVASCRIPT”>
    <!- -
    java script code
    // - ->
    </SCRIPT>
    </BODY> 10
    </HTML>
    Implementing Java Script
    3. In an External Link:
    Syntax:
    <HTML>
    <HEAD>
    <SCRIPT SRC= “myscript.js”>

    JavaScript Introduction
    </SCRIPT>
    </HEAD>
    <BODY>
    <input TYPE=“Button” onclick=“msg()” value=“Message”>
    </BODY>
    </HTML>
    Myscript.js:
    Function msg() 11
    { alert("Hello") }
    Java Script Syntax Issue
    • JavaScript commands and names are case
    sensitive.
    • JavaScript command lines end with a
    semicolon to separate it from the next

    JavaScript Introduction
    command line in the program.
    • in some situations, the semicolon is
    optional
    • semicolons are useful to make your code
    easier to follow and interpret
    12
    Displaying some text on web Page
    • You can write on page by using following
    statement of Java script-
    document.write(“message”)
    document.writeln(“message”)

    JavaScript Introduction
    Example:
    document.write(“<h1><B>My first message</B></h1>” ) ;

    13
    JavaScript Display Possibilities
    • JavaScript does NOT have any built-in print or
    display functions.
    • JavaScript can "display" data in different ways:
    • Writing into an alert box, using window.alert().
    • Writing into the HTML output

    JavaScript Introduction
    using document.write().
    • Writing into an HTML element,
    using innerHTML.
    • Writing into the browser console,
    using console.log().
    14
    window.alert()
    <!DOCTYPE html>
    <html>
    <body>
    <h1>My First Web Page</h1>

    JavaScript Introduction
    <p>My first paragraph.</p>
    <script>
    window.alert(5 + 6);
    </script>
    </body></html>
    15
    JavaScript Introduction
    16
    document.write()
    <html>
    <body>
    <h1>My First Web Page</h1>
    <p>My first paragraph.</p>

    JavaScript Introduction
    <button type="button"
    onclick="document.write(5 + 6)">
    Try it</button>
    </body>
    </html>
    17
    JavaScript Introduction
    18
    innerHTML
    <html> <body>
    <h1>My First Web Page</h1>
    <p>My First Paragraph.</p>
    <p id="demo"></p>

    JavaScript Introduction
    <script>
    document.getElementById("demo")
    .innerHTML = 5 + 6;
    </script>
    </body>
    </html> 19
    JavaScript Introduction
    20
    console.log()
    <!DOCTYPE html>
    <html><body>
    <h1>My First Web Page</h1>
    <p>My first paragraph.</p>
    <p> Activate debugging in your browser (Chrome, IE,

    JavaScript Introduction
    Firefox) with F12, and select "Console" in the debugger
    menu. </p>
    <script> console.log(5 + 6);
    </script>
    </body>
    </html> 21
    JavaScript Introduction
    22
    Working with Variables & Data
    • A variable is a named element in a program
    that stores information.
    var var_name;
    • The following restrictions apply to variable

    JavaScript Introduction
    names:
    • the first character must be either a letter or an
    underscore character ( _ )
    • the remaining characters can be letters, numbers,
    or underscore characters
    • variable names cannot contain spaces
    • Variable names are case-sensitive. 23
    Types of Variables
    • JavaScript supports four different types
    of variables
    •Numeric variables can be a number, such
    as 13, 22.5, or -3.14159

    JavaScript Introduction
    •string variables is any group of characters,
    such as “Hello” or “Happy Holidays!”
    •Boolean variables are variables that accept
    one of two values, either true or false
    •null variables is a variable that has no value
    at all 24
    Declaring/Creating a Variable
    • Before you can use a variable in your
    program, you need to declare a variable
    using the var command or by assigning the
    variable a value.

    JavaScript Introduction
    • Any of the following commands is a
    legitimate way of creating a variable named
    “Month”:
    var Month;
    Month = “December”;
    var Month = “December”; 25
    Operators in JavaScript
    • Following operators are used in
    JavaScript-
    1. Arithmetic Operator

    JavaScript Introduction
    2. Comparison Operator

    26
    Operators in JavaScript
    • Following operators are used in JavaScript-
    1. Arithmetic Operator

    Operator Meaning Example

    JavaScript Introduction
    + Addition 2+4
    - Subtraction 6-2
    * Multiplication 5*3
    / Division 15 / 3
    % Modulus 43 % 10

    27
    Example
    <body> document.write("ten * ten = ")
    <script result = ten * ten
    type="text/JavaScript"> document.write(result)
    <!– document.write(linebreak)
    var two = 2 document.write("ten / two = ")
    var ten = 10 result = ten / two

    JavaScript Introduction
    var linebreak = "<br />" document.write(result)
    document.write("two plus ten //-->
    = ") </script>
    var result = two + ten </body>
    document.write(result)
    document.write(linebreak)

    28
    Output
    two plus ten = 12
    ten * ten = 100
    ten / two = 5

    JavaScript Introduction
    29
    Operators in JavaScript
    2. Comparison Operator
    Operator Meaning Example Result
    == Equal To x == y false
    === Equal value and equal
    type x===y true

    JavaScript Introduction
    != Not Equal To x != y true
    !== not equal value or not
    equal type x!== false

    < Less Than x<y true


    > Greater Than x>y false
    <= Less Than or Equal To x <= y true

    >= Greater Than or Equal To x >= y false 30


    Creating JavaScript Functions
    Declaration Syntax
    • Functions are declared using the function reserved
    word
    • The return value is not declared, nor are the types of
    the arguments

    JavaScript Introduction
    function function_name(parameters) {
    JavaScript commands
    }
    • parameters are the values sent to the function (note:
    not all functions require parameters)
    • { and } are used to mark the beginning and end of the 31
    commands in the function.
    Creating JavaScript Functions: Eg
    <HTML>
    <HEAD>
    <SCRIPT TYPE=TEXT/JAVASCRIPT>
    <!- -
    function myMessage()
    {

    JavaScript Introduction
    document.write(“<B>Hello World”);
    }
    // - ->
    </SCRIPT>
    </HEAD>
    <BODY>
    <INPUT TYPE=BUTTON onClick=myMessage() Value=Click >
    </BODY> 32
    </HTML>

    You might also like