JavaScript Training Day 1

Introduction to Basic HTML, CSS & JavaScript

(Day - 1)

This tutorial is meant to give you a crash course into most important concepts of HTML tags, CSS declarations and JavaScript Programming. It is assumed that you have some very basic exposure to HTML Tags.

HTML Tags Basics

At the most basic level understand following are most popular HTML tags

  1. Div - <div>
  2. Span - <span>
  3. Text Format - <b>, <i>, <strong>
  4. Paragraph - <p>
  5. Headers - <h1> to <h6>
  6. Table,Row, Column - <table><tr><td>col1</td><td>col 2</td></tr></table>
  7. Anchor Tag - <a href="...."></a>
  8. Image Tag - <img src="...."></img>
  9. Line Break - <br>
  10. Bullets - <ul>, <ol> and <li>
  11. Forms - <form>
  12. Form elements - <input type="..."></input>, <textarea>, <select> etc

These elements can be distinguished between two type

  1. Block Elements - Which take up a block of area on HTML, forcing next element to come on next line
  2. Inline Elements- Which all elements to exist on the same line

 

It is important to understand which of these elements are Block and which are Inline. This jsFiddle code should help you understand the difference. The home work is to try out all the above elements and distinguish if they are block or inline elements

[iajsfiddle fiddle="4W2NN" height="500px" width="100%" show="result,html,css" skin="default"]

 

CSS Primer

CSS properties can be declared in <style> tag with in the same HTML Page or in separate css files which are included as <link href="special.css" rel="stylesheet" type="text/css">

CSS style can be applied in following manner

  1. CSS style can be applied globally for a particular element 
    1. div { background:yellow}  - This makes all div's background yellow
  2. CSS style can be applied to a CSS Class
    1. .myclass {border:1px solid blue; } - This makes any element with class="myclass" border as solid blue
  3. CSS style can be applied to a Element Id
    1. #myid { color: white ; } - This makes any element with id = "myid" text color to white

Refer to following JSFiddle to understand the above

[iajsfiddle fiddle="UG22N" height="300px" width="100%" show="result,html,css" skin="default"]

CSS Styles can also be used in permutation and combinations of above. There are mainly 2 things to look at here

  1. CSS Style for multiple combinations - These are comma separated
  2. CSS Style for nested elements - These are space separated

[iajsfiddle user="rohitghatol" fiddle="aHASr" height="500px" width="100%" show="result,html,css" skin="default"]

Understanding Padding and Margin

[iajsfiddle user="rohitghatol" fiddle="D83bP" height="300px" width="100%" show="result,html,css" skin="default"]

 

JavaScript Primer

In this part of JavaScript Primer we will cover precisely the following

  1. Global Vs Local Variables - Most important Anti Pattern
  2. Functions in JavaScript. How functions are first class objects in JavaScript?
  3. Popular and Easy to understand Class System
    1. Function based Class Systems
    2. Closure based Class Systems and private variables
    3. Prototype based Class System
  4. Understanding Scope in JavaScript. The misconception around 'this' keyword

We are deliberately not covering DOM Manipulation, Ajax as this would be covered in Day 2 - jQuery Primer

Topic 1 - Global Vs Local Variables

In JavaScript we have variable scope defined at function level. However a common mistake or anti pattern is how we define the variable. See the jsFiddle below

 

[iajsfiddle fiddle="4bTmm" height="400px" width="100%" show="result,js,html" skin="default"]

 

Topic 2 - Functions are first class Objects

 

[iajsfiddle fiddle="KRnBJ" height="500px" width="100%" show="result,js,html" skin="default"]

 

Topic 3 - Object Oriented Programming - Simple way to declare Classes

[iajsfiddle fiddle="bpYFU" height="400px" width="100%" show="result,js,html,css" skin="default"]

 

Topic 4 - Object Oriented Programming - Private Variables

[iajsfiddle user="rohitghatol" fiddle="DM8FJ" height="400px" width="100%" show="result,js,html,css" skin="default"]

Topic 5 - Inheritance

Until you get out of your Java or C# Class paradigm, it is best to delay this topic. First of all JavaScript doesn't have classes, it only have objects and a Function is a first class Object. The whole confusion is caused by the use of new keyword.

In JavaScript, Inheritance can be done is two ways

  1. Classical - Mimicking a concept of Class in JavaScript
  2. Modern/Prototypal - Leaving Classes out and inheriting from other Objects

More on this later.

Topic 6 - Variable Scope and confusion around 'this' keyword

Lets see the problem first

 

[iajsfiddle fiddle="aAakG" height="500px" width="100%" show="result,js,html" skin="default"]

 

 

Here is the solution for the same

 

[iajsfiddle user="rohitghatol" fiddle="ALxSN" height="500px" width="100%" show="result,js,html" skin="default"]