April 1~28, 2021 - Front-end(Javascript)

#Front-end(Javascript 이하 JS)


*4월1일~28일

-이클립스에서는 JS용 개발 라이브러리 플러그인 지원을 중단함 -> vscode 사용.

-vscode용 js 플러그인 설치(js code snippets, prettier, jquery code snippets)

-JS는 script reading! 즉, 순서대로 읽고 출력; JS는 리소스를 한번이라도 읽어놔야 해석가능....(interpreter 방식); 

-JS 위치는 최하단이맞음.. 선언은 주로 head쪽에 배치; html + css가 모두 읽히고 난후에 JS가 적용되어야 하기에. 위치가 최하단이라는 것.

->jquery를 이용하여 $(function() { }); 안에 넣는식으로 보완 가능함.

-특정한 폼에 입력된 정보들을 취합하고 모아서 서버 등으로 날리는게 JS의 역할임

 

1)JS 기본

 

*JS 사용시 권장 사항

 

-변수명의 시작

_로 시작 가능; 대소문자 구분; $사용 가능하나 가급적 자제(타 언어도 씀)

 

-예약어를 함수명이나 변수명으로 사용 금지

false, int, function, class, final, return 등

 

-띄어쓰기, 콤마, 닷, 콜론, 연산자 기호 사용에 주의

 

-의미없거나 애매모호한 그리고 과한 축약 사용 금지

 

-변수명 - camel notation 

-myName, yourGradeRange

 

-함수명 / 메소드명 snake notation

-make_decision

 

-클래스명 - camel notation with upper case

-Player

 

*JS 변수

-js는 다 'var'라는 명칭 씀... 전역변수 느낌; let 지역변수 느낌;

-js는 들어오는 데이터가 변수의 성질을 결정함; 동적 타이핑 언어(interpreter)

-js에서는 let 위주로 쓰라고 권장함

-브라우저가 해석하기에 주석까지 다 노출됨

-console.log는 1개 행이라고 생각하면됨.

 

*JS 연산자

-연산자는 괄호로 최대한 나타내야함.

 

    console.log(x ** y); // 증감연산, x의 y제곱

 

    // 값과 타입을 동시에 비교하는 연산자

    // JS는 다 var, let으로 선언하기에 어떤 타입인지 모름...

    

    console.log("1" == 1); // 값만 같으면 true

    console.log("1" === 1); // 값과 타입 다 같아야 true

    console.log(x !== y); // 값과 타입 모두 같을때 false

 

    console.log(33- (5 ** 2));

 

-null객체는 object라고 함; undefined는 undefined라고 함.

 

*JS type

 

    let num1 = 0;

    let str1 = "문자 데이터";

    let flag1 = false;

    let iamnull1 = null;

    let whoareyou1 = undefined;

 

    console.log(typeof num1);

    console.log(typeof str1);

    console.log(typeof flag1);

    console.log(typeof iamnull1);  // object type

    console.log(typeof whoareyou1); // undefined type

 

    console.log(typeof (typeof num1)); // string으로 잡힘.. number가 오니..

 

    not a number = NaN;

 

*JS constant / 상수 / final

-const PI_THIS = 3.1415; // 지역변수 특성을 가짐, 안에서 선언하면 안에서만 작동

 

*null & undefined

-null은 값을 알 수는 없지만, 존재는 하는 것; 공간만 있는것; 존재했다가 사라짐; 의도적으로 표현할때 사용하는 값.

-undefined 값이 아예 없다는 것, 정의 되지 않은 것; 한번도 값이 들어간 적이 없음;

-값이 없는 상태는 같으나, 타입은 다르다.

->java에서는 두 개념이 하나로 쓰임

-java에서는 method / class 모두 객체로 잡음; compile으로 메모리에 올려서 관리; 그래서 묶어서 사용하게 만듬;

-그에 대비해서 js는 각각 다 구분해놓음.. flex하다고 생각하면됨;

 

*escape(\)

    console.log("나도 \"쌍따옴표\" 를 사용하고 싶어요");

 

*줄바꿈

'\n\

 

*alert 경고장 출력

-alert("경고창!");

 

*compile & interpreter

-컴파일은 구동 전에 이미 다 알고 있지만, interpreter는 읽어야 해석이 됨; 그래서 java에서는 틀렸을 때 구동전임에도 빨간줄 그이면서 반응하는 것임;

 

*primitive & complex(reference) data

-complex -> function, object

 

    // JS 스타일

    console.log(typeof 100 == "100"); //true값 리턴됨, type과 value가 구분되어 있다고 생각하면됨; ===로 해야지 false 나옴

    console.log(typeof undefined);

    console.log(typeof NaN); // 숫자가 아님을 말하는 것인데; 소속은 또.. number

    console.log(typeof Infinity); // return number;

    console.log("나도 \"쌍따옴표\" 를 사용하고 싶어요");

 

    console.log(typeof ["saab", "volvo"]); //배열도 object임

    console.log(typeof function() {}); // return function type

    cnosole.log(typeof {name:"John", age:34}); // JS object; key & value

 

-1초 연산 횟수 = 헤르츠(Hz);

-RAM은 작업 공간이라고 생각하면됨; 저장공간이 아님!! Random Access Memory

 

*function/함수/메소드

-JS에서는 overloading없음; 대체 기법은 optional parameter임;

 

  <script>

    function func_return_ok() {

      return "리턴~";

    }

 

    function func_return_no() {

      console.log("리턴이 없습니다.");

    }

 

    let answer = func_return_ok();

    console.log(answer); //그냥 불러와서 찍음

 

    let answer2 = func_return_no(); // 부른 상태에서 내부 console.log값 찍힘

    console.log(answer2); //return 값이 없었으니 answer2에는 아무 값도 안들어감.

 

  </script>

 

*function 자체를 return이 있는 형태로 만든다는 것은 어떤 변수에 받아서 쓰겠다는 것임.

 

1)var x = function (a,b) {return a * b};

->x에 계산결과값이 아니라, 함수 자체가 들어있음.. 이말은 즉,

 

2)function x(a,b) {

    return a*b; 라는 것!!

}

 

-2)는 미리 설계한 느낌; 1)은 익명함수로 즉석에서 만든 것;

-JS에서 익명함수는 굉장히 많이 사용됨 = 안드로이드 이벤트 new touchListener도 익명함수임.

 

*optional param

function my_func(name, age, hobby="코딩", address="서울")

 

-JS에서는 param 하나 빼먹어도 그대로 작동은 됨.

-기본값 설정을 통해서, 들어오지 않는 값은 기본값으로 처리해줌.. 

-optional param 사용 시, optional param은 모두 뒤로 빼놓아야 제대로 작동 함. 그래야지 무엇을 필수적으로 던질지 결정할 수 있음;

 

 

*JS object

-class가 classification의 축약어임; 즉 클래스별로 분류했고, 이 클래스를 사용할 수 있게 메모리에 올린 형태가 객체이자 인스턴스;

-JAVA 객체란 시작과 끝이 분명한 존재; 정확하게 분류; 

-JS의 객체도 JAVA의 개념적 정의와 80% 이상 닮음. 다만 사용 방법만 매우 flex함.

-Java script object notation = json

-json은 결국 js에서 나온 것.

-java - python 등 여러 언어에서 json으로만 데이터넘기면 다 호환가능함; 아주 뛰어난 데이터 전송 기법 중 하나;

 

    let person = {

      name: "Ki",

      age: 31,

      hobby: "tennis",

      address: "gangseo",

      gender: true,

      job: "sw-engineer",

      introduce: function() {

        return "저는" + name + "입니다.";

      }

    };

 

*호출법

    console.log(person.name);

    console.log(person['hobby']);

 

*this

-사용하려는 property(코드)를 소유하고 있는 객체

-생성자는 이름도 대신 응답하지만, 작동도 하는 동명사 느낌~?

 

*JS계좌 예제

  <script src="10_object.js"></script>

  <script>

    korea_bank.fixed_deposit(customer.money, customer.period);

  </script>

 

let korea_bank = {

 

  fixed_rate:0.023,

  periodical_rate:0.031,

 

  fixed_deposit: function (amount, period) {

    console.log("정기예금 최종 만기 금액은 " + (amount + ((amount * this.fixed_rate) * period) ) + "입니다.");

  },

}

 

let customer = {

  money: 1000000,

  period: 3

}

 

*JS event

-body = 브라우저 view창 아님.....  동등하다고 받아들이지 않기

-element가 tag라고 생각하면됨;

-event 속성은 element에 부착하는것으로서 button 뿐만 아니라 div 등 다른 element에도 작동함.

-연습시는 console.log or debugger; 달고 살자~ 멈추면서 실행 순서 확인 가능함;

 

 

 

*String, Number, Array, Date, Boolean 등 자가 학습

-indexOf 0부터 시작; 값없을 시 -1 출력

-str.indexOf("locate", 15); 15자리부터 locate를 찾기 시작한다는 것;

-array; array는 object 형태(typeof);

 

var cars = [

  "Saab",

  "Volvo",

  "BMW"

];

 

-substr(start, length); 'hi this' 까지 나옴;

 

    let hi = "hi this is Ki"

    let hi1 = hi.substr(0, 7);

    console.log(hi1);

 

-slice(start, end); 7번~13번자리에있는 banana가 출력됨;

var str = "Apple, Banana, Kiwi";

var res = str.slice(7, 13);

 

-JS array는 string + int가 하나의 배열에 들어갈 수 있음;

var person = ["John", "Doe", 46];

 

-Json 형태로도 array에 넣을 수 있음;

var person = {firstName:"John", lastName:"Doe", age:46};

 

-abcd순 정렬 / reverse

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.sort();

fruits.reverse();

 

-Date 객체 생성; 지정하여 생성가능; 연월일까지만 가능;날짜 띄우기

var d = new Date();

new Date(year, month, day, hours, minutes, seconds, milliseconds)

 

d = new Date();

document.getElementById("demo").innerHTML = d;

 

-date 객체 생성 후, getFullYear(), getMonth(), getDate(), getDay(), 등으로 특정값만 가져올 수 있음. month는 (0-11) / Day()는 (0-6/일요일부터 시작~토요일까지)

 

var d = new Date();

document.getElementById("demo").innerHTML = d.getDay();

 

-Date.now() 현재 시간;

-set의 경우도 같은 방식으로 가능함, setDate(), setMonth(), setFullYear(),

 

var d = new Date();

d.setFullYear(2020);

document.getElementById("demo").innerHTML = d;

 

*JS는 string인데도, + 제외하고는 / 나누고, 곱하고, 빼버림...

-number는 숫자와 NaN으로 나뉜다고 보면됨.

 

isNaN(variable); 

 

source:w3schools.com

 

*반올림

-소수점 자릿수 나타내는 것, 반올림하여 진행;

 

    let x = 10.3466;

    let y = x.toFixed(2);

    console.log(y);

 

    출력: 10.35

 

-기타 숫자 관련 return 값

Number(true);          // returns 1

Number(false);         // returns 0

Number("10");          // returns 10

Number("  10");        // returns 10

Number("10  ");        // returns 10

Number(" 10  ");       // returns 10

Number("10.33");       // returns 10.33

Number("10,33");       // returns NaN

Number("10 33");       // returns NaN

Number("John");        // returns NaN

 

-boolean 관련

var x = ""; undefined; null; NaN;    <-> 그 외 값이 있는 것은 다 true;

boolean(x); // 모두 false 뜸;

 

-math

ceil은 가질 수 있는 최대 정수값/ floor는 바닥값,,, 실수 기준으로 하면 4.8의 ceil은 5, floor는 4;

-random 0.0000001~0.999999; 0과 1사이의 실수값; 

 

math.floor(math.random() * 10);

math.floor(math.random() * 10) + 1;  //1~10까지 나옴

*61 + 40 // 뒤에 더하는건 최소값, 앞에 곱하는건 범위

 

let a = Math.floor(Math.random() * 3) + 1; // 1~3출력

 

-if문

-Java와 같음!

 

*삼항연산자

-true면 전자, 아니면 후자 출력.

 

result = inputNum > comNum? "더 작은 수를 입력하세요~" : "더 큰수를 입력하세요~";

 

let result = a > 2? "3이 나왔네요 럭키!" : "ㅉㅉ 1~2다..";

console.log(result);

 

언제 읽느냐에따라... 위치가 달라져야함, 버튼을 눌렀을 때 변수에 값이 담기게 해야함; 그렇게하지 않으면 미리 읽어버려서 값이 undefined 처리됨;

 

*출력/두 방식 모두 가능;

<p id="show"></p>

 

show.innerHTML ="하이";

document.getElementById("show").innerHTML = "하이2";

 

*특정 html id안에 값넣기

document.getElementById("wdr").innerHTML = win + ", " + draw + ", " + lose;

document.getElementById("info").innerHTML = text;

 

*특정 변수를 element(tag)와 연결해서 값 넣기

<h1>Me : <span id="myChoice"></span></h1>

let me = document.getElementById("myChoice"); 

me.innerHTML = "가위";

 

*input text에 입력된 값 가져오기

 

  입력창 : <input type="text" id="input">

  <button id="btn">Enter</button>

 

  <script>

    document.getElementById("btn").addEventListener("click", function () {

 

      let a = document.getElementById("input").value;

      console.log(a);

 

    });

  </script>

 

*연습용 예제

 

1)팩토리얼

 

  <script>

    // 팩토리얼 : 1부터 어떤 양의정수까지의 수를 모두 곱한 값

    // 3을 입력하면 1*2*3 = 6 > 팩토리얼

    // n을 입력하면 1 * 2 * 3 * ...... * n = n!

 

    function input(input) {

      var num = input;

      var init = 1;

 

      for (var i = 2; i < num+1; i++) { // 0, 1, 2....

        var init = init * i;

      }

      document.write(init);

    }

    input(8);

 

  </script>

 

2)별표찍기

 

  <script>

    // 높이를 입력하면

    // * 로 삼각형을 그리는 함수를 구현하여

    // 문서에 출력해보기

 

    function input(input) {

      var num = input;

 

      for (var i = 1; i < num+1; i++) { //0, 1, 2, 3, 4  = 5개;;;

        document.write("

")

        for (var j = 0; j < i; j++) {

          document.write("*");

        }

      }

    }

    input(10);

  </script>

 

*prototype

-대부분의 클래스를 만들어 놓은 것; 서버쪽에서 유의미함; 웹에서는 의미없음;

 

*배열

-기본형태: var cars = ["KI", "GU", "MJ"]; // new형태로 안만듬;

-형태 구분없이 하나의 배열에 넣어짐; (string, int, array, function, json, {object(객체) / key:value} / literal type);

-JS에서는 생성자가 있긴 하지만 큰 의미는 없음;

-arr.length; length -1 = 마지막인자값;

-arr.sort();

-myArr[myArr.length] = 3;  // length 이용해서 맨 마지막에 넣을 수 있음

-myArr.push(3);

 

*instanceOf

-특정한 객체(instance)의 타입을 확인하는데 사용함. 어떠한 클래스에서 생성됐는지 확인하기위해 사용함; 또한 자식클래스에서 생성된 객체도 확인됨;

 

class A { }

class B extends A { }

A a = new A();

B b = new B();

 

a instanceof A : true;

b instanceof A : true; //상속 받은 자식 클래스의 객체

a instanceof B: false; // a는 B의 부모이지 자식이 아님.

b instanceof B : true;

 

*연관배열

-person["firstName"]= "Ki"; 안써야하는 방식;

-배열 기능은 안함; 

 

 

*배열병합

기존배열명.concat(병합할배열명);

 

    let newArr = [];

    newArr = newArr.concat(

      arr1[0], arr1[1], arr2[0], arr2[1], arr2[2], arr3[0], arr3[1], arr3[2], arr3[3], arr3[4]

    );

 

*배열숫자정렬

-문자는 잘 정렬되나, 숫자는 ASCII 순서로 정렬되어, 숫자의 크기대로 나오지 않음

-a와 b값을 비교해서 정렬해주는 것, 내부 로직으로 만들어 놓은 것임;

 

        arr1 = [6, 19, 43, 3, 7, 14, 25, 11];

 

        //오름차

        function arrSortA(arr) {

          arr.sort(function(a,b) {

            return a - b;

          });

          console.log(arr[0]);

        }

 

        //내림차

        function arrSortD(arr) {

          arr.sort(function(a,b) {

            return b - a;

          });

          console.log(arr[1]);

        }