goshek 님의 블로그

/*    # 3. JSON객체    : JavaScript Object Notation(자바스크립트 객체 표기법)        JSON구조    : 기본 데이터 타입의 문자, 숫자, 배열, 불리언, 객체등 모두를 포함    >> 배열과 객체를 활용하여 자료의 형태를 구조화    key-value(키-값)의 쌍으로 데이터를 구성    >> 순수한 텍스트 형식의 자료: 키를 항상 따옴표로 작성    >> 함수 사용 불가    >> 문자열은 큰따옴표 사용을 권장    ? JSON사용    : 서로 다른 시스템 간에 구조화된 데이터를 전송하는데 사용    객체 정의*/let data=[{    name: 'Gwon',    age: 20,    job: 'developer',    hobby:{        ..

/*    object01.js    ! 자바스크립트 내장 객체    : 특정 작업 수행이나 복잡한 기능을 담은 메소드와 속성을 제공    # 1. Number 객체의 기본 메소드    cf) 기본 자료형 number        Number- 자바 스크립트 내부에 직접 정의되어 있는 객체(데이터)    : 수치형 데이터를 처리하는 메소드를 제공    1) toFixed()    : 소수점 이하 N자리 까지만 출력(반올림)*/let num= 123.4567;console.log(num.toFixed(2)); //123.46console.log(num.toFixed(0)); //123/*    isNaN(), isFinite()    : 각각 NaN인지 Infinity인지 확인    >> Number 객체..

function random(number){    return Math.floor(Math.random()*(number+1));};//이벤트 객체를 전달받아 이벤트가 발생된 요소의 배경을 변경// >>event(이벤트 객체).targetfunction bgChange(event){    const randomColor= `rgb(${random(255)},${random(255)},${random(255)})`;    //return randomColor;    //event.target: HTML요소(JS Dom요소- 객체)    event.target.style.backgroundColor= randomColor;}/*    ! 1. 이벤트 객체    : 이벤트 핸들러가 호출될 때, 브라우저가 자동..

htmlDOCTYPE html>html lang="ko">head>  meta charset="UTF-8">  meta name="viewport" content="width=device-width, initial-scale=1.0">  title>event01.htmltitle>  style>    div {      width: 50px;      height: 50px;      border: 1px solid black;      margin: 10px;      display: inline-block;    }  style>head>body>      button id="bgChange">Change Background Colorbutton>  span id="keydown">span>  hr ..

/*    # 1. 객체의 정의    : 관련된 데이터와 함수를 모아 놓은 집합    : 객체 내부에서는 데이터와 함수를 포로퍼티와 메서드라고 불림    cf) 객체지향 프로그래밍    : 실세계에 존재하고 인지하는 모든 것을 객체로 표현    # 2. 객체의 특징    : (참조) 데이터 타입 중 하나, 다양한 값을 담을 수 있는 컨테이너    # 3. 객체의 구조    객체 지향 프로그램의 객체 - 고유한 특성과 동작을 가지는 것    * EX) 사람이라는 객체를 정의    ?특성 (속성, 프로퍼티)- 변수    : 객체가 가진 데이터(값), 객체를 구성하는 정보의 일부, 해당 객체의 상태를 나타냄    - 이름, 나이, 성별, 주민등록번호... 등    ?기능 (동작, 메소드) -함수    : 객체..

/*    # 1. reduce()    : 배열의 각 요소에 대해 함수를 적용하여 단일 값을 생성    *기본 형태(구조)    ? reduce 메소드의 인자값: 콜백 함수, 초기값(initialValue)    배열명.reduce((accumulator, currentValue, currentIndex, array)=>{            }, initialValue);    *reduce 콜백함수의 인자값    1. accumulator    >> 이전 작업물의 반환값 (이전 리듀서 호출의 반환값)    : 첫 번째 호출에서는 initialValue값이 지정됨    2. currentValue- 현재 순회되는 값    3. currentIndex(선택)    4. array (선택)    +) i..

/*    !콜백 함수(고차 함수)    자료형: 기본 자료형 VS 참조 자료형(배열, "함수", 객체)    >> JS에서 함수는 "자료형"        , 변수에 할당 가능, 함수의 매개변수로 전달 가능(인자로 사용)    # 1. 콜백 함수(CallBack)    : 다른 함수에 인자로 전달되어, 그 함수의 내부에서 실행되는 함수    # 2. 콜백 함수의 중요성        - 비동기 처리          : 순차적인 코드 흐름을 개발자가 원하는 방식으로 제어 가능          : 사용자 행동에 반응하는 이벤트 내부에서 동작 가능    #3. 콜백 함수의 응용 사례    - 서버 요청 처리    - 이벤트 처리    - 타이머 함수    & 콜백 함수 예제    1) 선언적 함수를 사용한 콜백..

//함수 & 배열/*    ! 1. 배열의 합계를 구하기*/let array=[1,2,3,4,5];function sumArray(array){    let sum=0;    for(var i=0;iarray.length;i++){        sum+=array[i];    }    return sum;}console.log(`배열의 합계는 ${sumArray(array)}입니다.`);//배열의 합계는 15입니다./*    ! 2. 특정 수 이상의 요소 필터링*///배열 안에서 10이상의 요소만 필터링function filter_TenOver(array){    let filtered=[]; //10이상의 요소만 담을 새 배열 생성    for(let i=0;iarray.length;i++){     ..

/*    ?원본과 복사본의 독립성을 보장    스프레드 연산자(...)    : 배열 또는 객체의 요소를 개별 요소로 확장하거나, 여러 요소를 하나의 형태로 결합할 때 사용    1) 개별 요소 확장*/let sports=['축구', '야구', '농구'];let copy= ['배구',...sports,'펜싱']; //독립적인 주소 체계를 가짐copy[1]= 'baseball';console.log(sports);console.log(copy);//2) 하나의 형태로 결합let mergeSports1= [...sports, ...copy];console.log(mergeSports1);console.log([...copy, ...sports]);/*    !자바스크립트 배열의 기능    배열과 문자열 사..

/*    ! 자바스크립트의 배열*/let fruits=['사과','오렌지', '포도'];let num=[1,2,3,45,5];let empty_Array=[];let variableArray= ['문자', 123, true, undefined, null];let arrayFruits= new Array('사과', '바나나', '포도');/*    각 요소는 고유한 인덱스를 통해 접근 & 수정 가능    1) 요소 접근    배열명[인덱스번호]    2) 요소 수정    배열명[인덱스번호]= 수정 데이터 할당    cf) 참조 자료형    : 함수, 배열, 객체등 (복합 자료형)    >>변수에 값이 아닌 '메모리 주소를 저장'하여 참조    ?배열의 길이    : 배열명.length 속성    >> 배..