STACYTARVER
STACYTARVER
▲

WEB SCRIPTING:  JAVASCRIPT

Today, we created a DOBRIC (Dynamic On Browser Refresh Image Changer) in class. Using four found images, this script randomly adds one of the four images to the HTML document every time the user refreshes the page.

Instructions:

  • Acquire 4 unique images.
  • Put the images in the same root folder as your HTML file.
  • Create an array with 4 strings, each string being an image name (e.g., “dog.jpg”)
  • Use Math.random() to generate a random number from 0-3.
  • Access the array using the random number (e.g., imgs[randNum]) and store it in a variable.
  • Use document.write() to create an img tag using the randomly chosen image name as the src attribute.
Permalink
aipd
javascript
html
randomnumber
array
string
WEB SCRIPTING:  JAVASCRIPT Today, we created a DOBRIC (Dynamic On Browser Refresh Image Changer) in class. Using four found images, this script randomly adds one of the four images to the HTML document every time the user refreshes the page. Instructions: Acquire 4 unique images. Put the images in the same root folder as your HTML file. Create an array with 4 strings, each string being an image name (e.g., “dog.jpg”) Use Math.random() to generate a random number from 0-3. Access the array using the random number (e.g., imgs[randNum]) and store it in a variable. Use document.write() to create an img tag using the randomly chosen image name as the src attribute.

JavaScript:  Today’s In-Class Hackathon…

Mission: Write a script that determines your user’s musical preference out of three options of your choosing, and based on that preference, display different page content.

Instructions:

  • Use the prompt() function to ask the user for their preference out of 3 options.
  • Use a switch statement to determine which musical style they prefer.
  • Use document.write() to show the user style-specific content, based on their preference.
  • Using a while loop, keep asking the user, until they enter a valid response.
  • Extra: Use the toLowerCase() function to allow the user to enter their preference in any case (upper-case, lower-case, alternating-case, etc.).
Permalink
aipd
javascript
whileloop
switch
dipset
JavaScript:  Today’s In-Class Hackathon… Mission: Write a script that determines your user’s musical preference out of three options of your choosing, and based on that preference, display different page content. Instructions: Use the prompt() function to ask the user for their preference out of 3 options. Use a switch statement to determine which musical style they prefer. Use document.write() to show the user style-specific content, based on their preference. Using a while loop, keep asking the user, until they enter a valid response. Extra: Use the toLowerCase() function to allow the user to enter their preference in any case (upper-case, lower-case, alternating-case, etc.).
ZoomInfo

JavaScript Midterm time… A+ I suppose there were multiple ways to do this, but I thought it easiest to use a switch.  Work smarter, not harder…

Permalink
aipd
javascript
switch
JavaScript Midterm time… A+ I suppose there were multiple ways to do this, but I thought it easiest to use a switch.  Work smarter, not harder…
JavaScript Midterm time… A+ I suppose there were multiple ways to do this, but I thought it easiest to use a switch.  Work smarter, not harder…
ZoomInfo

JavaScript Animation! Hackathon Assignment:  



This code makes a box that moves left and right across the browser window 500 pixels.  BOOM.

Permalink
aipd
javascript
animation
JavaScript Animation! Hackathon Assignment:   This code makes a box that moves left and right across the browser window 500 pixels.  BOOM.
JavaScript Animation! Hackathon Assignment:   This code makes a box that moves left and right across the browser window 500 pixels.  BOOM.
ZoomInfo

JavaScript Events Hackathon #2:


This code creates 3 divs (called “box”).  When the user clicks on any box in the browser, the script automatically changes that box’s height and width to a random height and width, and changes its background color to a random background color.  Simple fun.

Permalink
aipd
javascript
events
onclick
randomnumber
JavaScript Events Hackathon #2: This code creates 3 divs (called “box”).  When the user clicks on any box in the browser, the script automatically changes that box’s height and width to a random height and width, and changes its background color to a random background color.  Simple fun.
JavaScript Events Hackathon #2: This code creates 3 divs (called “box”).  When the user clicks on any box in the browser, the script automatically changes that box’s height and width to a random height and width, and changes its background color to a random background color.  Simple fun.
ZoomInfo

COOKIES!

Using cookies, this page allows the user to type their username into a form, submit the form, refresh the page and be greeted with their username.

Permalink
aipd
javascript
cookies
COOKIES! Using cookies, this page allows the user to type their username into a form, submit the form, refresh the page and be greeted with their username.
COOKIES! Using cookies, this page allows the user to type their username into a form, submit the form, refresh the page and be greeted with their username.
ZoomInfo

jQuery!

Here is some sample HTML text content (all about meat).  Using jQuery, the user can highlight and un-highlight each paragraph by clicking on the text.  When the user mouses over any header, the text size of the header will increase until it reaches 50.  Also, every time the user mouses over any header, random pictures of kittens appear at random places within the browser window.

Meow.

Permalink (2 notes)
aipd
javascript
jQuery
jQuery! Here is some sample HTML text content (all about meat).  Using jQuery, the user can highlight and un-highlight each paragraph by clicking on the text.  When the user mouses over any header, the text size of the header will increase until it reaches 50.  Also, every time the user mouses over any header, random pictures of kittens appear at random places within the browser window. Meow.
jQuery! Here is some sample HTML text content (all about meat).  Using jQuery, the user can highlight and un-highlight each paragraph by clicking on the text.  When the user mouses over any header, the text size of the header will increase until it reaches 50.  Also, every time the user mouses over any header, random pictures of kittens appear at random places within the browser window. Meow.
ZoomInfo

Arrays and Loops.

Using arrays and loops, create a table that lists the brands of five shoe companies next to the (fictional) worth of each company.  Store the information (shoe company names and associated value) using arrays.  Using either type of loop, add the HTML elements for a table (<table>, <tr>, <th>, <td>, etc.) to the document.  The easiest way to store the data is in two separate arrays, where each numerical index of one array associates to the other.  You could also use a multi-dimensional array or object.

Permalink (3 notes)
aipd
javascript
array
loop
Arrays and Loops. Using arrays and loops, create a table that lists the brands of five shoe companies next to the (fictional) worth of each company.  Store the information (shoe company names and associated value) using arrays.  Using either type of loop, add the HTML elements for a table (&lt;table&gt;, &lt;tr&gt;, &lt;th&gt;, &lt;td&gt;, etc.) to the document.  The easiest way to store the data is in two separate arrays, where each numerical index of one array associates to the other.  You could also use a multi-dimensional array or object.
Arrays and Loops. Using arrays and loops, create a table that lists the brands of five shoe companies next to the (fictional) worth of each company.  Store the information (shoe company names and associated value) using arrays.  Using either type of loop, add the HTML elements for a table (&lt;table&gt;, &lt;tr&gt;, &lt;th&gt;, &lt;td&gt;, etc.) to the document.  The easiest way to store the data is in two separate arrays, where each numerical index of one array associates to the other.  You could also use a multi-dimensional array or object.