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

source: Pixabay
  • 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)
  • 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 {}
  • 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
myFunction(5);
function myFunction(y) {
return y * y;
}
//return
//25

==========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

Self-Invoking Functions

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

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

B. JQuery

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

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).

  • 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…});

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.

$(“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”);
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).
<html>
<body>
<p id=”demo”></p><script>
document.getElementById(“demo”).innerHTML = “Hello World!”;
</script>
</body>
</html>

C. AJAX

What is AJAX?

AJAX = Asynchronous JavaScript and XML.

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.

  • 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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store