Find online courses made by experts from around the world.
Take your courses with you and learn anywhere, anytime.
Learn and practice real-world skills and achieve your goals.
Not for you? No problem.
30 day money back guarantee.
Learn on the go.
Desktop, iOS and Android.
Certificate of completion.
Using the 'window.prompt()' Method
HTML Event Handlers Demo
|Section 2: Variables, Arrays and Operators|
|Using Variables Duration: 5 to 15 minutes. In this exercise, you will practice using variables. Open VariablesArraysOperators/Exercises/Variables.html for editing. Below the ADD PROMPT HERE comment, write code that will prompt the user for her first name and assign the result to a variable. Add a bu…|
|Working with Arrays Duration: 15 to 25 minutes. In this exercise, you will practice working with arrays. Open VariablesArraysOperators/Exercises/Arrays.html for editing. Below the comment, declare a rockStars array and populate it with four values entered by the user. Add functionality to the butt…|
Modulus and Ternary
Using the Global Number() Function
|User-defined Functions Writing functions makes it possible to reuse code for common tasks. Functions can also be used to hide complex code. For example, an experienced developer can write a function for performing a complicated task. Other developers do not need to know how that function works; th…|
Declaring and Calling Functions
Using the String.split() Method
|Math The Math object is a built-in static object. The Math object's properties and methods can be accessed directly (e.g, Math.PI ) and are used for performing complex math operations. Here are two commonly used properties of the Math object. Property Description Math.PI Pi (Π) Math.PI; //3.141592…|
Using Date Methods
|typeof Operator The typeof operator is used to find out the data type of a variable. As we learned earlier in the course, we can have variables that hold String values, Numeric values, and more. Using the typeof operators lets us identify the type of data the variable references. The screenshot belo…|
'typeof' Operator Demo
|Returning the Day of the Week as a String Duration: 15 to 25 minutes. In this exercise, you will create a function that returns the day of the week as a string. Open BuiltInObjects/Exercises/DateUDFs.html for editing. Write a dayAsString() function that returns the day of the week as a string. Write…|
Day of the Week Solution Demo
|Section 5: Conditionals and Loops|
|Conditional Processing Duration: 20 to 30 minutes. In this exercise, you will practice using conditional processing. Open ConditionalsAndLoops/Exercises/Conditionals.html for editing. Notice that there is an onload event handler that calls the greetUser() function. Create this function in the script…|
|Working with Loops Duration: 20 to 30 minutes. In this exercise, you will practice working with loops. Open ConditionalsAndLoops/Exercises/Loops.html for editing. You will see that this file is similar to the solution from the last exercise. Declare an additional variable called greeting . Create an…|
Accessing the value Property
|Textfield to Textfield Duration: 15 to 25 minutes. In this exercise, you will write a function that bases the value of one text field on the value of another. Open FormValidation/Exercises/TextfieldToTextField.html for editing. Write a function called getMonth() that passes the month number entered…|
Explaining Basic Form Validation
|Validating Radio Buttons Radio buttons that have the same name are grouped as arrays. Generally, the goal in validating a radio button array is to make sure that the user has checked one of the options. Individual radio buttons have the checked property, which is true if the button is checked and fa…|
Validating Radio Buttons Explained
|Validating Checkboxes Like radio buttons, checkboxes have the checked property, which is true if the button is checked and false if it is not. However, unlike radio buttons, checkboxes are not stored as arrays. The example below shows a simple function for checking to make sure a checkbox is checked…|
Validating Checkboxes Explained
|Validating Select Menus Select menus contain an array of options. The selectedIndex property of a select menu contains the index of the option that is selected. Often the first option of a select menu is something meaningless like "Please choose an option..." The checkSelect() function in the exampl…|
Validating Select Menus Explained
|Focus, Blur, and Change Events Focus , blur and change events can be used to improve the user experience. Focus and Blur Focus and blur events are caught with the onfocus and onblur event handlers. These events have corresponding focus() and blur() methods. The example below shows how to set focus o…|
onFocus, onBlur, and onChange Demo
|Validating Textareas Textareas can be validated the same way that text fields are by using the checkLength() function shown earlier. However, because textareas generally allow for many more characters, it's often difficult for the user to know if he's exceeded the limit. It could be helpful to let t…|
|Improving the Registration Form Duration: 15 to 25 minutes. In this exercise, you will make some improvements to the registration form from the last exercise. Open FormValidation/Exercises/FormValidation2.js in your editor. You will see that the functions discussed above have been added: checkRadioA…|
|Section 7: Images, Windows and Timers|
|Image Rollovers Image rollovers are commonly used to create a more interesting user experience and to help highlight navigation points. When the user hovers the mouse over an image, the source of the image is modified, so that a different image appears. When the user hovers the mouse back off the…|
Image Rollover Demo
|Preloading Images When working with files on a local machine, image rollovers like the ones we have seen in previous examples work just fine. However, when the user first hovers over a rollover image, the new image file has to be found and delivered to the page. The time it takes to load the image…|
|Creating a Slide Show Duration: 20 to 30 minutes. In this exercise, you will practice working with images by creating a slide show. Open ImagesWindowsTimers/Exercises/SlideShow.html for editing. Write code to preload Images/Banner.jpg, Images/Hulk.jpg, Images/Bruce.jpg, and Images/Batman.jpg. The…|
|Windows These days, popup windows are generally frowned upon; however, they can be useful in some cases. We'll look at a couple of examples, but first, let's see how to open a new window. Syntax var newWin = window.open(URL, name, features, replace); All four parameters are options: URL - the URL…|
Opening a New Window
|Timers Timers are started and stopped with the following four methods of the window object: setTimeout(code_to_execute, wait_time_in_milliseconds) clearTimeout(timer) setInterval(code_to_execute, interval_in_milliseconds) clearInterval(interval) Let's take a look at how setTimeout() and clearTimeo…|
Timeouts and Intervals
|Popup Timed Slide Show Duration: 15 to 25 minutes. In this exercise, you will create a popup slideshow that runs by itself. Open ImagesWindowsTimers/Exercises/Timed-SlideShow.html in your editor. Add code to the startShow() function to pop up popup-show.html in a new 200px by 300px window. Make su…|
|Section 8: Navigator, History, and Location Objects|
|The navigator Object In the days of Netscape 4, it was common practice to branch code based on your user's browser. This is almost always a bad idea. It's better practice to check for and respond to feature support than to base your code on the type or version of the user's browser. That said, in…|
|Feature Detection Although browsers have come a long way in the past several years, they unfortunately do not all support the W3C specifications to the same degree. This is particularly true with the introduction of HTML5. It is often necessary to branch the code based on the browser's support of a…|
Detecting Browser Features
|history Object Like navigator , the history object is a property of the window object. For security and privacy reasons, the information you can get about the user's session history is limited to the number of entries, which you get by reading the history.length property. That's generally not so u…|
Using history and location Objects
|Creating a Simple Quiz Duration: 15 to 25 minutes. In this exercise, you will create a simple quiz that asks one question per page and does not allow the user to navigate back to past questions. Open NavigatorHistoryLocation/Exercises/question1.html for editing. Add code so that the page tries to…|
Simple Quiz Review
|Before you begin the course, please take a moment to check out the link below to setup your computer and download your exercise files. http://www.webucator.com/help/wiki/index.cfm/JSC101|