Cordova: 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;
}
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.
Cordova: How to use a JavaScript 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.
