자바스크립트 21

each문

JQuery each문 까지는 인터넷검색으로 확인을 했는데 each문을 중첩할 경우에는 어떤식으로 값이 나오는지 궁금해서 테스트 해봄 var arr1= [ { title : 'daum', url : 'http://daum.net', category : {topic : '정치', url : 'https://news.daum.net/politics#1'} }, { title : 'naver', url : 'http://naver.com', category : {topic : '사회', url : 'https://search.naver.com/search.naver?where=news&sm=tab_jum&query=%EC%A0%95%EC%B9%https://search.naver.com/search.naver..

Visual Studio Code 자바스크립트 터미널 콘솔 출력

Visual Studio Code 자바스크립트 실행 확인 가능하도록 추가 설치 자바스크립트를 Visual Studio Code를 이용하여 작성하였을 때 제대로 작성되었는지 확인을 하기 위해 추가로 Node.js를 설치해야 합니다. Node.js의 설치 파일 다운로드 방법과 설치 방법에 대해 알아보 mr-johndoe.tistory.com node.js가 설치된 상태에서 JavaScript Debug Terminal을 클릭하여 아래와 같이 실행을 해보았다. // Your mission here is to create a function that gets an array and returns a tuple with 3 elements //- the first, third and second element f..

자바스크립트 2022.03.09

replace() / JSON.stringify() / indexOf()

//"BBQ몬스터:24563033(60)1198(60)5.69.8(65)'" let burgerName = burger.split(':')[0] burgerName = burgerName.replace(/"/gi, '') let num = burgerName.indexOf(menus[idx].name) 주석에 있는 객체를 문자열로 가공하여 내가 원하는 문자열 값을 얻으려 한다고 하면 여기서는 햄버거 이름인 BBQ몬스터만 깔끔하게 꺼내려한다. 우선 객체를 문자열로 바꾸는 방법을 찾아봤다. target에 변경하고자 하는 값을 넣고 변수로 저장 JSON.stringify(target) 문자열로 바꿔주고 split을 이용해서 :을 기준으로 나눠준다. 그 후에 replace를 사용해서 "를 "" 로 변경하여 없앰..

자바스크립트 2022.01.09

[SweetAlert] alert 창을 예쁘게

기존의 딱딱한 alert창을 예쁘게 바꿔서 사용해보기로 했다. 원래 사용법 SweetAlert2 A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes sweetalert2.github.io 원래 사용법대로 하다가 파일 불러오는? 것 부터 잘안되서 아래 사용법 정리를 참고하여 적용 [JAVASCRIPT] SweetAlert2 사용 방법(alert 창 꾸미기) 오늘은 최종프로젝트에서 기존 자바스크립트의 alert창 대신 많이 사용했던 이쁘고 간편한 alert인 sweetal... blog.naver.com html에 다음 코드를 넣으면 바로 적용된다. 버전이 현재 것 하고 다..

자바스크립트 2022.01.09

파비콘(favicon) 만들기

Favicon & App Icon Generator Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons. www.favicon-generator.org 아래 사이트에서 PNG 파일을 넣어주면 ICO 파일을 만들어준다. 꼭 위의 사이트가 아니어도 된다. 보통 16x16으로 만든다고 해서 16x16으로 만들어봤다. head에 해당 코드를 넣어주고 경로를 적어주면 끝

자바스크립트 2021.12.30

클로저 (감춰진 참조)

함수는 실행되고 끝나면 변수의 사용도 끝이난다. 그러나 클로저를 사용하면 함수의 사용이 끝이난 후에도 상태를 유지할 수 있다. 전역변수로 하여 상태를 유지 시킬 수 있지만 값이 노출된다는 단점이 있다. 예문1 예문2(참조) 클로저를 사용한 Counting + 0 ★돼지저금통을 기억하자 function pigSave(){ let money = 0 return function (coin){ return money += coin } } const s1 = pigSave() console.log(s1(500))//500 console.log(s1(400))//900 console.log(s1(100))//1000 Closure | PoiemaWeb 클로저(closure)는 자바스크립트에서 중요한 개념 중 하나로..

자바스크립트 2021.11.16

자바스크립트 Event Target

*예문 function checkTarget(event) { var ele = event.currentTarget; console.log(ele); } test event.target // 클릭된 span 태그를 반환 event.currentTarget // 이벤트가 바인딩된 div 요소를 반환 *실습한 예제 B1 B2 B3 console.log(e.target) 각 버튼을 눌렀을때 실제로 출력되는건 B1을 누르면 B1, B2를 누르면 B2가 출력된다. console.log(e.currentTarget) 각 버튼을 눌렀을때 똑같이 div가 출력된다. 간단하게 정리를 잘해주셨다. 자바스크립트 event target 프로퍼티와 currentTarget 프로퍼티의 차이점은? 자바스크립트의 이벤트 중 클릭한 요..

자바스크립트 2021.11.16