Javascript codes

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>