Error message

  • Deprecated function: Methods with the same name as their class will not be constructors in a future version of PHP; views_display has a deprecated constructor in require_once() (line 3190 of /home/krishhni/public_html/eduoncloud.com/includes/bootstrap.inc).
  • Deprecated function: Methods with the same name as their class will not be constructors in a future version of PHP; views_many_to_one_helper has a deprecated constructor in require_once() (line 113 of /home/krishhni/public_html/eduoncloud.com/sites/all/modules/ctools/ctools.module).

Learn Javascript Tutorial

  • JavaScript Tutorial for beginners and professionals is a solution of client side dynamic pages.
  • JavaScript is an object-based scripting language that is lightweight and cross-platform.
  • JavaScript is not compiled but translated. The JavaScript Translator (embedded in browser) is responsible to translate the JavaScript code.
 
JavaScript Example
 
<h2>Welcome to JavaScript</h2>  
<script>  
document.write("Hello JavaScript by JavaScript");  
</script>  

JavaScript is used to create interactive websites. It is mainly used for:

  • Client-side validation
  • Dynamic drop-down menus
  • Displaying data and time
  • Displaying popup windows and dialog boxes (like alert dialog box, confirm dialog box and prompt dialog box)
  • Displaying clocks etc.

JavaScript provides 3 places to put the JavaScript code

  1. Between the body tag of html
  2. Between the head tag of html/li>
  3. In .js file (external javaScript)

1.code between the body tag

   <script type="text/javascript"> 
          alert("Hello Javatpoint");  
   </script>

2.code between the head tag

To call function, you need to work on event. Here we are using onclick event to call msg() function.
    <html>  
    <head>  
    <script type="text/javascript">  
    function msg(){  
     alert("Hello Javatpoint");  
    }  
    </script>  
    </head>  
    <body>  
    <p>Welcome to JavaScript</p>  
    <form>  
    <input type="button" value="click" onclick="msg()"/>  
    </form>  
    </body>  
    </html>

 

3. External file.

Let’s create an external JavaScript file that prints Hello Javatpoint in a alert dialog box.
message.js
    function msg(){  
     alert("Hello Javatpoint");  
    } 
Let’s include the JavaScript file into html page. It calls the JavaScript function on button click.

index.html
    <html>  
    <head>  
    <script type="text/javascript" src="message.js"></script>  
    </head>  
    <body>  
    <p>Welcome to JavaScript</p>  
    <form>  
    <input type="button" value="click" onclick="msg()"/>  
    </form>  
    </body>  
    </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $("#btnAdd").bind("click", function () {
        var div = $("<div />");
        div.html(GetDynamicTextBox(""));
        $("#TextBoxContainer").append(div);
    });
    $("#btnGet").bind("click", function () {
        var values = "";
        $("input[name=DynamicTextBox]").each(function () {
            values += $(this).val() + "\n";
        });
        alert(values);
    });
    $("body").on("click", ".remove", function () {
        $(this).closest("div").remove();
    });
});
function GetDynamicTextBox(value) {
    value=prompt("Please enter your name", "");
    return '<input name = "DynamicTextBox" type="text"  value = "' + value + '" />&nbsp;' +
            '<input type="button" value="Remove" class="remove" />'
}
</script>
</head>
<body>
<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
    <!--Textboxes will be added here —>
</div>
<br />
<input id="btnGet" type="button" value="Get Values" />
</body>
</html>

<html>
<head>
    <title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    $(function(){
        // Variable to get ids for the checkboxes
        var idCounter=1;
        $("#btn1").click(function(){
            var val = $("#txtAdd").val();
            $("#divContainer").append ( "<label for='chk_" + idCounter + "'>" + val + "</label><input id='chk_" + idCounter + "' type='checkbox' value='" + val + "' /><br/>" );
            idCounter ++;
        });
      });

      $(function(){
        // Variable to get ids for the checkboxes
        var idCounter=1;
        $("#btn2").click(function(){
            var val = $("#txtAdd").val();
            //$("#divContainer").remove();
            //alert(val)
                $('#chk_' + idCounter).remove();

            //idCounter ++;
        });
      });  

        
        
    
</script>
</head>

<body>
<div id='divContainer'></div>
<input type="text" id="txtAdd" />
<button id="btn1">Add</button>
<button id="btn2">Remove</button>

<!-- <button class="check">All</button> -->
<input type="checkbox" id="chkSelectAll" /><label id="sel">Select All</label></b>
<script>

$(document).ready(function(){
    $('#chkSelectAll').click(function(){
            if ($(this).is(':checked')) {
            $('#divContainer> input[type=checkbox]').each(function() {
                $(this).prop("checked", true); $('#sel').text('Un-Select All');
            });
        }
        else {
            $('#divContainer input[type=checkbox]').each(function() {
                $(this).prop("checked", false); $('#sel').text('Select All');
            });
        }        
    
})
})




</script>
</body>
</html>