JavaScript - My Course Web Page!
advertisement
As you complete the assignment, go in order as the earlier
bulleted parts provide an easier opportunity for points than the
later.
This project is your final. You may not assist peers or gain
assistance from peers.
Each part of the project must be both functional AND
aesthetically pleasing.
Students should complete the rubric and use any remaining time
to add to the overall function and/or aesthetics of the page.
Some students will score over 100 this way and have the bonus
go towards other projects. However, DO THE RUBRIC FIRST
Describe each unit for the second half of this course (5 units not
including this one) with a paragraph describing what you have
learned with at least 6 sentences in appropriate format. (30
points)
Decorate each of the 5 paragraphs with one or more pictures to
improve the writing by showing something that relates. (15
points)
Rubric Part 2
Incorporate some part of the work into the scrolling paragraph
(15 points)
Add links to each of the 12 projects complete for this course
(note, you may have already created earlier projects and may
use that code here). (10 points)
Write a paragraph on the bottom of the page describing what
part of the class you liked most and why. (5 points)
Create some buttons that change the background color with the
mouseover command. (5 points)
Incorporate the moving picture script so that it moves a picture
that helps define one of your projects and is able to move to the
right (10 points)
Expand the moving picture program to be able to move in 4
directions, up, down, left and right at an aesthetically pleasing
rate. (10 points)
Do What You Want To Do With Java
If you want to do something with Javascript,
chances are something similar has been done
already. Go to a search engine and see what is
available. If you want to make a paragraph that
scrolls through a box, look it up as “javascript
scrolling paragraph”. That way the language is
identified and you don’t have to start from the
beginning.
<html> <head> <script language="JavaScript">
var pos=100;
function Scroll() {
if (!document.getElementById) return;
obj=document.getElementById("thetext");
pos -=1;
if (pos < 0-obj.offsetHeight+130) return;
obj.style.top=pos;
window.setTimeout("Scroll();",30);}
</script>
</head>
<body onLoad="Scroll();">
<div id="thewindow" style="position:relative;width:180;height:150;
overflow:hidden; border-width:2px; border-style:solid; border-color:red">
<div id="thetext" style="position:absolute;width:170;left:5;top:100" >
<p>This is the first paragraph of the scrolling message. The message
is created with ordinary HTML. Entries within the scrolling area can use any HTML tags. </p>
<p><b>[<a href="javascript:pos=100;Scroll();">Start Over</a>]</b></p>
</div></div></body></html>
Review
Rubric Part 1
Rubric Part 2
Do What You Want To Do With Java
Scrolling Paragraph
User Navigated Animation
A lot of great games and web pages enable a user to press
buttons to move things around. Most games are a set of
complex interactions between pictures. If a programmer
is able to create pictures that the end user can move in a
pleasing way, the game will be popular. Although the
final product will be complex, new programmers can
learn by breaking each step down into smaller parts.
In
today’s program there are two functions
starting with the init() function. This stands
for initialization. It enables the program to
start by setting up variables. First, it
establishes a name for the picture that can be
referred to. Then, it establishes a position
that can be changed. It starts with a position
of 0 using an X and Y coordinate system.
If using them both, be sure to call the start of
both programs:
<body onLoad="Scroll();init();">
Be sure to delete window.onload =init;
function moveRight()
After the program sets up initial variables, the
moveRight() function will take over to move the image to
the right. To make the picture move right, it increases
the X value by 10 pixels. To make the picture move
“faster” a student could make the number 10 into a larger
value. To make an image move left, add a negative
number. To move the image up and down, change the
text that says ‘px’ to ‘py’ and the Y position will move.
<html><head>
<script type="text/javascript">
var imgObj = null;
function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight(){ imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';}
window.onload =init;
</script></head>
<body><form>
<img id="myImage" src=“picture.jpg" />
<p>Click button below to move the image to right</p>
<input type="button" value="Click Me" onclick="moveRight();" />
</form>
</body>
</html>
Review
User Navigated Animation
Function init()
Function moveright()
Code Example
Coding Style
There are some things that work when writing JavaScript
that are not a good idea. For example, we can place all
JavaScript functions in the head section of the code. If
we started and stopped the script in several locations, it
would be much harder to modify and understand later
on. When we create an HTML document, we make one
head and one body. The browser could read multiple
body’s and heads, but the programmer would get
confused when making changes.
onMouseOver
In the past we have used buttons that utilized the onClick
function. The programmer can also do work when a user
has the mouse just pass over an area. Use the
onMouseOver in place of the onClick code. If set up
correctly, a web page can shuffle through changes at a
much faster rate because a user can move the mouse past
several objects in the time it takes to click.
Buttons
In the last unit we used buttons. The code on the
next slide shows how to use the onMouseOver
command for a link. Use the following example and
the example code on the next page to create as many
buttons as you can that will change the background
color onMouseOver.
<input type="button" id="hello" value="My favorite
color is red" onClick="alert('Sorry, this is the wrong
choice.');">
CHANGE BACKGROUND WITH MOUSEOVER
<script language="JavaScript">
function changeBGC(color){
document.bgColor = color;
}
</script>
<form>
<a href="#"
onMouseOver="javascript:changeBGC('#000099')">Mouseov
er Blue</a>
</form>
Coding
Style
onMouseOver
Buttons
Change Background With Mouse Over
In
our web pages we have made use of
functions in the <script> section of the HTML
document. The functions we have created
are in a language called JavaScript.
JavaScript is based on a very popular called
C. As we learn and grow with JavaScript, we
can keep our collection of functions to add
to any other web pages that we create in the
future. By using functions, anyone can make
a web page into a masterpiece!
Making Functions Work for Us
Functions don’t do anything when they sit there. At
their basic definition, a function is a set of directions.
We have to tell the computer when to follow the
directions. For example, our moveRight() function
was set up to only work when a person pressed a
button on the web page that was initially marked
“click me!” Learning to navigate the script with the
precise function definition and the HTML to decide
when and where to call the function enable a
programmer to create excellent web pages.
Picture Moving Left
In an earlier direction (slide 9) we received code that
helped make a picture that would move right. Below you
will find a function and a button code that, if correctly
placed, will enable the picture to move left as well.
function moveLeft(){ imgObj.style.left =
parseInt(imgObj.style.left) - 10 + 'px';}
<input type="button" value="Click Me"
onclick="moveLeft();" />
Picture Moving Up and Down
The move left and right functions referred to the left
property of the picture. To change how far up and down
a picture is on the screen we will focus on the top
property. To help get started, place the following
declaration in your init() function where the declarations
for the left are.
imgObj.style.top = '0px';
Extrapolate the examples of the left and right functions
to make your up and down functions.
Extrapolate the examples of the buttons to create up and
down buttons.
Be sure to set up the buttons in the correct order so the
end user won’t get confused.
What
is a function
Making Functions Work For Us
Picture Moving Left
Picture Moving Up and Down
Computer Programmer
A programmer, computer programmer, developer,
coder, or software engineer is a person who writes
computer software. The term computer programmer
can refer to a specialist in one area of computer
programming or to a generalist who writes code for
many kinds of software. One who practices or
professes a formal approach to programming may also
be known as a programmer analyst. A programmer's
primary computer language (C, C++, C#, Java, Lisp,
Python etc.)
Web Developer
A web developer is sometimes referred to as a “web
programmer. It is an important and up-in-coming
segment of the job market. As technology
progresses, integration of computers across multiple
platforms and great distances will enable a specialist
to create amazing new technology. Let us make
certain to never use our new found powers for eevil.
The
main college majors for this kind of work
is computer science. However, any career
will benefit from a background of advanced
communication systems so nearly all majors
have available electives with programming in
HTML and/or Java. Even if you are not a
programmer, chances are there will be one
with your company and you will want to
know what is going on.
Careers
The department of labor predicts massive needs for
computer savvy students in the future. No one knows
exactly what demands will bring. Having a
competitive edge will set students in a desirable
position for the job marketplace. It isn’t easy and it
will take a lot of work. Those who work hard will
discover success.
Review
Computer Programmer
Web Design
Continuing Education
Careers
