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:
textContent
Comparison of previous approach to using textContent
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
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:
Part number
Description
Item value - calcuated as the unit price times the quantity on hand,
rounded to two decimal places
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.
Copy the contents of the <style> element into a
separate file named 'InventoryValue.css'
Delete the <style> element from inventory.html
Save your modified inventory.html under the name 'InventoryValue.html'
Add a <link> element pointing to InventoryValue.css
Create a function, valueReport(), in a <script> element, as follows:
Open a window and a document
Use document.write to put out
A <doctype> element
<html> and <head> start tags
Add a <title> element with, say, 'Inventory Value' for its content
<head> end tag
<body> start tag
Get the table with id of invTable into tnode
Get all the rows in the table into 'allRows'
Continue to use document.write to put out
A <table> element with an id of 'invTable'
A <caption> element with a value of 'Value Table'
A <tr> element containing three <th> elememts: Part number, Item description, Item value
Use a 'for' construct to run through all the rows in 'allRows':
+ document write a <tr> start tag
+ get all the cells in the current row into 'rowCells'
+ document write a <td> cell with class of pno and content of cell 0 in rowCells
+ document write a <td> cell with class of desc and content of cell 1 in rowCells
+ extract the numeric value of cell 2 into the variable unit_price (hint: Number())
+ extract the numeric value of cell 3 into the variable on_hand
+ calculate unit_value as the product of unit_price and on_hand
+ round unit_value to two decimal places (hint: toFixed())
+ document write a <td> cell with class of num and content of unit_value
+ document write a <tr> end tag
document write end tag for <table> element
document write end tag for <body> element
document write end tag for <html> element
close the document
end of function
In the body of the main code,
+ Add an <h1> element with value 'Inventory With Value Report Option'
+ Add a <button> element that invokes valueReport() when clicked
Test your code, correcting errors until it's working
Session 3
In this video, we explore a new DOM methods and some more
JavaScript elements. Topics include:
document.getElementsByTagName() method
'className' for 'class' attribute
'switch' statement for JavaScript
'break' statement for JavaScript
JavaScript and numeric values
Lesson 22: Scripting with tables
Part 3: Additional JavaScript and DOM
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:
Keep a running total of the unit_value for each item in a new variable 'total_value'
After the document write to put the <table> end tag,
add a document write to put out a <p> element that
displays the content of total_value
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):
Resize / resample each image so neither height nor width
is greater than 800 pixels, saving the processed image in
your MyWebFiles/images directory, using a simple name, and as type '.jpg'
Next, create a thumbnail version of each of these
images, save in the same directory and use the same file name
except add "_t" before ".jpg"
so, for example, you might have "peacock.jpg" with a
corresponding thumbnail named "peacock_t.jpg"
Open html_skel and save it in your MyWebFiles directory as
Photos.html. Then add the following
pieces into Photos.html:
In the <head> element, add a <style> element with
the following style rules:
td {width: 225px; border: solid blue 1px; font-weight: bold;}
tr {height: 225px;}
In the <head> element, add a <script> element with a
function called showPic that takes four arguments:
thumb - the name of the thumbnail file (that is name_t.jpg)
txt - the text that will be the header in the pop-up window
wd - the width of the image named name.jpg, in pixels
ht - the height of the image named name.jpg, in pixels
The showPic(thumb,txt,we,ht) function accomplishes these tasks:
Open a window (height of 750, width of 830)
Create a document in the window
Replace the name of the passed thumbnail file to be the same name without the trailing '_t'
hint: thumb=thumb.replace('_t.jpg', '.jpg');
Write out an <html> element
Write out a <head> element with a title of the 'txt' parameter
Create a <body> element with these components:
An <h1>' element with content of the 'txt' parameter
A blank line
An <img> element with:
src is the current value of 'thumb'
alt is the value in 'txt'
width is the value in 'wd'
height is the value in 'ht'
Note: this is tricky since you are building
a quoted string that has un-quoted parts so the variables
can be subsituted
Then write out ending tags for body and html
In the <body> of the page include these elements:
An <h1> element with content "Photo album"
A <p> element with content "Click on a picture to have a larger version displayed in a pop-up window"
A <table> start tag
A <caption> element describing the theme of this album
A series of <tr> elements, each containing four <td> elements
Each <&td> element consists of the following:
An <img> element with these attributes:
src= images/file_name_t.jpg
alt= an alternate text
title= descriptive text
onclick= code to invoke the showPhoto function: onclick="p=this.src;q=this.title;showPic(p,q,xxx,yyy);"
where 'xxx' is the width, in pixels and 'yyy' is the height, in pixels, of the
large version of the picture
Followed by a <br> element and the same text as in the 'title attribute
Email us
if you would like additional information.
We would love to see your comments and
recommendations for our site.
Our privacy
policy: we use cookies to keep track
of where you are on the site, but we do not
leave cookies on your site; we do not track
your visits; we do not disseminate any
information about you because we do not
gather any information about you.
