Introduction to Javascript?

by

JavaScript is a popular programming language used for web development. JavaScript is a versatile scripting language that enables developers to add interactivity, manipulate the DOM (Document Object Model), and create dynamic content on websites. JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else.

Why learn JavaScript?

The most obvious reason for learning JavaScript is if you have hopes of becoming a web developer.Even if you haven’t got your heart set on a tech career, being proficient in this language will enable you to build websites from scratch—a pretty useful skill to have in today’s job market!If you do want to become a web developer, here are some of the main reasons why you should learn JavaScript.

JavaScript Can Change HTML Content?

JavaScript HTML methods is getElementById()

<html>
<head>
<title> My first Java Script Program </title>
</head>
<body>
<h1> My Java program</h1>
<button type="button"
onclick="document.getElementById('rahul').innerHTML = Date()">
click me to dispaly Date and Time.</button>
<p id="rahul"></p>

<h2> Second Paragraph</h2>
<button type="button"
onclick='document.getElementById("sourav").innerHTML = "hello                     friend"'>click me</button>
<p id="sourav"></p>
</body>
</html>

JavaScript Change HTML Attribute Values?

HTML attribute values using JavaScript means you can make things on a webpage, like images or text, change dynamically when you interact with them. Here’s a simple explanation:

Basic Example :-
<head>
<title> MY Attribute Image </title>
<body>
<h1> On of Light </h1>
<button onclick=”document.getElementById(‘Light’).src=’download (1).jpg'”>Turn on Light </button>
<img id=”Light” src=”images.jpg” style=”width:100px”>
<button onclick=”document.getElementById(‘Light’).src=’Red.jpg'”>Turn of Light </button>
</body>
</head>

JavaScript Change HTML Styles CSS?

JavaScript can change how things look on a webpage by modifying their styles, which are often defined using CSS (Cascading Style Sheets). Here’s a simple explanation.

Basic Example :– 

<!DOCTYPE html>
<html>
<head>
    <title>Css Use</title>
    <style>
    h1{color:red;}
    p{ color:darkblue;}
  </style>
<body>
    <h1>Css Work</h1>
    <p id="on">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
    <button type="button" 
    onclick="document.getElementById('on').style.fontSize='30px'">Click me </button>
</body>
</head>
</html>

JavaScript Can Show HTML Elements ?

JavaScript can be used to hide or show HTML elements on a webpage dynamically. This is useful for creating interactive and responsive user interfaces.
Basic Example :–
<!DOCTYPE html>
<html>
<head>
<title> Show Content </title>
<style>
h1{color:blue;}
p{color:chartreuse;}
</style>
</head>
<body>
<h1>Content Show</h1>
<button type=”button” onclick=”document.getElementById(‘print’).style.display=’block'”>Click Me</button>
<p id=”print” style=”display: none”>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, placeat, eaque ipsum dolores, accusantium quaerat laboriosam illo a atque enim deleniti nulla et minus impedit. Itaque sunt
quam fugit tempore.</p>
</body>
</html>

javascript Tag ?

JavaScript tag usually refers to the HTML script tag. This tag is used to add JavaScript code to an HTML document. You can either include an external JavaScript file or directly embed JavaScript code within the HTML using this tag.

Basic Example :– 

<!DOCTYPE html>
<html>
<head>
    <title> Script Tag Learning </title>
</head>
<body>
    <h1> Script Learning </h1>
    <script>
        document.getElementById('ms').innerHTML = "script learning time";
    </script>
    <p id="ms">Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio    blanditiis quas quidem voluptatem harum
aliquid odio officia pariatur maiores fugiat, sapiente, nisi, natus tempora officiis ad iure nostrum. Nesciunt,
beatae.</p>
</body>
</html>

JavaScript Functions Syntax ?

JavaScript functions are basically used to encapsulate logic, making that code more reusable and easier to understand. The syntax for creating a function in JavaScript is quite simple. Functions can take input in the form of parameters and can return a value or output.

Explain:- 

       <!DOCTYPE html>
       <html>
       <head>
       <title> Function Learning </title>
        <style>
            h1{color:blueviolet;}
            p{color:red;}
        </style>
        <script>
            function myfunction(){
            document.getElementById("name").innerHTML = " Icc WorldCup 2024.";
            }
        </script>
    </head>
    <body>
      <h1> Learning </h1>
      <p id="name">like</p>
     <button type="button" onclick="myfunction()">Try Now</button>
    </body>
</html>

Leave a Comment