Domyhomework123.com - programming homework help. Get your programming homework done with expert homework helper. Trust Writemypaper123.com with your paper and you will never regret it.

## JavaScript Tutorial : Introduction to operators in JavaScript - Javascript Arithmetic Operators

Introduction To Operators in JavaScript
1→ Arithmetic Operators
2→ Comparison Operators
3→ Logical Operators
4→ Assignment Operators
5→ Condition Operators

Arithmetic Operators :

Operators   Description         Example
+                   Addition             var c = a + b;
-                    Subtraction        var c = a - b;
*                   Multiplication    var c = a * b;
/                    Division             var c = a / b;
%                  Modulus             var c = a % b;
++                 Increment           var c = ++a;
–                    Decrement         var c = -- a;

Examples on Arithmetic Operator :

```<html>
<body>
<script >
var b = 10,c = 15;
var a = b + c;
document.write(a);
</script>
</body>
</html>
```
Output : 25

Subtraction Example:-
```<html>
<body>
<script >
var b = 10,c = 5;
var a = b - c;
document.write(a);
</script>
</body>
</html>
```
Output : 5

Multiplication Example:-
```<html>
<body>
<script >
var b = 2,c = 3;
var a = b * c;
document.write(a);
</script>
</body>
</html>
```
Output : 6

Division Example:-
```<html>
<body>
<script >
var b = 10,c = 5;
var a = b / c;
document.write(a);
</script>
</body>
</html>
```
Output : 2

Modulus Example:-
```<html>
<body>
<script >
var b = 10,c = 5;
var a = b % c;
document.write(a);
</script>
</body>
</html>
```
Output : 0

Increment Example:-
```<html>
<body>
<script >
var b = 10,c = 5; var a = ++b;//pre-increment b++;//post-increment
var e =b;
document.write(a);
document.write('<br>'); //using HTML code
document.write(e);
</script>
</body>
</html>
```
Output : 11
12

Decrement Example:-
```<html>
<body>
<script >
var b = 10,;
var a = --b;
document.write(a);
</script>
</body>
</html>
```
Output : 9

JavaScript Introduction Part 1 : Checkout : Part 1

JavaScript Introduction Part 2 : Checkout : Part 2

JavaScript Introduction Part 3 : Checkout : Part 3
Konakalla Premsai
I love to make things simple :)

## JavaScript Tutorial : JavaScript in External File with examples - JavaScript Part 3

As we begin to work extensively in JavaScript,we will be likely to find that there are cases that where we are using identical JavaScript code on multiple pages. The Script tag allow us to store the JavaScript in a external file and the include to HTML files.

Example 1 :
```<html>
<script src="1.js" type="text/javascript"></script>
<body>
</body>
</html>
```
• Save this code as abc.html
• External JavaScript file   document.write("this is external js");
• save this code with the extension of .js like 1.js

Output :
this is external js

Usage of Variables in JavaScript :-
The keyword we use here is var.

Syntax : var nameofthevariable;

Example
```<html>
<body>
<script>
var a='example of variable';
var b='10';//
var c=15; //declaration of an integer.

document.write(a);
document.write(b);
document.write(c);
</script>
</body>
</html>
```
Output :
example of variable 1015

Now the data we put inside the single quotes are treated as string data. To declare an integer we must avoid using single quotes. That will be clearly explained in the following example.

Example :
```<html>
<body>
<script >
var b='10';
var c=15;
var d=c+b;

document.write(d);
</script>
</body>
</html>
```
Output : 1015

Example :
```<html>
<body>
<script>
var b = 10;
var c = 15;
var d = c+b;

document.write(d);
</script>
</body>
</html>
```
Output : 25

Explanation:- As we observed in the first example the variable b’s data was given inside the singe  quotes so is was stored as an string type. Now in the second example we declared all the variable as an integer so there Ari thematic operation was done.

Note: var a=10;var b=20;var c=’a+b’;

document.write(c);//output=a+b

because we have given the data inside an singlequotes.

Example :
```<html>
<body>
<script >
var b=10, c=15,d=c+b;
document.write(d);
</script>
</body>
</html>
```
Output : 25
Note:- there was no need to use var to create multiple variables you can also use the above approach.

JavaScript Introduction Part 1 : Checkout : Part 1

JavaScript Introduction Part 2 : Checkout : Part 2
Konakalla Premsai
I love to make things simple :)

## JavaScript Tutorial : Flexibility of using JavaScript anywhere in a HTML document. - JavaScript Part 2

Flexibility of using JavaScript anywhere in a HTML document.
2→ script in body section.
3→ script in both head and body sections.

JavaScript Introduction Part 1 : Checkout

Example 1 :
```<html>
<script>
</script>
<body>
</body>
</html>
```
Output :

Example 2 :
``` <html>
<body>
<script>
document.write("this is inside body");
</script>
</body>
</html>
```
Output :
this is inside body

Example 3 :
```<html>
<script>
</script>
<body>
<script>
document.write("this is inside body");
</script>
</body>
</html>
```
Output :
this is inside body

JavaScript Introduction Part 1 : Checkout
Konakalla Premsai
I love to make things simple :)

## JavaScript Tutorial : Introduction, Types of JavaScript, Syntax, Comments in javascript - JavaScript Part 1

Why javascript?
JavaScript is a lightweight,high-level,dynamic and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the core technologies Web Development. JavaScript is used to make webpages interactive.

Who can learn JavaScript?
One should have prior knowledge of HTML coding and some exposure to object-oriented programming concepts .

Types of JavaScript
Same as CSS JavaScript also of three types
1→External.
2→ Internal.
3→ Inline.

Note:- JavaScript accepts both double and single quotes.

Syntax:
Javascript can be implemented using javascript statements
that are placed within the
```<script> .. </script>
```

Example:
```<html>
<body>
<script>
document.write("Welcome to JavaScript !");
</script>
</body>
</html>
```
Output:
Welcome to JavaScript !

Usage of Semicolons:
In JavaScript semicolons are optional. Unlike C,C++,Java languages JavaScript allows you to omit this semicolon if each of your statements are placed on a separate line.

Example 1:
```<html>
<body>
<script>
var a = 10
var 2 = 20
document.write(a)
document.write(b)
</script>
</body>
</html>
```
Output :
1020

Example 2:
```<html>
<body>
<script >
var a = 10;
var 2 = 20;
document.write(a);
document.write(b);
</script>
</body>
</html>
```
Output:
1020

The basic difference between example 1&2 was after each statement in the example 1 we didnt used semicolon,but in example 2 we used semicolon,basically the output was same in both the scenarios.

Note:- But it is not a good practice to ignore semicolons.

Case Sensitivity:
JavaScript is a case-sensitive language. This means that language variables,keywords etc must always be typed consistent capitalization of letters.
1) Any text between a // and the end of the line will be treated as a comment and it will be ignored by JavaScript.
2) Any text between /* and */ will also be treated as a comment and that will be ignored by JavaScript.
3) Any text between <!-- and //-- > will also be treated as a comment and that will be ignored by JavaScript.

Example:
```<html>
<body>
<script>
<!-- // This is a comment. used for single line comment same as c programming.
/* * This is a multi line comment in JavaScript * It is also similar to comments in C Programming */ //-- >
</script>
</body>
</html>
```

JavaScript Introduction Part 2 : Checkout

Konakalla Premsai
I love to make things simple :)

## Make online quizzes template for website using html , css and javascript

In this tutorial, we will show you how to make an online quiz using HTML, CSS  and the least  Javascript usage. There are so many websites available to provide the online quizzes code but their codes are very difficult to understand as well as difficult to implement. You can easily make online quizzes with the help of simple tags of HTML, CSS, and a bit of javascript.

In the above demo screenshot, I've created only 1 question with 4 multiple choice answers. You can create as many as you like. If you want to add a new question, you just need to copy the code. There is no need to write the code again.

In this quiz system, we used just a bit of javascript. If you don't know how to write/ use  HTML, CSS and javascript, don't worry, i will give you the entire code. If you want to learn html, css and javascript then visit the below links. Here you can learn basic concepts of HTML, CSS and many more languages.

HTML Tutorials : HTML Introduction

CSS Tutorials : CSS Introduction

JavaScript Tutorials: JavaScript Introduction

Let us start to make quiz system :

HTML Code
Design the structure of quiz. Here,we have 2 div elements. First div class "class="scp-quizzes-main"" is main div  to control the quiz structure.  Second div "class="scp-quizzes-data"" is used to control the quiz questions and answers.
```<div class="scp-quizzes-main">
<div class="scp-quizzes-data">
<h3>1. What is the output of the below c code?</h3>
<pre>#include&lt;stdio.h>
main()
{
int x = 5;

if(x=5)
{
if(x=5) printf("Fast");
}
printf("learning");
}</pre>
<br/>
<label for="Fastlearning">1. Fastlearning</label><br/>
<label>2. learning</label><br/>
<label>3. learningFast</label> <br/>
<label>4. Fast</label>
</div>
```
Ratios button is used for multiple answers.  4 radio buttons with the same name are used for each question.
Note : The label for="answer" and input id ="answer" is  written with same name to display the correct answer. To make any option as correct answer, write its label for=" answer" and input id ="answer".

CSS Code
This CSS used for the radio button to change the radio button style.
```input[type=radio] {
display:none;
}
display:inline-block;
width:95%;
border:1px solid #ddd;
margin-bottom:10px;
cursor:pointer;
}
input[type=radio] + label:hover{ border:1px solid #000000;}
background-image: none;
background-color:#0C0;
color:#fff;
border:1px solid #0C0 !important;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
```

```.worngans{ background-color:#F36;color:#fff; border:1px solid #F36 !important;-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;}
```
JavaScript Code
jquery.min.js Javascript files will need to be referenced on the page your quiz is on, in order for the quiz to work. To reference, you'll need to add this line between the opening and closing head tags.
```<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type='text/javascript'></script>
```

This is the javascript where the wrong answer is specified. Add this javascript code between the opening and closing head tags.
```<script type="text/javascript">
\$('label').click(function() {
\$('label').removeClass('worngans');
});
});
</script>
```

If you have any doubts regarding the creation of an android app then leave your doubts in the comment box.

## Create Your Own Photo Filter & Effects Web App and Android App like Instagram Filters Using HTML , CSS and JavaScript

In this tutorial, we are going to create a photo filter and effects web  application and android app like Instagram  filters using html, css and JavaScript. Photo Filters are a fun way to share your mobile photos and computer photos with friends.

The web application allows you to choose a photo from your computer into browser window , and apply filter and effects on it .

In this tutorial, you get to know how to apply the filter and how to make filter using css and JavaScript.
But firstly you should know about the css3 syntax and JavaScript syntax.

Share Filter Image  application works on web browser. Share Filter Image design is a responsive interface. You should also use this interface for your filter android application but firstly know about the How Make Android Apps Using HTML, CSS and JavaScript .

Step 1 : HTML Code
The first step is to write the html code for your interface. Which type of interface you want ? Here is the starting code in index.html file. Here we are loading Share Filter Image web application library and also our styles.css and filter.js files.
```<html>
<body>
<nav class="navbar navbar-default navbar-fixed-top"  id="subnav">
<div class="container">
<div class="" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav sub-nav-option scroll">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Brightness</a>
<li>
<div class="row">
<div class="col-md-12">
Brightness
<br/>
<div align="center">
<span id="brightv" class="per-filter">100 %</span>
</div>
<input id="brightness" class="filter-setting-slider" onChange="brightnessv(this.value)" type="range" min=0 max=200 value="100">
</div>
</div>
</li>
</ul>
</li>
</form>
</ul>
</div>
</div>
</nav>
<div class="container-fluid main-top">
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12"  align="center">
<img  id="img" class="img img-responsive img-thumbnail" src="imgs/default.svg "/>
</div>
</div>
</div>
<div class="container">
<form id="form1" runat="server">
<span>Choose Image</span>
</form>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/filter.js"></script>
</body>
</html>

```
In above code, you can see the ul li tags. These tags are used for making the filter options like Brightness , Blur , Invert , Contrast , Opacity and Saturate.

Step 2 : CSS Code
CSS Code is used to make the structure design and to control the layout of share filter image web application.
The Important CSS code for your application.
```input[type=range]{
-webkit-appearance: none;
background:#CCCCCC;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 20px;
border: none;
background:transparent;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 40px;
width: 40px;
background: goldenrod;
margin-top: -10px;
border:2px solid goldenrod;
cursor:pointer;
}
input[type=range]:hover::-webkit-slider-thumb {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border:2px solid #000;

}
input[type=range]:focus {
outline: none;
}
.per-filter{ font-size:25px; font-weight:300;}
.img{
width: 450px !important;
height:450px !important;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 2px 15px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 2px 15px 0px rgba(0, 0, 0, 0.3);
border: 5px solid white;
}
```
The input[type="range"] is used to change the style of slider. Class .pre-filter is used to show the % of your filter options. It shows how many effects you can apply for image. See Live Demo

Step 3 : JavaScript
This javascript code is used to show the percentage  of how many filter and effects applied.
``` <script type="text/javascript">
function blurv(value){
document.getElementById("bv").innerHTML=value+' %';
}
</script>
```
Blur function is used for the blur filter option. It shows the value in percentage.

The onmousemove event occurs when the pointer is moving while it is over an element.
```function filter() {
var f = \$("#blur").val(),
d = \$("#brightness").val(),
c = \$("#contrast").val(),
b = \$("#opacity").val(),
e = \$("#invert").val(),
a = \$("#saturate").val();
\$("#img").css("-webkit-filter", " blur(" + f + "px) brightness(" + d + "%) contrast(" + c + "%) opacity(" + b + "%) invert(" + e + "%) saturate(" + a + "%)")
}
\$("input[type=range]").change(filter).mousemove(filter);
```

## Make Android Apps Using HTML, CSS and JavaScript

This tutorial shows how to create a JS/HTML android application using the command-line interface (CLI).

So many people ask this question "Is it possible to create an Android app using HTML, CSS and JavaScript?"  Yes, you can develop apps using HTML / CSS / Javascript.

The great thing about Cordova is that you can create a core app in HTML5/CSS3/JS and have it compile to all the platforms at once.

How To Develop Android App

Web APP: This is the part where your application code resides. The application itself is implemented as a web page, by default a local file named index.html, that references CSS, JavaScript, images, media files, or other resources are necessary for it to run. The app executes in a WebView within the native application wrapper, which you distribute to app stores.

Plugins: Plugins are an integral part of the cordova ecosystem. They provide an interface for Cordova and native components to communicate with each other and bindings to standard device APIs. This enables you to invoke native code from JavaScript.  Download Plugins

Mobile OS: Android, Window and IOS

Create your first Android App :

Step 1:

Step 2:
• Open Command Prompt
• Install the cordova module using npm utility of Node.js
C: \> npm install -g cordova
• The cordova module will automatically be downloaded by the npm utility.

Step 3:
• Create the App
• Go to the directory where you maintain your source code, and run a command.
cordova create myapp  com.se.my  HelloWorld

myapp:- Specifies a directory to be generated for your project.
com.se.my:- Java package names.
HelloWorld:- Provides the application's display title.

Step 4:
• The project's directory
C: \> cd myapp

Step 5:
• Command to add the platform
C: \myapp> cordova platform add android
• Command to remove the platform
C: \myapp> cordova platform rm android

Step 6:
• Build the App
C: \myapp> cordova build
• Test the App on an Emulator or Device
C: \myapp> cordova emulate android

How to Upload or Publish the .APK file on Google Play Store

Step 1 – Build the release APK
You’ll need to get cordova to build an APK file for release.

cordova build –release android

Step 2 – Create a Keystore
You’ll need to install Java in order to access the binary called keytool. This binary will produce the keystore files you’ll need for signing the APK.

keytool -genkey -v -keystore <KEYSTORE FILENAME> -alias <KEYSTORE ALIAS> -keyalg RSA -keysize 2048 -validity 10000

The KEYSTORE FILENAME is the output file the keystore data will be saved to. The KEYSTORE ALIAS is a simple alias we’ll use later in the process to identify which key to use within the keystore.

Step 3 – Sign the JAR file
Here we’ll use jarsigner to create an preliminary APK file.

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore <PATH TO KEYSTORE FILE> <PATH TO CORDOVA BUILT APK> <KEYSTORE ALIAS>

The jarsigner will take the keystore, the cordova built APK and the keystore alias and create an APK that needs to be zipaligned.

Step 4 – ZIPAlign the file
Now we simply call zipalign to finish the job.

zipalign -v 4 <PATH TO CORDOVA BUILT APK> <FINISHED APK FILENAME>

The FINISHED APK FILENAME can be anything you wish. This file can then be uploaded to Google Play.

Tutorial Video:
Android app for web designer. This is a very basic process to make and build an android application using a simple html. This is a very simple application that you can install to your android phone - Watch Video Tutorial

If you have any doubt regarding creation of the android app then leave your doubts in comment box.

## Create Calculator using HTML, CSS and JavaScript

In this tutorial,we are going to create a calculator. We need to create a basic structure using HTML, style it using CSS and make it work using JavaScript, which works on browser.

This calculator will only have the division, multiplication, addition and subtraction operations but you can easily include more functions if you need.

You can also use keyboard number keys to calculate the value. Input type are included in the code for a form which makes ‘textfield’ and ‘button’. Every input field is specified with attribute value. The  attribute value specifies the value of an <input> element. Eval() function takes the expression and evaluates it accordingly. ‘On click’ is the event. It occurs when  the user clicks on an element.

HTML CODE:
The following  code is to make html calculator.
```<div align="center">
<form onsubmit="javascript:cal(document.getElementById('valueshow').value);return false;">
<table align="center">
<tbody>
<tr>
<td colspan="4"><input id="valueshow" type="text" value="0" />
</tr>
<tr>
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="1" />
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="2" />
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="3" />
<td><input class="bgoperationcolor" onclick="cals(this.value);" type="button" value="/" />
</tr>
<tr>
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="4" />
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="5" />
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="6" />
<td><input class="bgoperationcolor" onclick="cals('*');" type="button" value="x" />
</tr>
<tr>
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="7" />
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="8" />
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="9" />
<td><input class="bgoperationcolor" onclick="cals(this.value);" type="button" value="-" />
</tr>
<tr>
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="0" />
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="." />
<td><input class="bgclear" onclick="cals(this.value);" type="button" value="C" />
<td><input class="bgoperationcolor" onclick="cals(this.value);" type="button" value="+" />
</tr>
<tr>
<td colspan="4"><input class="equal" onclick="cal(document.getElementById('valueshow').value);" type="button" value="=" />
</td>
</tr>
</tbody>
</table>
</form>
</div>
```
Most of the HTML is coding for all the input buttons and their associated onclick event handlers. All the buttons, except for the = button, will call the cal JavaScript when clicked and passes it’s associated value. The = button calls the calculate JavaScript function and passes the value that is in the text input which represents the string of numbers and operators that were pushed. Two types of inputs text and button are used here on a table within a form element and OnClick event was used to insert button values on the screen or to evaluate the numbers.

CSS CODE:
```//div control the all calculator component like (buttons, text field ). It also control the left, top margin of calculator.
div {
width: 500px;
margin-left: 30%;
margin-top: 5%
}
table {
width: 100%;
border: 2px solid #fff;
box-shadow: 0 0 2px 1px #f1f1f1;
}
input[type="button"] {
border: none;
width: 100%;
font-size: 60px;
outline: none;
height: 90px;
transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
input[type="text"] {
border: none;
width: 100%;
height: 100px;
font-size: 70px;
outline: none;
font-weight: normal;
color: #555
}

//.bgcolornumber class is use for all button number buttons (0-9)
.bgcolornumber {
background-color: #f1f1f1;
color: #333;
transition: all 0.3s ease-in-out;
}
.bgclear {
background: #CC0000;
color: #f9f9f9;
transition: all 0.3s ease-in-out;
}

//.bgoperationcolor is use for all operation buttons (+,-,*,/)
.bgopeationcolor {
background-color: #663399;
color: #f9f9f9;
transition: all 0.3s ease-in-out;
}
.equal {
background-color: #66CC33;
color: #f9f9f9;
transition: all 0.3s ease-in-out;
}
.bgcolornumber:hover {
background-color: #222;
color: #f5f5f5;
transition: all 0.3s ease-in-out;
}
.bgclear:hover {
background-color: #FF0000;
color: #f5f5f5;
transition: all 0.3s ease-in-out;
}
.bgoperationcolor:hover {
background-color: #0033CC;
;
color: #f9f9f9;
transition: all 0.3s ease-in-out;
}
.equal:hover {
background-color: #66FF00;
transition: all 0.3s ease-in-out;
}
input[type="text"]:active {
font-size: 75px;
}
```

JAVASCRIPT CODE:
Here is the JavaScript code for the 2 functions:
```<script type="text/javascript">
function cals(buttonValue)
{
if (buttonValue == 'C')
{
document.getElementById('valueshow').value = '0';
}
else
{
if(document.getElementById('valueshow').value == '0')
{

document.getElementById('valueshow').value = buttonValue;
}

else
{

document.getElementById('valueshow').value += buttonValue;
}
}
}
function cal(equation)

{