Saturday, June 15, 2019

Javascript


Java script is used to programme the behaviour of the website. Its easy to handling and a developer should learn this language.

What is javascript? 
Javascript is a scripting language, mostly used on the web. It's used to increase HTML pages.
commonly found in embedded in Html code. Javascript an interpreted language. Thus, it doesn't
need to be compiled. Javascript renders the web pages by interactive and dynamic fashion.
This allowing the pages to react to events, exhibit special effects, accept variable text, validate data, detect user's browsers.etc.

Many desktop and server programs use JavaScript. Node.js is the best known. Some databases, like MongoDB and CouchDB, also use JavaScript as their programming language.

What can do javascript for u
☝ Javascript is very easy to implement. All you need to do is put your code in the HTML document and tell the browser that is javascript.

☝ Javascript work on a web users computer - even when they are offline.  Javascript allows you to create highly responsive interfaces that improve the user experience


 JavaScript can load content into the document if and when the user needs it, without reloading the entire page


☝ JavaScript can test for what is possible in your browser and react accordingly 

Uses of javascript

👉 Web development
👉 Web applications
👉 Presentations
👉 Server application
👉 Web servers 
👉 Games
👉 Arts
👉 Smartwatch applications
👉 mobile applications
👉 Flying Robots

Javascript must be inserted between <script>and </script> tags 

In javascript we can display data in different ways;

  1. Writing into an HTML element, using innerHTML.
  2. Writting into the html output using document.write()
  3. Writting into an html alert box , window.alert()
  4. Writting into a browser console , console.log()
mostly innerHTML  is used to call the functions.

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

Javascript statements
A list of instructions is to be executed by a computer is called"Computer Programme"
That the programming instructions are called Statements.
<script>
var a ,b,c;
a=5;
b=4;
c=a+b
</script>


script>
var x, y;
x = 5 + 6;
y = x * 10;
document.getElementById("demo").innerHTML = y;

</script>




in programming, just like in algebra, we use variables (like price1) to hold values.

In programming, just like in algebra, we use variables in expressions (total = price1 + price2).

From the example above, you can calculate the total to be 11.


JavaScript Identifiers

All JavaScript variables must be identified with unique names.

These unique names are called identifiers.

Identifiers can be short names (like x and y) or more descriptive names (age, sum, total volume).

The general rules for constructing names for variables (unique identifiers) are:

Names can contain letters, digits, underscores, and dollar signs.
Names must begin with a letter
Names can also begin with $ and _ (but we will not use it in this tutorial)
Names are case sensitive (y and Y are different variables)

Reserved words (like JavaScript keywords) cannot be used as names

Value = undefined
In computer programs, variables are often declared without a value. The value can be something that has to be calculated or something that will be provided later, like user input.

A variable declared without a value will have the value undefined.

The variable carName will have the value undefined after the execution of this statement:


<script>
var carName;
document.getElementById("demo").innerHTML = carName;

</script>

Arithmetic operators

Operator   Description
   
+ Addition
- Subtraction
* Multiplication
**             Exponentiation (ES2016)
/ Division
% Modulus (Division Remainder)
++ Increment
-- Decrement


Comparition Operator

Operator  Description

==             equal to

===           equal value and equal type

!=              not equal

!==            not equal value or not equal type

>               greater than

<               less than

>=             greater than or equal to

<=             less than or equal to

?               ternary operato

<script>
var a = 3;
var x = (100 + 50) * a;
document.getElementById("demo").innerHTML = x;
</script>
out put:450


JavaScript variables can hold many data types: numbers, strings, objects and more:

JavaScript Arrays
JavaScript arrays are written with square brackets.

Array items are separated by commas.

The following code declares (creates) an array called cars, containing three items (car names):
<script>
var cars = ["Saab","Volvo","BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>


Java script Functions

A JavaScript function is a block of code designed to perform a particular task.

A JavaScript function is executed when "something" invokes it (calls it).


<script>
function myFunction(p1, p2) {
 return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>


JavaScript Function Syntax
A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().

Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).

The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)

The code to be executed, by the function, is placed inside curly brackets: {}

  • Function parameters are listed inside the parentheses () in the function definition.
  • Function arguments are the values received by the function when it is invoked.
  • Inside the function, the arguments (the parameters) behave as local variables.


Function Invocation
The code inside the function will execute when "something" invokes (calls) the function:

  • When an event occurs (when a user clicks a button)
  • When it is invoked (called) from JavaScript code
  • Automatically (self invoked)

You will learn a lot more about function invocation later in this tutorial.


Function Return
When JavaScript reaches a return statement, the function will stop executing.

If the function was invoked from a statement, JavaScript will "return" to execute the code after the invoking statement.

Functions often compute a return value. The return value is "returned" back to the "caller":


<script>
var x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;

function myFunction(a, b) {
  return a * b;
}
</script>

Objects

Objects can also have methods.

Methods are actions that can be performed on objects.

Methods are stored in properties as function definitions.

Var person = {
 firstName: "John",
 lastName : "Doe",
 id       : 5566,
 fullName : function() {
   return this.firstName + " " + this.lastName;
 }
};


The this Keyword


In a function definition, this refers to the "owner" of the function.

In the example above, this is the person object that "owns" the fullName function.

In other words, this.firstName means the firstName property of this object.

JavaScript Events

HTML events are "things" that happen to HTML elements.

When JavaScript is used in HTML pages, JavaScript can "react" on these events.

HTML Events


An HTML event can be something the browser does, or something a user does.

Here are some examples of HTML events:
  • An HTML web page has finished loading
  • An HTML input field was changed
  • An HTML button was clicked

Often, when events happen, you may want to do something.

JavaScript lets you execute code when events are detected.

HTML allows event handler attributes, with JavaScript code, to be added to HTML elements.


Event                Description
onchange         An HTML element has been changed
onclick              The user clicks an HTML element
onmouseover   The user moves the mouse over an HTML element
onmouseout     The user moves the mouse away from an HTML element
onkeydown       The user pushes a keyboard key
onload              The browser has finished loading the page



String Methods and Properties

Primitive values, like "John Doe", cannot have properties or methods (because they are not objects).

But with JavaScript, methods and properties are also available to primitive values, because JavaScript treats primitive values as objects when executing methods and properties.

String Length

Finding a String in a String

Searching for a String in a String

Extracting String Parts
  • slice(start, end)
  • substring(start, end)
  • substr(start, length)
Replacing String Content

Converting to Upper and Lower Case

The concat() Method

String.trim()

Extracting String Characters
  • charAt(position)
  • charCodeAt(position)
  • Property access [ ]
Converting a String to an Array








Saturday, June 1, 2019

Bootstrap

Bootstrap is a free and open-source front end development framework for the creation of websites and web apps. The Bootstrap framework is built on HTML, CSS, and JavaScript (JS) to facilitate the development of responsive, mobile-first sites and apps.

What is Bootstrap?
Bootstrap is a free front-end framework for faster and easier web development
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins. Bootstrap also gives you the ability to easily create responsive designs

Responsive design makes it possible for a web page or app to detect the visitor’s screen size and orientation and automatically adapt the display accordingly; the mobile first approach assumes that smartphones, tablets and task-specific mobile apps are employees' primary tools for getting work done and addresses the requirements of those Bootstrap CDN 
If you don't want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network).

MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include jQuery:s in design.

Advantages of Bootstrap:

Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework

Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Edge, Safari, and Opera)

Bootstrap includes user interface components, layouts and JS tools along with the framework for implementation. The software is available precompiled or as source code.


Mark Otto and Jacob Thornton developed Bootstrap at Twitter as a means of improving the consistency of tools used on the site and reducing maintenance. The software was formerly known as Twitter Blueprint and is sometimes referred to as Twitter Bootstrap.

Bootstrap CDN 
If you don't want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network).

MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include jQuery:

One advantage of using the Bootstrap CDN:
Many users already have downloaded Bootstrap from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.





Express

In this tutorial, we will also have a look at the express framework. This framework is built in such a way that it acts as a minimal an...