JavaScript - Syntax JavaScriptcan be implementedusingJavaScriptstatementsthatare placedwithinthe <script>... </script> HTML tags in a webpage. youcan place the <script> tags,containingyourJavaScript,anywhere withinyouwebpage,butitis normallyrecommendedthatyoushouldkeepitwithinthe <head>tags. Helloworldin JavaScript <html> <body> <script language="javascript"type="text/javascript"> document.write("HelloWorld!") </script> </body> </html> Case Sensitivity JavaScript is a case-sensitive language. This means that the language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters. Comments in JavaScript JavaScript supports both C-style and C++-style comments, Thus −
 Any text between a // and the end of a line is treated as a comment and is ignored by JavaScript.  Any text between the characters /* and */ is treated as a comment. This may span multiple lines.  JavaScript also recognizes the HTML comment opening sequence <!--. JavaScript treats this as a single-line comment, just as it does the // comment.  The HTML comment closing sequence --> is not recognized by JavaScript so it should be written as //-->. JavaScript Output JavaScript can "display" data in different ways:  Writing into an alert box, using window.alert().  Writing into the HTML output using document.write().  Writing into an HTML element, using innerHTML.  Writing into the browser console, using console.log(). ***Writing into an alert box, using window.alert(). <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> window.alert(5 + 6); </script> </body> </html>
Using document.write() <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> document.write(5 + 6); </script> </body> </html> Using innerHTML <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My First Paragraph</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = 5 + 6; </script> </body> </html>
What Is a Regular Expression? A regular expression is a sequence of characters that forms a search pattern. When you search for data in a text, you can use this search pattern to describe what you are searching for. A regular expression can be a single character, or a more complicated pattern. Regular expressions can be used to perform all types of text search and text replace operations. JavaScript Form Validation HTML form validation can be done by a JavaScript. If a form field (fname) is empty, this function alerts a message, and returns false, to prevent the form from being function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("Name must be filledout"); return false; } } <!DOCTYPE html> <html> <body>
<form action="demo_form.asp" method="post"> <input type="text"name="fname" required> <input type="submit"value="Submit"> </form> <p>If you clicksubmit, without fillingout the text field, your browser will display an error message.</p> </body> </html> Basic FormValidation <script type="text/javascript"> <!--
// Form validation code will come here. function validate() { if( document.myForm.Name.value == "" ) { alert( "Please provide your name!" ); document.myForm.Name.focus() ; return false; } if( document.myForm.EMail.value == "" ) { alert( "Please provide your Email!" ); document.myForm.EMail.focus() ; return false; } if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) || document.myForm.Zip.value.length != 5 ) { alert( "Please provide a zip in the format #####." ); document.myForm.Zip.focus() ; return false; } if( document.myForm.Country.value == "-1" ) { alert( "Please provide your country!" ); return false; } return( true ); } //--> </script> Data Format Validation <script type="text/javascript"> <!--
function validateEmail() { var emailID = document.myForm.EMail.value; atpos = emailID.indexOf("@"); dotpos = emailID.lastIndexOf("."); if (atpos < 1 || ( dotpos - atpos < 2 )) { alert("Please enter correct email ID") document.myForm.EMail.focus() ; return false; } return( true ); } //--> </script> The checkValidity() Method <!DOCTYPE html> <html> <body> <p>Enter a number and click OK:</p>
<input id="id1" type="number" min="100" max="300"> <button onclick="myFunction()">OK</button> <p>If the number is less than 100 or greater than 300, an error message will be displayed.</p> <p id="demo"></p> <script> function myFunction() { var inpObj = document.getElementById("id1"); if (inpObj.checkValidity() == false) { document.getElementById("demo").innerHTML = inpObj.validationMessage; } else { document.getElementById("demo").innerHTML = "Input OK"; } } </script>
</body> </html> Changing HTML Style <!DOCTYPE html> <html> <body> <p id="p1">Hello World!</p> <p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color = "blue"; document.getElementById("p2").style.fontFamily = "Arial"; document.getElementById("p2").style.fontSize = "larger"; </script> <p>The paragraph above was changed by a script.</p> </body> </html>
Java script

Java script

  • 1.
    JavaScript - Syntax JavaScriptcanbe implementedusingJavaScriptstatementsthatare placedwithinthe <script>... </script> HTML tags in a webpage. youcan place the <script> tags,containingyourJavaScript,anywhere withinyouwebpage,butitis normallyrecommendedthatyoushouldkeepitwithinthe <head>tags. Helloworldin JavaScript <html> <body> <script language="javascript"type="text/javascript"> document.write("HelloWorld!") </script> </body> </html> Case Sensitivity JavaScript is a case-sensitive language. This means that the language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters. Comments in JavaScript JavaScript supports both C-style and C++-style comments, Thus −
  • 2.
     Any textbetween a // and the end of a line is treated as a comment and is ignored by JavaScript.  Any text between the characters /* and */ is treated as a comment. This may span multiple lines.  JavaScript also recognizes the HTML comment opening sequence <!--. JavaScript treats this as a single-line comment, just as it does the // comment.  The HTML comment closing sequence --> is not recognized by JavaScript so it should be written as //-->. JavaScript Output JavaScript can "display" data in different ways:  Writing into an alert box, using window.alert().  Writing into the HTML output using document.write().  Writing into an HTML element, using innerHTML.  Writing into the browser console, using console.log(). ***Writing into an alert box, using window.alert(). <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> window.alert(5 + 6); </script> </body> </html>
  • 3.
    Using document.write() <!DOCTYPE html> <html> <body> <h1>MyFirst Web Page</h1> <p>My first paragraph.</p> <script> document.write(5 + 6); </script> </body> </html> Using innerHTML <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My First Paragraph</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = 5 + 6; </script> </body> </html>
  • 4.
    What Is aRegular Expression? A regular expression is a sequence of characters that forms a search pattern. When you search for data in a text, you can use this search pattern to describe what you are searching for. A regular expression can be a single character, or a more complicated pattern. Regular expressions can be used to perform all types of text search and text replace operations. JavaScript Form Validation HTML form validation can be done by a JavaScript. If a form field (fname) is empty, this function alerts a message, and returns false, to prevent the form from being function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("Name must be filledout"); return false; } } <!DOCTYPE html> <html> <body>
  • 5.
    <form action="demo_form.asp" method="post"> <inputtype="text"name="fname" required> <input type="submit"value="Submit"> </form> <p>If you clicksubmit, without fillingout the text field, your browser will display an error message.</p> </body> </html> Basic FormValidation <script type="text/javascript"> <!--
  • 6.
    // Form validationcode will come here. function validate() { if( document.myForm.Name.value == "" ) { alert( "Please provide your name!" ); document.myForm.Name.focus() ; return false; } if( document.myForm.EMail.value == "" ) { alert( "Please provide your Email!" ); document.myForm.EMail.focus() ; return false; } if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) || document.myForm.Zip.value.length != 5 ) { alert( "Please provide a zip in the format #####." ); document.myForm.Zip.focus() ; return false; } if( document.myForm.Country.value == "-1" ) { alert( "Please provide your country!" ); return false; } return( true ); } //--> </script> Data Format Validation <script type="text/javascript"> <!--
  • 7.
    function validateEmail() { var emailID= document.myForm.EMail.value; atpos = emailID.indexOf("@"); dotpos = emailID.lastIndexOf("."); if (atpos < 1 || ( dotpos - atpos < 2 )) { alert("Please enter correct email ID") document.myForm.EMail.focus() ; return false; } return( true ); } //--> </script> The checkValidity() Method <!DOCTYPE html> <html> <body> <p>Enter a number and click OK:</p>
  • 8.
    <input id="id1" type="number"min="100" max="300"> <button onclick="myFunction()">OK</button> <p>If the number is less than 100 or greater than 300, an error message will be displayed.</p> <p id="demo"></p> <script> function myFunction() { var inpObj = document.getElementById("id1"); if (inpObj.checkValidity() == false) { document.getElementById("demo").innerHTML = inpObj.validationMessage; } else { document.getElementById("demo").innerHTML = "Input OK"; } } </script>
  • 9.
    </body> </html> Changing HTML Style <!DOCTYPEhtml> <html> <body> <p id="p1">Hello World!</p> <p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color = "blue"; document.getElementById("p2").style.fontFamily = "Arial"; document.getElementById("p2").style.fontSize = "larger"; </script> <p>The paragraph above was changed by a script.</p> </body> </html>