JavaScript Tutorials
- What is Javascript?
- What is BOM?
- What is DOM?
- Variable
- check variable value is empty
- JavaScript Output
- Functions
- Javascript Events
- Input Events
- onchange Event
- Javascript Output methods
- If else statement
- Arrays
- Pattern Validation
- Form Validation
- Inner Html Form Validation
- Inline Form Validation
- Checkbox Validation
- Inline Inner Html Form Validation
- Server side php Validation
- Validate a HTML Form with PHP
- window and window location
- Get Text Value
- Get hidden field value
- JavaScript & PHP
- Date Format
- get php value in javascript
- Redirect page & Autoredirect page
- Auto Refresh page & Div
- How to get select text value from Dropdown box
- How to clear browser history in javascript
- Checkbox Problems
- Select option problems
- Popup Contact Form
- Sidebar Contact Form
- How to use a multistep Form or Form wizard
- Auto Calculate Price
- print Application Form
- Auto Calculate GST in Javascript by select price
- Calculate GST by input value in text box Jquery
- Calculate Discount
- onClick Checkbox
- autofil form data click on checkbox
- Show subcategory list
- Show city list as per state
- Show district list as per country and state
- Show good morning good night wish
- image upload with preview image
- Print Div Content
- Show modal popup on page load
- filter table data usign javascript.
- Character Limit Validation.
- Validate File 5MB Upload
- Validate Special character
- More File Upload
- Call JavaScript Function After Page Load
- Drop Down First option Value Disabled --- Please Select ---
- How to Disable Submit Button After Form Submission
- How to disable browser back button using Jquery?
- How to Remove selected item from second & third dropdown list?
- Interview Questions of JavaScript.
Important Link
What is Javascript?
Javascript is the script language of the Web. It is the client side programming language. Javascript is an easy-to-use programming language that can be embedded in the header of your web pages. javascript can be write anywhere in your page. The script should be included in or referenced by an HTML document for the code to be interpreted by the browser.
Advantages of JavaScript:
- Less server interaction:- You can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server.
- Immediate feedback to the visitors:- They don't have to wait for a page reload to see if they have forgotten to enter something.
- Increased interactivity:- You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard.
- Richer interfaces:-You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.
JavaScript Syntax:
- 1. JavaScript statements that are placed within the <script> ... </script> HTML tags in a web page.
- 2. You can place the <script> tag containing your JavaScript anywhere within you web page but it is preferred way to keep it within the <head> tags.
The script tag takes two important attributes:
- language: This attribute specifies what scripting language you are using. Typically, its value will be javascript.
- type: This attribute is what is now recommended to indicate the scripting language in use and its value should be set to "text/javascript". So your JavaScript segment will look like:
- <script language="javascript" type="text/javascript"> JavaScript code </script>
Adding JavaScript to Your Web Pages
There are typically three ways to add JavaScript to a web page:
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Embedding JavaScript</title>
</head>
<body>
<script>
var msg = "Hello World!";
document.write(msg); // Prints: Hello World!
</script>
</body>
</html>
Calling an External JavaScript File
JavaScript code into a separate file with a .js extension, and then call that file in your document through the src attribute of the <script> tag, like this:
<script src="js/hello.js"></script>
File name : hello.js
function say() {
alert("Hello World!");
}
// Call function on click of the button
document.getElementById("myBtn").onclick = say;
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Including External JavaScript File</title>
</head>
<body>
<button type="button" id="myBtn">Click Me</button>
<script src="js/hello.js"></script>
</body>
</html>
Placing the JavaScript Code Inline
You can also place JavaScript code inline by inserting it directly inside the HTML tag using the special tag attributes such as onclick, onmouseover, onkeypress, onload, etc.
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inlining JavaScript</title>
</head>
<body>
<button onclick="alert('Hello World!')">Click Me</button>
</body>
</html>
JavaScript Can Change HTML Elements
File name : index.php
JavaScript can manipulate the DOM (change HTML contents).
<html>
<body>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFun()">Click Here!</button>
<p id="demo">This is a demonstration.</p>
<script>
function myFun() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</body>
</html>
JavaScript Can Change HTML Styles (CSS)
File name : index.php
<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<script>
function myFunction() {
var x = document.getElementById("demo");
x.style.fontSize = "25px";
x.style.color = "red";
}
</script>
</body>
</html>
What is DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
What is the HTML DOM?
The HTML DOM is a standard object model and programming interface for HTML. It defines:
NOTE : -
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM Document. In the HTML DOM object model, the document object represents your web page. The document object is the owner of all other objects in your web page. If you want to access objects in an HTML page, you always start with accessing the document object.
Eg :-
Example :
File name : index.php
<html>
<body>
<script language="javascript" type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
we call a function document.write which writes a string into our HTML document. This function can be used to write text, HTML, or both. So above code will display following result: Hello World!
Semicolons are Optional
Simple statements in JavaScript are generally followed by a semicolon character, just as they are in C, C++, and Java. JavaScript, however, allows you to omit this semicolon if each of your statements are placed on a separate line. For example, the following code could be written without semicolons.
<script language="javascript" type="text/javascript">
var1 = 100
var2 = 200
</script>
But when formatted in a single line as follows, you must use semicolons.
<script language="javascript" type="text/javascript">
var1 = 100; var2 = 200;
</script>
Comments in JavaScript
<script language="javascript" type="text/javascript">
<!--
// This is a comment. It is similar to comments in C++
/*
* This is a multiline comment in JavaScript
* It is very similar to comments in C Programming
*/
//-->
</script>
JavaScript - Placement in HTML File
JavaScript code anywhere in an HTML document. However the most preferred ways to include JavaScript in an HTML file are as follows −
JavaScript in <head>...</head> section
If you want to have a script run on some event, such as when a user clicks somewhere, then you will place that script in the head as follows −
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
JavaScript in <body>...</body> section
<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>
JavaScript in <body> and <head> Sections
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
JavaScript in External File
<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>
filename.js
function sayHello() {
alert("Hello World")
}
<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>
filename.js
alert("Hello World")
}
File name : index.php
File name : index.php
File name : index.php