Mark's coding playground...

Posts

Simple Validation in JavaScript:

Javascript can have simple validations and such an example is given below. Download and use the code. <html> <head> </head> <body> Input numbers between 0 and 5 Submit </body> </html> functions.js function validate() { var x, text; x = document.getElementById("numb").value; if(isNaN(x) || x < 1 || x > 5) { text = "Input not valid"; }else { text = "Input OK"; } document.getElementById("show").innerHTML = text; }

Simple Changing of Styles in JavaScript

<html> <head> </head> <body> Iam changing my style </body> </html> funcions.js function mystyle() { var x = document.getElementById("styles"); x.style.fontSize = "25px"; x.style.color = "red"; }

Dialog Boxes in JavaScript

Alert Dialog Box: An alert dialog box is mostly used to give a warning message to the users.Mostly they gives only an "Ok button". Confirmation Dialog Box: A confirmation dialog box is mostly used to take user's consent on any option. It displays a dialog box with two buttons mostly "ok" and "cancel" Prompt Dialog Box: The prompt dialog box is very useful when you want to pop-up a text box to get user input. Thus, it enables you to interact with the user. The user needs to fill in the field and then click OK. If the user clicks the Cancel button, the window method prompt() returns null. <html> <head> </head> <body> Show an Alert Dialog Box Show alert Show a Confirmation Dialog Box Show alert Prompt Dialog Box </body> </html> functions.js: function showalert1(){ alert("Iam an alert") } function showalert2(){ confirm("Iam an alert") } function getValue()

Calling a script from an external file

We Can just recall the previous example of image switching to understand how to call script externally. Let's have a look. <html> <head> </head> <body> click on the image </body> </html> Using the tag <script type="text/javascript" src="functions.js"> </script> we can call the script externally. Always write script in file with extension ".js". functions.js: function imageswitch(){ var image = document.getElementById('switchimage'); if(image.src.match("one")) { image.src = "flower_two.jpg"; } else { image.src = "flower_one.jpg"; } } Note: Make sure that the both html and js file locations are the same or else defime them specifically

Image switching Using JavaScript

Here is the simple code by which images are switched. Download and use the code. click on the image

JavaScript Can Change HTML Content

By using the method "getElementById()" we can change the HTML content as we like. Let's have alook... What Can JavaScript Do? JavaScript can change HTML content. Click Me! As we see on the button click the HTML text changes.