8/01/2018

Javascript Events Tutorial with Complete List of Events

Events in JavaScript, When User or browser tries to manipulate pages then events occurred to handle the JavaScript’s interaction with HTML. As we know, JavaScript works with HTML, So, Everything that happens with pages loading, clicking a button, minimizing the window, click to mouse etc. all are the events. Like if we display any message to the user on a button click, this happens through the events. there are many things you need to study before reading javascript Events. You must know about Functions in Javascript.

All HTML elements like button, textbox, images can contain events that can be triggered using JavaScript code. And all these events are the part of DOM(Document Object Model). Here we will discuss some most frequent Events used in JavaScript:

Table of Content


  • Events in Javascript
  • Event list in JS Graphical 
  • Onclick Event in Javascript
  • OnMouseOver in Javascript
  • Example of Events
  • List of Event in Javascript
  • Keyboard Event operation perform
  • Event Listeners Flow
  • Author

Mouse and Keyboard Javascript Event Listeners list

Onclick Event


OnClick Event occurs when a left mouse button is clicked, Like if you want to show any message or warning or data validation or something on button click you can do using Onclick event. As we display a message box in the example:

Example

<html>
   <head>   
      <script type="text/javascript">     
            function Welcome() {
               alert("Welcome to Programming With Basics")
            }
      </script>   
   </head>
   <body>
      <form>
        <input type="button" onclick="Welcome()" value="Welcome to PWB"/>
      </form>   
   </body>
</html>

OnMouseOver :


Onmouseover event triggers when the mouse comes over the element contains the mouseover event. For example, if you want to highlight or want to change the color of the text when the mouse comes over the element then this event is used.

Example:

<html>
   <head>
      <script type="text/javascript">     
            function over() {
            var x = document.getElementById("div1");
            x.style.color = 'red';
            }     
      </script>   
   </head>
   <body>
      <div id="div1" onmouseover="mouseover()">
         <h2> Mouse Over </h2>
      </div>     
   </body>
</html>

Read: How Controls Flow Works in Javascript.

Keyboard Event and Mouse Events: You can perform keyboard events test bt visiting a https://www.w3.org/2002/09/tests/keys-cancel2.html or you can also check how many keyboard or mouse events are active in a webpage for more information check below picture.

javascript Keyboard listener properties

Press Ctrl + Shift + I or right click of any webpage click to the event listener, you will see a list of event listeners available for the web page. See the event listener in hacker rank programming solutions for day 8.

hackerrank solution event listeners list on browser

Below is the list of above-defined events, there are many more events in JavaScript:



EventDescription
onclickTriggers on mouse click.
OfflineTriggers when the document goes offline
onblurTriggers when the window loses focus
oncanplayTriggers when media can start play, but might has to stop for buffering
OnabortTriggers on an abort event
onafterprintTriggers after the document is printed
onbeforeprintTriggers before the document is printed
oncanplayTriggers when media can start play, but might has to stop for buffering
onbeforeonloadTriggers before the document loads
oncanplaythroughTriggers when media can be played to the end, without stopping for buffering
oncontextmenuTriggers when a context menu is triggered
onclickTriggers on a mouse click
onchangeTriggers when an element changes
ondblclickTriggers on a mouse double-click
ondragoverTriggers at the start of a drag operation
ondragleaveTriggers when an element is being dragged over a valid drop target
ondragenterTriggers when an element has been dragged to a valid drop target
ondragendTriggers at the end of a drag operation
ondragTriggers when an element is dragged
onendedTriggers when media has reach the end
onemptiedTriggers when a media resource element suddenly becomes empty.
ondurationchangeTriggers when the length of the media is changed
ondragstartTriggers at the start of a drag operation
ondropTriggers when dragged element is being dropped
onerrorTriggers when an error occur
onformchangeTriggers when a form changes
onfocusTriggers when the window gets focus
onforminputTriggers when a form gets user input
oninvalidTriggers when an element is invalid
oninputTriggers when an element gets user input
onhaschangeTriggers when the document has change
onkeypressTriggers when a key is pressed and released
oninvalidTriggers when an element is invalid
onkeydownTriggers when a key is pressed
onloadeddataTriggers when media data is loaded
onkeydownTriggers when a key is pressed
onkeyupTriggers when a key is released
onloadeddataTriggers when media data is loaded
onmouseoutTriggers when the mouse pointer moves out of an element
onmousedownTriggers when a mouse button is pressed
onmousemoveTriggers when the mouse pointer moves
onmessageTriggers when the message is triggered
onloadstartTriggers when the browser starts to load the media data
onmouseupTriggers when a mouse button is released
onplayingTriggers when media data has start playing
onmousewheelTriggers when the mouse wheel is being rotated
onoineTriggers when the document comes online
onofflineTriggers when the document goes offline
onpagehideTriggers when the window is hidden
onpageshowTriggers when the window becomes visible
onpauseTriggers when media data is paused
onplayingTriggers when media data has start playing
onplayTriggers when media data is going to start playing
onpopstateTriggers when the window's history changes
onratechangeTriggers when the media data's playing rate has changed
onprogressTriggers when the browser is fetching the media data
onreadystatechangeTriggers when the ready-state changes
onstorageTriggers when a document loads
onstalledTriggers when there is an error in fetching media data
onseekingTriggers when a media element's seeking attribute is true, and the seeking has begun
onscrollTriggers when an element's scrollbar is being scrolled
onseeked
Triggers when a media element's seeking attribute is no longer true, and the seeking has ended
onresizeTriggers when the window is resized
onredoTriggers when the document performs a redo
onsuspend
Triggers when the browser has been fetching media data, but stopped before the entire media file was fetched
onundoTriggers when a document performs an undo
onwaitingTriggers when media has stopped playing, but is expected to resume
ontimeupdateTriggers when media changes its playing position
onvolumechangeTriggers when media changes the volume, also when the volume is set to mute

Event Listeners Flow:


Check the Event Listener Propagations, How Events work when opening a webpage when we click on a button, link etc.

Flow of Mouse Event Listener in Javascript

Author


This in-depth article of Event in JavaScript is written by Suman Yadav.  You can also write to us, Submit your article and be a member of our A Programming Solutions Blog. Join us by sending a well-written article for more information visit Write for Us.
Read More »

7/31/2018

The Secret of Successful Unity Game Programming

Unity Game Programming Success Secret, In this fast-paced world of advancement, there has been constant development in the field of technology. With few spare moments left out for any person at the end of the day, one hardly gets any time for choosing a good recreation. This is where the online(Unity Game)  and mobile games come to rescue people from boredom. However, the fact is some games turn out to gain insane popularity that most of the times make people go crazy for Unity Game.

They search for excuses to play these games(Unity Game) and fascinate about them too. Some games even get a huge amount of fan following right before they get released even. On the other hand, many games fail to live up to the expectations. There are some who are pushed towards extinction and are never desired to be heard of again. Now the question comes to the forefront,” Why do certain games gain insane popularity and why some games fail to do so?”

unity game programming poster

“What are the elements which go into the creation of such games and make it a runaway success? In simpler words, what are the things which make your online or mobile game on unity 3D programming make a huge amount of money? We can now think of considering two of so many parameters that decide the success of any game and that are:

  1. The players of the game desire to come back to play back the game again.
  2. The player of feels like sharing the game with every person on his contact lists.
The first aspect here can be quoted in other words as stickiness. The online game needs to have that sticky feeling which makes people comes back to play again and again. Once any game gets this aspect embedded in it, gaining popularity is only a matter about some days. Such games designed in unity 3D programming(Programming of Unity Game) gain popularity as they form a playing habit among the users.

This ultimately makes the game popular. So big companies get into deeper levels and are not obsessed with devising a product that is technically perfect. They just get into changing certain fundamental aspect in the users; “habits.” You can even perceive it in this way that all big companies build a specific habit in the customers and consumers. And why do they give so much of importance to habit forming?

It is because habit tends to get settled into the daily routines and people do these without making any analysis. This way the gaming firm does not use any additional reminders for reminding you to continue playing the game regularly; people do it every day. The second aspect that plays a huge role in having successful unity 3D programming is the phrase ”Sharing is Caring.”

The element of sharing is one very sophisticated yet subtle method if increasing the popularity of the game. The gaming firm cares about you and wants you to gain more rewards. Hence, they use this strategy for making you have a higher level of the game and improving the score of their success too. This is one wonderful way through which companies are dealing with unity 3D programming gain in their popularity.

This works in multiple ways though. When any game gets many numbers of people playing it, it gets viral. This also adds to the stickiness of the game and makes it viral all over the internet. The companies use the premium pricing strategy. This is heightened when a social context is added within which other users would prefer spending money. When the matter arises about the success of unity 3D programming, there are some more secrets that you can use for sure.
Things that are worth trying in unity 3D programming

  • When beginning with this programming, some programmers might forget that they are using the Play mode. You need to choose “Preferences” and then select “Colors” followed by “Playmode Tint.” This will make the gamers have a more colorful gaming experience.
  • To have an easy and simple positioning of the camera, you can find the exact angle that you would prefer by using navigation in the scene view. Choose the main camera and then choose “align with a view.” You can also use the shortcut of “Ctrl/Cmd+Shift+F.
  • Do you feel like a lack in the assets in the project view? Type the SEARCH terms in the Project View and then later the search to “Asset Store” from “Asset.”
  • While making an object to rotate, you can hold the Ctrl/Cmd for snapping the rotation effect. This method is also applicable to any object that is in motion. The values in default snap can be changed under “Snap settings” in the “Edit menu.
  • You can also is another snapping secret. You can hold the V key down and choose and place objects by using “Vertex Snapping.” This can be of great help when the gaming construction is on par with the modular geometry.
  • Did you find the perfect game values while playing and testing in Play mode? Click on the cog-shaped image present on the top right corner of the inspector’s component and then choose “Copy Component.

Author Bio:


Sunny Chawla is a Marketing Manager at AIS Technolabs – a Web design and Development Company. Helping global businesses with unique and engaging tools for their business. He would love to share thoughts on Ecm Services, Web Designing, and Unity 3D Programming.
Read More »

7/30/2018

Functions in JavaScript Tutorials Updated 2018

Functions in JavaScript are same as any other programming languages. In this article, we are going to discuss functions in depth in javascript. Before you study javascript you need HTML and CSS the reason behind JavaScript is one of the three(HTML, CSS, Javascript) languages that every web designer or developers must learn.

What is a Function in Javascript:


A function is a block of code which can be reused anywhere in the program. The main benefit of a writing a function is that we didn’t need to write the same block of code again and again. Also, functions give us the modular approach of programming where we can break a large line of code program into small modules. Even JavaScript itself provide modular programming like we have many inbuilt functions which are written once in JavaScript and we can use them anywhere in the program. Being a web designer these 6 Facts You Should Know About Web Design.

Table of Content


  • What is a Function in Javascript
  • Javascript details image 
  • Defining a Function in Javascript
  • The syntax of Functions in Javascript
  • Example of a Function in Javascript
  • Explanations of Functions in Javascript
  • Parameters of a Function in Javascript
  • Calling of a Function in Javascript
  • Return Statement in Javascript


Suggestions: Before reading this article about functions in javascript, you have to know about Conditional Statements JavaScript(IF ELSE SWITCH). below is some example of predefined javascript functions.

For example: alert(), getElementbyId(), write() etc. Here we can write our functions too.

functions tutorials in javascript with diagram and list

Defining a Function in Javascript:


The most common way to define a function in JavaScript is to use function keyword before function name, parameter list can be empty or can contain a list of parameters and block of code of the function is written inside the curly braces.

Syntax of a Function in Javascript:


<script type="text/javascript">
        function function-name(parameters)
      {
         Block of code;
      }
  </script>

Example of a Function in Javascript:


<script type="text/javascript">
      function WelcometoPWB()
      {
         alert("Welcome to Programming With Basics");
      }
</script>

Calling of a Function in Javascript:


Calling means to invoke or using a function somewhere in the JavaScript code. A function is called simply by writing the name of that function if there are some parameters then pass those parameters.

Example:

<html>
   <head>
 
      <script type="text/javascript">
         function WelcomeToPWB()
         {
            alert ("Welcome To Programming With Basics!");
         }
      </script>     
   </head>
   <body>
      <p>Click Here </p>     
      <form>
         <input type="button" onclick="WelcomeToPWB()" value="Welcome To PWB">
      </form>       
   </body>
</html>

Parameters of Function in Javascript:


In the Early Examples we use functions without parameters, but as we said earlier we can pass parameters too to a function. These parameters are to be used inside the function and on the basis of the values of these parameters some manipulation inside a function can be done. A function can take more than one parameter separated by a comma.

Example:

<html>
   <head> 
      <script type="text/javascript">
         function sum(num1, num2)
         {
         var sum=num1+num2;
            document.write ("Sum is" + "  " + sum);
         }
      </script>     
   </head>
   <body>
      <form>
         <input type="button" onclick="sum(700, 7)" value="calculate Sum">
      </form>
   </body>
</html>

Return Statement:


JavaScript Function can also have a return statement, But this is optional. If you want a value to return after the function execution you can Write return statement at the end of the function like in the previous example you want to return the sum of two numbers a return statement can be used.

Example :

<html>
   <head>
      <script type="text/javascript">
         function sum(num1, num2)
         {
            var result
             result= num1 + num2
            return result
         }
       
         function NewFunction()
         {
            var total;
            total = sum(700,7);
            document.write("Sum Returned by the called function is" + "  " + total)
         }
      </script>     
   </head> 
   <body>     
      <form>
         <input type="button" onclick="NewFunction()" value="Click Here">
      </form> 
  </body>
</html>

Author:


This in-depth tutorial of Function in Javascript is written by Suman Yadav. Submit your article and be a member of our Programming With Basics | A Programming Solutions Blog Family. You can join us by sending a well-written article for more information visit Write for Us.
Read More »

7/15/2018

Learn Control Flow in Javascript(While, Do-While, For, For/in Loop)

Control flow in javascript is similar to C, C++ or any programming language. Now question is why we need Control flow in javascript or any other programming language, the reason is very simple as we all know that programs are groups of code and software are groups of programs so in a program there is a block of code we have to execute again and again and for saving space we can not write the code again and again to avoid this problem we use Control flow to control flow or block of code instead of writing again and again in programming language. In this tutorial, we will understand Control flow in details with complete syntax and example but before starting tutorials I just want to clear one doubts here in other programming languages we have only three Control flow (For Loop, Do...While Loop, and While Loop) and in Javascript we have one extra Control flow (For - in Loop), yes we have total of four loops in javascript or we can say that four Control flow statements in javascript. Basically, control flow controls the flow of programming and with the help of Loop avoid the repetitive code.

So in this tutorials, we are going to learn the Javascript Control Flow Structures or For Loop control flow javascript or For-In Loop control flow javascript or While Loop control flow javascript or Do-While control flow javascript in depth with complete explanation.

What are we going to learn?


  1. Control Flow
  2. What is Loop
  3. Types of Loops
  4. For Loop 
  5. For – in Loop
  6. While Loop
  7. Do-While Loop
  8. Syntax of Loops
  9. Examples of Loops
  10. Author Bio


Note: I just want to clarify that there is a big difference between Control flow and Conditional Statements tutorials in Javascript. If you don't know about conditions statements I suggest you have to read the Conditional Statements in-depth article before reading this article. this will helps you a lot to understand about flow control flow in javascript.

Control Flow


When a block of code needs to be executed many times with a different value, Then Control statements are required, According to a condition that is satisfied. Basically, Loops are there to avoid the repetitive code.

Loop Learn Control Flow diagram in Javascript
Image Source: Wikipedia


What are the Loops?


In computer programming, a loop is a sequence of instruction s that is continually repeated until a certain condition is reached. Typically, a certain process is done, such as getting an item of data and changing it, and then some condition is checked such as whether a counter has reached a prescribed number or not.

Types of Loops or Loops in JavaScript are:


  1. For Loop 
  2. For – in Loop
  3. While Loop
  4. Do-While Loop

1. For Loop:

For loop is there to execute a block of code multiple times, For Loop is one of the best examples of a control flow of programs in programming statement in Javascript. Below is the syntax of FOR LOOP

Syntax:

for (statement 1; statement 2; statement 3)
{
    code block
}

Statement 1 is Checked or executed once before the execution.
Statement 2 Specify the condition of execution of code.
Statement 3 is executed every time until the specified condition is true.

For example:

for (i = 1; i <= 100; i++)
{
    text += "Value of i is " + i + "<br>";
}

Here i=1 is the statement1 which is executed once when execution of for loop will be started. Basically, we will use this to initialize that variable used by the loop.
I <=100 is statement 2 which is the basic condition that statements will be executed until the value of i will be 100.
i++ is the statement three which is executed every time when control satisfy the defined condition and I will increment by 1 every time.

For Loop Example:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Loops</h2>
<p id="ForLoopdemo"></p>
<script>
var number = "";
var n;
for (n = 0; n < 10; n++) {
    number += " Number is " + n + "<br>";
}
document.getElementById("ForLoopdemo").innerHTML = number;
</script>
</body>
</html>

We can omit these statement:

1.) Statement 1 can be omitted:

You can omit the statement 1 as it is optional for us, You can write it like:

Example:
             Initialize the variable before loop started.
           var Total = 0;
            var i = 1;
           for ( ; i < = 100; i++)
            {
             Total = Total + i;
             }
alert("Sum = " + Total);

2.) Statement 2 can be omitted:

As statement 2 is optional loop will work fine but you can put a break inside the for loop otherwise it will execute infinite times. Initialize the variable before loop started.

Example:

           var Total = 0;
            for (var i = 1 ; ; i++)
            {
             Total = Total + i;
              Break;
             }
             alert("Sum = " + Total);

3.) Statement 3 can be omitted :

  • If you don’t write the statement 3 but it can be incremented inside the for a loop.
  • if you don’t define any of the increment or decrement in the variable it will be executed only once.
  • Initialize the variable before loop started.

Example:

           var Total = 0;
           var i = 1;
           for ( ; i < = 100;)
            {
             Total = Total + i;
             i++;
             }
           alert("Sum = " + Total);

2. For-In Loop

the for..in loop is executed object's properties.

Syntax

for (variablename in object)
{
   code Block;
}

here in For-In Loop each time one property of the object is assigned to the variable and loop continues until object’s properties are exhausted.

Example

<!DOCTYPE html>
<html>
<body>
<p id="ForIn"></p>
<script>
    var book = {AuthorName:"Suman", bookName:"Tutorial", age:25}; 
    var bookProperties = "";
    var attributes;
    for (attributes in book) {
        bookProperties += book[attributes] + " ";
    }
    document.getElementById("ForIn").innerHTML = bookProperties;
</script>
</body>
</html>

3. While Loop

while loop will execute the block of code until the condition we specified is true. When the control comes to condition and found that condition is false control comes out of the loop and execute the exact next statement after the while loop.
While Loop firstly checks the condition then statements are got executed.

while (var < lastvalue)
{
block of code;
}

Example:

<html>
<body>
<script type="text/javascript">
var n=0
while (n<10)
{
document.write("Value of n is " + n)
document.write("<br />")
n=n+1
}
</script>
</body>
</html>

Here loop will be executed 10 times, the value of loop start for n=0 and condition will be true till n=9. When n=10 then the condition will be false and control comes out of the While loop.

While loop Control Flow in Javascript with gif example output


4. Do…While Loop

The do...while loop, you can also say it a variant of a while. Here the block of code will be executed at least once before testing the condition. So even if the condition becomes false though the code will be executed once.

do
{
Block of code;
}
while (var<=lastValue)

Example

<html>
<body>
<script type="text/javascript">
var n=0
do
{
document.write("value of n is " + n)
document.write("<br />")
n=n+1
}
while (n<10)
</script>
</body>
</html>

Tip: Always careful when you use control flow in programming cause if your desire conditions are not matched than your control flow may be infinite or you loop can be endless. so always twice checks the conditions of Loops and you can fix the flow of a program using loops.

Author Bio:


JavaScript Control flow Tutorials is provided by Suman Yadav. Thanks, Suman for the Awesome and Unique article. If you want to submit your article and want to be a member of our Programming With Basics Family Join us by sending a well-written article more information read Write for Us
Read More »