global object and this

in Programming on Javascript

Javascript Basic

Global object is special object. all object is property of the Global object

function func(){
  alert('Hello?');
}
func();
window.func();

Window api
https://developer.mozilla.org/en-US/docs/Web/API/Window

in Web browser, global object is “Window”
but in node.js, global object is “global”

this means context in function, it can be changeable depending on the situation.

1 . function and this
call function

func is no object so it is belong to Window object so this is Window.

function func(){
  if(window === this){ // Window === this
    document.write("window === this");
  }
}
func();

2 . method and this

func is belong to object o, o belong to object Window. so this is object o. 

var o = {
  func : function() {
    if(o === this){ // o === this
      document.write("o === this");
    }
  }
}

3 . constructor and this

var funcThis = null;

function Func(){
  funcThis = this;
}
// funcThis === null
var o1 = Func();  // call function
// funcThis === object Window
if(funcThis === window) {
  document.write('window </br>');
}
var o2 = new Func(); // call constructor
// funcThis === Object o2
if(funcThis === o2) {
  document.write('o2 </br>');
}

4 . apply and this

var o = {}
var p = {}
function func(){
  switch(this){
    case o:
      document.write('b<br />');
      break;
    case p:
      document.write('p<br />');
      break;
    case window:
      document.write('window<br />');
      break;
  }
}
func(); // Window
func.apply(o); // o
func.apply(p); // p

Continue reading

constructor and new

in Programming on Javascript

Javascript Basic

Javascript is Prototype-based programming.

Object declaration

two ways to create a object

1.

var person = {} // Object
person.name = 'euido'; // name : Property
person.introduce = function(){ // introduce : Method
  return 'My name is '+this.name;
}
document.write(person.introduce());

2.

var person = {
  'name' : 'euido',
  'introduce' : function(){
    return 'My name is ' + this.name;
  }
}
document.write(person.introduce());


Constructor 

function Person(){}
var p = new Person(); // Constructor
p.name = 'euido';
p.introduce = function(){
  return 'My name is '+this.name;
}

if we type like this

function Person(){}
var p0 = Person(); // p0 = undefined

but if we use “new”,

function Person(){}
var p0 = new Person(); // p0 = person{}

in Javascript, constructor is just function not belong to any no concept like class in java.

to re-use an object, we can express like..

// initialize object
function Person(name){
  this.name = name;
  this.introduce = function() {
    return 'My name is ' + this.name;
  }
}
var p1 = new Person('euido');
document.write(p1.introduce()+"<br />");

var p2 = new Person('leezche');
document.write(p2.introduce());

Continue reading

regular expression

in Programming on Javascript

Javascript Basic

Module

Regular Expression

two ways to make regular expression in JS.

var pattern = /a/;
// If the regular expression remains constant, using this can improve performance. 

var pattern = new RegExp('a');
// same expression.

var pattern = /a/;
pattern.exec('bcdef'); //null
pattern.test('abcde'); //true
pattern.test('bcde'); //false

String.match()

var pattern = /a/;
var str = 'abcdef';
str.match(pattern); //

String.replace()

var pattern = /a/;
var str = 'abcdef';
str.replace(pattern, 'A');

Option
Option i -> (No matter letter is big or small)
Option g -> (print all result)

Regular expression visualizer using railroad diagrams.
reg exp simulator online 

(\w+)\s(\w+)

You can find information in detail below.
regular expressions

Continue reading

function, var, callback

in Programming on Javascript

Javascript Basic

Global var and Local var
That’s important !! need to understand diffrent of three examples.

// example 1
let TestValue = "Global";
function ChangeValue(){
	let TestVaule = "Local";
}
document.write(TestValue);
// the answer is : Global

// example 2
let TestValue = "Global";
function ChangeValue(){
	let TestVaule = "Local";
  document.write(TestValue);
}
// the answer is : Local

// example 3
let TestValue = "Global";
function ChangeValue(){
	TestVaule = "Local";
}
document.write(TestValue);
// the answer is : Local

Function as a value
Function is object in javascript. that means function can be value in javascript.

function a(){} // it means var a  = function(){}
  
a = {
  b:function(){ // b is methods of object a
  }
}
// object a has key b and value function

function cal(func num){
  return func(num)
}
function increase(num){
  return num+1
}
function decrease(num){
  return num-1
}
alert(cal(increase,1));
alert(cal(decrease,1));

Callback

function sortNumber(a,b){
  return b-a;
}
var numbers = [20,10,9,8,7,6,5,4,3,2,1];
alert(numbers.sort(sortNumber)); // array [20,10,9,8,7,6,5,4,3,2,1]
// sortNumber is callback function.

Continue reading

closure, arguments, apply

in Programming on Javascript

Javascript Basic

Closure

A closure is the combination of a function and the lexical environment within which that function was declared.

//example
function outter(){
  var title = 'coding everybody';
  function inner(){
    alert(title);
  }
  inner();
}
// result : coding everybody
// as you can see, inner function can access to the var title 
// even though title is located outside of the function. That's a Closure

Private variable

function factory_movie(title){
  return {
    get_title : function (){
      return title;
    }
    set_title : function(_title){
        if(typeof _title === 'string'){
            title = _title;
        }else{
            alert('subject should be string type');
        }
    }
  }
}
ghost = factory_movie('Ghost in the shell');
matrix = factory_movie('Matrix');

alert(ghost.get_title); // Ghost in the shell
alert(matrix.get_title); // Matrix

Parameter and Arguments

function sum(){
  var i, _sum = 0;
  for(i=0; i<arguments.length; i++){ 
    // even though there is no parameter but js can access to arguments
    document.write(i+' : '+arguments[i]+'<br />');
    _sum += arguments[i];
  }
  return _sum;
}
document.write('result : ' + sum(1,2,3,4));

Apply

The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object).

o1 = {val:1, val2:2, val3:3}
o2 = {v1:10, v2:50, v3:100, v4:25}
function sum(){
  var _sum = 0;
  for(name in this){
    _sum += this[name];
  }
  return _sum;
}
alert(sum.apply(o1)) // 6
alert(sum.apply(o2)) // 185

Continue reading

math, string, operator, array

in Programming on Javascript

Javascript Basic

Javascript Math Object

The JavaScript Math object allows you to perform mathematical tasks on numbers.
If we know the existence of these kinds of function, we can save time.

// Example
Math.PI       // returns PI
Math.round()  // returns the value of x rounded to its nearest integer:
Math.max(0, 150, 30, 20, -8, -200);  // returns 150
Math.min(0, 150, 30, 20, -8, -200);  // returns -200

You can find information in detail below.
Javascript Math Object

String

Expressions - typeof

console.log(typeof 42); // expected output: "number"
console.log(typeof 'blubber'); // expected output: "string" 
console.log(typeof true); // expected output: "boolean"
console.log(typeof declaredButUndefinedVariable); // expected output: "undefined";

You can find information in detail below.
Reference typeof

Expressions - String Methods 

// String Length
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
// Result : 26

// Finding a String in a String
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate");
// Result : 7

// Slice() Method
var str = "Apple, Banana, Kiwi";
var res = str.slice(7, 13);
// Result : Banana

You can find information in detail below.
JavaScript String Methods

Equals operator

Difference between “==” and “===”

The identity (===) operator behaves identically to the equality (==) operator except no type conversion is done,
and the types must be the same to be considered equal.

alert(null == undefined); //true
alert(null === undefined); //false
// because null and undefined are different type.
alert(true == 1); //true
alert(true === 1); //false
alert(true == '1'); //true
alert(true === '1'); //false

alert(0 === -0); //true
alert(NaN === NaN); //false

You can find information in detail below.
Javascript equality table

Array

ADD
Push() (add one data)

var li = ['a', 'b', 'c', 'd'];
li.push('f');

Concat() (add multiple data)

var li = ['a', 'b', 'c', 'd'];
li.concat('f','g');

unshift() (add to the front)

var li = ['a', 'b', 'c', 'd'];
li.unshift('z');

splice() (select the point that you want to put)

var li = ['a', 'b', 'c', 'd'];
li.splice(2, 0, 'b');

DELETE
Shift() (delete one data from the front)

var li = ['a', 'b', 'c', 'd'];
li.unshift();

pop() (delete on date from the last)

var li = ['a', 'b', 'c', 'd'];
li.pop();

SORT

sort()
var li = ['d', 'c', 'b', 'a'];
li.sort();

Continue reading

Pagination

© 2017. by isme2n

Powered by aiden