JavaScript Examples By: Luisella Mordan
advertisement
Basic Calendar
Something that would make your web page look very
nice is a basic calendar. A basic calendar shows the
currents days of the month. This uses CSS in order to
change its appearance. Everything from calendar
dimensions, colors, down to the font used to highlight
the current day.
<style type="text/css">
.main {
width:200px;
border:1px solid black;
}
.month {
background-color:black;
font:bold 12px verdana;
color:white;
}
.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}
.days {
Code for basic calendar: Step 2
insert the code below where your wish
the calendar to appear on you page
<script type="text/javascript">
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current
month (1-12)
var curyear=todaydate.getFullYear() //get current year
document.write(buildCal(curmonth ,curyear, "main",
"month", "daysofweek", "days", 1));
</script>
Create
an html document called 23.htm
Create a head and body
Place the head and body code with copy and
paste in the correct places
Check the directions to make it work and link
to give credit to the original author
Review
Basic Calendar
Code for the head section
Code for the web page (body section)
Calendar Directions/Rubric
Lightbox
is small javascript library used to
overlay images on top of the current page.
It's a snap to setup and works on all modern
browsers. Thumbnail images are small
images that members may have posted in the
gallery section of the sort of category pages
on a website.
Step 1: Insert the below code in the
HEAD section of your page:
<link rel="stylesheet" href="lightbox.css"
type="text/css" media="screen" /> <script
type="text/javascript" src="lightbox.js"></script>
HTML code. Three basic flavors are
supported:
<a href="cat.jpg" rel="lightbox" title="Caption- cute
cat!"><img src="cat_thumb.jpg" /></a>
<a href="dog.jpg" rel="lightbox" ><img
src="dog_thumb.jpg" /></a>
<a href="dan.jpg" rel="lightbox" title="My best friend
Dan">Dan</a>
•Check out the actual directions at
http://www.dynamicdrive.com/dynamicindex4/lightbox
/index.htm to make sure the LightBox actually works
•Make sure the body and head section function correctly
•Cite the original author with a link
•Make sure that the overall page aesthetics look
professional
Review
Lightbox image viewer
Lightbox imagine viewer code step 1
Lightbox image viewer code step 2
Directions/Rubric 5 points each
CSS background color
Text can have a color in the background.
<h2 style="background-color:red;">This is a
heading</h2>
Use this example to change the background for some
of the text on your page.
Using CSS to change the whole page
In the <head> section, before the <body> section,
there can be some design for the whole page.
<head>
< style type="text/css">
body {background-color:yellow;}
p {color:blue;}
< /style>
< /head>
Use the style command in the head section to set up a
nice background color for the page.
Using the Embed command
The embed command can place a file from a location
on the page.
It is different from a link because it loads the object
onto the current page rather than going to a separate
thing.
<embed src="helloworld.swf">
Gaining access to earlier project
The embed command can be used to access another
html page.
If a student submitted an html page as their project
19 assignment, it would be saved as 19.html.
<embed src=“19.html">
Try embedding a previous project onto the web
page.
Review/Rubric, 5 points each
CSS background color
Using css to change the whole page
Using the embed command
Gaining access to earlier project
Adding music to the page
The embed command can also be used to have the
web page play music.
Line link a music file to play for your page. Look
for a .mid file to play some music.
<embed src=“music.mid">
Making the page interesting
The page should contain some good information about
topics the student is interested in. It should contain
pictures on what the student is interested in. It should
have music and colors so that a person looking at the
page will be impressed.
Making the page professional
Web pages should not only look fun, they should
have a sleek aesthetic design. Having stuff all over
the place and unorganized will make a person
reading the page get confused or annoyed. There
are a LOT of other people posting web pages on
the Internet. Be sure to take care and have the
page show some intelligent design.
Using Forms to add buttons
Some times we want a person to be able to click things
on the page to see things happen. A great way to do
this is to add a nice button.
Try the following code on your page.
<button type="button">Click Me!</button>
The code won’t do anything for now.
Review/Rubric 5 points each
Adding music to the page
Making the page interesting
Making the page professional
Using forms to add buttons
Using Forms To Get Names
The following code will enable a reader to type in their
name. Add it to your page.
<form>
First name:< input type="text"
name="firstname"><br>
Last name:< input type="text" name="lastname">
< /form>
Using Forms to get checks
The following code will enable a person to check
boxes. Add a version to your page.
<form>
< input type="checkbox" name="vehicle"
value="Bike">I have a bike<br>
< input type="checkbox" name="vehicle"
value="Car">I have a car
< /form>
Form Passwords
The following will enable a user to put in a password
without the password being shown. Add it to your
page.
<form>
Password:< input type="password" name="pwd">
< /form>
More programming
To make the buttons and boxes and text entered do
stuff, we will need other programming languages.
We can use things like php or javascript to expand
on our web page power.
To make the best pages will require work and
dedication.
The best pages of tomorrow will be made of
students from today.
Review/Rubric 5 Points each
Using form to get names
Using forms to get checks
Form passwords
More programming (no need to include in project, free
5 points)
