HTML5 Tutorial End With JavaScript

HTML5 Tutorial End With JavaScript

html javascript

Topics

  1. HTML with JavaScript
  2. HTML Events
  3. HTML Live Coding

What is JavaScript?

JavaScript Helps to Change Behaviour of Page in Live in front of our eyes we see its changes live in web pages. Like.

  1. Reloading a web page
  2. Redirection
  3. Taking Value From Input Box
  4. Animation
  5. Fetching Live data From Server
  6. Live Chat 
Now i will not Go Details in JavaScripts in this Topic My Aim in this topic is How to Write JavaScript Codes, Html Codes.

But Don’t Worry I will Cover my JavaScript in Seperate Topic.


JavaScript Start with Tag <script>

Code  : <script>JavaScript Codes</script>
Use this Tag Only when You using JS in HTML page if you write external js dont use this tag on that js page.


We link external js file by using


code : <script src=”first.js”></script>
 

This is Our External js file first.js which contain only js Code Seprately like css.
We can use Comments in js by using
(//) single line or multi line (/* comments */) 


E.g 1. Adding Js in Your HTML files and Takes Input From text Box and alert that value in browser.

  



<!DOCTYPE html>
<html>
<head> <title>HTML with JavaScript</title></head>
<input type="text" id="name">
<button onclick="display()">Display</button>
<body>
 <!-- JavaSript begin -->
<script type="text/javascript">
 function display(){

        //declaring js Vaiable 
      var a;
        //storing my html element (DOM Element : Document Object Model)
        //every dom element had its own list of properties 

        //finding My Dom Element with its id
  a=document.getElementById("name");
  
  //Alert Popup Box which Display input value
  alert(a.value);
 }
</script>
<!-- Java Script End -->
</body>
</html>
 
 
Results :
javascript example
After Clicking .

javascript result


E.g 2. Set Value in div and Inpux Box using js

<!DOCTYPE html>
<html>
<head> <title>HTML with JavaScript</title></head>
<input type="text" id="name">
<input type="text" id="copyvalue">
<div id="copydiv"></div>
<button onclick="display()">Display</button>
<body>
 <!-- JavaSript begin -->
<script type="text/javascript">
 function display(){

        //declaring js Vaiable 
      var a;
        //storing my html element (DOM Element : Document Object Model)
        //every dom element had its own list of properties 

        //finding My Dom Element with its id
  a=document.getElementById("name");
  //finding element with id copyvalue and setting value
  document.getElementById('copyvalue').value=a.value;
  //finding element with id copydiv and setting text
  document.getElementById('copydiv').innerHTML=a.value;
  //div dont have propert of (value) it had property of text 
 }
</script>
<!-- Java Script End -->
</body>
</html>

Result : 

js example
 After Clicking


js example


I know You All think What is Events in HTML?
Events in HTML just like some action taken by user like.
  1. Clicking a Button
  2. Moving Mouse
  3. Keypress (when user press key from keyboard)
  4. Keyup (when user move finger from keyboard)
  5. By using This Events We Can Call Our JavaScript See previous Example
  6. (Button Click) 
Video Tutorial


Source Codes : Download
Previous Post
Next Post

post written by:

0 comments: