javascript Archives - https://mitindia.in/tag/javascript/ Fri, 31 Mar 2023 05:21:48 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://mitindia.in/wp-content/uploads/2023/03/cropped-android-chrome-512x512-1-32x32.png javascript Archives - https://mitindia.in/tag/javascript/ 32 32 JavaScript built-in functions https://mitindia.in/built-in-javascript-functions/ Fri, 31 Mar 2023 05:21:48 +0000 https://www.mitindia.in/?p=1784 Built-in Functions : JavaScript  Javascript functions (in the place of console.log(), you can use document.write() see output on browser) let num = 1234.5678; console.log(num.toExponential(2)); // Output: 1.23e+3 let num = 123.456; console.log(num.toFixed(2)); // Output: 123.46 let num = 1234567.89; console.log(num.toLocaleString(‘en-US’)); // Output: 1,234,567.89 let num = 123.456; console.log(num.toPrecision(5)); // Output: 123.46 let num = 123; […]

The post JavaScript built-in functions appeared first on .

]]> Built-in Functions : JavaScript 

Javascript functions (in the place of console.log(), you can use
document.write() see output on browser)

let num = 1234.5678;
console.log(num.toExponential(2)); // Output: 1.23e+3

let num = 123.456;
console.log(num.toFixed(2)); // Output: 123.46

let num = 1234567.89;
console.log(num.toLocaleString(‘en-US’)); // Output: 1,234,567.89

let num = 123.456;
console.log(num.toPrecision(5)); // Output: 123.46

let num = 123;
console.log(num.toString()); // Output: “123”

let num = 123;
console.log(num.valueOf()); // Output: 123

let str = “Hello World”;
console.log(str.charAt(0)); // Output: “H”

let str = “Hello World”;
console.log(str.charCodeAt(0)); // Output: 72

let str1 = “Hello”;
let str2 = “World”;
console.log(str1.concat(” “, str2)); // Output: “Hello World”

let str = “Hello World”;
console.log(str.indexOf(“World”)); // Output: 6

let str = “Hello World”;
console.log(str.lastIndexOf(“l”)); // Output: 9

let str1 = “Hello”;
let str2 = “hello”;
console.log(str1.localeCompare(str2)); // Output: -1

let str = “Hello World”;
console.log(str.length); // Output: 11

let str = “The quick brown fox jumps over the lazy dog”;
console.log(str.match(/the/gi)); // Output: [“the”, “the”]

let str = “Hello World”;
console.log(str.replace(“World”, “Universe”)); // Output: “Hello
Universe”

let str = “The quick brown fox jumps over the lazy dog”;
console.log(str.search(“fox”)); // Output: 16

let str = “Hello World”;
console.log(str.slice(0, 5)); // Output: “Hello”

let str = “Hello World”;
console.log(str.split(” “)); // Output: [“Hello”, “World”]

let str = “Hello World”;
console.log(str.substr(6, 5)); // Output: “World”

let str = “Hello World”;
console.log(str.substring(6, 11)); // Output: “World”

let str = “Hello WORLD”;
console.log(str.toLocaleLowerCase()); // Output: “hello world”

let str = “Hello World”;
console.log(str.toLocaleUpperCase()); // Output: “HELLO WORLD”

let str = “Hello WORLD”;
console.log(str.toLowerCase()); // Output: “hello world”

let str = “Hello World”;
console.log(str.toUpperCase()); // Output: “HELLO WORLD”

let date = new Date();
console.log(date); // Output: current date and time

let date = new Date();
console.log(date.getDate()); // Output: current day of the month

let date = new Date();
console.log(date.getDay()); // Output: current day of the week (0-6)

let date = new Date();
console.log(date.getFullYear()); // Output: current year (e.g. 2021)

let date = new Date();
console.log(date.getHours()); // Output: current hour (0-23)

let date = new Date();
console.log(date.getMilliseconds()); // Output: current millisecond (0-
999)

let date = new Date();
console.log(date.getMinutes()); // Output: current minute (0-59)

let date = new Date();
console.log(date.getMonth()); // Output: current month (0-11)

let date = new Date();
console.log(date.getSeconds()); // Output: current second (0-59)

let x = 10;
let y = 20;
let result = eval(‘x + y’);
console.log(result); // Output: 30

let angle = Math.PI / 4;
console.log(Math.sin(angle)); // Output: 0.7071067811865476
console.log(Math.cos(angle)); // Output: 0.7071067811865475
console.log(Math.tan(angle)); // Output: 0.9999999999999999

console.log(Math.abs(-10)); // Output: 10
console.log(Math.ceil(1.5)); // Output: 2
console.log(Math.floor(1.5)); // Output: 1
console.log(Math.log(10)); // Output: 2.302585092994046
console.log(Math.max(1, 2, 3)); // Output: 3
console.log(Math.min(1, 2, 3)); // Output: 1
console.log(Math.pow(2, 3)); // Output: 8
console.log(Math.random()); // Output: a random number between 0
and 1
console.log(Math.round(1.5)); // Output: 2
console.log(Math.sin(Math.PI / 2)); // Output: 1
console.log(Math.sqrt(25)); // Output: 5

Share

The post JavaScript built-in functions appeared first on .

]]> java script events https://mitindia.in/java-script-events/ Sat, 07 Jan 2023 07:48:30 +0000 https://www.mitindia.in/?p=1299 The document.getElementById() returns an Element object representing the element whose id property matches the specified string. Following are example based on document.getElementById: Checkbox event demo <!DOCTYPE html> <html> <head> <style> body{background-image: linear-gradient(to bottom, green, lightgreen);background-repeat: no-repeat; color:white; border-radius: 20px;"} </style> </head> <body> <h1 style="background-image: linear-gradient(to right, red, orange); color:white; border-radius: 20px;"> Chose your educational qualification</h1> […]

The post java script events appeared first on .

]]> The document.getElementById() returns an Element object representing the element whose id property matches the specified string.

Following are example based on document.getElementById:

  1. Checkbox event demo
<!DOCTYPE html>
<html>
<head>
<style>
    body{background-image: linear-gradient(to bottom, green, lightgreen);background-repeat: no-repeat; color:white; border-radius: 20px;"}
</style>
</head>

<body>

<h1 style="background-image: linear-gradient(to right, red, orange); color:white; border-radius: 20px;"> Chose your educational qualification</h1>


<form>
<input type="checkbox" name="edu" value="Degree">Under Graduate<br>
<input type="checkbox" name="edu" value="PostGraduate">Post Graduate <br>
<input type="checkbox" name="edu" value="Diploma">Diploma <br>
<br>
<input type="button" onclick="fun()" value="Show">

<input type="text" id="print" size="50">
</form>

<script>
function fun() {
  var e = document.forms[0];
  var txt = "";
  var i;
  for (i = 0; i < e.length; i++) {
    if (e[i].checked) {
      txt = txt + e[i].value + " ";
    }
  }
  document.getElementById("print").value = "Your qualification: " + txt;
}
</script>


<p style="background-image: linear-gradient(to right, teal, white); color:black; text-align: justify;">
<b>Note: </b>The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly. </p> 
</body>
</html>

Output of above code is:

2. Radio button event demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

<style>
    body{background-image: linear-gradient(to bottom, green, lightgreen);background-repeat: no-repeat; color:white; border-radius: 20px;"}
</style>

<script type="text/javascript">
    function r1() {
  var x = document.getElementById("cash").checked;
  document.getElementById("disp").innerHTML = "You selected :<b> Cash";
}

function r2() {
  var y = document.getElementById("upi").checked;
  document.getElementById("disp").innerHTML = "You selected : <b> UPI";
}

function r3() {
  var y = document.getElementById("net").checked;
  document.getElementById("disp").innerHTML = "You selected : <b> Net Banking";
}

</script>
</head>
<body>
    <center>
<h1 style="background-image: linear-gradient(to right, red, orange); color:white; border-radius: 20px;"> Radio button with event </h1>
Mode of Payment: 
<input type="radio" name="mop" id="cash" value="Cash" onclick="r1()">Cash
<input type="radio" name="mop" id="upi" value="UPI" onclick="r2()">UPI
<input type="radio" name="mop" id="net" value="Net Banking" onclick="r3()">Net Banking

<p id='disp'> </p>
<br><br>
<p style="background-image: linear-gradient(to right, green, lightgreen); color:white; border-radius: 20px;">MIT India </p>


<p style="background-image: linear-gradient(to right, gray, white); color:black; text-align: justify;">
<b>Note: </b>The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly. </p>


</body>
</html>

output of above code is:

3. Combo box event demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

<style>
    body{background-image: linear-gradient(to right, green, lightgreen);border-radius: 20px;"}
</style>
<script type="text/javascript">
   function fun() {
  var x = document.getElementById("mop").value;
  document.getElementById("disp").innerHTML ="Your mode of payment is <b><u>"+ x;
}
 </script>
</script>
</head>
<body>
    <center>
<h1 style="background-image: linear-gradient(to right, red, orange); color:white; border-radius: 20px;"> Combo with event </h1>
Mode of Payment: 
<select id="mop">
<option value="Cash"> Cash </option>
<option value="UPI"> UPI </option>
<option value="Net Banking"> Net Banking </option>
</select>
<input type="button" name="b1" value="Check" onclick="fun()">
<p id='disp'> </p>
<br><br>
<p style="background-image: linear-gradient(to right, teal, lightgreen); color:white; border-radius: 20px;">MIT India </p>

<p style="background-image: linear-gradient(to right, white, green, white); color:black; text-align: justify;">
<b>Note: </b>The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly. </p>

</body>
</html>

output of above code is:

Share

The post java script events appeared first on .

]]> Phone and Email Validation – Javascript https://mitindia.in/phone-and-email-validation-javascript/ Wed, 15 May 2019 05:28:21 +0000 http://www.mitindia.in/?p=956 Phone and Email Address validation using Javascript The below example with source code explains how to validate phone/mobile number and email address. Source code: [Create the following program in an editor] <html> <head> <script type=”text/javascript”> function Validation() { var a=document.form.phone.value; var b=document.form.email.value; if(a==””) { alert(“please Enter the Contact Number”); document.form.phone.focus(); return false; } if(isNaN(a)) { […]

The post Phone and Email Validation – Javascript appeared first on .

]]> Phone and Email Address validation using Javascript

The below example with source code explains how to validate phone/mobile number and email address.

Source code: [Create the following program in an editor]

<html>
<head>
<script type=”text/javascript”>
function Validation()
{
var a=document.form.phone.value;
var b=document.form.email.value;
if(a==””)
{
alert(“please Enter the Contact Number”);
document.form.phone.focus();
return false;
}
if(isNaN(a))
{
alert(“Enter the valid Mobile Number(Like : 9876543210)”);
document.form.phone.focus();
return false;
}
if(a.length!=10)
{
alert(” Your Mobile Number must be 10 Integers”);
document.form.phone.select();
return false;
}

len=b.length
for(i=2; i<len; i++)
{
if(b.charAt(i)==’@’)
{ return true}
}
alert(“Invalid EmailId”)
return false

}
</script>
</head>
<body>
<form name=”form” method=”post” onsubmit=”return
Validation()”>
<table border=1 style=”background-color:khaki; border-radius:5px
5px 5px 5px ” align=”center”>
<tr>
<td style=”background-color:cyan”> Mobile No:</td>
<td><input type=”text” name=”phone”
style=”background-color:yellow; border-radius:5px 5px 5px 5px”>
</td>
</tr>

<tr>
<td style=”background-color:cyan”> Email ID:</td>
<td><input type=”text” name=”email”
style=”background-color:yellow; border-radius:5px 5px 5px
5px”></td>
</tr>

<tr>
<td></td>
<td><input type=”submit” name=”sub” value=”Submit”
style=”background-color:green; color:white; border-radius:15px
15px 15px 15px”></td>
</tr>
</form>
</body>
</html>

 

And to see an output as following in a browser.

Phone and Email validation

also, read on Internet of Things [IoT] Here

Share

The post Phone and Email Validation – Javascript appeared first on .

]]> AngularJS https://mitindia.in/angularjs/ Tue, 27 Mar 2018 06:03:28 +0000 http://www.mitindia.in/?p=865 What is AngularJS? AngularJS is a front-end open source javascript based framework. AngularJS is maintained and developed by Google and its community of developers. Angular JS is written in javascript and its a cross-platform browser supporting tool. Here the more focus is on HTML web apps with best user experience across different screen sizes (Mobile/Desktop/Projector […]

The post AngularJS appeared first on .

]]> What is AngularJS?AngularJS

AngularJS is a front-end open source javascript based framework.

AngularJS is maintained and developed by Google and its community of developers.

Angular JS is written in javascript and its a cross-platform browser supporting tool.

Here the more focus is on HTML web apps with best user experience across different screen sizes (Mobile/Desktop/Projector screens etc).

Why ANGULARJS?

  • Defines a number of ways to organize web application at the client side.
  • It enhances HTML by including directives, custom tags, attributes, expressions, templates within HTML.
  • It also encourages MVC design pattern
  • The code can be reused.
  • and its best for Single Page Apps (SPA)

Features of ANGULARJS

  • Declarative HTML approach
  • Easy Data Binding
  • Components can be reused
  • MVC Design Pattern
  • Dependency Injection
  • End to end Integration Testing
  • Routing
  • Templating
  • Modules
  • Services
  • Expressions
  • Filters
  • Directives
  • Form Validation
  • $scope, $http, $routeProvider

Directive

  • The directives can be placed in element names, attributes, class names, as well as comments.
    Directives are a way to teach HTML new tricks.
    A directive is just a function which executes when the compiler encounters it in the DOM.
    <input ng-model=’name’>
    Custom Defined Directives
    <span draggable>Drag ME</span>

ng-app
Use this directive to auto-bootstrap an application.
Only one ng-app directive can be used per HTML document
<html ng-app>

 

Expressions

Expressions are JavaScript-like code snippets that are usually placed in bindings such as {{
expression }}
<body>
1+2={{1+2}}
</body>

Example:

<!DOCTYPE html>
<html>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js”></script>
<body>
<h1> AngularJS Text Entry change event </h1><hr>
<div ng-app=””>
<p>Name: <input type=”text” ng-model=”name”></p>
<p ng-bind=”name”></p>
<p>SUM of two numbers: {{ 4 + 5 }}</p>
<form name=”myForm”>
Email:
<input type=”email” name=”myAddress” ng-model=”text”>
<span ng-show=”myForm.myAddress.$error.email”>Not a valid e-mail address</span>
</form>
</div>
</body>
</html>

You can also read on AI here

Share

The post AngularJS appeared first on .

]]>