HighLight in your life~

자바스크립트, String 객체의 메서드 - 문자를 처리하는 객체

concat(string) : 문자열에 string 문자열을 연결
replace() : 임의의 문자열에서 지정한 문자를 다른 문자로 변경
match() : 임의의 문자열에서 지정한 문자가 나타나는 첫번 째 위치 값을 반환
split() : 임의의 문자열을 지정한 문자열이 나타나는 위치들을 나누어 두 개 이상의 문자열 배열로 만들어 반환
toUpperCase() : 대문자로 변환하여 반환

*** 화살표 함수
1. 매개 변수가 없는 함수const hi = function() {  return "안녕하세요";}

2. 매개 변수가 없는 화살표 함수const hi = () => { return "안녕하세요?" };

3. 매개 변수가 없는 화살표 함수(중괄호 생략)const hi = () => "안녕하세요?";

4. 매개 변수가 1개인 함수const hi = function(user) {  document.wirte(user + " 님, 안녕하세요?");}

5. 매개 변수가 1개인 화살표 함수const hi = user => {document.write(user + "님, 안녕하세요?");}

6. 매개 변수가 2개인 함수const sum = function(a, b) {  return a + b;}

7. 매개 변수가 2개인 화살표 함수const sum = (a, b) => a + b;

prompt()문과 parseInt() 함수 사용

var memNum = prompt("관람객은 몇 명입니까?);

var memNum = parseInt(prompt("관람객은 몇 명입니까?));

자바스크립트, switch 문

switch(조건)
{
  case 값1: 명령1
    break;
  case 값2: 명령2
    break;
   ......
   default: 명령n
}

    <script>
        var session = prompt("관심 세션을 선택해 주세요. 1-세일즈, 2-광고, 3-개발, 4-디자인");

        switch(session) {
            case "1" : document.write("<p>세일즈 세션은 <strong>101호</strong>에서 개최됩니다.</p>")
              break;
            case "2" : document.write("<p>광고 세션은 <strong>102호</strong>에서 개최됩니다.</p>")
              break;
            case "3" : document.write("<p>개발 세션은 <strong>103호</strong>에서 개최됩니다.</p>")
              break;
            case "4" : document.write("<p>디자인 세션은 <strong>104호</strong>에서 개최됩니다.</p>")
              break;
            default: alert("잘 못 입력했습니다.");
        }

    </script>

(조건) ? true일 때 실행할 명령 : false일 때 실행할 명령

    <script>
        var userNumber = prompt("숫자를 입력하세요.");

        if(userNumber !== null)
          (userNumber %3 === 0) ? alert("3의 배수입니다.") : alert("3의 배수가 아닙니다.");
        else
          alert("입력이 취소됐습니다.");
    </script>

1. undefined : 자료형이 정의되지 않은 상태 / 변수를 선언한 상태에서 값이 할당되지 않은 상태

2. null : 변수에 할당된 값이 유효하지 않은 상태

1. jQuery 공식 자습 웹 사이트

https://docs.jquery.com/Tutorials

http://visualjquery.com

HTML 주석 : <!-- 주석문 -->
CSS 주석 : /* 주석문 */

2.  객체: 기본 데이터 타입을 제외한 모든 것을 복합 데이터로 인식함
let myDate = new Date(); // Date 객체를 생성하여 myDate 변수에 저장한다
myDate.getHours(); // Date 객체에서 현재 로컬에 있는 시간을 알아 온다.

3. 배열 생성 방법 3가지
 가. new 생성자 사용
 let my_arr = new Array(); // 배열 객체 생성
 my_arr[0] = 0;
 my_arr[1] = 1;
 my_arr[2] = 2;
 console.log(my_arr);

 나. 배열 객체를 생성하면서 요소 추가
 let my_arr = new Array(0,1,2); // 배열 객체를 생성하면서 요소 추가
  console.log(my_arr);

 다. [] 연산자를 사용하여 직접 생성
 let my_arr = ["korea", "usa","china"];
  console.log(my_arr);

4. 객체 생성 방법 3가지
 가. new 생성자 사용
 let obj = new Object(); // 빈 객체 생성
 obj.a = 0;
 obj.name = "홍길동";
 obj.fn = function(){};
 console.log(obj);

 나. 객체를 생성하면서 요소 추가
//비어있는 객체 생성
let person1 = new Object();

//person1객체의 프로퍼티를 할당
person1.name = 'michelle'
person1.age = 27
person1.sayHello = function(){
    console.log(this.name + 'Hello!');
}

console.log(person1);

let person2 = new Object({name:'michelle', age:27,sayHello:function(){
    console.log(this.name + 'Hello!');
}} );

console.log(person2);

 다. 중괄호({})를 사용하여 직접 생성
 let my_arr = {a:0, name:"홍길동", sex:"Male",fn:function(){}};
 console.log(my_arr);

// JSON : Javascript Object Notation

// [1] : JSON이란?
// 약자 --> Javascript Object Notation --> 자바스크립트 객체 표기법
// 주로 서버와 웹페이지 사이의 어떤 데이터를 주고 받을 때 많이 사용하는 포맷 형식
// Javascript에서 객체를 만들 때 사용하는 표현식
// 프로그래밍 언어도 아니고 문법도 아니고 단지 하나의 데이터 저장 방식 --> 그러나 규칙은 있다.

// [2]: 형식 확인
[
{"name":"lee", "age:10", "nationality":"South Korea"}
{"name":"Angga", "age:20", "nationality":"Indonesia"}
{"name":"Smith", "age:30", "nationality":"USA"}
{"name":"Adre", "age:40", "nationality":"France"}
]

// JSON은 "속성:값" or "key:value" 의 쌍으로 이루어진 데이터 객체를 전달하기 위해 만들어진 포맷
// 그런데 잘 보면 --> 자바스크립트의 배열과 객체를 만드는 사용방식과 비슷 --> 즉, 자바스크립트의 배열과 객체를 데이터에 적용
// 위 데이터는 --> 4개의 아이템으로 이루어진 배열이고 --> 각 항목은 3개의 Property를 가지는 객체로 구성
// 그렇다면 자바스크립트 배열이나 객체의 형식과 동일한가? --> 비슷하나 완전 같은 것은 아니다(X) --> 예를 들면, Property나 Value를 쌍따옴표로 처리한다

// [3]: JSON 특징
// 일단 사람이 읽기에(보기에) 좋은 구조와 텍스트를 사용
// 웹상에서의 비동기 처리 기반의 브라우저/서버 통신 등에서 데이터를 주고 받을 때 많이 사용
// 예전에 많이 사용하는 XML을 대체 --> XML은 Heavy하고 매우 복잡함.
// JSON은 XML보다 훨씬 Light하고 간결함

// [4] : 기타
// 파이썬 학습자 --> 딕셔너리(dict) 타입과 유사 --> key:value
// 거의 모든 언어를 지원
// XML, JSON 모두 계층적인 구조를 가지고 있다.

// [5] : 차이점
// JSON은 XML과 달리 종료하는 end tag가 필요 없다.
// JSON이 더 간결하고 짧다
// JSON은 배열을 사용할 수 있다 --> 위에서 말한 자바스크립트의 배열과 객체를 데이터에 적용한 포맷

// XML
<people>
<person>
<firstName>길동</firstName> <lastName>홍</lastName> <age>10</age>
</person>
<person>
<firstName>순신</firstName> <lastName>이</lastName> <age>20</age>
</person>
<person>
<firstName>남순</firstName> <lastName>강</lastName> <age>30</age>
</person>
</people>

// JSON

let people = [
  {"firstName":"길동", "lastName":"홍" , "age":"10"},
  {"firstName":"순신", "lastName":"이" , "age":"20"},
  {"firstName":"남순", "lastName":"강" , "age":"30"}
];

console.log(people);

----------------------------------------------------------------------------------------------------------------------------------------------------------

// JSON 자바스크립트 문법 사용


// [1] : 데이터 정의
let people = [
  {"firstName":"길동", "lastName":"홍" , "age":"10"},
  {"firstName":"순신", "lastName":"이" , "age":"20"},
  {"firstName":"남순", "lastName":"강" , "age":"30"}
];

// [2] : 수정 -> 홍 길동 --> 강 감찬
people[0].lastName = "강";
people[0].firstName = "감찬";

console.log(people[0].lastName + " " +people[0].firstName);

----------------------------------------------------------------------------------------------------------------------------------------------------------

// JSON 사용시 가장 중요한 2개의 메서드
// JSON.parse(), JSON.stringify()

// [1]: JSON.parse(jsonText) --> JSON 형식의 텍스트 --> 자바스크립트 객체로 변환
let jsonText = {"firstName":"길동", "lastName":"홍"};

console.log(typeof jsonText.firstName); // string
alert(jsonText.firstName);
----------------------------------------------------------------------------------------------------------------------------------------------------------

*** JSON 데이터 타입 - https://homzzang.com/b/js-92
***  https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON
*** https://lxxyeon.tistory.com/153

let dataObj = {"firstName":"길동", "lastName":"홍"};
console.log("변환 전 : " + typeof dataObj); // object

// [2]: JSON.stringify(dataObject) --> 자바스크립트 객체를 --> JSON 형식의 텍스트로 변환

const dataString = JSON.stringify(dataObj);
console.log("1차 변환 후 : " + typeof dataString); // string

let dataObjTrans = JSON.parse(dataString);
console.log("2차 변환 후 : " + typeof dataObjTrans); // object

----------------------------------------------------------------------------------------------------------------------------------------------------------

// map() 메서드와 reduce() 메서드 동시 활용 --> 특정 문자열을 배열과 객체로 변환

// [1] : 문자열 --> 배열로 --> 객체로 변환
// 이때 --> map()메서드와 reduce() 메서드를 함께 사용이 가능(Method Chaining)


// [2] : 실습
// 문자열
const someStr = "홍길동 10, 이순신 20, 강감찬 30, 김유신 40, 을지문덕 50";

// 배열로 만들기
const frag = someStr.split(', ');

// 반복 --> map() --> reduce() --> method chaining
// 메서드간 체이닝 연결시 주의할 것 --> 세미콜론(;) 없애는 것 주의 필요함!!! 
const result = frag.map(val => {

// 할 일 처리 --> return
let [k, v] = val.split(' ');
return {k, v:Number.isNaN(Number(v)) ? v : Number(v)};
});

const result2 = result.reduce((acc, obj) => {
acc[obj.k] = obj.v;
return acc;
}, {});

console.log(result);
console.log('-------------------------------------------------------------------------------------------------------------------------------------------------------');
console.log(result2);

-------------------------------------------------------------------------------------------------------------------------------------------------------

const someStr = "홍길동 10, 이순신 20, 강감찬 30, 김유신 40, 을지문덕 50";

// 배열로 만들기
const frag = someStr.split(', ');

// 반복 --> map() --> reduce() --> method chaining
// 메서드간 체이닝 연결시 주의할 것 --> 세미콜론(;) 없애는 것 주의 필요함!!! 
const result = frag
.map(val => {
  let [k, v] = val.split(' ');
  return {k, v:Number.isNaN(Number(v)) ? v : Number(v)};
})

.reduce((acc, obj) => {
  acc[obj.k] = obj.v;
  return acc;
}, {});

console.log(result);

// JSON replacer 옵션

// [1] : replace 옵션(Parameter)
// 1. 이 옵션을 사용하면 객체를 --> JSON 형태의 텍스트를 변환 시 --> 원하는 객체의 속성들만 선택해서  지정할 수 있다.
// 2. 기본적으로 replacer 옵션은 생략이 가능 --> 아예 안쓰거나 null로 지정
// 3. 생략 또는 null로 지정되면 변환할 객체의 모든 속성들이 JSON 변환 텍스트에 포함이 된다. --> undefined 값은 무시
// 4. replacer 파라미터는 함수 or 배열을 인자값으로 받을 수 있다.
// --> 함수를 통해 객체의 key:value --> 이때, value값을 체크하여 string이면 패스하고, 숫자형만 JSON 문자열로 만들 수 있다.
// --> value값이 string이면 undefined를 리턴하고, 아니면 해당 value 값을 리턴
// --> function, undefined, Symbol --> JSON에서 다루는 타입이 X

// [1] : 실습
let someJsonData = {"num":10, firstNumber:12345, secondNumber:678910, thirdNumber: 7891011, fourthNumber: 89101112};

// [2] : 변환 --> space 옵션을 사용
console.log(JSON.stringify(someJsonData, ['firstNumber', 'secondNumber' , 'thirdNumber'], 'Wt'));

// console.log(JSON.stringify(someJsonData, null, 'Wt'));

function replacer(key, value) {
if(typeof value == "string")
  return undefined;
return value;
}

let someThing = {"num":10, firstNumber:12345, secondNumber:678910, thirdNumber: 7891011, fourthNumber: 89101112};

console.log(JSON.stringify(someThing, replacer, '\t'));

-------------------------------------------------------------------------------------------------------------------------------------------------------

function replacer(key, value) {
if(typeof value == "number")
  return undefined;
return value;
}

let someThing = {"num":10, firstNumber:12345, secondNumber:678910, thirdNumber: 7891011, fourthNumber: 89101112, "socialNo":"ok"};

console.log(JSON.stringify(someThing, replacer, '\t'));