ISTA 230

ISTA 230 - Introduction to Web Design

JavaScript

HTML

Quick Review

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

Document Object Model (DOM)

JavaScript

JavaScript

Document Object Model (DOM)

<html>
   <head>
      <title>Page Title</title>
   </head>
   <body>
      <h1>Page Heading</h1>
      <a href="somepage.html">Click me</a>
   </body>
</html>

JavaScript

JavaScript

Document Object Model (DOM)

DOM

JavaScript

JavaScript

Document Object Model (DOM)

JavaScript

JavaScript

Javascript

JavaScript

JavaScript

jQuery

JavaScript

JavaScript

jQuery

<p id="someText">
   This is some content.
   <a href="somepage.html">Click Me</a>
</p>

JavaScript

JavaScript

jQuery

<p id="someText">
   This is some content.
   <a href="somepage.html">Click Me</a>
</p>

JavaScript

JavaScript

jQuery

<p id="someText">
   This is some content.
   <a href="somepage.html">Click Me</a>
</p>
// Without jQuery
document.getElementById("someText").childNodes[1].firstChild.nodeValue;

JavaScript

JavaScript

jQuery

<p id="someText">
   This is some content.
   <a href="somepage.html">Click Me</a>
</p>
// With jQuery
$("#someText a").text();

JavaScript

JavaScript

<script>

<html>
   <head>
      <title>Page Title</title>
      <script type="text/javascript" src="URL"></script>
   </head>

JavaScript

JavaScript

<script>

<html>
   <head>
      <title>Page Title</title>
      <script type="text/javascript" src="URL"></script>
   </head>

JavaScript

JavaScript

<script>

<html>
   <head>
      <title>Page Title</title>
      <script type="text/javascript" src="jquery_URL"></script>
      <script type="text/javascript" src="js/myJavaScript.js"></script>
   </head>

JavaScript

JavaScript

Document Object Model (DOM)

DOM

JavaScript

JavaScript

Navigator Object

JavaScript

JavaScript

Document Object Model (DOM)

Window

JavaScript

JavaScript

Window Object

  • Contains properties about the window
  • JavaScript

    JavaScript

    Window Object - jQuery Event Handlers

    JavaScript

    JavaScript

    Document Object Model (DOM)

    Window

    JavaScript

    JavaScript

    Document Object

    JavaScript

    JavaScript

    Document Object - jQuery Event Handlers

    JavaScript

    JavaScript

    jQuery

    // jQuery syntax
    $(object/node or "selector").eventKeyword ( function() {
    
    });
    

    JavaScript

    JavaScript

    jQuery

    <div id="hasJS">
       JavaScript is NOT enabled.
    </div>
    
    $(document).ready ( function() {
    
    });
    

    JavaScript

    JavaScript

    jQuery - text

    <div id="hasJS">
       JavaScript is NOT enabled.
    </div>
    
    $(document).ready ( function() {
       $("#hasJS").text("JavaScript IS enabled!");
    });
    

    JavaScript

    JavaScript

    jQuery - html

    <div id="hasJS">
       JavaScript is NOT enabled.
    </div>
    
    $(document).ready ( function() {
       $("#hasJS").html("JavaScript <strong>IS</strong> enabled!");
    });
    

    JavaScript

    JavaScript

    jQuery

             JavaScript is NOT enabled.
          
             JavaScript IS enabled.
          

    JavaScript

    JavaScript

    jQuery - css

    $(document).ready ( function() {
       $("body").css("backgroundColor", "#00f");
    });
    

    JavaScript

    JavaScript

    jQuery

    
          
    
          

    JavaScript

    JavaScript

    jQuery

    <div>This page is <span id="thisBackground">loading</span>.</div>
    
    $(document).ready ( function() {
    
       $("body").css("backgroundColor", "#00f");
       $("#thisBackground").text(                                  );
    
    });
    

    JavaScript

    JavaScript

    jQuery

    <div>This page is <span id="thisBackground">loading</span>.</div>
    
    $(document).ready ( function() {
    
       $("body").css("backgroundColor", "#00f");
       $("#thisBackground").text( $("body").css("backgroundColor") );
    
    });
    

    JavaScript

    JavaScript

    jQuery

    This page is loading.
          

    JavaScript

    JavaScript

    jQuery

    This page is rgb(0,0,255).
          

    JavaScript

    JavaScript

    jQuery - hide

    $(document).ready( function() {
       $("a").hide();
    });
    

    JavaScript

    JavaScript

    jQuery - hide

    $(document).ready( function() {
       $("a").hide(); // This will hide all <a> tags.
    });
    

    JavaScript

    JavaScript

    jQuery - hide

    $(document).ready( function() {
       $("#noJavascriptWarning").hide();
    });
    

    JavaScript

    JavaScript

    jQuery - show

    $(document).ready( function() {
       $("a").show(); // This will show all <a> tags.
    });
    

    JavaScript

    JavaScript

    jQuery Event Handlers - Mouse Events

    JavaScript

    JavaScript

    jQuery - click

    $(document).ready( function() {
    
       $("a").click( function() {
    
       });
    
    });
    

    JavaScript

    JavaScript

    jQuery - click

    $(document).ready( function() {
    
       $("a").click( function() {
          $("a").hide();
       });
    
    });
    

    JavaScript

    JavaScript

    jQuery - click & hide

    $(document).ready( function() {
    
       $("a").click( function() {
          $("a").hide(); // This will hide ALL links when clicked!
       });
    
    });
    

    JavaScript

    JavaScript

    jQuery - click & hide

    $(document).ready( function() {
    
       $("a").click( function() {
          $(this).hide(); // This will hide a given link when clicked.
       });
    
    });
    

    JavaScript

    JavaScript

    jQuery - click & hide

             Disappearing Link 1
             Disappearing Link 2
             Disappearing Link 3
          

    JavaScript

    JavaScript

    jQuery - click & hide

    <a href="#" class="slower">Disappearing Link 1</a>
    <a href="#">Disappearing Link 2</a>
    <a href="#" class="slower">Disappearing Link 3</a>
    
    $(document).ready( function() {
       $("a").not(".slower").click( function() {
          $(this).hide();
       });
    
       $("a.slower").click( function() {
          $(this).hide( 2000 ); // This will hide a given link over a period 2 seconds.
       });
    });
    

    JavaScript

    JavaScript

    jQuery - click & hide

             Slowly Disappearing Link 1
             Disappearing Link 2
             Slowly Disappearing Link 3
          

    JavaScript

    JavaScript

    jQuery - click & hide

    <img id="tempImage" src="image.jpg" alt="Temporary Image" />
    <a href="#" id="hideImage">Hide Image</a>
    
    $(document).ready( function() {
    
       $("a#hideImage").click( function() {
          $('#tempImage').hide(); // Hide an image
       });
    
    });
    

    JavaScript

    JavaScript

    jQuery - click & fade

    <img id="tempImage" src="image.jpg" alt="Temporary Image" />
    <a href="#" id="hideImage">Hide Image</a>
    
    $(document).ready( function() {
    
       $("a#hideImage").click( function() {
          $('#tempImage').fadeOut(2000); // Fade the image away
       });
    
    });
    

    JavaScript

    JavaScript

    jQuery - fadeIn / fadeOut

          
    Fading Image
    Fade Image

    JavaScript

    JavaScript

    jQuery - click & slide

    <img id="tempImage" src="image.jpg" alt="Temporary Image" />
    <a href="#" id="hideImage">Hide Image</a>
    
    $(document).ready( function() {
    
       $("a#hideImage").click( function() {
          $('#tempImage').slideUp(1000); // Slide the image away
       });
    
    });
    

    JavaScript

    JavaScript

    jQuery - slideUp / slideDown

          
    Sliding Image
    Slide Image

    JavaScript

    JavaScript

    jQuery - click & toggle

    <img id="tempImage" src="image.jpg" alt="Temporary Image" />
    <a href="#" id="hideImage">Hide Image</a>
    
    $(document).ready( function() {
    
       $("a#hideImage").click( function() {
          $('#tempImage').toggle();
       });
    
    });
    

    JavaScript

    JavaScript

    jQuery - toggle

          
    Disappearing Image
    Hide/Show Image

    JavaScript

    JavaScript

    jQuery - click & toggle

    <img id="tempImage" src="image.jpg" alt="Temporary Image" />
    <a href="#" id="hideImage">Hide Image</a>
    
    $(document).ready( function() {
    
       $("a#hideImage").click( function() {
          $('#tempImage').fadeToggle();
       });
    
    });
    

    JavaScript

    JavaScript

    jQuery - fadeToggle

          
    Sliding Image
    Fade Image In/Out

    JavaScript

    JavaScript

    jQuery - click & toggle

    <img id="tempImage" src="image.jpg" alt="Temporary Image" />
    <a href="#" id="hideImage">Hide Image</a>
    
    $(document).ready( function() {
    
       $("a#hideImage").click( function() {
          $('#tempImage').slideToggle(1000);
       });
    
    });
    

    JavaScript

    JavaScript

    jQuery - slideToggle

          
    Sliding Image
    Slide Image In/Out

    JavaScript

    JavaScript

    jQuery - click & toggle

    <img id="tempImage" src="image.jpg" alt="Temporary Image" />
    <a href="#" id="hideImage">Hide Image</a>
    
    .hiddenImg
    {
       visibility: hidden;
    }
    

    JavaScript

    JavaScript

    jQuery - click & toggleClass

    $(document).ready( function() {
    
       $("a#hideImage").click( function() {
          $('#tempImage').toggleClass('hiddenImg');.
       });
    
    });
    

    JavaScript

    JavaScript

    jQuery - toggleClass

          
    Sliding Image
    Hide/Show Image

    JavaScript

    JavaScript

    jQuery Event Handlers - Keyboard Events

    JavaScript

    JavaScript

    jQuery - keydown

    $(document).ready( function() {
    
       $('input').keydown( function() {
          alert("You pressed a key!");
       });
    
    });
    

    JavaScript

    JavaScript

    jQuery - keydown

    
          

    JavaScript

    JavaScript

    jQuery Event Handlers - Form Field Events

    JavaScript

    JavaScript

    jQuery - focus

    <input type="text" name="search" class="search" value="Enter search terms" />
    
    $(document).ready( function() {
    
       $('.search').focus( function() {
          $(this).val('');
       });
    
    });
    

    JavaScript

    JavaScript

    jQuery - focus

    Search: 
    

    JavaScript

    JavaScript

    jQuery - focus

    <label for='userName'>Name:</label>
    <input type='text' name='userName' id='userName' />
    <label for='userEmail'>Email:</label>
    <input type='text' name='userEmail' id='userEmail' />
    

    JavaScript

    JavaScript

    jQuery - focus

    JavaScript

    JavaScript

    jQuery - focus

    input.active { background-color: #ff0; }
    
    $(document).ready( function() {
    
       $('input').focus( function() { $(this).toggleClass('active'); });
       $('input').blur ( function() { $(this).toggleClass('active'); });
    
    });
    

    JavaScript

    JavaScript

    jQuery - focus

    JavaScript

    JavaScript

    jQuery - focus

    input:focus { background-color: #ff0; }
    

    Just because something can be done with JavaScript doesn't mean it should be. If the same effect can be created using CSS, that is a much less resource-intensive way to go.

    JavaScript

    JavaScript

    JavaScript

    JavaScript

    JavaScript

    jQuery UI

    <script type="text/javascript" src="jQuery_URL"></script>
    <script type="text/javascript" src="jQueryUI_URL"></script>
    <link href="jQueryUI_Theme_URL" type="text/css" rel="stylesheet" />
      
    
    

    JavaScript

    JavaScript

    jQuery UI - Dialog Boxes

    $(document).ready( function() {
    
       $("body").append("<div id='dialog'></div>");
    
    
    
    
    
    });
    

    JavaScript

    JavaScript

    jQuery UI - Dialog Boxes

    $(document).ready( function() {
    
       $("body").append("<div id='dialog'></div>");
       $("#dialog").attr("title","Warning");
    
    
    
    
    });
    

    JavaScript

    JavaScript

    jQuery UI - Dialog Boxes

    $(document).ready( function() {
    
       $("body").append("<div id='dialog'></div>");
       $("#dialog").attr("title","Warning");
       $("#dialog").text("I said no clicking!");
    
    
    
    });
    

    JavaScript

    JavaScript

    jQuery UI - Dialog Boxes

    $(document).ready( function() {
    
       $("body").append("<div id='dialog'></div>");
       $("#dialog").attr("title","Warning");
       $("#dialog").text("I said no clicking!");
       $("#dialog").hide();
    
    
    });
    

    JavaScript

    JavaScript

    jQuery UI - Dialog Boxes

    $(document).ready( function() {
    
       $("body").append("<div id='dialog'></div>");
       $("#dialog").attr("title","Warning");
       $("#dialog").text("I said no clicking!");
       $("#dialog").hide();
       $("a#warning).click( function()
       {
          $("#dialog").dialog();
          $("#dialog").show();
       });
    });
    

    JavaScript

    JavaScript

    jQuery UI - Dialog Boxes

       
    

    JavaScript

    JavaScript

    jQuery UI - Accordian widgets

    <div id="accordion">
       <h1><a href="#">First header</a></h1>
       <div>First content</div>
       <h1><a href="#">Second header</a></h1>
       <div>Second content</div>
       ...
    </div>
    

    JavaScript

    JavaScript

    jQuery UI - Accordian widgets

          

    Section 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel sapien vitae nunc iaculis tempor. Sed quis euismod nibh. Pellentesque eu magna ac augue molestie adipiscing. Morbi eget ultrices arcu. In velit massa, tristique id scelerisque vel, accumsan sed quam. In eleifend, libero ut consequat imperdiet, lectus purus faucibus mauris, a lacinia metus nisl tincidunt orci. Suspendisse at est eu ipsum fermentum dignissim. In nec nulla enim, in commodo metus. Cras viverra, velit non pellentesque mattis, erat velit fermentum neque, sed cursus sem libero vitae metus. Donec sagittis turpis massa, quis ullamcorper tellus.

    Section 2

    Phasellus pretium odio at ipsum porttitor convallis. Proin quam eros, lobortis adipiscing mattis id, vestibulum a tellus. Pellentesque scelerisque lorem scelerisque diam fringilla quis tincidunt ipsum rutrum. Vestibulum neque eros, lobortis at bibendum quis, suscipit at felis. Cras eget ante nulla. Nullam dolor nunc, accumsan et iaculis laoreet, lobortis et libero. Morbi eu eros vitae tortor mollis euismod. Mauris commodo ligula at lorem imperdiet eget auctor ipsum lobortis. Aliquam erat volutpat. Nullam placerat ultricies turpis. Phasellus sed erat dolor. Nulla facilisi. Sed ut suscipit neque. Donec eget odio vel velit iaculis mollis vel at lectus.

    Section 3

    Nam nec mattis purus. Vestibulum congue, libero ut placerat consectetur, eros justo mattis nibh, eget vulputate elit lorem ut purus. Ut ultricies tempus nunc, sed venenatis nisl ultrices dignissim. Maecenas in tellus libero, sed pellentesque nulla. Duis sed justo turpis, id tincidunt sem. Proin lobortis congue velit blandit faucibus. Fusce et placerat magna.

    JavaScript

    JavaScript

    jQuery UI - Accordian widgets

    <div id="accordion">
       <h1><a href="#">First header</a></h1>
       <div>First content</div>
       <h1><a href="#">Second header</a></h1>
       <div>Second content</div>
       ...
    </div>
    
    $(document).ready( function() {
    
       $("#accordian").accordion();
    
    });
    

    JavaScript

    JavaScript

    jQuery UI - Accordian widgets

          

    Section 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel sapien vitae nunc iaculis tempor. Sed quis euismod nibh. Pellentesque eu magna ac augue molestie adipiscing. Morbi eget ultrices arcu. In velit massa, tristique id scelerisque vel, accumsan sed quam. In eleifend, libero ut consequat imperdiet, lectus purus faucibus mauris, a lacinia metus nisl tincidunt orci. Suspendisse at est eu ipsum fermentum dignissim. In nec nulla enim, in commodo metus. Cras viverra, velit non pellentesque mattis, erat velit fermentum neque, sed cursus sem libero vitae metus. Donec sagittis turpis massa, quis ullamcorper tellus.

    Section 2

    Phasellus pretium odio at ipsum porttitor convallis. Proin quam eros, lobortis adipiscing mattis id, vestibulum a tellus. Pellentesque scelerisque lorem scelerisque diam fringilla quis tincidunt ipsum rutrum. Vestibulum neque eros, lobortis at bibendum quis, suscipit at felis. Cras eget ante nulla. Nullam dolor nunc, accumsan et iaculis laoreet, lobortis et libero. Morbi eu eros vitae tortor mollis euismod. Mauris commodo ligula at lorem imperdiet eget auctor ipsum lobortis. Aliquam erat volutpat. Nullam placerat ultricies turpis. Phasellus sed erat dolor. Nulla facilisi. Sed ut suscipit neque. Donec eget odio vel velit iaculis mollis vel at lectus.

    Section 3

    Nam nec mattis purus. Vestibulum congue, libero ut placerat consectetur, eros justo mattis nibh, eget vulputate elit lorem ut purus. Ut ultricies tempus nunc, sed venenatis nisl ultrices dignissim. Maecenas in tellus libero, sed pellentesque nulla. Duis sed justo turpis, id tincidunt sem. Proin lobortis congue velit blandit faucibus. Fusce et placerat magna.

    HTML 5

    HTML 5

    HTML 5 Forms - Date Inputs

    Date <input type="date" name="startDate" />
    

    HTML 5

    HTML 5

    HTML 5 Forms - Date Inputs

    Date <input type="date" name="startDate" />
    
    Chrome: Yes
    Firefox: No
    Opera: Yes
    Safari: Yes
    IE: No

    JavaScript

    JavaScript

    jQuery UI - Date Picker

    Date <input type="date" name="startDate" />
    
    $(document).ready( function() {
    
       $("input[type='date']").datepicker();
    
    });
    

    JavaScript

    JavaScript

    jQuery UI - Date Picker

          
    Date:

    JavaScript

    JavaScript

    jQuery UI - Sortable

    <ul id="sortable">
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
       <li>Item 4</li>
       <li>Item 5</li>
    </ul>
    
    $(document).ready( function() {
    
       $("#sortable").sortable();
    
    });
    

    JavaScript

    JavaScript

    jQuery UI - Sortable

    
    

    JavaScript

    JavaScript

    jQuery UI - Effects

    $(document).ready( function() {
    
       $("img").click( function() {
          $(this).effect('explode'); // Highly volatile images!
        });
    
    });
    

    JavaScript

    JavaScript

    jQuery UI - Effects - Explode

          
    Exploding Image

    JavaScript

    JavaScript

    jQuery UI - Effects - Shake

          
    Exploding Image

    JavaScript

    JavaScript

    jQuery UI - Effects - Size

          
    Exploding Image

    JavaScript

    JavaScript

    jQuery UI - Effects - Fold

          
    Exploding Image

    JavaScript

    JavaScript

    jQuery - Plugins

    JavaScript

    JavaScript

    JavaScript