본문 바로가기
728x90

JS26

this & arrow function 연습문제 3개 + 해설 1. 간단한 메소드 만들기사람이라는 오브젝트가 하나 있습니다. 이 오브젝트에 sayHi라는 함수를 (메소드를) 하나 추가하고 싶습니다.  내가 푼 답: var 사람 = { sayHi : function(){ console.log("안녕 나는 손흥민")}, name: '손흥민',}사람.sayHi();var 사람 = { name: '손흥민',}사람.sayHi(); //안녕 나는 손흥민 위의 코드처럼 사람.sayHi()라고 작성하면 콘솔창에 '안녕 나는 손흥민' 이라는 글자가 나와야합니다. '손흥민'이라고 이름을 하드코딩해서 출력하기보다는실제 내 오브젝트에 있는 name에 해당하는 값이 출력되면 참 좋을 것 같군요. Q. sayHi()라는 함수를 어디서 어떻게 만들면 될까요? 이렇게 써 줌.이렇게 쓰면 콘솔.. 2024. 11. 27.
[JS/리액트] Ajax 한 눈에 보기 ( jquery / axios 의 공통점과 차이점) AJAX요청 JS - jQuery 로 요청$.get('https://codingapple1.github.io/hello.txt').done(function(){ });리액트 - axios 로 요청 axios.get("https://codingapple1.github.io/shop/data2.json").then(function(){ });axios.get("https://codingapple1.github.io/shop/data2.json").then(() => { });jQuery의 $.get와 Axios의 axios.get의 공통점공통점 >.done 아니면 .then 뒤에 붙이고 콜백함수넣고 파라미터(data - 작명 자유롭게) 하나 만들기$.get('https://codingapple1.github.. 2024. 5. 28.
[JS] 헷갈리는 querySelectAll과 Jqeury 포함 범위 .abc (클래스 abc) 를 가진 모든 div 포함 .abc 클래스를 가진 모든 것에 이벤트 리스너 달기제이쿼리$(".abc").on("click", function () {}); - [0] 이런 식으로 순서지정해줄 필요없음querySelectAll document.querySelectorAll('.abc')[0].addEventListner('click', function () {});- 한 번에 전부 다 선택하는 방법은 없음.$(.abc ) 셀렉터로 찾은 요소 중에 x번째 요소만 선택 제이쿼리$(".abc").eq(x).on("click", function () {});querySelectAlldocument.querySelectorAll('.abc')[x].addEventListner('clic.. 2024. 4. 27.
sort, map, filter 함수 (2) 준비물 - 버튼 누르면 - products 안에 있는 자료들을 다나가순 정렬하고 - 카드들 싹 지웠다가 products 순으로 다시 만들기 HTML 더보기 가격순 정렬 다나가순 정렬 #sort1 생성 가나다 순 정렬 방법 // 14-1) 가나다 순 정렬 var 어레이 = ["가", "다", "나"]; 어레이.sort(); // $("#sort1").click(function () {}); console.log(어레이); 변수(어레이) 에 .sort() 사용하면 됨. 콘솔에 출력 다나가 순 정렬 방법 // 14-1) 다나가순 정렬 var 어레이 = ["가", "다", "나"]; 어레이.sort(function (a, b) {}); $("#sort1").click(function () {}); console.. 2024. 4. 9.
sort, map, filter 함수 (1) array 정렬하는 법 - .sort() 사용 array - 순서 개념 有 - 정렬 가능 .sort() - 문자 정렬 - .sort() 이거만 붙이면 됨. var 어레이 = ["a", "c", "b"]; 어레이.sort(); console.log(어레이); 문자 역순 정렬 var 어레이 = ["a", "c", "b"]; 어레이.sort(function(a, b) { if (a > b) { return -1; // a가 b보다 크면 a를 더 앞으로 배치 } if (a < b) { return 1; // a가 b보다 작으면 b를 더 앞으로 배치 } return 0; // 같으면 변경하지 않음 }); var 어레이 = ["a", "c", "b"]; 어레이.sort().reverse(); console.log(.. 2024. 4. 8.
[JS] Ajax 정리 (3) 상품 더보기 버튼 누르면 상품3개(데이터) 가져오기 - get 이용 HTML 더보기 JS // -- 13-1) Ajax var products = [ { id: 0, price: 70000, title: "Blossom Dress" }, { id: 1, price: 50000, title: "Springfield Shirt" }, { id: 2, price: 60000, title: "Black Monastery" }, ]; products.forEach((a, i) => { var 템플릿 = ` ${products[i].title} 가격 :${products[i]["price"]} `; $(".row").append(템플릿); // console.log(a); console.log(products[i].. 2024. 4. 7.
728x90

티스토리툴바