Javascript codes: August 2022

Monday, 8 August 2022

Regular Expressions In JS

index.html file

<!DOCTYPE html>
<html lang="en">
<body>
<script>
let re;
re=/hello/i;      //case insensitive
re=/^hello/;      //must start with hello
re=/hello$/;      //must end with hello
re=/h.llo/;       //any char only once 
re=/h*llo/;       //any char more than one time

re=/[ha]llo/;     //only h or a allowed(only 1)
re=/[^ha]llo/;    //any char except h or a allowed(only 1)
re=/[A-Za-z]llo/;   //any alphabet allowed(only 1)
re=/[0-9]llo/;      //any digit allowed(only 1)
re=/hel[a-z]{2}o/;  //any small letter, exactly 2 times
re=/hel[a-z]{1,3}o/;//any small letter,1-3 times.

const res=re.exec('allhello all');
console.log(res);
</script>
</body>
</html>

Exception Handling in JS part-2

index.html

<!DOCTYPE html>
<html lang="en">
<body>
<script>
try{
console.log(p);
}
catch(e){
console.log(e);
}
finally{
console.log("finally block executes no matter what");
}
</script>
</body>
</html>

Exception Handling in JS Part-1

index.html

<!DOCTYPE html>
<html lang="en">
<body>
<script>
try{
eval('hello world')
}
catch(e){
console.log(e);
}
finally{
console.log("finally block executes no matter what");
}
</script>
</body>
</html>

JSON XMLHTTPRequest

index.html

<!DOCTYPE html>
<html lang="en">
<body>
<p id="p1"></p>
<button id='bt1'>click me</button>
<ul>
</ul>
<script src="app.js">
</script>
</body>
</html>

aa.json file

{
    "id":1,
    "name":"abc"
}

app.js file

document.getElementById('bt1')
.addEventListener('click',loadData);
function loadData(){
const xhr=new XMLHttpRequest();
xhr.open('GET','aa.json',true);
xhr.onload=function(){
if(this.status===200){
const customers=JSON.parse(this.responseText);          
let output=
`<li>id:${customers.id}</li>
<li>name:${customers.name}</li>`;
document.getElementById('p1').innerHTML=output;
}
}
xhr.send();
}

Form validation using JS

index.html

    <!DOCTYPE html>
    <html lang="en">
    <body>
    <input type="text" id="input">
    <button type="button" id='btn'>submit</button>
    <script>
    document.getElementById('btn').addEventListener('click',validate);
    function validate(){
    const x=document.getElementById('input').value;
    if(isNaN(x)){
    alert('Please Enter Number');
        }
    }
    </script>
    </body>
    </html>

Form validation in JS

index.html

<!DOCTYPE html>
<html lang="en">
<body>
<input type="text" id="input">
<button type="button" id='btn'>submit</button>
<script>
document.getElementById('btn').addEventListener('click',validate);
function validate(){
const x=document.getElementById('input').value;
if(x==''){
  alert('Please Enter Name');
    }
}
</script>
</body>
</html>

Sunday, 7 August 2022

Change Content and color using querySelectorAll()

index.html

<!DOCTYPE html>
<html lang="en">
<body>
<ul class="uls">
    <li class="lis">home</li>
    <li class="lis">services</li>
    <li class="lis">contact us</li>
    <li class="lis">about us</li>
</ul>   
<script>
const items=document.querySelectorAll('li:nth-child(odd)');
items.forEach(function(item){
item.innerHTML='i am in red color';
item.style.color='red';
});
</script>
</body>
</html>

Changing contents and formatting text using getElementsByClassName()

index.html file

<!DOCTYPE html>
<html lang="en">
<body>
<ul class="uls">
    <li class="lis">home</li>
    <li class="lis">services</li>
    <li class="lis">contact us</li>
    <li class="lis">about us</li>
</ul>   
<script>
    const item=document.getElementsByClassName('lis');
    console.log(item);
    item[0].style.color='blue';
    item[1].textContent='Viva';
    item[2].style.background='gray';
    item[3].style.color='red';
</script>
</body>
</html>

Saturday, 6 August 2022

change content of li using queryselector

index.html

    <!DOCTYPE html>
    <html lang="en">
    <body>
        <p id="p1"></p>
        <ul>
            <li class="lis">home</li>
            <li class="lis">Contact Us</li>
            <li class="lis">About Us</li>
            <li class="lis">Services</li>
        </ul>
       
    <script>
    //change content of 1st li     
    document.querySelector('li').textContent="viva";   
    //changes color of 1st even li
    document.querySelector('li:nth-child(even)').style.color='red';
    //changes color of 3rd li
    document.querySelector('li:nth-child(3)').style.color='blue';
    </script>
    </body>
    </html>

Change content of paragraph as current date on button click event

<!DOCTYPE html>
    <html lang="en">
    <body>
        <p id="p1"></p>
        <button id="btn">Click Me</button>
    <script>
    //change content of paragraph as current date on click event
    document.getElementById('btn').addEventListener('click',onclick);
    function onclick(e){
    const d=new Date();
    document.getElementById('p1').innerHTML=d;
    }
    </script>
    </body>
    </html>

Change content of paragraph on button click event

index.html

    <html>
    <body>
        <p id="p1"></p>
        <button id="btn">Click Me</button>
        <script>
            //change content of paragraph on click event
     document.getElementById('btn').addEventListener('click',onclick);
     function onclick(e){
     document.getElementById('p1').innerHTML="You just clicked Button";
     }
        </script>
    </body>
    </html>

Format text using JS

index.html

    <html >
    <body>
        <p id="p1"></p>
        <script>
            //format text using js
            document.getElementById('p1').innerHTML="<b>viva</b>";
            document.getElementById('p1').style.fontSize='40px';
            document.getElementById('p1').style.color='blue';
            document.getElementById('p1').style.background='red';
        </script>
    </body>
    </html>

Different ways to display hello world using JS

index.html

 <html>
    <body>
        <p id="p1"></p>
        <script>
            //diffrent ways to display hello world using js
            console.log("hello world");
            document.write("hello all");
            document.getElementById('p1').textContent="hello world";
            document.getElementById('p1').innerHTML="hello world";
        </script>
    </body>
    </html>