Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
46 views

The Tag

The document discusses various JavaScript concepts including: 1) How to insert JavaScript code into HTML pages using <script> tags and how to call external JavaScript files. 2) Common JavaScript data types like numbers, strings, and how to assign variables. 3) How JavaScript can be used to validate HTML forms by checking for empty fields and valid email/date formats before submitting.

Uploaded by

Mirela MiMi
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
46 views

The Tag

The document discusses various JavaScript concepts including: 1) How to insert JavaScript code into HTML pages using <script> tags and how to call external JavaScript files. 2) Common JavaScript data types like numbers, strings, and how to assign variables. 3) How JavaScript can be used to validate HTML forms by checking for empty fields and valid email/date formats before submitting.

Uploaded by

Mirela MiMi
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

The <script> Tag

To insert a JavaScript into an HTML page, use the <script> tag. The <script> and </script> tells where the JavaScript starts and ends. The lines between the <script> and </script> contain the JavaScript: <script> alert("My First JavaScript"); </script>

JavaScript in <body>
In this example, JavaScript writes into the HTML <body> while the page loads:

Example
<!DOCTYPE html> <html> <body> . . <script> document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph</p>"); </script> . . </body> </html>

External JavaScripts
Scripts can also be placed in external files. External files often contain code to be used by several different web pages. External JavaScript files have the file extension .js. To use an external script, point to the .js file in the "src" attribute of the <script> tag:

Example

<!DOCTYPE html> <html> <body> <script src="myScript.js"></script> </body> </html>

JavaScript Data Types


JavaScript variables can also hold other types of data, like text values (name="John Doe"). In JavaScript a text like "John Doe" is called a string. There are many types of JavaScript variables, but for now, just think of numbers and strings. When you assign a text value to a variable, put double or single quotes around the value. When you assign a numeric value to a variable, do not put quotes around the value. If you put quotes around a numeric value, it will be treated as text.

Example
var pi=3.14; var name="John Doe"; var answer='Yes I am!';

Errors
<!DOCTYPE html> <html> <head> <script> var txt=""; function message() { try { adddlert("Welcome guest!"); }

catch(err) { txt="There was an error on this page.\n\n"; txt+="Error description: " + err.message + "\n\n"; txt+="Click OK to continue.\n\n"; alert(txt); } } </script> </head> <body> <input type="button" value="View message" onclick="message()"> </body> </html>

JavaScript Form Validation


JavaScript can be used to validate data in HTML forms before sending off the content to a server. Form data that typically are checked by a JavaScript could be:

has the user left required fields empty? has the user entered a valid e-mail address? has the user entered a valid date? has the user entered text in a numeric field?

function validateForm() { var x=document.forms["myForm"]["fname"].value; if (x==null || x=="") { alert("First name must be filled out"); return false; } }

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post"> First name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form>

E-mail Validation
The function below checks if the content has the general syntax of an email. This means that the input data must contain an @ sign and at least one dot (.). Also, the @ must not be the first character of the email address, and the last dot must be present after the @ sign, and minimum 2 characters before the end: function validateForm() { var x=document.forms["myForm"]["email"].value; var atpos=x.indexOf("@"); var dotpos=x.lastIndexOf("."); if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) { alert("Not a valid e-mail address"); return false; } } The function above could be called when a form is submitted:

Example
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post"> Email: <input type="text" name="email"> <input type="submit" value="Submit"> </form>

The onload and onunload Events


The onload and onunload events are triggered when the user enters or leaves the page. The onload event can be used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information. The onload and onunload events can be used to deal with cookies.

Example

<body onload="checkCookies()">

The onchange Event


The onchange event are often used in combination with validation of input fields. Below is an example of how to use the onchange. The upperCase() function will be called when a user changes the content of an input field.

Example
<input type="text" id="fname" onchange="upperCase()">

The onmouseover and onmouseout Events


<!DOCTYPE html> <html> <body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="backgroundcolor:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>

<script> function mOver(obj) { obj.innerHTML="Thank You" }

function mOut(obj) { obj.innerHTML="Mouse Over Me"

} </script>

</body> </html>

The onmousedown, onmouseup and onclick Events


<!DOCTYPE html> <html> <body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="backgroundcolor:#D94A38;width:90px;height:20px;padding:40px;">Click Me</div>

<script> function mDown(obj) { obj.style.backgroundColor="#1ec5e5"; obj.innerHTML="Release Me" }

function mUp(obj) { obj.style.backgroundColor="#D94A38"; obj.innerHTML="Thank You"

} </script>

</body> </html>

Window History Back


The history.back() method loads the previous URL in the history list. This is the same as clicking the Back button in the browser.

Example
Create a back button on a page:

<html> <head> <script> function goBack() { window.history.back() } </script> </head> <body> <input type="button" value="Back" onclick="goBack()"> </body> </html>

The setInterval() Method


The setInterval() method will wait a specified number of milliseconds, and then execute a specified function, and it will continue to execute the function, once at every given time-interval.

Syntax
window.setInterval("javascript function",milliseconds);
The window.setInterval() method can be written without the window prefix. The first parameter of setInterval() should be a function.

The second parameter indicates the length of the time-intervals between each execution. Note: There are 1000 milliseconds in one second.

Example
Alert "hello" every 3 seconds:

setInterval(function(){alert("Hello")},3000);

You might also like