Scribd Logo
Upload

Welcome to Scribd!

  • Javascript - 01: Mudassar Mahmood Mirza

    Uploaded by

    Syeda Shaista Naqvi
    13 views15 pages
    Javascript introduction

    Original Title

    WST_lect6JS-1

    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
    Javascript introduction

    Copyright:

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

    Javascript - 01: Mudassar Mahmood Mirza

    Uploaded by

    Syeda Shaista Naqvi
    Javascript introduction

    Copyright:

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

    JavaScript - 01

    Mudassar Mahmood Mirza


    INTRODUCTION
    ❑JavaScript (JS) is the most popular client-side
    programming language in the world
    ❑ JS can be used to change HTML content,
    attributes and styles
    ❑JS can be used to validate input data
    ❑JS is placed in the <body> and the <head> sections
    of an HTML page with <script> and </script> tags.
    ❑ You can place any number of scripts in an HTML
    document.
    JS Functions

    ❑ A JavaScript function is called against a certain


    event, like when the user clicks a button.
    EXAMPLE: JS FUNCTION AND EVENT
    WRITING THE JS CODE OUTSIDE THE HTML

    Write the JS code (i.e. myFunction in a file and save


    as myScript.js

    Call this external JS from the html body


    EXTERNAL JAVASCRIPT ADVANTAGES
    ❑ It separates HTML and code
    ❑ It makes HTML and JavaScript easier to read and
    maintain
    ❑ Cached JavaScript files can speed up page loads
    JS Variables

    ❑ In a programming language, variables are used


    to store data values.
    ❑ JS uses the var keyword to define variables.
    ❑ An equal sign is used to assign values to variables.
    ❑ All JS identifiers are case sensitive. The
    variables lastName and lastname, are two different
    variables.
    ❑ JS has dynamic Types
    Example: JS Variables
    <!DOCTYPE html>
    ❑In this example, x is <html>
    <body>
    defined as a variable.
    <h1>Assigning Values</h1>
    Then, x is assigned
    <p>In JavaScript the = operator is used to assign
    (given) the value 6: values to variables.</p>

    <p id="demo"></p>

    <script>
    var x = 5;
    var y = 6;
    document.getElementById("demo").innerHTML = x +
    y;
    </script>

    </body>
    </html>
    JS ARRAYS
    <!DOCTYPE html>
    ❑JavaScript arrays are <html>
    <body>
    written with square
    <p id="demo"></p>
    brackets.
    <script>
    ❑Array items are var cars = ["Saab","Volvo","BMW"];
    document.getElementById("demo").innerHTML = cars[0];
    separated by </script>

    commas. </body>
    </html>
    JS OBJECTS
    <!DOCTYPE html>
    ❑ JavaScript objects <html>
    <body>
    are written with <p id="demo"></p>

    curly braces. <script>


    var person = {
    ❑ Object properties firstName : "John",
    lastName : "Doe",
    are written as age : 50,
    eyeColor : "blue"
    name:value pairs, };

    separated by document.getElementById("demo").innerHTML =
    person.firstName + " is " + person.age + " years old.";
    commas. </script>

    </body>
    </html>
    JS DISPLAY POSSIBILITIES
    JS can display data in different ways:
    ❑ Writing into an alert box, using window.alert().
    ❑ Writing into the HTML output
    using document.write().
    ❑ Writing into an HTML element,
    using innerHTML.
    ❑ Writing into the browser console,
    using console.log().
    USING window.alert()
    You can use an alert box to display data:
    Example
    <!DOCTYPE html>
    <html>
    <body>
    <h1>My First Web Page</h1>
    <p>My first paragraph.</p>
    <script>
    window.alert(5 + 6);
    </script>
    </body>
    </html>
    USING document.write()
    ❑Convenient to use for testing purposes.
    ❑Using document.write() after an HTML document
    is fully loaded, will delete all existing HTML:
    Example
    <!DOCTYPE html>
    <html>
    <body>
    <h1>My First Web Page</h1>
    <p>My first paragraph.</p>
    <button onclick="document.write(5 + 6)">Try it</button>
    </body>
    </html>
    USING getElementById(id)
    ❑To access an HTML element, <!DOCTYPE html>
    <html>
    JavaScript can use <body>
    the document.getElementB
    <h1>My First Web Page</h1>
    yId(id) method. <p>My First Paragraph</p>
    ❑The id attribute defines the <p id="demo"></p>
    HTML element. The
    <script>
    innerHTML property defines document.getElementById("demo").
    the HTML content. innerHTML = 5 + 6;
    </script>

    </body>
    </html>
    USING console.log()
    ❑In your browser, you can use <!DOCTYPE html>
    <html>
    the console.log() method to <body>
    display data.
    <h1>My First Web Page</h1>
    ❑Activate the browser console <p>My first paragraph.</p>

    with F12, and select <p>


    "Console" in the menu. Activate debugging in your browser
    (Chrome, IE, Firefox) with F12, and select
    "Console" in the debugger menu.
    </p>

    <script>
    console.log(5 + 6);
    </script>

    </body>
    </html>

    You might also like