2UT의 개발노트(Old)

Function

function을 문자열로 선언할 수도 있다. 

그러나 이 방법은 function 내부의 코드가 복잡해질수록 가독성이 떨어지기 때문에 권장되지 않는 방법이다.

보통은 9 ~ 12줄에서 처럼 function을 선언한다.

var triangle1 = new Function('h', 'w', 'return h * w / 2');
console.log('Triangle 1: ' + triangle1(5, 2));

var param = 'h, w';
var formula = 'return h * w / 2';
var diamond = new Function(param, formula);
console.log('Diamond: ' + diamond(5, 2));

// function literal
var triangle2 = function(w, h) {
    return w * h / 2;
}

console.log('Triangle2: ' + triangle2(5, 2));

JavaScript에서는 함수의 인수의 개수나 type이 정해져있지 않다.

개발자가 의도한 인수의 개수 이상을 넣어도 오류가 나지 않는다.

// named argument
function triangle(args) {
    if (args.base == undefined) {
        args.base = 1;
    }
    
    if (args.height == undefined) {
        args.height = 1;
    }
    return args.base * args.height / 2;
}

console.log('Triangle1: ' + triangle({base: 10, height: 5}));
console.log('Traingle1: ' + triangle({}));

function triangle2(base, height, index) {
    console.log(base + '/' + height);
}

var base = 10;
var index = 20;
triangle2(base, index);
triangle2(base, index, 100, [10, 20]);

또한 JavaScript에서는 function의 인수로 function을 받을 수도 있다.

// Higher order function
function arrayWalk(data, func) {
    for (var key in data) {
        func(key, data[key]);
    }
}

function showElement(key, value) {
    console.log(key + ': ' + value);
}

var arr = [1, 2, 4, 8, 16];
arrayWalk(arr, showElement);

// anonymous function
arrayWalk(arr, function(key, value) {
    console.log(key + ': ' + value);
});

Scope

function 내에서 선언한 변수(Local 변수)가 Global 변수와 변수명이 같을 때 Local 변수를 우선적으로 참조한다.

또한 function 내에서 Global 변수와 같은 변수명으로 선언한 것보다 위에 그 변수를 참조하게 되면 선언되지 않은 변수로 인식을 한다.

var scope1 = 'Global var1';

function getValue1() { 
    console.log(scope1); // undefined
    var scope1 = 'Local Var1';
    return scope1;
}

console.log(getValue1()); // Local Var1
console.log(scope1); // Global Var1

var scope2 = 'Global Var2';

function getValue2() {
    scope2 = 'Local Var2';
    return scope2;
}

console.log(getValue2()); // Local Var2
console.log(scope2); // Local Var2

// not support block level scope
if (true) {
    console.log('True 1');
    var i = 5;
}

console.log(i); // 5

// support function level scope
(function() {
    if (true) {
        console.log('True 2');
        var j = 0;
    }
})();

console.log(j);

// ---------------------------------------------------------

// difference between function
var scope = 'Global Var';
function checkScope() {
    var scope = 'Local Var';
    
    var func1 = function() {
        return scope;
    }
    
    console.log(func1()); // Local Scope
    
    var func2 = new Function('return scope;');
    
    console.log(func2()); // Global Scope
}

checkScope();

// ---------------------------------------------------------

var x = 'Global';

function outerFunc() {
    var y = 'Local Outer';
    
    function innerFunc() {
        var z = 'Local Inner';
        
        console.log(x);
        console.log(y);
        console.log(z);
    }
    
    innerFunc();
}

outerFunc();

arguments

function showMessage(args) {
    console.log(arguments);
    console.log(arguments.length + ' / ' + args);
}

showMessage();
showMessage('Tomoto', 'Banana');

function paramTest() {
    for (var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}

paramTest('a', 1, [10, 20, 30]);

재귀함수

function factorial(n) {
    if (n != 0) {
        return n * arguments.callee(n - 1);
    }
    
    return 1;
}

console.log(factorial(3));

Date 입출력

// instance
var date1 = new Date(2016, 10, 14, 12, 00, 00, 000);
console.log(date1);
console.log(date1.getFullYear());
console.log(date1.getMonth()); // want + 1
console.log(date1.getDate());
console.log(date1.getDay()); // mon: 1, tue: 2 ...
console.log(date1.getHours());
console.log(date1.getMinutes());
console.log(date1.getSeconds());
console.log(date1.getMilliseconds());
console.log(date1.getTime());
console.log(date1.getTimezoneOffset());

var date2 = new Date();
date2.setFullYear(2013);
date2.setMonth(8);
date2.setDate(5);
date2.setHours(11);
date2.setMinutes(23);
date2.setSeconds(15);
date2.setMilliseconds(512);
console.log(date2.toLocaleString());
console.log(date2.toGMTString());
console.log(date2.toUTCString());
console.log(date2.toDateString());
console.log(date2.toTimeString());
console.log(date2.toLocaleDateString());
console.log(date2.toLocaleTimeString());

임의로 날짜 바꾸기

var date1 = new Date(2016, 9, 10, 12, 30);
console.log(date1.toLocaleString());
date1.setMonth(date1.getMonth() - 3);
console.log(date1.toLocaleString());
date1.setMonth(date1.getDate() - 10);
console.log(date1.toLocaleString());

console.log('Next month or previous month');

var date2 = new Date(2016, 9, 31, 12, 30);
console.log(date2.toLocaleString());
date2.setMonth(date2.getMonth() + 1);
date2.setDate(0);
console.log(date2.toLocaleString());

replace()

var str = 'me us me us me us';
// replace all with regular expression
console.log(str);
console.log(str.replace('us', 'me'));
console.log(str.replace(/us/gi, 'me'));

Constructor

// Constructor
var test1 = [];
var test2 = new Date();

// type of is return object
console.log(typeof test1); // object
console.log(typeof test2); // object

// constructor property
alert(test1.constructor); // Array
alert(test2.constructor); // Date

console.log(test1.constructor == Array);
console.log(test2.constructor == Date);

// using instanceof
console.log(test1 instanceof Array); // true
console.log(test2 instanceof Date); // true

Object instance

// Object instance
var obj1 = new Object();
obj1.name = 'circulus';
obj1.url = 'www.circul.us';
console.log(obj1);

var obj2 = {};
obj2.name = 'suwon';
obj2.url = 'www.suwon.ac.kr';
console.log(obj2);

// default method from Object
var obj3 = new Object();
console.log(obj3.toString());
console.log(obj3.valueOf());

var obj4 = new Date();
console.log(obj4.toString());
console.log(obj4.valueOf());

var obj5 = ['Banana', 'Apple', 'Tomato'];
console.log(obj5.toString());
console.log(obj5.valueOf());

var num = 10;
console.log(num.toString());
console.log(num.valueOf());

var reg = /[0-9]{3}-[0-9]{4}/g;
console.log(reg.toString());
console.log(reg.valueOf());

캐스팅, encode uri(깨짐 방지)

var n = '123.45xxx';
console.log(Number(n));
console.log(parseFloat(n));
console.log(parseInt(n));

var d = new Date();
console.log(Number(d)); // 12308669074569
console.log(parseFloat(d)); // NaN
console.log(parseInt(d)); // NaN

console.log(typeof(123 + '')); // String
console.log(typeof('123' - 0)); // Number

// encode uri
var str = '안녕하세요 자바스크립트입니다. 123abc';

var msg = encodeURI(str);
console.log(encodeURI(str));
// console.log(encodeURIComponet(str));
console.log(decodeURI(msg));

eval()

var str = 'alert("Eval is evil")';
eval(str);

var obj = { hello: 'world' };
var json = JSON.stringify(obj);
console.log(json);
/* 
var result1 = eval(json);
console.log(result1);
*/
var result = JSON.parse(json);
console.log(result);

객체 생성

// without instance
var str1 = 'Hello JavaScript';
console.log(str1.length);

var bool1 = true;
console.log(bool1);

var num1 = 10;
console.log(num1);

console.log('\n');

// wrapper
var str2 = new String('Hello JavaScript');
console.log(str2.length);

var bool2 = new Boolean(false);
console.log(bool2);

var num2 = new Number(10);
console.log(num2);

문자열 나누기

var str1 = 'Good day to study day the javascript day!';

console.log(str1.indexOf('day'));
console.log(str1.lastIndexOf('day'));
console.log(str1.indexOf('day', 10));
console.log(str1.lastIndexOf('day', 10));
console.log(str1.indexOf('hello'));

var str2 = 'Circulus Project';

console.log(str2.charAt(5)); // "l";
console.log(str2.slice(5, 8)); // "lus"
console.log(str2.substring(5, 8)); // "lus"
console.log(str2.substr(5, 8)); // "lus Proj"
console.log(str2.split('u')); // ["Circ", "l", "s Project"]
console.log(str1.split('day', 3)); // ["Good", "to study", "the javscript"]
console.log(str1.split('day')); // ["Good", "to study", "the javscript", "!"]

console.log('upper'.anchor('top'));
console.log(str2.link('http://www.circul.us'));

console.log('10'.sub());
console.log('10'.sup());

console.log(str2.concat('thanks'));
console.log(str2.length);

NaN

var num1 = 123;

var num2 = new Number(123);
console.log(num1 + num2);

var num3 = 255;
console.log(num3.toString());
console.log(num3.toString(16));
console.log(num3.toString(8));

var num4 = 123.45678;  

console.log(num4.toExponential(2));
console.log(num4.toFixed(3));
console.log(num4.toFixed(7));
console.log(num4.toPrecision(10));
console.log(num4.toPrecision(6));


// NaN = Not a Number
console.log(0 / 0);
console.log(Number.NaN == Number.NaN);
console.log(isNaN(Number.NaN));

var num = 10;
var num2 = '10';
var num3 = 'test';
console.log(isNaN(num));
console.log(isNaN(num2));
console.log(isNaN(num3));

Math

// Math
console.log(Math.abs(-15));
console.log(Math.max(10, 15));
console.log(Math.min(-10, 0));
console.log(Math.pow(2, 3));
console.log(Math.random());
console.log(Math.ceil(1, 58));
console.log(Math.floor(1, 58));
console.log(Math.round(1, 58));
console.log(Math.PI);
console.log(Math.floor((Math.random() * 10) + 1));

Array

var a = new Array('A', 'B', 'C');
console.log(a);
var b = new Array(2);
console.log(b);

var arr1 = ['Tomato', 'Apple', 'Blueberry', 'Orange', 'Melon'];
var arr2 = ['Mozart', 'schuberry', 'Bach'];

console.log(arr1.concat(arr2));
console.log(arr1.join('_'));
console.log(arr1.splice(1));
console.log('---');
console.log(arr1.splice(1, 2));
console.log(arr1.splice(1, 2, 'strawberry', 'fineapple'));
console.log('---');
console.log(arr1);
console.log(arr1.pop());
console.log(arr1);

정렬

console.log(arr1);
console.log(arr1.push('Strawberry'));
console.log(arr1);
console.log(arr1.shift()); // remove a first one
console.log(arr1);
console.log(arr1.unshift('Strawberry', 'fineapple'));
console.log(arr1);
console.log(arr1.reverse());
console.log(arr1.sort());
console.log(arr1.length);
console.log(arr1.toString());

var arr3 = [5, 25, 10];
console.log(arr3);
console.log(arr3.sort());
console.log(arr3.sort(function(x, y){
    return x - y;
}));

console.log(arr3.sort(function(x, y){
    return y - x;
}))

버튼을 누르고 있을 동안 색을 바꿔주는 효과를 넣고 싶을 때가 있습니다.
그럴 때 selector를 이용하게 되는데 주의할 점은 TextColor와 background 색을 변경하는 것이 조금 다릅니다.
TextColor는 res의 color 디렉토리를 생성하여 그 안에 selector를 넣어주어야 하고
background는 res의 drawable 디렉토리 안에 selector를 넣어주어야 합니다.

background 색을 변경할 때

button_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/bg_select"/>
    <item android:state_focused="true" android:drawable="@drawable/bg_select"/>
    <item android:state_pressed="true" android:drawable="@drawable/bg_select"/>
    <item android:drawable="@drawable/bg"/>
</selector>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="@color/colorBlue"/>
    <item android:state_focused="true" android:color="@color/colorBlue"/>
    <item android:state_pressed="true" android:color="@color/colorBlue"/>
    <item android:color="@color/colorWhite"/>
</selector>

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorWhite">#FFFFFF</color>
    <color name="colorBlue">#2196F3</color>
    <drawable name="bg_select">#2196F3</drawable>
    <drawable name="bg">#EEEEEE</drawable>
</resources>

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="TextViewTest"
    android:textColor="@color/text_selector"/>
 
<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/button_selector"
    android:text="ButtonTest"/>