Java Script Notes

Overview

In JavaScript, almost everything is an object or acts like an object.When a web page is loaded, the browser creates a HTML Document Object Model of the page. The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

The HTML DOM model is constructed as a tree of Objects:
It defines:

  • The HTML elements as objects
  • The properties of all HTML elements
  • The methods to access all HTML elements
  • The events for all HTML elements

With the object model, JavaScript gets all the power it needs to create a dynamic HTML:

-JavaScript can change all the HTML elements/attributes/CSS styles in the page
-JavaScript can remove existing HTML elements and attributes
-JavaScript can add new HTML elements and attributes
-JavaScript can react to all existing HTML events in the page
-JavaScript can create new HTML events in the page

The HTML DOM Tree of Objects
The HTML DOM Tree of Objects


Properties and Methods :


An object has properties and methodes to work on these properties. methods are also considered as properties that contain an Funtion() object.

var cody = new Object();
cody.age = 33;
cody.gender = 'male';

cody.getAge = function(){ return cody.age;};

Constructor:

Constructor is a function and is invoked using the "new" keyword.

var Person = function(living, age, gender){
   this.living = living;
   this.age    = age;
   this.gender = gender;
};

var codyB = new Person(true, 33, 'male');

Built-in costructors:

JavaScript is mostly constructed from just these nine objects (as well as string, number, and boolean primitive values).

✴ Number()
✴ String()
✴ Boolean()
✴ Object()
✴ Array()
✴ Function()
✴ Date()
✴ RegExp()
✴ Error()

Math object is static.
The Number(), String(), and Boolean() objects also provide the primitive values as well.

Self Invoking function: 

The self invoking function only runs once. in the following code "add" becomes a function expression. and it can access the content of the parent scope.
This is called java script closure and it makes possible for a function to have a private variable.

 var add = (function () {
     var counter = 0;
     return function () {return counter += 1;}
 })();

 add();
 add();
 add();

// the counter is now 3

Double Equals (== vs === )

 1.) If you use === to compare the number 5 and the string "5", JavaScript will tell you

they’re not equal. But if you use == to compare them, it will tell you they’re the same.

var stringNumber = "5";
var actualNumber = 5;

stringNumber === actualNumber;
false

stringNumber == actualNumber;
true


2.) when JavaScript tries to compare two values with double equals, it first tries to make

them the same type. In this case, it converts the Boolean into a number. If you convert

Booleans to numbers, false becomes 0, and true becomes 1. So when you type 0 ==

false, you get true!

0 == false;
true

"false" == false;
false

Automatic Type Conversion



JavaScript goes out of its way to accept almost any program given to it, even programs that do odd things. This is nicely demonstrated by the following expressions:

console.log(8 * null)
// ▹ 0
console.log("5" - 1)
// ▹ 4
console.log("5" + 1)
// ▹ 51
console.log("five" * 2)
// ▹ NaN
console.log(false == 0)
// ▹ true
console.log(null == undefined);
// ▹ true
console.log(null == 0);
// ▹ false
console.log(null || "user")
// ▹ user
console.log("Karl" || "user")
// ▹ Karl
console.log(null && "user")
//null
console.log("Karl" && "user")
// user
When something that doesn’t map to a number in an obvious way (such as "five" or undefined) is converted to a number, the value NaN is produced. Further arithmetic operations on NaN keep producing NaN.

Arrays
All methods of array can be found at w3school site- 
Adding/Removing elements to an Array 
1.) "Push" adds an element at the end of an array and "unshift" adds an element at the 
begining of an array
2.) "pop" is used to remove an element from the end of an array and "shift" is used to 
remove an element from the beginning of an array.
Adding Arrays:
Use "concat" method to add  two or more Arrays. "concat" method does not change the 

array on which it is being called.

Finding index of an element in an array:

var colors = ["red", "green", "blue"];
colors.indexOf("blue");
2
colors.indexOf("green");
1
colors.indexOf("purple");
-1

If the element whose position you ask for is not in the array, JavaScript returns -1.

Turning an Array into a String :

var boringAnimals = ["Monkey", "Cat", "Fish", "Lizard"];
boringAnimals.join(*);
"Monkey*Cat*Fish*Lizard"
Mixed Arrays:
var dinosaursAndNumbers = [3, "dinosaurs", ["triceratops", "stegosaurus", 3627.5], 10];

dinosaursAndNumbers[2]  -----> returns entire inner array
dinosaursAndNumbers[2][0]  -----> returns "triceratops"

 Functions
A function always returns undefined unless there is something in the function body that tells it to return a different value

1.) longhand function ( function expression) :
var double = function (number) {
  return number * 2;
};

2.) The shorthand version (function declaration.)
looks like this:

function double(number) {
  return number * 2;
}


 jQuery
 jQuery gives us a set of functions that we can use to choose which elements to work with in the HTML DOM and to make changes to those elements.

































Comments











Post a Comment



















Popular posts from this blog









Palindrome program in Java using BufferedReader





















import java.io.*; class Test {     public static void main(String[] args) throws IOException     {         BufferedReader br = new BufferedReader(new InputStreamReader(System.in));         System.out.print("\nEnter a String : ");         String str = br.readLine();         String rev = "";         int n = str.length();         for(int i=n-1 ; i>=0 ; i--)         {             rev = rev + str.charAt(i);         }         if(str.equals(rev))             System.out.println("\nGiven string is a palindrome");         else             System.out.println("\nGiven string is not a palindrome");     } }        Output 1        Enter a String : ABCDDCBA     Given string is a palindrome       Output 2   Enter a String : abcdabcd  Given string is not a palindrome        








Read more





























Generics Array Java does not permit the construction of generic array. Suppose, for example, that we want to design a class that has an array field public class Table<AnyType> {    private AnyType[] contents = new AnyType[5];     ... } It's hard to understand, but this is illegal! A workaround is to construct an array of objects with a type-cast: public class Table<AnyType> {    private AnyType[] stack = (AnyType[]) new Object[5];     ... } source  - http://www.cs.cmu.edu/~adamchik/15-121/lectures/Collections/collections.html








Read more










OOPS: Decomposition and Abstraction





















When we write a a program and if the the code is expected to be less than few hundred of lines then we can afford to write a monolithic program but if the number of lines increase it becomes difficult  to maintain that program or adding new features to that program.  so how to handle this ? In order to write a program for a problem , the problem should be broken into multiple smaller problems and then each smaller problem should be solved  and make sure that solving all such smaller problem solves the actual , bigger problem. the process of breaking a problem into multiple smaller problem efficiently involves Decomposition and Abstraction. Definitions Decomposition- How to decompose large programming problems into small ones is called decomposition Abstraction - Abstraction is a way to do decomposition productively by changing the level of detail to be considered. In each iteration the irrelevant information can be removed. The process of abstraction can be seen as an app...








Read more