Monitor

Lesson 22: Scripting with tables

 Signed in as:    
      Sign out

 

Links

Your home page

Creating Websites home

Beginnings
   Introduction to the Web
   Introducing HTML
   Marking up text
   Setting Up
   FTP and FileZilla
   Links and anchors
   Getting some style

Intermediate topics
   Style sheets
   Testing and debugging
   Lists
   Images and maps
   Audio and video
   Intro to JavaScript
   The DOM and scripting
   Logic and Arrays
   Functions and document.write
   Forms and INPUT
   Other controls
   Cookies
   HTML tables
   Structuring tables
   Scripting w/ tables
   Inline frames
   Loose ends

   Support

Here we explore a DOM property that had totally escaped me, and it expands and simplifies coding for elements that have a text component. Topics include:

 

Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.

 


Lesson 22: Scripting with tables:
Part 1: A Revelation

Click here for the video transcript.

 

Session 2

In this video, we explore several DOM properties and methods that apply to table elements. Topics include:

 

 


Lesson 22: Scripting with tables
Part 2: DOM and JavaScript for tables

Click here for the video transcript

 

Hands on exercise

This exercise is primarily focused on applying 'rows', 'cells', and 'textContent' while building a table dynamically!

In this exercise, we challenge you to apply the concepts here at a deeper level. Our goal is to create a pop-up window containing a new table based on the table in inventory.html but with just three columns:

We'll draw on your knowledge of tables, of course, but also user-written functions, document.write, the JavaScript Number() function and the toFixed() method.

Once again start with inventory.html in your MyWebFiles directory and end up with InventoryValue.html.

 

Session 3

In this video, we explore a new DOM methods and some more JavaScript elements. Topics include:

 

 


Lesson 22: Scripting with tables
Part 3: Additional JavaScript and DOM

Click here for the video transcript

 

Hands on exercise

This exercise extends the previous exercise slightly.

In this exercise, we add a simple extension: calculate and display the total value of the inventory table (that is, the sum of all the item values).

Modify InventoryValue.html by changing your valueReport() function as follows:

 

Hands on exercise #2

This challenging exercise draws on multiple skills:

    * picture access and editing
    * JavaScript (function definition, document write and pop up windows)
    * HTML (table construction, img elements)
    * CSS (text font, weight, size; border, text-align, and more)

The assignment here is to create a web picture album. You will gather a set of pictures, edit them to fit (details soon), and build a table with thumbnail versions so that when the user clicks on an image in the table they are shown the full size picture in a pop-up window!

So first, gather a set of related images; if you don't have a set at hand, go to Pixabay.com and do a search on some category such as "flowers" or "birds" or any thought that interests you. Gather, say, twelve pictures. Then prepare the pictures as follows (using IrfanView or any similar product you work with):

Open html_skel and save it in your MyWebFiles directory as Photos.html. Then add the following pieces into Photos.html:

 

Supplemental materials

     A supplemental paper summarizing additional DOM methods and properties for table related elements
    A cumulative summary of the contents of the course so far: Click here for the cumulative technical summary

 

 

 Lesson navigation 

 

 

Email us if you would like additional information. We would love to see your comments and recommendations for our site.