Scribd Logo
Upload

Welcome to Scribd!

  • Introduction To Javascript Instructor: Engr. Laila Nadeem: Pat Morin Comp240 5

    Uploaded by

    Azeem Haider
    16 views21 pages
    The document provides an introduction and overview of JavaScript, including its history, uses, syntax, events, classes, and how it interacts with HTML documents. It explains what JavaScript is, how to add it to HTML pages, basic syntax like comments, and shows simple examples of using JavaScript to write text to an HTML document and define functions. The document serves as a high-level introduction to JavaScript for beginners.

    Original Description:

    Original Title

    intro to javascript

    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
    The document provides an introduction and overview of JavaScript, including its history, uses, syntax, events, classes, and how it interacts with HTML documents. It explains what JavaScript is, how to add it to HTML pages, basic syntax like comments, and shows simple examples of using JavaScript to write text to an HTML document and define functions. The document serves as a high-level introduction to JavaScript for beginners.

    Copyright:

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

    Introduction To Javascript Instructor: Engr. Laila Nadeem: Pat Morin Comp240 5

    Uploaded by

    Azeem Haider
    The document provides an introduction and overview of JavaScript, including its history, uses, syntax, events, classes, and how it interacts with HTML documents. It explains what JavaScript is, how to add it to HTML pages, basic syntax like comments, and shows simple examples of using JavaScript to write text to an HTML document and define functions. The document serves as a high-level introduction to JavaScript for beginners.

    Copyright:

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

    Pat Morin

    COMP240
    Introduction
    5 to
    JavaScript
    Instructor : Engr. Laila Nadeem
    Outline

    • What is JavaScript?
    – History
    – Uses
    • Adding JavaScript to HTML

    • JavaScript syntax

    • JavaScript events

    • JavaScript classes

    • The HTML Document Object Model


    2
    What is JavaScript?

    • JavaScript is a programming language for use in


    HTML pages

    • Invented in 1995 at Netscape Corporation


    (LiveScript)

    3
    JavaScript is not Java

     Completely different types of languages that just happen


    to be similarly named
     JavaScript - programs are interpreted in the browser
     Java - programs are compiled and can be run as stand alone
    applications

    4
    What can JavaScript Do?

    • JavaScript can dynamically modify an HTML page

    • JavaScript can react to user input

    • JavaScript can validate user input

    • JavaScript can be used to create cookies

    • JavaScript user interaction does not require any


    communication with the server

    5
    Pros and Cons of JavaScript
    • Pros:
    – Allows more dynamic HTML pages, even complete web
    applications

    Cons:
    –•Requires a JavaScript-enabled browser
    – Requires a client who trusts the server enough to run the code
    the server provides

    6
    Hello World in JavaScript
    <!DOCTYPE html>
    <html>
    <head>
    <title>Hello World Example</title>
    </head>
    <body>
    <script type="text/javascript">
    <!--
    document.write("<h1>Hello, world!</h1>");
    //-->
    </script>
    </body>
    </html>

    7
    Hello World Screenshot

    8
    External Scripts

    • Scripts can also be loaded from an external file

    • This is useful if you have a complicated script or set of


    subroutines that are used in several different
    documents
    <script src="myscript.js"></script>

    9
    Using JavaScript in your HTML
    <html>
    <head>
    <title>Hello World in JavaScript</title>
    <script type="text/javascript">
    function helloWorld() {
    document.write("Hello World!");
    }
    </script>
    </head>
    <body>
    <script type="text/javascript">
    helloWorld();
    </script>
    </body>
    </html>

    10
    The <script>…</script> tag

     The code for the script is contained in the <script>…


    </script> tag

    <script type="text/javascript">
    .
    .
    .
    </script>
    11
    Displaying text
     The document.write() method writes a string of text to the
    browser

    <script type="text/javascript">
    <!--
    document.write("<h1>Hello, world!</h1>");
    //-->
    </script>

    12
    document.write()

    Ends in a semicolon

    document.write("<h1>Hello,world!</h1>");

    Enclosed in quotes -- denotes


    a "string"

    13
    Comments in JavaScript
     Two types of comments
     Single line
     Uses two forward slashes (i.e. //)
     Multiple line
     Uses /* and */

    14
    Single Line Comment Example

    <script type="text/javascript">
    <!--
    // This is my JavaScript comment
    document.write("<h1>Hello!</h1>");
    //-->
    </script>

    15
    Multiple Line Comment Example

    <script type="text/javascript">
    <!--
    /* This is a multiple line comment.
    * The star at the beginning of this line is optional.
    * So is the star at the beginning of this line.
    */
    document.write("<h1>Hello!</h1>");
    //-->
    </script>

    16
    Find the Bug!

    <script type="text/javascript">
    <!--
    /* This is my JavaScript comment
    * that spans more than 1 line.
    *
    document.write("<h1>Hello!</h1>");
    //-->
    </script>
    17
    Arrays
    JavaScript array is an object that represents a collection of
    similar type of elements.
    There are 3 ways to construct array in JavaScript
     By array literal
     By creating instance of Array directly (using new
    keyword)
     By using an Array constructor (using new keyword)
    1. Array Literal
    <script>
    var emp=["Ali","Atif","Ahmed"];
    for (i=0;i<emp.length;i++){
    document.write(emp[i] + "<br/>");
    }
    </script>
    2. Using New Keyword
    <script>
    var i;
    var emp = new Array();
    emp[0] = "Ali";
    emp[1] = "Atif";
    emp[2] = "Ahmed";
    for (i=0;i<emp.length;i++){
    document.write(emp[i] + "<br>");
    }
    </script>
    3. Array Constructor
    <script>
    var emp=new Array("Ali","Atif","Ahmed");
    for (i=0;i<emp.length;i++){
    document.write(emp[i] + "<br>");
    }
    </script>

    You might also like