Write an HTML document that uses Javascript to produce an interactive Web page.

Question

Write an HTML document that uses Javascript to produce an interactive Web page. The Web page will first use text to express a holiday greeting at the top of the page. It will also have several colorful graphical objects (such as stars, rectangles, and triangles) scattered around the page. Some of these will "disappear" when the mouse is moved over them and others will "appear" when the mouse is moved over a seemingly empty area of the page. Use the trick of drawing objects in the color of the background in order to make them seem to disappear I suggest you use a program such as MS Paint (found in the Accessories folder) to construct the graphical objects. Save them as .jpg files. Here is a red square to get you started. Then add the objects appropriately to a Web page. Here is a skeleton for a Web page that uses Javascript: download. Click right on these links and choose 'Save as...' Ideally, you will have lots of things popping up on your page, but you really only need enough to show you understand a little about Javascript

Explanation / Answer

When dealing with web pages, there are different levels of programming, and information representation. These can be thought of as different layers. This explanation will use PHP using APACHE webserver as an example. I wish I could insert a chart here to explain better, but I will try with words. The basics of web pages are split into 2 sides. There is server-side and client-side. Client side consists of: (these are documents and programs/scripts that your browser interprets into visualization) A Markup Language (HTML, XHTML, etc) - Uses pared tags Javascript (for client-side programming/script): this is a programming language that is interpreted by the browser that lets your website have movable items, data validation, etc. without having to reload the page. (this won't be able to talk to a DB, or edit files on the server) CSS (which gives your HTML/XHTML,etc style [colours, positioning, etc]) Server side consists of: (these are programs/scripts that can directly do (input/output) to databases, files, and create dynamic output of client-side content). PHP (for this example): This is a very-common programming language for server-side. It is the work-horse of dynamic web pages. It is what the webpage, in this example, uses to get process information given by the user, manipulate, and spit back. APACHE: this is the actual web server. Its the medium between users requests and your server-side program. So as an explanation example: Lets say you have created a web page that takes an image, lets say a .png image file only, uploaded by the user, resizes it, then shows it to the user. The flow would go like this. 1. User goes to your web page. lets say: http://www.foobar.com/index.php. 2. The php program, given no actual input, defaults to a form that lets a user upload an image to change. The php program outputs HTML code to the browser. This HTML is linked to a CSS file, which defines the styles of your of your HTML tags. 3. The user then uses the webpage to select a file from their computer (an image). They click the "Resize" html button you have created. The web page then uses Javascript to make sure the image that they have selected to upload is a png file before proceeding. (not a good practice, just an example). If it IS a PNG, the javascript program starts the process of submitting the image upload form. 4. The form calls index.php, but this time, instead of no information being given to it, we have a file ( a .png image file) given to it. So now instead of showing an upload form, the program we made (index.php) needs to edit this image. So, it does just that. We program in index.php a routine to take an image and resize it. It resizes, then saves the new file to the server. 5. index.php then returns to the user different HTML code that links to the file that the php program resized. This is the flow of the example web page. I hope it helps explain the layers and difference between client side and server side. If not, please let me know if you need more clarification. Please be advised that there are MANY different combinations that can make up your server-side section of this. They are usually called frameworks. I would recommend learning PHP first though as it will be an easy stepping stone and is widely supported by many web hosts. But no matter what framework, server side scripting you use, you will always need to use a mark up language(HTML, XHTML, etc). CSS and javascript are an optional use, but help to create a better HTML document if used correctly. So I would advice that you start by learning the basics of HTML, and CSS. They will be the flare and data formats that people will actually see. (Once they are loaded by the browser, they are static. Thats where Javascript comes in for client-side. It can change static HTML, and CSS based on user input, etc) After you know the basics of HTML, CSS. You can use a server-side language to dynamically create them, rather than just writing stuff in a html file and showing that to the user.

Related Questions

Navigate

• Browse (All)
• Browse W
• Subjects

---

---

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.