as you complete the assignment, go in order as the earlier bulleted parts provide an easier...
DESCRIPTION
Rubric part 1. 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. - PowerPoint PPT PresentationTRANSCRIPT
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 1
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.
SCROLLING PARAGRAPH<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 messageis 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>
ReviewRubric Part 1Rubric Part 2Do What You Want To Do With JavaScrolling 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.
FUNCTION INIT() AND SCROLL() 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.
CODE EXAMPLE<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>
ReviewUser Navigated AnimationFunction 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.
onMouseOverIn 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')">Mouseover Blue</a>
</form>
REVIEW Coding Style onMouseOver Buttons Change Background With Mouse Over
WHAT IS A FUNCTION? 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 LeftIn 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.
REVIEW What is a function Making Functions Work For Us Picture Moving Left Picture Moving Up and Down
Computer ProgrammerA 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.
CONTINUING EDUCATION 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.
CareersThe 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.
ReviewComputer ProgrammerWeb DesignContinuing EducationCareers