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

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

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

Function Hoisting

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

Self-Invoking Functions

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

B. JQuery

jQuery Syntax

  • 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

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

Method Chaining

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

css() Method

css(“propertyname”);
css(“propertyname”,”value”);

The DOM Programming Interface

  • 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?

D. CSS

Styling HTML with CSS

CSS Syntax

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

  • 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

--

--

--

Hi :)

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Implement KissMetrics in React-Native Application

4 VS Code Extensions to Improve Developer Experience in React

Sharing React Widgets Between Apps

Implement Email-Password Authentication in React using MongoDB Realm

Boilerplate for creating proxy server on nodejs using webpacks + babel + eslint and nodemon

How and Why You Should Use React Query

Detecting Open Source Vulnerabilities in Your IDE

ES6 Mystery

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
E.Y.

E.Y.

Hi :)

More from Medium

JavaScript: Predict the Output Questions vol. 3

Interview questions 2022 basic javascript

Creating a Singly Linked List in JavaScript.

Daily Problem Solving — JS (Day 1)