- JavaScript made its first appearance in Netscape 2.0 in 1995 with the name LiveScript.
- It is a dynamic computer programming language and it helps to develop the dynamic web pages.
- We use JavaScript to program the behavior of web pages and also we can validate the HTML forms using JavaScript.
- JavaScript is a case-sensitive language and Semicolon’s were optional.
- Keyword var is used to create a new variable.
- Script tags can be added in <head> (or) <body> (or) from an external file.External scripts can be included using the code <script src=”src.js”></script>.
- Allows three primitive data types.
- Numbers
- Strings
- Boolean
JavaScript to change HTML content:
- document.getElementById(“idname”).innerHTML
- document.getElementById(“idname”).value
- document.getElementById(“idname”).style.fontSize;
- document.getElementById(“idname”).style.color;
- window.alert();
- window.confirm();
- window.prompt(“”,””);
- document.write();
INNERHTML
-
document.getElementById(“idname”).innerHTML=”Value or content”;
Explanation:
We are getting the elements within the Id using id name.
InnerHTML indicates that the content within that Id name.
The code describes that the content inside that id name will be replaced by the content within the “double codes”.
(or)
-
var x = document.getElementById(“idname”).innerHTML;
Explanation: We have created a variable x. Copied the contents present in the html with the id=”idname” to the variable x.
<!doctype html>
<html>
<head>
<script>
function f1(){
document.getElementById(“id1″).innerHTML=”Text replaced using JavaScript”; }
</script>
</head>
<body>
<h1>SAMPLE SCRIPT</h1>
<p id=”id1″> Normal content in HTML </p>
<input type=”button” onclick=”f1()” value=”Click me”/>
</body>
</html>
<!doctype html>
<html>
<head>
<script>
function f1(){
var x= document.getElementById(“id1”).innerHTML;
document.getElementById(“id2″).innerHTML= x; }
</script>
</head>
<body>
<h1>SAMPLE SCRIPT</h1>
<p id=”id1″> Normal content in HTML </p>
<p id=”id2″> </p>
<input type=”button” onclick=”f1()” value=”Click me”/>
</body>
</html>
VALUE
-
var x = document.getElementById(“idname”).value;
Explanation:
Using the above code, we can get the value of the element with the id name as “idname”.
We can get the value of the element by mentioning id name to compare or to calculate.
(or)
-
document.getElementById(“idname”).value=”Name”;
Explanation:
We can assign the value for the element by mentioning id name.
<!doctype html>
<html>
<head>
<script>
function f1(){
var x= document.getElementById(“id1”).value;
document.getElementById(“id2″).value= x; }
</script>
</head>
<body>
<h1>SAMPLE SCRIPT</h1>
<input type=”text” id=”id1″>
<input type=”text” id=”id2″>
<input type=”button” onclick=”f1()” value=”Click me”/>
</body>
</html>
STYLE
-
document.getElementById(“idname”).style.fontSize=”_px”;
Explanation:
[Note: In the above word for fontSize ‘S’ is in upper case]
Using the above JavaScript code we can change the font-size of the content with the id name as “idname”.
Size must be mentioned in the pixels.
-
document.getElementById(“idname”).style.color=”clr nme”;
Explanation:
The font color of the elements with id as idname can be changed using the above JavaScript code.
<!doctype html>
<html>
<head>
<script>
function f1(){
document.getElementById(“id2″).style.fontSize=”30px”; }
</script>
</head>
<body>
<p id=”id2″>SAMPLE SCRIPT</p>
<input type=”button” onclick=”f1()” value=”Click me”/>
</body>
</html>
<!doctype html>
<html>
<head>
<script>
function f1(){
document.getElementById(“id2″).style.color=”blue”; }
</script>
</head>
<body>
<p id=”id2″>SAMPLE SCRIPT</p>
<input type=”button” onclick=”f1()” value=”Click me”/>
</body>
</html>
POP-UP Window
-
window.alert(” Alert message”);
Explanation: Using this function we can display an alert message to the users in JavaScript.
-
window.confirm(“Some Text”);
Explanation: Using this function we can get the confirmation from the user whether ok (or) cancel.
-
window.prompt(“sometext“,”defaultText“);
Explanation: Using this function we can get the value from the user in form of an POP UP window.
<!doctype html>
<html>
<body>
<p>CLICK BELOW </p>
<button onclick=”f1()”>Click !</button>
<p id=”id1″></p>
<script>
function f1(){
window.alert(“Alert message”); }
</script>
<body>
</html>
<!doctype html>
<html>
<body>
<p>CLICK BELOW </p>
<button onclick=”f1()”>Click !</button>
<p id=”id1″></p>
<script>
function f1() {
var x;
if (confirm(“Press a button!”) == true) {
x = “You pressed OK!”; }
else {
x = “You pressed Cancel!”; }
document.getElementById(“id1”).innerHTML = x; }
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<p>CLICK BELOW </p>
<button onclick=”f1()”>Click !</button>
<p id=”id1″></p>
<script>
function f1(){
var person = prompt(“ENTER YOUR NAME”, “”);
if (person != null) {
document.getElementById(“id1″).innerHTML =”Hai ” + person + “! SUCCESS”; }
}
</script>
</body>
</html>
WRITE
-
document.write(“Sometext“);
Explanation: If we use document.write function in JavaScript after an HTML document is fully loaded , then it will delete all the existing HTML. You can understand easily by running the codes in Example code 1 & Example code 2.
<!doctype html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type=”button” onclick=”f1()”>Try it</button>
<script>
function f1(){ document.write(“replaced”); }
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<h1>Heading</h1>
<p>Paragraph.</p>
<script>
document.write(“Added Words”);
</script>
</body>
</html>
HTML Forms
We can use text box, Radio Buttons, Drop down list box, Text area, etc. We cannot set constraints in HTML but it can be done using JavaScript. To see how create a Html form. Click Here
JavaScript Form Validation
- HTML forms can be validated using JavaScript by which we can set some constraints.
- Getting the value or input from the users and we can validate it.
- We can get the value using the ‘name’ or ‘idname’.
<!doctype html>
<html>
<head>
<script>
function f1(){
var x = document.getElementById(“id1”).value;
if(x==1)
document.getElementById(“id2″).innerHTML=”Your number is 1”;
else
document.getElementById(“id2″).innerHTML=”Your number is other than 1″; }
</script>
</head>
<body>
<input type=”number” id=”id1″/>
<button type=”button” onclick=”f1()”>Click Me !</button>
<p id=”id2″></p>
</body>
</html>