채소의 코딩세상

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..

클래스에 대한 내용은 다음의 링크를 참고하였다. 강의노트를 보며 공부하도록 하자. 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를 호출..

이 글은 다음의 유튜브 영상을 참고하여 작성하였다. 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..

어떤 배열에 있는 모든 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..

객체의 생성 객체를 생성하는 방법을 알아보자. 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. ..

함수란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다. 함수의 형식 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..

charAt() 함수는 문자열에서 지정된 위치에 존재하는 문자를 찾아서 반환하는 함수이다. charAt() 함수의 특징을 몇가지 살펴보자. 자바스크립트의 문자열 내의 문자는 왼쪽에서 오른쪽으로 인덱스가 매겨지는데 여기서 인덱스의 순번은 0부터 시작되고 마지막 인덱스 순번은 -1로 매겨진다. 인덱스가 문자열의 길이를 벗어가게 되면 빈 문자열을 반환한다. charAt() 함수의 사용법을 알아보자. 문자열.charAt([index]) 예시를 몇가지 살펴보자. let A = 'Vegetable'; console.log(A.charAt(0)); console.log(A.charAt(A.length-1)); 결과는 다음과 같다. V e

배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형이다. 이 때 배열 내부에 들어 있는 값을 요소라고 한다. [요소, 요소, 요소, ... , 요소] 배열에 요소를 추가해보자. 총 2가지 방법이 있다. push() 메소드를 사용하는 방법 concat() 메소드를 사용하는 방법 unshift() 메소드를 사용하는 방법 인덱스를 사용하는 방법 첫번째 방법부터 살펴보자. push() 메소드는 배열의 끝에 원소를 추가하는 방법이다. 사용방법은 다음과 같다. 배열.push(요소) 두번째 방법을 살펴보자. concat() 메소드는 복수의 원소를 배열에 추가하는 방법이다. 사용방법은 다음과 같다. var li = ['a', 'b', 'c', 'd', 'e']; li = li.concat(['f', 'g']..

NaN은 자바스크립트에서 숫자이지만, 숫자로 나타낼 수 없는 숫자를 뜻한다. 이게 뭔 소린가? 할 수 있는데 다음의 코드를 실행시켜 결과를 확인해보자. Number("$273") NaN typeof(Number("$273")) 'number' 보다시피 $273을 Number라는 함수를 사용해서 숫자로 변환했으므로 자바스크립트에서 자료형은 숫자라고 나오지만, 실직적으로 숫자로 변환할 수 없으므로 'Not a Number' 라고 출력을 하는 것이다. 추가로 특정 값이 NaN인지 체크를 하는 방법이 있다. 바로 isNaN을 이용하면 된다. 다음의 코드를 보자. isNaN("273") false isNaN("$273") true

키워드란 자바스크립트가 처음 만들어질 때 정해놓은 특별한 의미가 있는 단어를 말한다. 식별자란 프로그래밍 언어에서 이름을 붙일 때 사용하는 단어를 말한다. 식별자를 만들 때는 다음과 같은 규칙을 반드시 지켜야 한다. 키워드를 사용하면 안됩니다. 숫자로 시작하면 안됩니다. 특수문자는 _와 $만 허용합니다. 공백 문자를 포함할 수 없습니다. 식별자로 사용 가능한 단어와 불가능한 단어를 살펴보자. 식별자로 사용 가능한 단어 식별자로 사용 불가능한 단어 alpha alpha10 _alpha $alpha AlPha ALPHA break 273alpha has space 식별자를 만들 때 자바스크립트 개발자 대부분이 지키는 관례가 있다. 이는 식별자의 의미를 더 명확하게 하려고 사용하는 규칙이다. 클래스의 이름은 ..