Makers Week 5: First Week into Javascript, Love it?

What is a mixture of Javascript, jQuery, AJAX, HTML and CSS? All the website you can get!

source: Pixabay

London, Shoreditch

The 5th week at Makers was quite an enjoyable experience. Since it was the first week with Javascript — Finally, Hooray! Alongside, there was also some practice with jQuery and CSS.

So here we go, this week’s goals:

• Follow an effective process for learning javascript (similarities and difference with Ruby, test drive using Jasmine)
• Test drive a simple front-end web app with Javascript (get familiar with jQuery, interact with APIs in AJAX, create interface.js for the app in HTML, style the app with CSS)

However enjoyable as it is, it was quite a big heading into the week, as we were required to refractor 2 of our previous projects from Ruby into Javascript. This means we not only need to learn about the basic syntax, but also learn about test drive using Jasmine instead of RSpec.

Luckily, there is a lot of similarities between Ruby and Javascript, while remaining the divergence.

• Data Types: number, string, boolean, null, undefined, symbol, object
• Mathematical Assignment Operators: -=, *=, and /=
• String Interpolation: Instead of using “”, JS use backsticks ` to quote the strings: console.log(`I own a pet ${myPet}.`)
• If Else statement: Instead of using “if..elsif..else”, JS use if(){} else if {}

Apart from these, there are some distinctions between the two as well. However, I found it helped to ease the learning curve to start from the similarities first and then move on to compare the differences when approaching a new concept.

Just to name two:

Tuthy and Falsy: In Ruby only null and false is evaluated as falsy, yet in JS, other than null and false value, 0 , empty strings, undefined, NaN are evaluated as falsy as well.

• 0
• Empty strings like "" or ''
• null which represent when there is no value at all
• undefined which represent when a declared variable lacks a value
• NaN, or Not a Number

Return: In contrary to implicit return in Ruby, in JS you always need to explicitly write “return” when returning a value.

Hoisting: Hoisting is JavaScript’s default behavior of moving declarations to the top of the current scope. Hoisting applies to variable declarations and to function declarations, meaning you can call a method before declaring it:

myFunction(5);
function myFunction(y) {
 return y * y;
}
//return 
//25

Moving on to creating a JS web app. Since JS only applies to the business logic, to make it interact with the web server, people normally adopt jQuery, which is “a lightweight, write less, do more, JavaScript library”, the purpose of which is to make it much easier to use JS on the website.

With jQuery, it is possible already to make a simple JS web app. However, there are two other helpers to make the app even more kick-ass : AJAX and CSS.

So what is AJAX? AJAX = Asynchronous JavaScript and XML.

In short; AJAX is about loading data in the background and display it on the webpage, without reloading the whole page.

Request is being sent by making an AJAX call, Data in JSON format is being fetched asynchronously from the server and page content is being updated without reloading your webpage, we can fetch data from our local machine or server, public API.

Another layer is CSS. CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. It can control the layout of multiple web pages all at once.

All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

So with Javascript, jQuery, AJAX, HTML and CSS, you are free to make almost all kinds of web apps at your will!

That’s all for this week. See you around next week：）

==========Highlights of the Week=============

A. Javascript

Javascript Debugging

Whenever you jump into a new language, the first you need to learn is how to debug (Yes we love debugging!!!). For javascript, there is normally 2 ways of doing it : using console.log() or debugger, or both.

1. console.log()

Airport.prototype.land = function(plane) {
console.log("function called")  
if (plane.isLanded()) {
    console.log("hello1");
  } else if (this.weather.isStormy()) {
    console.log("hello2");
  } else {
    console.log("hello3");
  }

2. Using a step debugger

Add debugger; to a line in your program that you know runs e.g.:

function sayHi() {
  debugger;
  console.log("hi!");
};
sayHi();

Function Hoisting

Hoisting is JavaScript’s default behavior of moving declarations to the top of the current scope. Hoisting applies to variable declarations and to function declarations. Because of this, JavaScript functions can be called before they are declared:

myFunction(5);
function myFunction(y) {
 return y * y;
}
//return 
//25 

However, functions defined using an expression are not hoisted.

Self-Invoking Functions

Another interesting feature about javascript is self-invoking functions. Function expressions can be made “self-invoking”.

A self-invoking expression is invoked automatically, without being called. Function expressions will execute automatically if the expression is followed by (). You cannot self-invoke a function declaration. You have to add parentheses around the function to indicate that it is a function expression:

(function () {
 var x = “Hello!!”; // I will invoke myself
})();

B. JQuery

jQuery is a lightweight, “write less, do more”, JavaScript library.

The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

jQuery Syntax

With jQuery you select HTML elements and perform “actions” on them. The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).

Basic syntax is: $(selector).action()

• A $ sign to define/access jQuery
• A (selector) to “query (or find)” HTML elements
• A jQuery action() to be performed on the element(s)

The Document Ready Event

$(document).ready(function(){
// jQuery methods go here…
});

This is to prevent any jQuery code from running before the document is finished loading (is ready).

Callback Functions

JavaScript statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This can create errors.

To prevent this, you can create a callback function. A callback function is executed after the current effect is finished. The example below has a callback parameter that is a function that will be executed after the show effect is completed:

$(“button”).click(function(){
 $(“p”).show(“slow”, function(){
 alert(“The paragraph is now hidden”);
 });
});

Method Chaining

Method chaining allows us to run multiple jQuery commands, one after the other, on the same element. For example:

$(“#p1”).css(“color”, “red”).slideUp(2000).slideDown(2000);

css() Method

The css() method sets or returns one or more style properties for the selected elements. To return the value of a specified CSS property, use the following syntax:

css(“propertyname”);

To set a specified CSS property, use the following syntax:

css(“propertyname”,”value”);

The DOM Programming Interface

The HTML DOM can be accessed with JavaScript (and with other programming languages). In the DOM, all HTML elements are defined as objects. The programming interface is the properties and methods of each object.

• A property is a value that you can get or set (like changing the content of an HTML element).
• A method is an action you can do (like add or deleting an HTML element).

The following example changes the content (the innerHTML) of the <p> element with id="demo":

<html>
<body>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = “Hello World!”;
</script>
</body>
</html>

In the example above, getElementById is a method, while innerHTML is a property.

C. AJAX

What is AJAX?

AJAX = Asynchronous JavaScript and XML.

In short; AJAX is about loading data in the background and display it on the webpage, without reloading the whole page. Examples of applications using AJAX: Gmail, Google Maps, Youtube, and Facebook tabs.

The asynchronicity of Ajax catches many new jQuery users off guard. Because Ajax calls are asynchronous by default, the response is not immediately available. Responses can only be handled using a callback.

D. CSS

Styling HTML with CSS

CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. It can control the layout of multiple web pages all at once.

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

h1 {color:blue; font-size:12px;}

• h1: The selector points to the HTML element you want to style.
• {}:The declaration block contains one or more declarations separated by semicolons.
• color/font-size: Each declaration includes a CSS property name and a value, separated by a colon.
• blue/12px: A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

Explanation of the different parts:

• Content — The content of the box, where text and images appear
• Padding — Clears an area around the content. The padding is transparent
• Border — A border that goes around the padding and content
• Margin — Clears an area outside the border. The margin is transparent