WEB/Java Script 37

[ajax] ajax 기본 골격/ 미세먼지 api를 이용하여 구 별 미세먼지 수치 출력해보기/70이상은 빨간색으로 바꾸기

$.ajax({ type: "GET", url: "여기에URL을입력", data: {}, success: function(response){ console.log(response) } }) script부분 함수를 실행할 부분에 넣는다 function q1() { $('#names-q1').empty() $.ajax({ type: "GET", url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99", data: {}, success: function(response){ let rows = response['RealtimeCityAir']['row'] for (let i = 0; i< rows...

WEB/Java Script 2021.06.10

[Java Script] spread 함수 인자로 사용 / 배열의 원소를 모두 함수 인자로 넣고 싶을 때

함수 인자와 spread const myFunction(a) { // 여기서 a 는 파라미터 console.log(a); // 여기서 a 는 인자 } myFunction('hello world'); // 여기서 'hello world' 는 인자 함수를 만들때 매개변수는 파라미터, 함수를 사용할 때 매개변수로 넣는 값은 인자 function sum(...rest) { return rest.reduce((acc, current) => acc + current, 0); } const numbers = [1, 2, 3, 4, 5, 6]; const result = sum( numbers[0], numbers[1], numbers[2], numbers[3], numbers[4], numbers[5] ); cons..

WEB/Java Script 2021.04.24

[Java Script] rest / 특정값만 제외하고 가져온다/ 함수의 파라미터의 개수가 몇개일 지 모를 때 사용

const purpleCuteSlime = { name: '슬라임', attribute: 'cute', color: 'purple' }; // 객체에 비구조화 할당을 하면서 rest를 써주었다. const { color, ...rest } = purpleCuteSlime; console.log(color); // rest안에 color을 제외한 값들이 들어가있다. // rest이름은 바꿀 수 있다. console.log(rest); 배열에서의 rest const numbers = [0, 1, 2, 3, 4, 5, 6]; const [one, ...rest] = numbers; console.log(one); console.log(rest); 배열에서의 rest는 맨 마지막에 와야하고 제외한 것들을 모아서..

WEB/Java Script 2021.04.24

[Java Script] spread / 객체와 배열의 값을 그대로 복사해서 새로운 객체와 배열을 만드는 법

... 이거를 사용한다 spread spread 라는 단어가 가지고 있는 의미는 펼치다, 퍼뜨리다이다. 이 문법을 사용하면, 객체 혹은 배열을 펼칠 수 있다. const slime = { name: '슬라임' }; const cuteSlime = { name: '슬라임', attribute: 'cute' }; const purpleCuteSlime = { name: '슬라임', attribute: 'cute', color: 'purple' }; 기존의 객체가 가진 것이랑 또 추가해서 객체를 만들고 싶으면 spread 문법이 유용하다. const slime = { name: '슬라임' }; const cuteSlime = { ...slime, attribute: 'cute' }; const purpleCu..

WEB/Java Script 2021.04.24

[Java Script] 함수의 기본 파라미터/ 함수의 파라미터로 사용할 값을 넣지 않았을 때 기본값으로 사용할 값

function calculateCircleArea(r){ return Math.PI *r*r; } const area = calculateCircleArea(4); console.log(area); const area1 =calculateCircleArea(); console.log(area1); 이렇게 function을 만들어주었다. 그리고 파라미터에 아무것도 넣지 않으면 NaN이 나온다. function calculateCircleArea(r){ const radius = r|| 1; return Math.PI *radius*radius; } 아무것도 넣지 않았을때 기본값을 설정하려면 이렇게 하면 된다. radius에 r이나 1을 넣으면 된다 이것은 앞서 배웠듯이 r이 없으면 1이 나온다. 2021..

WEB/Java Script 2021.04.24

[Java Script ]조건문 더 스마트하게 쓰기 / 배열의 내장함수 includes/ 객체를 활용한 조건문 / 조건마다 다른 함수를 실행해야 할때

function isAnimal(text){ return (text ==='고양이'|| text ==='개'|| text ==='거북이'); } console.log(isAnimal('개')); console.log(isAnimal('노트북')); 이렇게 여러가지 값을 받아서 확인해야할 경우가 있다. function isAnimal(text){ const animals = ['고양이','개','거북이']; // 배열의 내장함수 //배열 안에 포함되면 true가 나오고 아니면 false가 나옴 return animals.includes(text); } console.log(isAnimal('개')); console.log(isAnimal('노트북')); 그럴때는 배열을 사용하면 된다. 그리고 배열의 내장함..

WEB/Java Script 2021.04.24

[Java Script] 비구조화 할당(구조분해) 너무 어렵다!!!

const object = { a: 1, b: 2 }; const { a, b } = object; console.log(a); // 1 console.log(b); // 2 객체에서 값을 꺼내주기 위해서 이렇게 사용한다. 비구조화 할당은 함수의 파라미터에서도 사용할 수 있다. const object = { a: 1, b: 2 }; function print({ a, b }) { console.log(a); console.log(b); } print(object); 그런데 여기서b에 값이 없다고 가정해보겠다. const object = { a: 1 }; function print({ a, b }) { console.log(a); console.log(b); } print(object); // 1 // u..

WEB/Java Script 2021.04.24

[Java Script] 논리연산자 && and 연산자/ || or 연산자 에서 truthy와 falsy/

논리연산자를 사용할때 꼭 true나 false를 사용하지 않아도 된다 truthy한 값이나 falsy한 값을 사용해도된다. const dog ={ name : '멍멍이' }; function getName(animal){ if(animal){ return animal.name; } return undefined; } const name = getName(dog); console.log(name); 이렇게 코드를 작성해주었다. getName이라는 function이 있는데 파라미터로 아무것도 적지 않으면 undefined를 리턴하겠다 이다. const dog ={ name : '멍멍이' }; function getName(animal){ return animal && animal.name; } const n..

WEB/Java Script 2021.04.23

[Java Script] Truthy and Falsy/ 확인하는 방법

function print(person){ if(person === undefined || person === null){return;} console.log(person.name); } const person = { name : 'John' }; print(person); if문에 있는 것은 null 과 undefined일 때 조건을 적용해주는 것이다. 에러가 나지 않게 그런데 매번 이렇게 할 수 없다. 있긴한데 더 좋은 방법이 있음 function print(person){ if(!person){return;} console.log(person.name); } const person = { name : 'John' }; print(person); 바로 !person이라고 쓰면 위의 값과 똑같다 왜냐?..

WEB/Java Script 2021.04.23

[Java Script] 삼항 연산자, 삼항 연산자의 중첩

codition ? true : false const array = []; let text = ''; if(array.length === 0){ text ='배열이 비어있습니다.'; }else{ text = '배열이 비어있지 않습니다.'; } console.log(text); 삼항 연산자를 사용 안했을때 const array = []; let text = array.length === 0? '배열이 비어있습니다.': '배열이 비어있지 않습니다'; console.log(text); 삼항 연산자 사용 const condition1 = false; const condition2 = false; const value = condition1 ? '와우': condition2?'blabla': 'foo'; cons..

WEB/Java Script 2021.04.23