바닐라 JS로 크롬 앱 만들기

momentum(모멘텀)이라는 크롬 확장자 프로그램 만들기. 크롬에 해당 앱을 추가하면 to-do 리스트, 시간, 날씨, 위젯 등의 개인 대시보드를 만들어 준다. 크로미움 기반의 웹브라우저 사용 권장(크롬, 웨일, 브레이브 등) js가 so 인기있는 이유1995년 프로

js는 이미 모든 브라우저에 설치되어 있다. 브라우저의 콘솔을 열어서 사용한다. 콘솔에서 뭔가를 하면 브라우저에 영향을 미친다. js를 테스트하고 싶으면 브라우저의 콘솔에서 하면 된다. 한줄씩만 작성이 가능하므로js폴더를 만들어준다. 1) "command + space

js는 html에 이미 연결되어 있기 때문에 html에 접근하고 읽을 수 있다. document = js관점에서 html을 의미하는 object, js에서 html 항목에 접근하는 방법이다. js에서 html 항목에 접근하는 방법1.document에서 항목들을 가져오고

.js파일이 있기 때문에 js를 통해 html 내용을 가져 올 수 있음. js에서 대부분 작업할 일: 유저의 event를 listen 하는 것 event: 어떤 행위를 하는 것, 모든 event는 js가 listen할 수 있음앞에 on이 붙은 것들은 event임유저가

코드 깔끔하게 정리하기raw string을 변수에 저장하기 classList 우리가 class를 목록으로 작업할수 있게끔 허용해준다.className은 이전calss를 상관하지 않고 모든걸 교체해 버린다. 그래서 버그가 일어날 수 있다.classList를 이용하는건 e

js로 input value 반환하기(참고만)input의 유효성 검사를 html에서 input이 form안에 있어야 된다. JavaScript에서 구현하는 대신에 가능하다면 required, maxlength 등 HTML의 기본 속성을 최대한 이용하기submit 감지

step 1. 유저가 이름을 제출하면, form 없애기(1. html 요소 자체를 없애기, 2. css를 이용해 숨기기 v) step 2. form이 제출되면 username 표시해서 인사하기 step 3. 유저네임 저장하기 (새로고침 할 때마다 유저이름 기억하기)뭔가

서로 다른 기능들에 대해서 파일 각각 만들어주기 interval : '매번' 일어나야 하는 무언가를 의미. setInterval(실행하고자 하는 함수명, 함수 호출 간격(ms)) : 함수를 특정 시간마다 실행함. 매 호출 사이에 얼마나 기다릴지 시간을 써주면 된다.

array 안에 10개의 object인 {} 를 콤마(,)로 구분하여 넣어준다. Math 모듈 사용Math.random() : 0 ~ 1 사이의 랜덤한 숫자 제공(float)integer(정수) 반환하기 Math.round(1.1) // 1 반환. 반올림. Math.c

img 폴더에 있는 이미지들과 images array 안의 요소 이름이 같도록 배열을 만든다. js에서 image를 html에 추가해준다. document.createElement 사용.자바스크립트에서 html 태그를 만들어서 적용할 수 있다.

todo를 입력할 form과 todo를 나열할 list 필요. form은 로그인폼과 마찬가지로 submit 이벤트를 가지며 브라우저의 기본동작(페이지 새로고침)이 있으므로 이를 event.preventDefault() 로 기본값을 없애준다.js 로 li 생성

사용자의 geolocation(위치)를 주고 날씨를 보여준다. navigator.geolocation.getCurrentPosition() 이걸 부르면 브라우저에서 위치 좌표를 준다. gps, 와이파이 등 getCurrentPosition()는 2개의 인자가 필요하다

모든 함수 핸들러는 객체 superEventHandler 내부에 작성했다.이벤트리스너를 불러올 때, 정의한 이벤트 함수가 이벤트 리스너보다 아래에 있으면 코드가 작동하지 않는다. https://developer.mozilla.org/ko/docs/Web/Eve

윈도우 창 크기가 변할 때마다 document의 배경색 변경하기 Document.createElement()이 메서드는 지정한 태그네임의 HTML 요소를 생성한다. 태그를 생성하고 innerText를 했는데 document에 텍스트가 나타나지 않았다. 태그만 만들고 어

이번 과제의 핵심은 랜덤 숫자를 생성하는 일이다. 사용자가 지정한 숫자 범위에서 랜덤한 숫자를 찾아햐한다.랜덤 숫자 조건: 0이상 입력값(지정값) 이하 Math.random() : 0이상 1미만의 수 생성generateNum.value 에 1을 더한 후에 Math.ra

js로 html요소 생성하기

new Date() : 현재 날짜와 시간를 가진 객체 생성자new Date(년, 월 - 1, 일) : 매개변수 값으로 날짜를 가진 객체가 생성, 월은 -1을 해주어야 한다. getTime() : 표준시에 따라 지정된 날짜의 시간에 해당하는 숫자 값(1/1000초(mi

사용자가 버튼을 클릭하면 colors배열에서 두가지 색상이 랜덤으로 선택되는 이벤트 실행하기0~1 사이의 랜덤 난수를 생성한다. 리스트 안의 color 수는 총 18개이므로 필요한 랜덤인덱스는 0부터 17까지이다. length: 배열의 길이를 구하는 프로퍼티 backg