JavaScript basics

Script tag

To write a JavaScript you need to use script tag <script></script> but is recommended to place in the <head></head> tags of your html document

Hello world in JavaScript

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
          document.write("Hello World!") // use when you like to print content on the Html document
           
           // alert("Hello, World!"); // gives an alert message box with Hello world
    
      </script>
   </body>
</html>

Comments in Java Script

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
          
           
           //First way to  comment
           /* Second way to comment*/
           <!--Third way to comment -->
    
      </script>
   </body>
</html>

<html>
   <head>      
      <script type = "text/javascript">
         <!--
            function sayHello_world() {
               document.write("Hello World!")
            }
         //-->
         /*Some Html input type*/
         /*<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
*/
      </script>     
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello_world()" value = "write hello! world" />
   </body>  
</html>

Variables

Variable is a box where you can store values the variables in JavaScript can be declared as var or let, and for numbers as a const

<!DOCTYPE html>
<html>
<body>
<title>JavaScript Variables</title>
<h2>JavaScript Variables</h2>
<script>
// store input numbers
var num1 = parseInt(prompt('Enter the first number '));
const num2 = parseInt(prompt('Enter the second number '));
//you can declare many variables in one statement.
//var num1=4,num2=4;
//add two numbers
let sum = num1 + num2;
// display the sum
document.write(`The sum of ${num1} and ${num2} is ${sum}`);
</script>

</body>
</html>

JavaScript variables can hold different types of data types such as numbers, strings, and objects

let NUM = 100;                               // Number
let NAME = "Joy";                      // String
let x = {firstName:"Tom", lastName:"Sawyer"};    // Object

The same variable can be used to store the different variable values

var num;           // Now num is undefined
num1 = 200;           // Now num1 is a variable
num2 = 100;      // Now num2 is also a variable

Modify Html elements

In HTML we have the concept called “id”s and the “id”s are a way to reference a specific Html element in your document

document.getElementById("A").innerHTML = "Hello JavaScript!"

Here in the above syntax, the “document” is referring to Html document itself and the method that we use to access the id “A” is called . getElementById(“A”) and we can the change the paragraph tag with help of a property called .innerHTML = “Hello JavaScript!”

<!DOCTYPE html>
<html>
<body>
<p id="A">JavaScript can Can modify the paragraph tag  </p>
<button style=background:#00FFFF;border-style: solid #a30003; type="button" onclick='document.getElementById("A").innerHTML = "Hello JavaScript!"'>Click here!</button>

</body>
</html>

JavaScript can Can modify the paragraph tag