jQuery: Introduction ATLS 3020 - Digital Media 2 Week 8 - Day 1 - - PowerPoint PPT Presentation

▶
jquery introduction
SMART_READER_LITE
LIVE PREVIEW

jQuery: Introduction ATLS 3020 - Digital Media 2 Week 8 - Day 1 - - PowerPoint PPT Presentation

Jan 30, 2023 620 likes •777 views

jQuery: Introduction ATLS 3020 - Digital Media 2 Week 8 - Day 1 Announcements March Mayhem BTU Lab Open House Tuesday, 5-6:30 ATLAS BTU Lab (ENVD 234) Toy Stories: Invention to Creation Wed, 4:3-6 ATLS 100 Stay and Play 6-7

slide-1
SLIDE 1

jQuery: Introduction

ATLS 3020 - Digital Media 2 Week 8 - Day 1

slide-2
SLIDE 2

Announcements

March Mayhem

  • BTU Lab Open House

Tuesday, 5-6:30 ATLAS BTU Lab (ENVD 234)

  • Toy Stories: Invention to Creation

Wed, 4:3-6 ATLS 100 Stay and Play 6-7 ATLS Lobby

  • Late Night with Ahol

Wed, 10:30p-12 ATLS 100

  • BS-TAM and ATLAS Updates

Thurs, 5-6 ATLS 204

  • Accelerator & Incubator Conference Kickoff

Thurs, 6-8 ATLAS Black Box theater

  • Otaku and Cool Japan Japanese Otaku Culture and its International Impact

Fri, 4-5:30 ATLAS Black Box theater Community Gathering 5:30-7

slide-3
SLIDE 3

Announcements

No class on Wednesday BUT . . . there will still be a lesson and lab for you to

  • complete. Look at the website for the materials and check

your email. More information to come.

slide-4
SLIDE 4

What is jQuery?

  • Javascript Library
  • Makes javascript easier to write (less code and easier functions)
  • Makes common tasks in javascript easier. Example:

○ Selecting elements ○ Calling Functions ○ Handling Events

  • Widely used, very popular
  • Free
  • Many plugins and libraries available
slide-5
SLIDE 5

Accessing jQuery

jQuery is essentially another javascript file you have to include on your webpage Method #1

Include a link to the file from an

  • nline source

Pros: webpage will load faster on server Cons: must be connected to the internet

Method #2

Download the file and include it in your webpage files Pros: no internet connection required Cons: webpage might load slower

slide-6
SLIDE 6

Adding jQuery to a webpage

<head> // meta, title, css <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function() { // your javascript/jQuery code }); </script> </head> HTML

This is showing adding jQuery with an externally hosted file. You can always go to this url, download the file, save it within your web files, and link to the local javascript file.

slide-7
SLIDE 7

jQuery Selectors

<div id="banner"></div> <div class="red"></div> <a href="">Link 1</a> <a href="">Link 2</a> HTML var banner_div = document.getElementById("banner"); Javascript $("#banner") jQuery var banner_div = document.getElementsByClass("red"); Javascript $(".red") jQuery

jQuery can select one or more elements with the jQuery object:

$("selector")

“selector” helps identify the element you want to select

slide-8
SLIDE 8

Exercise (pairs)

  • 1. Download the starter code (same code from week 6-1)
  • 2. Use a selector to change the innerHTML of the first

paragraph.

slide-9
SLIDE 9

jQuery Functions

jQuery functions manipulate the selected element:

$('selector').function();

$("#banner").html("<h1>Hello class</h1>"); jQuery $("#banner").text("Hi class"); jQuery $("#banner").append("<p>There are errors </p>"); jQuery $("#banner").remove(); jQuery

Changes the HTML inside of the “banner” id Changes the text inside of the “banner” id Add HTML to the end of the HTML inside of the “banner” id Will delete the “banner” id all together

slide-10
SLIDE 10

Exercise (pairs)

  • 1. Use the same code from the last exercise
  • 2. Use a selector to change the text of the first paragraph.
  • 3. Use a selector to change the html of the second

paragraph.

slide-11
SLIDE 11

jQuery Events

jQuery functions can handle common events: $('selector').event();

$("#banner").hover(function1, function2, ...); jQuery $("#banner").hide(); jQuery $("#banner").show(); jQuery $("#banner").toggle(); jQuery

Combines mouseover and mouseout events Hides the “banner” id Shows the “banner” id Alternates between hiding and showing the “banner” id

$("#banner").click(function1, function2, ...); jQuery

Creates a click event

slide-12
SLIDE 12

Exercise (in pairs)

  • 1. Use the same code from the last exercise
  • 2. Create a function that will toggle the first paragraph of

text

  • 3. Create a selector that will get the click button
  • 4. Add a click event to that button
  • a. In that click event, call the function you created in step

#2

slide-13
SLIDE 13

jQuery Effects

jQuery provides functions for common effects: $('selector').effect();

$("#banner").fadeIn(); jQuery $("#banner").fadeOut(); jQuery $("#banner").slideUp(); jQuery $("#banner").slideDown(); jQuery

Makes a hidden element fade into view Hides an element by fading it out Makes a visible element side out of view Makes a hidden element slide into view

slide-14
SLIDE 14

Lab 10

1. Create a webpage with a button. (This can be a div, button, image, or whatever you want, it just has to be clickable by the user). Put an id on that button. 2. Access that button with a jQuery selector. 3. Add a click event to that button. Inside of the click event, call a function 4. Create a function (with the same name from step #3) that will change an element on the page (with a function, event, or effect). 5. Repeat steps 1-4 five more times. Make sure you have created new buttons and functions each time. Each function can change the same element, but you much use different functions/events/effects for each function. In the end you should have 6 buttons that, when clicked, make 6 different types of changes to your webpage.