JavaScript8 [JavaScript] Chrome에 Code Snippets 저장하기 + Debugger https://www.udemy.com/course/best-javascript-data-structures/ 자료구조 스터디에서 현재 main reference 삼고 있는 강의. 시중에 나와있는 강의 중에서 JavaScript를 이용한 알고리즘이라던가, 자료구조 강의가 마땅한게 없는 와중에 스터디에서 선택하게 된 강의 강의 초반 상당히 흥미로운 사실을 알게 되었는데, 바로 Chrome 개발자 도구를 이용한 JavaScript Code Snippets이 그것이다. DevTools(F12 | Ctrl + Shift + i) -> Sources -> Snippets 창이 있다! 괜히 유용한 것이 아니다. 크롬에 저장된 JS 코드니까 당연히 바로 실행(Run Snippet)해볼 수도 있다. 물론 코드의 결과물.. 2022. 1. 6. [JavaScript] map Python에서의 map 함수처럼 type 변환을 쉽게 쉽게 해줄 수 있는 함수가 뭐가 있을까 궁금해서 JS map MDN 문서를 살펴봤다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map Map - JavaScript | MDN The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value. developer.mozilla.org 이 Map은 간단히.. 2021. 11. 7. [JavaScript] 터미널에서 JS 파일 실행하기 JavaScript를 터미널에서 실행하기 node [파일이름].js nvm 필요 이제 알고리즘 테스트를 JS로 하려고 하니 Python, C, Java는 각각 터미널에서 run하거나 eclipse로 실행 결과 확인하는 법을 알겠는데 어라? JavaScript는 어떻게 실행결과 출력하지?? 생각이 들었다. 그냥 터미널에 js javascript 이렇게 입력해서 하는 건 아닌거 같고.. 그래서 구글에 'javascript print'라고 찾아보니 그냥 console.log()가 나오는 것이었다. 뭐 노마드 코더 실습 따라할 때도 결과 확인 할 때 중간중간 console.log()로 했던 기억은 있어서 익숙했는데 html없이 run하고 싶었던 것였다. 즉, Python에서의 print나 C에서의 printf .. 2021. 11. 1. [HTML/JavaScript] 노마드코더 8일차 4.5~4.7 local storage는 브라우저에 뭔가를 저장할 수 있게 해준다. 가져다 쓸수도 있고, 개발자 도구-Application-local storage 위치에 있다. local strorage API를 검색해서 보면 다양한 method들을 볼 수 있다. 또 반복해서 말해주는 것이 string이 2번 이상 반복되면 변수로 치환해서 변수로 쓰기! string이 오타나면 JS가 알려주지 않는데, 변수명이 오타나면 JS가 지적해주기 때문에 용이하다! 또한 그 변수들을 전부 대문자로 저장한다면(ex. USERNAME_KEY) '아 이게 원래는 string이구나'도 알 수 있다! 매우 이득 2021. 8. 31. [HTML/JavaScript] 노마드코더 7일차 4.4 eventListener로 form 내용들을 받고서 form을 안보이게 숨기고 싶을 때 1. JS를 이용해서 HTML 요소 자체를 지우던가 2. CSS를 이용해 display를 가릴 수 있다. 배우고 익숙해져야 할 습관: 같은 classname이 2번 이상 쓰이면 변수로 대체해서 차후에 바꿔야할 때 한꺼번에 바꿀 수 있도록 하는 것! 일일이 바꿔야한다 생각하면 캄캄하다. 변수와 string을 결합하는 법 greeting.innerText = `Hello ${username}`;//``안에 이렇게 써주면 "Hello "+username이랑 같은 역할을 해준다. 즉, 변수와 string을 결합하고 싶다면 이 2가지 방법을 쓰면 된다. ${variable name}을 쓰려면 ``(백틱) 안에 써야한다. ''따.. 2021. 8. 31. [HTML/JavaScript] 노마드코더 7일차 4.0~4.3 코코아톡 강의는 안들었지만 HTML tag 기능에 대해서 설명을 해줘서 정리해본다. HTML의 form은 기본 기능으로 새로고침을 포함하고 있다. submit은 form을 제출해주는 것 같은데, 버튼 클릭 대신 엔터만으로도 나오게 해준다. JavaScript에서도 계속 강조하는게 addEventListener("event",function)에서 function을 실행하려고 구태여 ()를 넣지 않아도 된다는 것이다. 그냥 fucntion 입력만을 통해서 function 호출이 가능하다. 그리고 그 function의 ()안은 function의 info를 return해준다는 사실 첫번째 argument를 통해 모든 EventListener function의 첫번째 argument는 항상 지금 막 벌어진 일들에.. 2021. 8. 30. [JavaScript] 노마드코더 바닐라JS 챌린지 6일차 복습 중 -(2) console.log로는 출력 그대로만 해주지만 console.dir은 element의 내부까지 출력해줄 수 있다. style element는 JS 형식으로 CSS 대신 수정해줄 수 있다. 하지만 style은 CSS에서 수정해주는 것이 좋다. JS는 event를 listen 해줄 수 있다는 게 진짜 혁명인듯 원래 function 실행은 (function)() 괄호를 해줘야 실행인데 element.addEventListener("click",function); 을 통해서 event가 발생할 때 JS가 알아서 실행해주도록 한다. 그리고 여기 function은 ()괄호를 넣지 않는 것이 중요 각 tag등이 어떤 element를 가지고 있는지는 MDN으로 검색해서 찾을 수 있다. Web API element.a.. 2021. 8. 28. [JavaScript] 노마드코더 바닐라JS 챌린지 6일차 복습 중 -(1) JS는 HTML을 가져오는게 아니라 object를 가져오는 거다 document는 hthml에 접근하기 위한 object element는 object 하위의 정보들 getElementBy~가 매우매우 중요하다 -> 이거로 element를 찾고 나면 그 html을 JS에서 수정해줄 수 있다. 암튼 JS로 html object들의 element들을 수정해줄 수도 있다 생코님 표현대로 하자면 이게 혁명적인 일이지 않을까 싶다. getElementBy~라는 한줄의 코드 덕분에 html을 JS에서 수정해줄 수 있다니..ㅎㅎ 다만, getElementBy~를 통해 가져올 element의 이름을 똑같이 써줘야 한다 getElementsBy~는 여러개 가져올 때 제일 좋은 건 querySelector를 이용해서 CSS.. 2021. 8. 28. 이전 1 다음
