What are basic fundamentals of JavaScript?

According to w3schools JavaScript is the programming language of HTML and the Web. JavaScript is used to add more functionalities to you web applications.

Where to use JavaScritp?

You can use JavaScritp in different ways which we will conver with examples.

1. JavaScript in <head> tag

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 <script>  
 function myFunction(){  
       document.getElementById("txt").innerHTML = "Paragraph changed.";  
 }  
 </script>  
 </head>  
 <body>   
 <p id="txt">This text will be replace!</p>  
 <button id="btn" onclick="myFunction()">Click Here!</button>  
 </body>  
 </html>

2. JavaScript in <body> tag

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 </head>  
 <body>   
 <p id="txt">This text will be replace!</p>  
 <button id="btn" onclick="myFunction()">Click Here!</button>  
 <script>  
 function myFunction(){  
       document.getElementById("txt").innerHTML = "Paragraph changed.";  
 }  
 </script>  
 </body>  
 </html>

3. External JavaScript

index.php

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 <script src="main.js"></script>  
 </head>  
 <body>   
 <p id="txt">This text will be replace!</p>  
 <button id="btn" onclick="myFunction()">Click Here!</button>  
 </body>  
 </html>

main.js

 function myFunction(){  
       document.getElementById("txt").innerHTML = "Paragraph changed.";  
 }

What simply JavaScript can do for you?

JavaScript can do a lot, but here we will use a very simple examples to answer the above questions that what exactly JavaScript can do for you.

JavaScript Can Change HTML Content

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 <script>  
 function myFunction() {  
      document.getElementById("txt").innerHTML = "JavaScript Can Change HTML Content!";  
 }  
 </script>  
 </head>  
 <body>   
 <p id="txt">This is the HTML contect!</p>  
 <button id="btn" onclick="myFunction()">Click Here!</button>  
 </body>  
 </html>

JavaScript Can Change HTML Attributes

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 <script>  
 </script>  
 </head>  
 <body>   
 <button onclick="document.getElementById('bulb').src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxkJ_OzR4FdacfzGLRHQdPBbsdgKh4kbkaibx8C6-0FvwljUg14f0r1fR6pmo3PdkHLkAhnPNuhWJn9Of6RyANYTS94ahvJRQJRqlbtTqY2gdpZ0lCHMYlPssUOS6Fv9F7w7Sl-QRxABE/s1600/pic_bulbon.gif'">ON!</button>  
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmdKnQxuIek86fylt3-tbZ7nro4MeKGmdDMrcrdsG1e7St6dh5jkshyt3T4JM3mvpppa1eAQovMaOPu9bqbbeGiggBYg_SgdwR0J3ZDFu4NoxIkG4Q_s0EKhFEpoIdViiey4NF5u298TE/s1600/pic_bulboff.gif  
 " id="bulb"/>  
 <button onclick="document.getElementById('bulb').src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmdKnQxuIek86fylt3-tbZ7nro4MeKGmdDMrcrdsG1e7St6dh5jkshyt3T4JM3mvpppa1eAQovMaOPu9bqbbeGiggBYg_SgdwR0J3ZDFu4NoxIkG4Q_s0EKhFEpoIdViiey4NF5u298TE/s1600/pic_bulboff.gif'">OFF!</button>  
 </body>  
 </html>

JavaScript Can Change HTML Styles (CSS)

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 <script>  
 </script>  
 </head>  
 <body>   
 <p id="txt">This is simple text example!</p>  
 <button onclick="document.getElementById('txt').style.fontSize='20px'">Click to hange font size!</button>  
 </body>  
 </html>

JavaScript Can Show HTML Elements

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 <script>  
 </script>  
 </head>  
 <body>   
 <p id="txt" style="display:none;">This is simple text example!</p>  
 <button onclick="document.getElementById('txt').style.display = 'block'">Show!</button>  
 </body>  
 </html>

JavaScript Can Hide HTML Elements

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 <script>  
 </script>  
 </head>  
 <body>   
 <p id="txt" style="display:block;">This is simple text example!</p>  
 <button onclick="document.getElementById('txt').style.display = 'none'">Hide!</button>  
 </body>  
 </html>

JavaScript Output

JavaScript mostly used the four ways to display the data.

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().

1. Writing into an alert box, using window.alert().

 <!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>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>JQuery Tutorial</title>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">  
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  
 </head>  
 <body>  
 <script>  
 $(document).ready(function(){  
   window.alert("This will alert");  
 });  
 </script>  
 </body>  
 </html>

2. Writing into the HTML output using document.write().

 <script>  
 $(document).ready(function(){  
   document.write("This is document dot write");  
 });  
 </script>

3. Writing into an HTML element, using innerHTML.

 <body>  
 <p id="text"></p>  
 <script>  
 $(document).ready(function(){  
   document.getElementById("text").innerHTML = "This is the example of innerHTML";  
 });  
 </script>  
 </body>

4. Writing into the browser console, using console.log().

 <script>  
 $(document).ready(function(){  
   console.log(11+10);  
 });  
 </script>

JavaScript Statements

The line of instruction executed by the web browser is called JavaScript statements. JavaScript statements must end with semicolons ; such as the semicolons inside curly brackets(;).

Example:

 document.getElementById("demo").innerHTML = z;

JavaScript Comments

Comments in JavaScript is either single like or more than one line, show in example.

Single line comments start with //

More than one line comments start with /* and end with */

 // Single line comments:  
 document.getElementById("demo").innerHTML = z;  
 /*  
 Double like commnets  
 These lines will be ignored.  
 */  
 document.getElementById("myH").innerHTML = "My First Page";

Wednesday, July 13, 2016