Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 54 views

    Introductions Carrie Puterbaugh Thrivent Financial For Lutherans Katie Ware MRM Worldwide

    Uploaded by

    satyanarayana
    This document provides an overview of JavaScript concepts and examples of JavaScript code, including using functions to handle events, working with numbers and math methods, and best practices for separating JavaScript code from HTML. It also outlines a lab assignment involving creating a menu bar with mouseover event handling, displaying alerts, and using math methods.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT or read online from Scribd

    Introductions Carrie Puterbaugh Thrivent Financial For Lutherans Katie Ware MRM Worldwide

    Uploaded by

    satyanarayana
    54 views31 pages
    This document provides an overview of JavaScript concepts and examples of JavaScript code, including using functions to handle events, working with numbers and math methods, and best practices for separating JavaScript code from HTML. It also outlines a lab assignment involving creating a menu bar with mouseover event handling, displaying alerts, and using math methods.

    Original Title

    week3_ppt

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides an overview of JavaScript concepts and examples of JavaScript code, including using functions to handle events, working with numbers and math methods, and best practices for separating JavaScript code from HTML. It also outlines a lab assignment involving creating a menu bar with mouseover event handling, displaying alerts, and using math methods.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT or read online from Scribd
    Download as ppt
    54 views31 pages

    Introductions Carrie Puterbaugh Thrivent Financial For Lutherans Katie Ware MRM Worldwide

    Uploaded by

    satyanarayana
    This document provides an overview of JavaScript concepts and examples of JavaScript code, including using functions to handle events, working with numbers and math methods, and best practices for separating JavaScript code from HTML. It also outlines a lab assignment involving creating a menu bar with mouseover event handling, displaying alerts, and using math methods.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT or read online from Scribd
    Download as ppt
    You are on page 1of 31

    Introductions

    Carrie Puterbaugh
    Thrivent Financial for Lutherans

    Katie Ware
    MRM Worldwide
    McCracken Chapter 6 – Navigation

    Edwards: Chapter 1 & 2 – Intro to


    JavaScript & the Math Object

    Lab 3
    Chapter 1 – Getting Started with
    Java Script

    What is JavaScript?
    Why use it?
    Elements of an HTML File: content,
    style, dynamic elements

    JavaScript Constructs
    - Event Handling
    - Writing Functions
    What is JavaScript?
    JavaScript is a scripting language

    -- adds dynamic behavior to web pages


    -- changes pages in real-time
    -- responds to user events
    -- created by Netscape in 1995, evolved from Netscape’s
    LiveScript
    -- works in both Netscape & Internet Explorer
    -- most commonly used as a client-side language
    -- good for small amounts of processing
    What JavaScript is NOT

    JavaScript is -

    -- NOT Java
    -- NOT typically used for server-side processing, like
    PHP (PHP Hypertext Preprocessor ) or ASP (Active
    Server Pages)
    -- NOT good for data-processing
    -- NOT as difficult to master as programming
    languages like C# or Java
    JavaScript vs. ActiveX
    They are fundamentally different. JavaScript was developed by Netscape to
    be used in client and server Web programming. (e.g. browser text scrolling,
    server side database lookup). The LiveWire product by Netscape is
    essentially JavaScript.
    Active X, by Microsoft, is a general purpose Windows technology to provide
    distributed processing (e.g. Word document requires Spreadsheet feeding
    information to it). Active X is not specific specific to the Web, but can be
    used for that purpose.
    A more direct comparison to Active X would be Sun's Java/JavaBeans
    component model.
    JavaScript vs. VBScript
    for Client-Side Programming
    Why Use JavaScript?
    “Three Legged Stool”
    -- JavaScript works with HTML & CSS
    (Cascading Style Sheets)
    -- Content is separated from Presentation &
    Behavior HTML CSS
    (Cascading Style
    Content Sheets)

    Presentation

    JavaScript

    Behavior
    Definitions & Examples
    -- HTML: hyper-text markup language for static
    web pages
    CSS (Cascading Style Sheets): a simple
    mechanism for adding style (e.g. fonts, colors,
    spacing) to Web documents.
    JavaScript – combine with CSS to modify
    Content Presentation
    Makes it easier to change Presentation
    Elements of an HTML File
    DOCTYPE:
    Each HTML document must begin with a document type declaration that declares
    which version of HTML the document adheres to. We’re using “HTML 4 Transitional”
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    NAMESPACE:
    The xmlns attribute is also not optional, according to XHTML 1.0 sec. 3.1.1 criteria 3.
    The root element of the document must designate the XHTML namespace using the
    xmlns attribute. The namespace for XHTML is defined to be
    http://www.w3.org/1999/xhtml.
    Thus a valid XHTML document must have the xmlns attribute with abovementioned
    value on the root element.
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    Elements of an HTML File
    HEADER

    <head>
    <title>JavaScript Example #1</title>
    <style type="text/css">
    body { font-family: Arial; font-size: medium; color: blue;}
    h1 { font-family: Arial; font-size: medium; color: yellow; }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    Elements of an HTML File with JavaScript

    BODY – Includes the JavaScript

    <body>
    <h1>JavaScript Writes Text</h1>
    <script type="text/javascript">
    {
    document.write ('Hello World!');
    }
    </script>
    </body>
    Example 1 -> Event Handling

    - Handle “events” on page components

    <a href="#"
    onclick="window.open('otherpage.htm');
    return false;">

    File: example1.html
    Example 2 -> Use Functions with JavaScript
    Declare JavaScript Function in the <head>
    -- not required, but GOOD PRACTICE

    <head>
    <title>JavaScript Example #1</title>
    <style type="text/css">
    body { font-family: Arial; font-size: medium; color: blue;}
    h1 { font-family: Arial; font-size: medium; color: yellow; }
    </style>

    <script type="text/javascript">
    function saySomething (message) {
    document.write (message);
    }
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    Example 2 -> Use Functions with JavaScript
    Body – Call JavaScript Function

    <body>
    <h1>JavaScript Calls Function</h1>
    <p>
    This is your second JavaScript example. An alert box should be displayed with
    a message in it.</p>

    <script type="text/javascript">
    saySomething ('Hello World!' );
    </script>

    </body>

    File: example2.html
    Example 3 -> Display an ALERT box
    …. Code in <head> ….
    <script type="text/javascript">
    function saySomething (message) {
    alert (message);
    }
    </script>

    … Code in <body> ….
    <script type="text/javascript">
    saySomething ('There is an elephant in the room' );
    </script>

    File: example3.html
    Example 4 -> Using Functions to Handle
    Events
    … Code in <head> …
    <script type="text/javascript">
    function mouseOver()
    {
    window.status='Pink';
    document.b1.src ="b_change.gif";
    return true;

    function mouseOut()
    {
    window.status='Blue';
    document.b1.src ="b_blue.gif";
    return true;
    }
    </script>
    </head>
    Example 4 -> Using Functions to Handle Events

    <body>
    <a href=“soccer" target="_blank"
    onmouseover="mouseOver(); return true;"
    onmouseout="mouseOut(); return true;">
    <img border="0" alt=“Soccer Rules!"
    src="b_blue.gif" name="b1" width="26"
    height="26" /></a>
    </body>
    </html>
    Example 4 -> Using Functions to Handle
    Events

    Files:

    example4.html
    b_blue.gif
    b_change.GIF
    Menu Example -> Handling more Complex
    “onmouseover” & “onmouseout” event
    Best Practice -> put JavaScript code in an
    external file to separate HTML from code

    <script type="text/javascript" src="javaScriptFile.js">

    javaScriptFile.js

    function saySomething (message) {


    alert (message);
    }
    Chapter 2 – Working With Numbers

    5 arithmetic operators:

    multiplication (*)
    division (/)
    addition (+)
    subtraction (-)
    modulus (%)
    Methods vs. Functions
    Methods are built-in to JavaScript
    Functions are user-defined

    JavaScript Math Methods:


    Math.ceil
    Math.floor
    Math.round
    Math.pow
    Math.sqrt
    Math.random
    Methods vs. Functions
    Methods are built-in to JavaScript
    Functions are user-defined

    JavaScript Math Methods:


    Math.ceil
    Math.floor
    Math.round
    Math.pow
    Math.sqrt
    Math.random
    Converting a Number to a String
    String() or toString()

    var myNum =25;


    myNum = String(myNum);
    alert(typeof myNum +”=“+ myNum);

    Use string concatenation


    Files: example5.html
    Converting a String to a Number

    Number ()

    var myString =’25’;


    myString = String(myString );
    alert(typeof myString+”=“+myString);

    Use string concatenation


    Files: example6.html
    Lab 3

    In this lab, you will:


    -- use css & a table to create a menu bar
    -- handle “onmouseover” events
    -- display information in an alert
    -- update the window.status
    -- create & call 2 functions
    -- work with several Math Methods

    You might also like