Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Class 5: Getting Interactive

    Hochgeladen von

    Erika Tarte
    627 Ansichten16 Seiten
    Adding reaction w / pseudo-classes CSS applies CSS styles to a selector's element is in a specific state Some of these states include: hover active focus link visited applies class when the user is activating the element applies class when an element has input focus, for example: when a user clicks or tabs into a search box. Adding reaction / javascript javascript can react to events, a.k.a when something happens: interface events mouse events form events browser events unload,

    Originalbeschreibung:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    Adding reaction w / pseudo-classes CSS applies CSS styles to a selector's element is in a specific state Some of these states include: hover active focus link visited applies class when the user is activating the element applies class when an element has input focus, for example: when a user clicks or tabs into a search box. Adding reaction / javascript javascript can react to events, a.k.a when something happens: interface events mouse events form events browser events unload,

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    627 Ansichten16 Seiten

    Class 5: Getting Interactive

    Hochgeladen von

    Erika Tarte
    Adding reaction w / pseudo-classes CSS applies CSS styles to a selector's element is in a specific state Some of these states include: hover active focus link visited applies class when the user is activating the element applies class when an element has input focus, for example: when a user clicks or tabs into a search box. Adding reaction / javascript javascript can react to events, a.k.a when something happens: interface events mouse events form events browser events unload,

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 16

    Class 5

    Getting Interactive
    Web Design , GR APH -327 1- 01
    Instructor: Erika Tarte
    Rhode Island School of Design
    Wintersession 2011
    reaction
    adding reaction w/ pseudo-classes

    CSS pseudo-classes apply CSS styles to a selector’s element is in a specific state

    Some of these states include:

    hover applies class when the user is hovering over the element

    active applies class when the user is activating the element; for example, the
    time between when a user presses and releases the element

    focus applies class when an element has input focus; for example: when a user
    clicks or tabs into a search box.

    link applies class to unvisited links

    visited applies class to visited links


    adding reaction w/ pseudo-classes

    selector:pseuo-class { psued o - cl a ss attach to a selector with a colon

    property: value;

    property: value;

    property: value;

    }
    adding reaction w/ pseudo-classes

    a { selector without a psued o - cl a ss

    color: #000;

    background-color: #fff;

    a:hover { that same selector with a psued o - cl a ss

    color: #000;

    background-color: #ffff00;

    }
    adding reaction w/ javascript

    JavaScript ≠ Java

    JavaScript was created to add interactivity to HTML and CSS-based webpages

    It’s a scripting language (lightweight programming language)

    Like CSS, can be linked to from your HTML page or embedded directly in your HTML page

    Does not require a special server to run its programs


    adding reaction w/ javascript

    What can JavaScript do?

    can add dynamic text, a.k.a. variable text, to an HTML page

    can react to events

    can read and write HTML on the fly

    can detect a user’s browser type, size, screen resolution, device, etc.
    adding reaction w/ javascript

    <html>

    <body>

    <script type=”text/javascript”>

    document.write(“Hello World!”)

    </script>

    </body>

    </html>
    adding reaction w/ javascript

    Javascript can react to events, a.k.a when something happens:

    interface events unload, resize, scroll, focus/blur, etc.

    mouse events click, double click, hover, drag, etc.

    form events submit, reset, etc.

    browser events microsoft events, mozilla events, etc.


    adding reaction w/ mouse events

    onmousedown user presses the mouse button on this element

    onmouseup user releases the mouse button on this element

    onclick 1 mousedown and 1 mouseup detected on element

    ondblclick double click detected on element

    onmousemove when cursor movement is detected on element

    onmouseover user rolls the cursor on to this element

    onmouseout user rolls the cursor off of this element


    adding reaction w/ mouse events “classic rollover”

    <a href=”somewhere.html”>

    <img src=”button_off.gif”

    onmouseover=”this.src=’button_on.gif’”

    onmouseout=”this.src=’button_off.gif’” />

    </a>
    adding reaction w/ mouse events “classic rollover”

    <a href=”somewhere.html”>

    <img src=”button_off.gif”

    onmouseover=”this.src=’button_on.gif’”

    onmouseout=”this.src=’button_off.gif’” />

    </a>

    Objec t Name

    named objec t ’s at trib ute

    at tribute ’s ne w value
    adding reaction w/ javascript libraries

    JavaScript libraries make JavaScript easier to read and write

    Library of pre-written JavaScript with pre-written functions

    Allow you to write scripts using more “human language” than “computer language”
    adding reaction w/ jQuery

    jQuery is a library that emphasizes interaction between HTML, JavaScript and CSS

    Easy to lean, modify and integrate

    Known as “designer’s JavaScript”

    Open-source with dedicated designer/developer following


    how jQuery works
    demo jQuery slideDown

    Das könnte Ihnen auch gefallen