Beginning Javascript

Class 3

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

  • We are here for you!
  • Every question is important
  • Help each other
  • Have fun

Document Ready

Webpages take time to load

Almost always, you don't want the JavaScript to be called until the page is loaded

Document ready is a method called when the page is loaded 

        $(document).ready(function(){
          
        });
Note: The function() inside is an "anonymous function". It has no name, but still performs like a function.

HTML events

Events occur on a webpage via user interaction

Common Events:

  • mouseenter -- mouse goes inside an element
  • mouseleave -- mouse leaves an element
  • click -- mouse clicks an element
  • Other events

Handling events


  $(selector).mouseenter(function(){
    //code when the mouse enters
  })
      

  $('.box').mouseenter(function(){
    $(this).css('background-color', 'purple')
  })
The $(this) selector in jQuery refers to the element on whom the action was called.
Here $(this) is the $('.box') that the mouse entered.

Handling event examples


      $('.box').mouseenter(function(){
        $(this).css('background-color', 'purple')
      })
            

      $('.box').mouseleave(function(){
        $(this).css('background-color', 'orange')
      })
          

      $('.box').click(function(){
        $(this).css('background-color', 'green')
      })

Combining events

If you want multiple events to happen on the same element, you should use the bind method


      $('.box').bind({
        click: function() {
          $(this).css('background-color', 'green')
        },
        mouseenter: function() {
          $(this).css('background-color', 'purple')
        },
        mouseleave: function(){
          $(this).css('background-color', 'orange')
        }
      });

Let's Develop It

  • Add a div to your html that is 100px by 200px
  • Bind events to the div in your javascript file
  • Don't forget to surround your events with document ready
  • Try to change size, color, or event the html inside the div
  • Bonus: change all the onclick events to jQuery click events

HTML forms

HTML Forms allow users to enter information


<form id ="about-me">
  <input type = "text" id = "name" placeholder = "Enter a name"/>
  <label>Do you like popcorn</label>
  Yes <input type = "radio" name = "popcorn" val = "yes"/>
  No <input type = "radio" name = "popcorn" val = "no"/>
  <label>Favorite Dinosaur</label>
  <select id = "dinosaur">
    <option value = "t-rex">Tyrannosaurus Rex</option>
    <option value = "tri">Triceratops</option>
    <option value = "stego">Stegosaurus</option>
    <option value = "other">Other</option>
  </select>
  <input type = "submit" value = "Go!" style = "padding: 7px; font-size:1em"/>
</form>

HTML forms

HTML Forms allow users to enter information



Yes No


Values from Forms

You can use JavaScript to get values from a form


    $('#name').val();
    $('select#dinosaur').val();
    $('input:radio[name=popcorn]:checked').val();
Or set values of a form 

    $('#name').val('Mitch');
    $('select#dinosaur').val('stego');
    $('input:radio[name=popcorn]:checked').val('no');

Values from Forms

jQuery has an event for form submission


      $('#about-me').submit(function(event){
            //code to execute after submission
            return false;
        });
"return false" to prevent the form trying to submit to a server.

Let's Develop It

  • Choose one (or all!) of your functions made so far
  • i.e. lifetime supply, favorite things, or my friends
  • Create a form to send dynamic data to the function when you click the button
  • Don't forget to add parameters to your existing functions!

  • This is a little harder than all the other exercises.
  • Be creative!

Questions?

?