HTML JavaScript

HTML CODES & EXAMPLES

HTML JavaScript

Learn how to add JavaScript to HTML webpages and create interactive buttons, forms, calculations, messages, events and dynamic content.

← HTML CSS Start Learning →

What is JavaScript?

Programming for interactive webpages

JavaScript is a programming language commonly used to make webpages interactive and dynamic. It can respond to user actions, change HTML content, modify CSS, validate forms, perform calculations and work with browser APIs.

Simple idea:HTML creates the structure, CSS creates the design, and JavaScript adds behaviour and interaction.

JavaScript Script Tag

Add JavaScript directly to HTML

script-tag.html

<script>

  alert("Welcome to SNCEC!");

</script>

External JavaScript

Connect a separate JavaScript file

external-js.html

<script src="script.js">
</script>


<!-- script.js -->

alert(
  "Welcome to JavaScript!"
);

JavaScript Variables

Store information in variables

variables.html

let studentName =
  "Rahul";

let course =
  "Computer Application";

let duration =
  6;

console.log(studentName);

console.log(course);

console.log(duration);

let and const

Modern variable declarations

let-const.html

let course =
  "DCA";

course =
  "ADCA";


const institute =
  "SNCEC";


console.log(course);

console.log(institute);

JavaScript Data Types

Different types of values

data-types.html

let name =
  "Amit";

let age =
  20;

let active =
  true;

let marks =
  null;

console.log(
  typeof name
);

console.log(
  typeof age
);

console.log(
  typeof active
);

JavaScript Operators

Perform calculations and comparisons

operators.html

let a = 20;

let b = 10;

console.log(a + b);

console.log(a - b);

console.log(a * b);

console.log(a / b);

console.log(a % b);

console.log(a > b);

JavaScript Functions

Create reusable blocks of code

function.html

function welcome(){

  alert(
    "Welcome to SNCEC!"
  );

}


welcome();

Function Parameters

Pass values into functions

function-parameter.html

function greet(name){

  return "Hello " + name;

}


let message =
  greet("Student");


console.log(message);

JavaScript DOM

Change HTML content dynamically

dom.html

<h2 id="message">
  Old Message
</h2>


<script>

document.getElementById(
  "message"
).textContent =
  "New Message";

</script>

Button Click Event

Run JavaScript when a button is clicked

button-event.html

<button
  onclick="showMessage()">

  Click Me

</button>


<script>

function showMessage(){

  alert(
    "Button clicked!"
  );

}

</script>

Read Input Value

Get information entered by the user

input-value.html

<input
  id="studentName"
  type="text"
  placeholder="Enter your name">


<button
  onclick="showName()">

  Submit

</button>


<p id="result"></p>


<script>

function showName(){

  const name =
    document.getElementById(
      "studentName"
    ).value;

  document.getElementById(
    "result"
  ).textContent =
    "Welcome " + name;

}

</script>

if / else Condition

Make decisions in JavaScript

if-else.html

let marks =
  75;


if(marks >= 40){

  console.log(
    "Pass"
  );

}else{

  console.log(
    "Fail"
  );

}

switch Statement

Handle multiple possible values

switch.html

let day =
  2;


switch(day){

  case 1:
    console.log("Monday");
    break;

  case 2:
    console.log("Tuesday");
    break;

  default:
    console.log("Other day");

}

for Loop

Repeat code multiple times

for-loop.html

for(
  let i = 1;
  i <= 5;
  i++
){

  console.log(i);

}

JavaScript Array

Store multiple values

array.html

const courses = [

  "HTML",

  "CSS",

  "JavaScript",

  "Python"

];


console.log(
  courses[0]
);


console.log(
  courses.length
);

Array forEach()

Process every item in an array

foreach.html

const courses = [

  "HTML",

  "CSS",

  "JavaScript"

];


courses.forEach(
  function(course){

    console.log(course);

  }
);

JavaScript Calculator

Perform calculations

calculator.html

<input
  id="num1"
  type="number"
  placeholder="Number 1">


<input
  id="num2"
  type="number"
  placeholder="Number 2">


<button onclick="calculate()">

  Add

</button>


<p id="answer"></p>


<script>

function calculate(){

  const a =
    Number(
      document.getElementById(
        "num1"
      ).value
    );

  const b =
    Number(
      document.getElementById(
        "num2"
      ).value
    );

  document.getElementById(
    "answer"
  ).textContent =
    a + b;

}

</script>

Change CSS with JavaScript

Modify classes dynamically

classlist.html

<div
  id="box"
  class="box">

  Hello

</div>


<button onclick="changeBox()">

  Change Design

</button>


<script>

function changeBox(){

  document
    .getElementById("box")
    .classList.toggle(
      "active"
    );

}

</script>

Simple Form Validation

Validate user input

validation.html

<input
  id="email"
  type="email"
  placeholder="Email">


<button
  onclick="validateEmail()">

  Check

</button>


<p id="validationResult">
</p>


<script>

function validateEmail(){

  const email =
    document.getElementById(
      "email"
    ).value.trim();

  if(email === ""){

    document.getElementById(
      "validationResult"
    ).textContent =
      "Please enter your email.";

  }else{

    document.getElementById(
      "validationResult"
    ).textContent =
      "Email entered successfully.";

  }

}

</script>