Javascript Examples with Code for Beginners

These are some examples of JavaScript methods and functions that briefly show some of the great front-end capabilities of this language on websites and applications.

How javascript converts a string to uppercase letters example

code:



<p id="a">Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua...</p>


<button onclick="textUp()">CLICK</button>

<script>
function textUp() {
var x = document.getElementById("a");
var y=x.innerText.toUpperCase();
x.innerHTML=y;
}
</script>

result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

JSFiddle

Example javascript text string length property

code:



<p id="abc">Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua...</p>


<button onclick="textCounter()">CLICK</button>

<script>
function textCounter() {
var x = document.getElementById("abc");
var y = x.innerText.length;
var text=document.getElementById("xy");
text.innerHTML="Length this text is: " + y;
}
</script>

result:

Example how change the text content using JavaScript

code:



<p id="m">He drives an old black Mercedes.</p>

<button onclick="textChange()">CLICK</button>

<script>
function textChange() {
var text=document.getElementById("m").innerText;

var newText=text
   .replace("He", "SHE")
   .replace("old", "NEW")
   .replace("Mercedes", "AUDI");
document.getElementById("m").innerText=newText;
}
</script>

result:

He drives an old black Mercedes.

Example how to add a class name to an element with JavaScript

code:



<style>
.threeD {
  background-color:#2d3e43; 
  font-size:90px;
  color:white;
  -webkit-text-stroke: 1px silver;
  text-shadow:
    1px 1px 0px #c4dbe2,
    2px 2px 0px #b4d1d9,
    3px 3px 0px #a6c6cf,
    4px 4px 0px #94b8c3,
    5px 5px 0px #87aeb9,
    6px 6px 0px #7aa3af
}
</style>

<p id="myDiv">IT <br> present</p>

<button onclick="myFunction()">CLICK</button>

<script>
function myFunction() {
  var element = document.getElementById("myDiv");
  element.classList.add("threeD");
}
</script>

result:

IT
present

JSFiddle

Example how change image in javascript

code:




<img src="images/flower.jpg" id="flw">

<button onclick="changeImg()">CLICK HERE</button>

<script>
 
 function changeImg() {
 var photo=document.getElementById("flw");
 photo.src="sunflower.jpg";
   }
</script>

result:

JSFiddle

How add sound effects - Example

code:





<img src="dog.png" onmouseover="barking()">


<script>
 
 function barking() {
 var dog=new Audio("vau.mp3");
 dog.play();
   }
</script>

result:

set computer mouse over dog image

Example Drop Down Navigation Menu with Show/Hide an Element

code:



<div id="menu">
 <button id="btn1" onClick="tgl()">OPEN</button>
  <div id="list" style="display:none;">
   <a href="/html/">HTML</a><br>
   <a href="/css/">CSS</a><br>
   <a href="/javascript/">JAVASCRIPT</a><br>
 <button id="btn2" onClick="tgl()">CLOSE</button>
 </div>
</div>

<script>
var aa=document.getElementById("list");
function tgl(){
  if(aa.style.display==="none"){
   aa.style.display="block";
 }else{
 aa.style.display="none";
 }
}
</script>

result:

Example JavaScript HTML DOM Animation

code:



<style>
#mark {
 position: absolute;
 left: 170px;
 z-index:1;
    }
</style>
<img id="mark" src="https://itpresent.com/img/mark.png">
<img id="roto" src="https://itpresent.com/img/wheel.png">
<br><br><br><br><br><br>
<button onclick="spin()">CLICK HERE</button> 
       
<script>
const wheel = document.getElementById("roto");
const start = document.querySelector("button");
let deg = 10;    
    
    function spin() {
start.style.pointerEvents = "none"
deg = Math.floor(3000 + Math.random() * 3000)
wheel.style.transition = "all 4s ease-out"
wheel.style.transform = `rotate(${deg}deg)` 
           }
wheel.addEventListener("transitionend", () => {
start.style.pointerEvents = "auto"
wheel.style.transition = "none"
const actualDeg = deg %  360
wheel.style.transform = `rotate(${actualDeg}deg)` 
       }) 
</script>

result:

Example javascript current date and time and stopwatch

code:



<button onclick="timeNow();start()">CLICK</button>
<p id="b"></p>
<div class="time">
 <span id="min">00</span>
 <span id="sec">00</span>
 <span id="ms">00</span>
</div>
<script>
function timeNow() {
var a=new Date();
var sas=document.getElementById("b");
sas.innerHTML=a.toLocaleTimeString();
setInterval(timeNow,1000);
 }
var timer = 0;
var timerInterval;
var ms=document.getElementById("ms");
var sec=document.getElementById("sec");
var min=document.getElementById("min");

function start() {
timerInterval=setInterval(function() {
timer +=1/60;
msVal = Math.floor((timer-Math.floor(timer))*100);
secondVal=Math.floor(timer)-Math.floor(timer/60)*60;
minuteVal=Math.floor(timer/60);
ms.innerHTML=msVal<10? "0"+ msVal.toString():msVal;
sec.innerHTML=secondVal<10? "0"+secondVal.toString():secondVal;
min.innerHTML=minuteVal<10? "0"+minuteVal.toString():minuteVal;
  }, 1000/60);
}
</script>

result:

00 00 00

JSFiddle

Example javascript method how open a browser new window

code:




<button onClick="openWindow()">CLICK</button>
 
<script>
 function openWindow() {
 var newtab = window.open("","_blank",
 "top=200,left=300,width=300,height=400");
 newtab.document.write("<div id=´ram´><h1>IT PRESENT <br> wellcome</h1><p>❤️❤️❤️❤️❤️❤️❤️💚💙💜💚💖💘💝💟💟💟💟💟💟😃😄😁😆😅😂🤣🌹🥀🌺🌸🌼🌻🙆🏻🙆🏻‍♂️🙋🏻‍♀️🙋🏻🙋🏻‍♂️🧏🏻‍♀️🧏🏻</p>");
}
</script>

result: