ProAngularJS 5장 자바스크립트 기초

※ 실행결과 http://study.jeju.onl/jsdemo.html
(크롬에서 Ctrl+Shift+I 를 눌러 Console의 출력 내용을 확인해야 한다)

기초라고는 하지만, 핵심이 되는 포인트를 잘 짚어 놓았다.
자바스크립트 언어 자체는 단순하지만, 작동되는 원리는 단순하지 않다.
손쉬운 사용을 위해 형 변환이라던지 비동기적 처리 등에
약속된 행동들이 있기 때문에 살펴보고 넘어가야 한다.

결과물
* 크롬 브라우져의 요소검사를 통해 console 출력 내용으로 확인

자바스크립트 예제

<!DOCTYPE html>
<html xmlns=	"http://www.w3.org/1999/xhtml">
<head>
  <title> Javascript Examples </title>
  <link href="/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
  <link href="/node_modules/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet" />

  /node_modules/angular/angular.js
  
    function myFunc(name, weather) {
      //console.log("Hello, "+ name +".");
      console.log("It is " + weather + " today.");

      return ("Hello "+ name +".");
    }

    console.log( myFunc("Adam", "sunny") );

    // .....

    function printMessage(unknownObject) {
      // check isFunction
      if (angular.isFunction(unknownObject)) {
        unknownObject();
      } else {
        console.log(unknownObject);
      }
    }

    var variable1 = function sayHello() {
      console.log("Hello");
    };

    var variable2 = "Good-bye";

    printMessage(variable1);
    printMessage(variable2);

    // .....

    var myGlobalVar = "Apples";

    var firstBool = true;
    var secondBool = false;

    // 문자열 Angular 메소드 : isString, lowercase, uppercase
    var firstString = "This is a string";
    var secondString = 'And so is this';
  
  
    console.log("I like " + angular.lowercase(myGlobalVar));
    console.log("I like " + angular.uppercase(myGlobalVar));
    console.log(angular.isString("Hello") + " / " + angular.isArray(23));

    // .....

    var daysInWeek = 7;
    var pi = 3.141592;
    var hexValue = 0xFFFF;

    console.log(angular.isNumber(7) +" / "+ angular.isNumber("Hello"));

    // 객체 생성
    var myData1 = new Object();
    myData1.name = "Adam";
    myData1.weather = "sunny";

    console.log("Hello, " + myData1.name + "1. Today is " + myData1.weather + ".");

    // 객체 생성
    var myData2 = {
      name: "Adam",
      weather: "sunny",
      printMessage: function() {
        console.log("Hello, " + this.name + "2. Today is " + this.weather + ".");
      }
    }

    myData2.printMessage();

    var myExtendedObject = {
      city: "London"
    };

    // 객체 복사
    angular.extend(myExtendedObject, myData2);

    console.log("Hello, " + myExtendedObject.name + ". I'm in " + myExtendedObject.city + ".");

    // 객체의 속성을 '.'+속성명 외에 배열[속성명] 방식으로도 지정할 수 있다
    myData2["weather"] = "raining";
    console.log("It is "+myData2.weather);

    // .....

    for (var prop in myData2) {
      console.log("Name: "+prop+" / Value: "+myData2[prop]);
    }

    console.log("-----");

    angular.forEach(myData2, function(value, key){
      console.log("Name: "+key+" / Value: "+value);
    });

    // delete : 객체 속성의 삭제 또는 객체의 삭제
    delete myData1.name;
    delete myData1["weather"];
    delete myData1;

    // 속성의 존재 여부 검사 'in'
    var hasName = "name" in myData2;
    var hasDate = "date" in myData2;

    console.log(hasName +" / "+ hasDate);

    // 동등 연산자 '=='와 항등 연산자 '==='
    var firstVal = 5;
    var secondVal = "5";

    // 자바스크립트에서 동등 연산자는
    // 동등성 판단을 위해 피연산자의 타입을 강제 변환한다
    if( firstVal == secondVal ) {
      console.log("They are the same.");
    } else {
      console.log("They are NOT the same.");
    }

    // 자바스크립트에서 값과 타입이 둘다 같은지 검사하고 싶다면 
    // 항등 연산자 '==='를 사용해야 한다
    switch(firstVal === secondVal) {
      case true:
        console.log("They are the same.");
        break;
      case false:
        console.log("They are NOT the same.");
        break;
      default:
        console.log("Cannot compare them");
        break;
    }

    var myData1 = new Object();
    angular.extend(myData1, myData2);
    var myData3 = myData2;

    var test1 = (myData1 == myData2);		// false
    var test2 = (myData2 == myData3);		// true
    var test3 = (myData1 === myData2);	// false
    var test4 = (myData2 === myData3);	// true

    console.log("Test1: "+test1+" / Test2: "+test2);
    console.log("Test3: "+test3+" / Test4: "+test4);

    // .....

    var modVal1 = 5 + 5;		// Result=10 (number)
    var modVal2 = 5 + "5";	// Result="55"
    console.log("Result1: "+modVal1+"("+modVal1.length
        +") / Result2: "+modVal2+"("+modVal2.length+")");

    // 숫자의 문자열 변환
    // toString(), toString(n)
    // toFixed(n) : 소수점 n자리 실수로 변환
    // toExponential(n) : 지수 표기법을 사용해 소수점 이전 한자리와 소수점 이후 n자리의 숫자로 변환
    // toPrecision(n) : 실수 또는 지수 표기법으로 n 자리 소수점의 숫자로 변환
    var modVal3 = (55).toString() + String(55);
    console.log("Result3: "+modVal3+"("+modVal3.length+")");

    // 문자열의 숫자 변환
    // Number(str) : 정수 또는 실수 변환
    // parseInt(str) : 정수 변환, parseFloat(str) : 실수 변환
    var modVal4 = Number("5") + Number("5");
    console.log("Result4: "+modVal4);

    // .....

    var myArray1 = new Array();
    myArray1[0] = 100;	
    myArray1[1] = "Adam";	
    myArray1[2] = true;	
    console.log("myArray1 is Array?: "+angular.isArray(myArray1));

    var myArray2 = [ 100, "Adam", true ];

    for (var i=0; i	
</head>
<body>
  This is a simple example.
</body>
</html>

카테고리: 웹앱개발
Tag: Angular, JS, JS/Angular

게시자: 토니아빠

웰시코기 토니와 함께 제주도에 살고 있는 프리랜서 개발자입니다. 웹앱 개발과 데이터분석을 합니다. 제주도 여행/관광 관련 큐레이션 서비스를 준비중입니다. 토니아빠의 모든 글 보기

답글 남기기 응답 취소

여기에 댓글을 입력하세요...

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

이메일 (필수) (주소는 공개되지 않습니다)

이름 (필수)

웹사이트

WordPress.com의 계정을 사용하여 댓글을 남깁니다. ( 로그아웃 / 변경 )

Google+의 계정을 사용하여 댓글을 남깁니다. ( 로그아웃 / 변경 )

Twitter의 계정을 사용하여 댓글을 남깁니다. ( 로그아웃 / 변경 )

Facebook의 계정을 사용하여 댓글을 남깁니다. ( 로그아웃 / 변경 )

취소

%s에 연결하는 중

	Joniel Eom (다음달에 퇴직합니다. 안녕~ Daum)
	행인A (GitHub를 사용하는 이유 (SVN 비교))
	공학도 (OpenLayers 3에서 Daum Map 사…)
	river (CORS 문제 Server 해결책 (Filte…)
	토니아빠 (OpenLayers 3에서 Daum Map 사…)

이것을 평가하기:

이것이 좋아요:

이 글 공유하기:

게시자: 토니아빠

답글 남기기 응답 취소