Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: js

Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: js
Showing posts with label js. Show all posts
Showing posts with label js. Show all posts

Javascript Autocomplete Location Tutorial

Javascript Autocomplete Location Tutorial

JavaScript AutoComplete Location

Sometimes we need a autocomplete Textfield in Web Development where we enter only some values then address will show suggestion now we can implement this Types of Input fields.?

Lets Start Today!.

Step  1 : Visit Google Developer Console .



Google Maps Developer


Step 2 : Select  "Google Places API JavaScript Library"

     LinkGoogle Place Api
Google Place Library


Step 3 : Click on Get Key Then .


Google Api key

Step 4 : Create a new project

Google map project

Step 5 : Copy Key .

Api key

Now Let's Start Our Code . 

index.html

 
<!DOCTYPE html>
<html>
<head>
 <title>Google Place</title>
</head>
<body>
 <input type="text" placeholder="Searc place" id="autocomplete">

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&key=YOUR_API_KEY"></script>
<script type="text/javascript">

 //===================function for set input to google auto complete===================
 function AutoComplete() {
       var input = document.getElementById('autocomplete');
            new google.maps.places.Autocomplete(input);
 }

     //=============Call  function when our page load completes====================
     google.maps.event.addDomListener(window, 'load', AutoComplete);

</script>
</body>
</html>
 
 
autocomplete location input
 Thanks!
0

Javascript Basics


Javascript Basics



Javascript is a client side popular language used in many things like in our website, Hybrid Mobile Application, etc.

In Earlier Javascript is used only in websites But now a days javascript is very and used in many devices.

What Javascript Can Do?

Javascript in Web Can Change HTML tags ,CSS Style, HTML Attributes, HTML Contents, HIDE Elements, Show Elements.

Javascript in Mobile Application Can Call Native Java Functions, Swift function , C# functions and Methods of different programing languages.

Where to Put javascript Codes?

Javascript can be Call in web Page by two methods : -

1. By using Internally
Javascript Codes Must be Inside in Script tag

Example :-

<html>
<head>
<!--Adding javascript in our page-->
<script>
alert(“Calling javascript”); //calling alert function
</script>
</head>
<body>
<h2>Javascript Basics</h2>
</body>
</html>

2.By using Externally

Example :-

page.html

<html>
<head>
<!--Adding javascript in our page-->
<script src=”script.js”></script>
</head>
<body>
<h2>Javascript Basics</h2>
</body>
</html>
script.js

alert(“Calling javascript”); //calling alert function


Note :- Javascript is must different from java

Javascript Outputs

JavaScript can display data in different Such Ways :
  • Writing into an alert box, using alert().
  • Writing into the HTML output using document.write().
  • Writing into an HTML element, using innerHTML.
  • Writing into the browser console, using console.log().


Using alert
<html>
<body>
<h2>Javascript basics</h2>

<script>
alert(Hello Js);
</script>

</body>
</html>


Using document.write
<html>
<body>
<h2>Javascript basics</h2>

<script>
document.write(Hello javascript);
</script>

</body>
</html>

Using document.write
<html>
<body>
<h2>Javascript basics</h2>

<script>
document.write(Hello javascript);
</script>

</body>
</html>

Using innerHTML

<html>
<body>

<h2>Javascript basics</h2>

<p id="display"></p>

<script>
document.getElementById("display").innerHTML = hello javascript;

//here document.getElementById is a selector which select the html elements by using id and change the text inside this tag
</script>

</body>
</html>

Using console.log

<html>
<body>

<h2>Javascript basics</h2>

<script>
console.log(hello javascript);

//open your browser console by pressing F12 Key

</script>

<
/body>
<
/html>

Javascript Syntax

Javascript Statements Must be End With (;) Semicolon

Javascript Use var keyword to Store and Declare variable

Javascript Concatinate using +

Example : var a=”hello”+” ”+”Js”

Javascript Comments
//This is single line comments
/*This is Multi Line comments */

Thank You
1

Javascript Functions


Javascript Functions


Learn How To Create Functions in Javascript.
Javascript Function are of Four Types :-

a. No Argument With No Return Type
b.No Argument With Return Type
c.Argument With No Return type
d.Argument With return Type

Now Lets Start.

Example of function :-

function hello() // create function hello
{
//body and scope of function
}


1. No Argument With No Return Type

Code : -

<html>
<head>
<script>

function hello() // Create a function hello with no argument
{
console.log( “Calling Function hello”);
}

hello(); // Calling Function hello
// Output : Calling Function Hello in Your Console By Clicking On F12
</script>
</head>
<body>
<h2>Javascript Functions Tutorial</h2>
</body>
</html>

2. No Argument With Return Type

Code : -

<html>
<head>
<script>

function hello() // Create a function hello with no argument
{
var str=“Calling Function hello”;
return str; // Return Value
}

var srt1=hello(); // Calling Function hello Here We Use Echo To Print
console.log(str1); //Because it Only Return Value Not Print it
// Output : Calling Function Hello
</script>
</head>
<body>
<h2>Javascript Functions Tutorial</h2>
</body>
</html>

3. Argument With No Return Type

Code : -

<html>
<head>
<script>

function hello(a) // Create a function hello with argument
{
console.log(a); // Print Value
}

var ab=”hello test”;

hello(ab); // Calling Function hello With Parameter ab
// Output : hello test
</script>
</head>
<body>
<h2>Javascript Functions Tutorial</h2>
</body>
</html>

4. Argument With Return Type

Code : -

<html>
<head>
<script>

function hello(a) // Create a function hello with argument
{
var a=a.toLocaleUpperCase(a);
return a; // Return Value
}

var ab=”hello test”;

var out=hello(ab); // Calling Function hello With Parameter ab
console.log(out); // Output : Hello test Here first letter of word is capital
</script>
</head>
<body>
<h2>Javascript Functions Tutorial</h2>
</body>
</html>
Thank You
0