Programming Languages required

For App DJevelopment in Cordova we use HTML, CSS, JS, various libraries such as: Bootstap, jQuery, Angular) etc.


HTML

Hyper Text Markup Language is used to create the DOM structure for any webpage. It's main motive is to show content on the screen when opened in a broswer.

HTML basic structure:

<html>
    <head>
        <title> </title>
    </head>
    <body>
    </body>							
</html>

If you are new to HTML, learn it from here: HTML Course.


CSS

Cascading Style Sheets is used to style the HTML content to make it look good.

CSS basic structure:

Suppose we have to provide a background color to the content of body.

<style type="text/css">
body{
    background-color: blue;
}
</style>

We put this style tag in the head tag.

<head>
    <style>
    //CSS Code
    </style>
</head>

Or we can write the CSS code in another file and link it to our HTML file.

To do this, name a file style.css and write the below sepcified CSS code in this file:

body{
    background-color: blue;
}

p{
    background-color: red;
}

Now to add this CSS file to our HTML code, do the following:

index.html

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

NOTE: While writing CSS code in style.css file, don't include <style> tag now.


JS, or Javascript

We use Javascript to dynamically operate on the content, present in the HTML webpage.

Suppose we have to inject a string, say I am learning using Studytonight to the body of our HTML webpage, dynamically.

<script type="text/javascript">
    document.getElementByTagName('body').innerHTML="I am learning using Studytonight";
</script>

We can either put the javascript code inside the script tag, which is place in the head tag.

<head>
    <script>
        //Javascript code
    </script>
</head>

Or, we can write JS code separately in another file and add it to our pre-existing HTML file. For example: Write JS code in index.js

index.js

document.getElementByTagName('body').innerHTML="I am learning using Studytonight";
alert("I am learning Hybrid app development on Studytonight ");
prompt("What is your name?");

and in the HTML file, we can add the javascript file,

index.html

<head>
    <script type="text/javascript" src="index.js"></script>
</head>

NOTE: Don't include <script> tag in index.js


Javascript Libraries (jQuery.js, Angular.js, React.js)

We use javascript libraries to minimise our efforts. Let's take an example: Suppose you have to update the content of a div tag, identified by, id="test-div", dynamically. Then either you can write this code in plane JS or you can use any JS library.

Code in Plane Javascript

document.getElementById('test-div').innerHTML = "I am learning Hybrid App development on Studytonight";

Same code, using jQuery

$('div').html("I am learning Hybrid App development on Studytonight");

NOTE:Second way of writing code is more flexible than the first.


How to use a library?

Include it in your HTML page, just like you added a separate Javascript file and use it.

<head>
    <script type="text/javascript" src="library_name.js"></script>
</head>

So the final structure of any HTML page(index.html) is like:

<html>
    <head>
        <script type="text/javascript" src="library_name.js"></script>   //Any library jquery.js etc
        <script type="text/javascript" src="index.js"></script>	 // Your own JS code 
        <link rel="stylesheet" type="text/css" href="name.css">  // Your own CSS code
        <link rel="stylesheet" type="text/css" href="css_library.css">  //CSS library  
    </head>
    <body>
        <div id="test-div" ></div>
    </body>
</html>

NOTE: One must have knowledge of all these above concepts to use Cordova for App development.