본문 바로가기

WEB/JavaScript

(17)
[Javascript] json json에 관한 내용은 다음의 링크를 참고하였다. https://github.com/dream-ellie/learn-javascript/blob/master/notes/json.js 'use strict'; // JSON // JavaScript Object Notation // 1. Object to JSON // stringfy(obj) let json = JSON.stringify(true); console.log(json); json = JSON.stringify(['apple', 'banana']); console.log(json); const rabbit = { name: 'tori', color: 'white', size: null, birthDate: new Date(), jump: fun..
[Javascript] 클래스 클래스에 대한 내용은 다음의 링크를 참고하였다. 강의노트를 보며 공부하도록 하자. https://github.com/dream-ellie/learn-javascript GitHub - dream-ellie/learn-javascript: 자바스크립트 입문편 노트 컬렉션 ✨ 자바스크립트 입문편 노트 컬렉션 ✨. Contribute to dream-ellie/learn-javascript development by creating an account on GitHub. github.com 1. getter and setter에서 변수명에 ._를 붙이는 이유 this.age는 getter를 호출하고 = age는 setter를 호출한다. 여기서 setter의 내부를 들여다 보면 내부의 문장은 setter를 호출..
[JavaScript] var를 사용하면 안되는 이유 var 변수는 ES6 문법 이전에 사용하던 mutual 변수 선언 방법이다. 하지만 이는 많은 문제가 있어서 현재는 let만 써야만 한다. 그럼 어떤 문제가 있을까? 1. Hoisting (변수를 선언하기도 전에 사용이 가능) MDN에서 정의한 Hoisting의 의미를 알아보자. 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 쉽게 말해, 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는것이다. var를 사용하면 다음과 같은 미친짓이 가능하다. 직접 확인해보자. age = 7; var age 위와 같이 변수를 선언하기도 전에 사용을 해도 정상적으로 출력이 가능하다. 이 경우 선언 전에도 에러가 나지 않아 사용이 가능하기..
[JavaScript] html에서 js파일을 가장 효율적으로 포함하는 방법 이 글은 다음의 유튜브 영상을 참고하여 작성하였다. https://www.youtube.com/watch?v=tJieVCgGzhs&t=1s 1. head 위 방법은 코드 순서대로 html코드를 parsing하다가 js파일을 만나면 서버에서 다운받아 실행한 다음에 다시 parsing을 시작한다. 단점: js파일의 크기가 너무 크고 인터넷이 느리다면 웹페이지를 로딩하는데까지 오래걸린다. 2. body 위 방법은 브라우저가 html 코드를 파싱해서 준비가 끝난 후에 마지막에 script를 받아오는 방식이다. 장점: js파일은 받아오기 전에도 페이지의 컨텐츠를 보여줄 수 있다. 단점: 만약 웹사이트가 js에 매우 의존적(의미있는 컨텐츠를 보려면 js가 필요하다면)이라면 의미가 없다. 3. head + async..
[JavaScript] Array.map() 메소드 어떤 배열에 있는 모든 element들의 값은 변경해서 새로운 배열을 만들어야 할 때가 있다. 이때 반복문을 사용해서 수동으로 처리해도 되지만, 간단히 Array.map() 메소드를 사용하면 편리하다. 다음의 코드를 비교해보자! let arr = [3, 4, 5, 6]; for (let i = 0; i < arr.length; i++){ arr[i] = arr[i] * 3; } console.log(arr); // [9, 12, 15, 18] 위 코드는 for문을 이용하여 배열의 요소값을 변경시킨 것이다. let arr = [3, 4, 5, 6]; let modifiedArr = arr.map(function(element){ return element *3; }); console.log(modified..
[JavaScript] 객체 객체의 생성 객체를 생성하는 방법을 알아보자. 1. var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80}; 2. var grades = {}; grades['egoing'] = 10; grades['k8805'] = 6; grades['sorialgi'] = 80;​ 3. var grades = new Object(); grades['egoing'] = 10; grades['k8805'] = 6; grades['sorialgi'] = 80; 이번엔 객체를 가져오는 방법을 알아보자. 결과는 80이다. 1. var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80}; alert(grades['sorialgi']); 2. ..
[JavaScript] 함수 함수란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다. 함수의 형식 function 함수명( [인자...[,인자]] ){ 코드 return 반환값 } 함수의 정의와 호출 function numbering(){ i = 0; while(i < 10){ document.write(i); i += 1; } } numbering(); return function get_member1(){ return 'egoing'; } function get_member2(){ return 'k8805'; } alert(get_member1()); alert(get_member2()); 인자 function get_argument(arg){ return arg; } alert(get_argument..
[JavaScript] charAt() 함수 charAt() 함수는 문자열에서 지정된 위치에 존재하는 문자를 찾아서 반환하는 함수이다. charAt() 함수의 특징을 몇가지 살펴보자. 자바스크립트의 문자열 내의 문자는 왼쪽에서 오른쪽으로 인덱스가 매겨지는데 여기서 인덱스의 순번은 0부터 시작되고 마지막 인덱스 순번은 -1로 매겨진다. 인덱스가 문자열의 길이를 벗어가게 되면 빈 문자열을 반환한다. charAt() 함수의 사용법을 알아보자. 문자열.charAt([index]) 예시를 몇가지 살펴보자. let A = 'Vegetable'; console.log(A.charAt(0)); console.log(A.charAt(A.length-1)); 결과는 다음과 같다. V e