Read the text along with the lecture to complete your research and understanding
ID: 662450 • Letter: R
Question
Read the text along with the lecture to complete your research and understanding of the information as it is being presented this week. Write a one-page paper responding to the following set of discussion questions. Use direct quotes from the sources you find to support your writing. Cite the source of the quotes, and of the information correctly using APA style.
As we have learned, JavaScript is a scripting language used in web design. Discuss how using JavaScript in your design will enhance your page, and why. Be sure to include discussion of the techniques such as event handler, popup windows, image rollovers, image swaps, tabs, and data validation. Do not simply list and define these terms, but explain how each affects your design and enhances, usability, accessibility, and navigation.
Explanation / Answer
JavaScript is also known as ECMAScript (the untrademarked name used for the standard), is a dynamic programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, comJavaScript is classified as a prototype-based scripting language with dynamic typing and first-class functions. This mix of features makes it a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles.
Speed. Being client-side, JavaScript is very fast because any code functions can be run immediately instead of having to contact the server and wait for an answer. Simplicity. JavaScript is relatively simple to learn and implement.
Javascript is executed on the client side
This means that the code is executed on the user's processor instead of the web server thus saving bandwidth and strain on the web server.
Javascript is a relatively easy language
The Javascript language is relatively easy to learn and comprises of syntax that is close to English. It uses the DOM model that provides plenty of prewritten functionality to the various objects on pages making it a breeze to develop a script to solve a custom purpose.
Javascript is relatively fast to the end user
As the code is executed on the user's computer, results and processing is completed almost instantly depending on the task (tasks in javascript on web pages are usually simple so as to prevent being a memory hog) as it does not need to be processed in the site's web server and sent back to the user consuming local as well as server bandwidth.
Extended functionality to web pages
Third party add-ons like Greasemonkey enable Javascript developers to write snippets of Javascript which can execute on desired web pages to extend its functionality. If you use a website and require a certain feature to be included, you can write it yourself and use an add-on like Greasemonkey to implement it on the web page.
Event handling:
An event handler executes a segment of a code based on certain events occurring within the application, such as onLoad, onClick. JavaScript event handers can be divided into two parts: interactive event handlers and non-interactive event handlers. An interactive event handler is the one that depends on the user interactivity with the form or the document. For example, onMouseOver is an interactive event handler because it depends on the users action with the mouse. On the other hand non-interactive event handler would be onLoad, because this event handler would automatically execute JavaScript code without the user's interactivity
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML element
onmouseout The user moves the mouse away from an HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page
onBlur when focus changes.
EX:<IMG src="reaz.gif">
POPUP WINDOW:
Sometimes it's useful to add a popup to your pages. When the user clicks on a link, a new window opens and displays a page.This is usefull to transfer control from one window to other window.
EX:
<a href="#">Pop-up Window</a>
IMAGE ROLLOVERS AND SWAPS:
Image rollovers (sometimes also called Image MouseOvers or mouse-overs) can be found in numerous websites on the Internet today. You've probably seen them around too: when you move your mouse cursor over a button on a particular site, the button appears to be depressed. Move your mouse cursor away, and the button pops out again.
Image rollovers are implemented by creating two images for the same button. The first image is that which you want displayed when the mouse is not hovering over it, typically the "undepressed" or "up" state of a button. The second image is the graphic you want displayed when the mouse pointer is over the graphic, usually showing the button in a depressed or "down" state.
sample code:
<a href="index.html"
>
<img src="homebutton.gif" name="homebutton" border="0" />
</a>
Image Swaps... It goes by many variations of names, but means the same thing. Making one image change into a different one when a mouse pointer goes over a specified area.
sample code:
<a href="">
<img src="image1.gif" name="MyImage">
</a>
SRC is the SouRCe of the image file.
document.MyImage.src specifies that something is happening to the src of the object named MyImage on this document (web page). Remember... JavaScript is a step language. It goes level by level to find and use something.
OnMouseOver and OnMouseOut are self explanitory. They will do this specified coding when this event happens. For the example, They are being used to specify a new src for the named image.
This type of rollover effect is very common for navigation uses. You can create two images being close to the same. One image may have regular text on it, the other having highlighted text. Put them together in a rollover effect and you have a neat navigation happening. Placing a value in the href will complete the navigation effect.
TROUBLE SHOOTING :
If you have more than one rollover on the same web page, you MUST use a different name value for each one. Using the same name value for two or more will confuse the browser and no effect will be seen.
Tabs
Tabs are a less frequent but sill an important UI element of your application. Usually, you do not need more then one set of tabs, but it is often required to be able to add/remove, enable/disable, show/hide tabs dynamically. The tabs objects provides this funcitonality.
usability:
From a web-accessibility perspective (I'm unsure if your example is a website or not) you really want to keep the tabs as separate navigation items from the content within. A screenreader (and therefore likely a keyboard user) will jump to the navigation or jump to the content in order to access the items. If they've jumped to the navigation (tabs) then they're going to want to use the tabs.
If the user is tabbing through the navigation options and wants to view the content of one tab then they will select it to do so, if they don't want to view the content they will 'tab' onto the next item to hear if that's what they're interested in. If they have to cycle through all the content of each tab just to get to the piece of content they want (and they wouldn't even know if the content they want even exists yet as they wouldn't have had the tab title read out to them by the screenreader until they reach it on the page) then that is not a good user experience.
example:
$('#tabs').w2tabs({
name: 'tabs',
active: 'tab1',
tabs: [
{ id: 'tab1', caption: 'Tab 1' },
{ id: 'tab2', caption: 'Tab 2', closable: true },
{ id: 'tab3', caption: 'Tab 3', closable: true },
{ id: 'tab4', caption: 'Tab 4', closable: true },
{ id: 'tab5', caption: 'Tab 5', closable: true },
{ id: 'tab6', caption: 'Tab 6', closable: true },
{ id: 'tab7', caption: 'Tab 7', closable: true },
{ id: 'tab8', caption: 'Tab 8', closable: true }
],
onClick: function (event) {
$('#tab-content').html('Tab: ' + event.target);
}
});
<div id="tabs"></div>
<div id="tab-content">tab1</div>
COMING TO USABILITY...........
With the web every day becoming more and more robust and websites becoming more advanced users and designers can benefit from these changes, I can feel that it wont be long until every one will initially start to ignore IE6 and start enjoying what more advanced browsers can handle.
So here I have compiled a list of what i consider to be some excellent techniques and scripts that could be used in your web designs to give them the extra finesse that they deserve. You can also stay on top of the design trends that the web throws at us designers. Most if not all area also highy customisable with css, to get the style you need.
Most are cross browser compatible but I insist that if you haven’t used jQuery or other JavaScript libraries you have a little experiment with it to see what it can do, some times that is the best way to learn new things and get a better understanding of how to improve usability of your sites.
More and more it seems that web applications are running into performance problems that can often be traced back to JavaScript. It also seems we're having more problems with performance now despite JavaScript engines being much faster today compared to five years ago.
Perhaps older web applications benefited from a population with slower internet connections, or maybe no one thought that much about performance back then. It's easy to see why we're having problems now.
There are many technologies which uses java script as a basic language:
ex:
ajax,
jquery,
dhtmlx.
"Mainly java script can embeded with most of the laguages like java,.net ,PHP etc.....
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.