| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
- SQL
- Login
- dateobject
- function
- 스파르타코딩클럽
- JOIN
- javascropt
- 시간보여주기
- classList
- localstorage
- MySQL
- gethours
- 스택큐
- 올바른괄호
- appendChild
- Database
- JavaScript
- getMinutes
- JavaScript#조건문#conditional
- 백준3052번
- java기초
- classname
- node.js
- 웹개발종합반
- 프로그래머스
- padEnd
- 자바스크립트
- LEFTJOIN
- padStart
- sanitize-html
- Today
- Total
목록JavaScript (11)
just do it
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 function solution(priorities, location) { let answer = 0; while (priorities.length > 0) { if (Math.max(...priorities) === priorities[0]) { answer++; if (location === 0) { break; } else { priorities.shift(); location--; } } else { let a = priorities.shift(); priorities.push(a); if (location === 0) { location = priorities.length - 1..
html에 아래 코드 추가해 입력할 창 만듦 1 2 3 4 Colored by Color Scripter cs 엔터를 누를때마다 텍스트창 비우게 하는 함수 만듦(입력한건 newToDo 변수에 저장) 1 2 3 4 5 6 7 function handleToDoSubmit(event){ event.preventDefault(); const newToDo = toDoInput.value; toDoInput.value=""; paintToDo(newToDo); } Colored by Color Scripter cs 입력한 newtodo를 그리는 함수 만듦 (+ appendChild함수 이용해 태그안에 태그 추가하기) 1 2 3 4 5 6 7 function paintToDo(){ const li = docume..
랜덤하게 백그라운드 이미지가 표시되게 하기 =>랜덤하게 이미지 고르고 그 이미지를 body에 추가하는 작업 그동안은 html을 항상 먼저 작성하고 js을 사용해서 html에 넣어주는 작업만 함 즉 js에서 직접 html코드를 생성한 적은 없음 그런데 이번에는 아래와 같은 html 태그를 html에 직접 쓰지않고 js를 이용해 '랜덤하게 선정된 이미지를 보여주는' img 테그를 생성하고 싶음. 이를 위해 태그를 만들어주는 createElement 함수 이용 사용예시 createElement 함수를 이용해 img 태그를 생성할 수 있게 됨 생성된 태그에 js에서 직접 위와 같이 이미지도 추가할 수 있음. 콘솔에 js로 만든 html태그 아래와 출력해 확인해봄. 이제 bgImage를 body 내부에 추가하면 ..
1. 명언이 들어간 배열이 포함된 quotes.js 파일을 따로 만들어줌 2. html에 js 연결, 명언이 들어갈 자리도 마련해줌 3. quotes 배열에서 랜덤하게 불러오게 만들기=random함수이용 Math.random() 함수 = 0~1사이의 랜덤한 숫자 제공 0~10사이 랜덤한 수 얻고 싶을 때 10 곱하면 됨(인용문구가 10개 라서) 그런데 배열에서 사용하기 위해선 소숫점 떼버리고 정수를 얻고 싶으니 내림 함수 사용 floor= 내림, ceil=올림, round=반올림 +) 그런데 만약에 인용구가 추가되어 15개가 됐을때, 0~14 까지의 랜덤한 수를 추출하고 싶다면? 위의 10 자리에 15를(인용구 갯수) 를 넣어주면 됨 0
시계 두자리수로 보여주기 padStart() 함수 이용 = string을 일정한 길이로 만들어주는 함수임 첫번째 인자= 원하는 길이 두번째 인자= 원하는 길이에 못미칠경우 문자 앞에 채울 문자 +) padEnd() 함수는 두번째 인자에 원하는 길이에 못미칠경우 문자뒤에 채울 문자를 씀 pad 함수 활용 예시 padStart()함수 이용 clock 코드 수정 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 const clock = document.querySelector("h2#clock"); function getClock (){ const date = new Date (); const hours = String(date.getHours()).padStart(2,"0"); const..
이전까지 만든거 greeting 으로 이름 바꾸고 clock이라는 js 파일 따로 만들어줌(기능별로 코드분리) html 에 clock도 연결해주고 interval ; 매번 일어나야 하는 무언가 ex) 매 2초마다 무슨일이 일어나게 하고 싶을 때 쓰는 것 >>이런 기능 제공하는 tool이 setInterval() setInterval은 2개의 인자를 받음 첫번째는 실행하고자 하는 함수 두번째는 함수가 호출되는 간격, 단위는 ms(milliseconds) (ex. 5000ms = 5초) sayHello 라는 함수를 2000ms(2초) 마다 출력함 처음 2초 콘솔에 아무것도 보이지 않다가 2초간격으로 hello 출력됨 setTimeout(); 일정시간이 흐른 뒤 함수를 딱 1번만 호출하고 싶을 때 두개의 인자..
html 에서 js를 읽을때 localstorage를 찾는게 첫번째단계 localstoreage ; 정보를 저장, 불러오고, 삭제하는 브라우저가 갖고있는 작은 DB같은 API 만약 locatStorage에 없는 정보 불러올 시(getItem 이용해 key 값을 받음) null 값을 받음 lalalala라는 key 는 없으므로 null 이 출력됨 localStorage는 key와 value 로 구성, key를 검색하면 그 값을 string으로 받음
localStroage username을 기억하고 싶음 = localStorage이용 localStorage는 브라우저에 뭔가를 저장할 수 있게 함, 가져다 쓸 수도 있음 storage에 있는 다양한 방법으로 유저정보를 저장할 수 있음 그중 local storage가 비어있는 모습임 localStorage 의 API살펴보면 method존재 1. setItem loalStorage에 정보를 저장 ex) localStorage.setItem('key 이름', 'value 값'); 2. getItem value 가져옴 ex)localstorage.getItem('key이름'); 3. removeItem key value 지워버림 ex)localstorage.removeItem('key이름'); username..
submit 실행시 새로고침되지 않도록 하는 법(feat. preventDefault(); ) 앞서, form이 submit될때마다 새로고침 되는 문제가 있었음 이젠 엔터를 눌렀을때 혹은 버튼을 눌렀을때(submit), 새로고침 하지 않고 user정보를 저장하고 싶음 summit는 엔터를 누르거나 버튼을 클릭할때 발생함 form을 submit할때 입력값을 받아서 저장하고 싶지만 위와같은 코드는 새로고침 됨 새로고침은 form submit의 디폴트임 function입력시 ()를 추가한다는건 즉시 실행한다는것임 위 코드에서 submit이 발생하면 loginSubmit를 자동으로 실행해줌 submit 이 발생하면 브라우저가 loginsubmit 함수를 호출하게 되는데 호출시 loginsubmit()
클릭할때마다 h1의 text가 파란색, 토마토색 으로 번갈아 가며 변하는 위 코드를 의도를 알기쉽게 변경 하지만 위코드도 보완할 점이 있는것이 h1.style.color=newcolor; 코드와 같이 css 가 아닌 js에서style을 변경하고 있다는 점임 위 코드를 CSS와 상호작용하는 JS코드로 변경 h1.className 은 getter이자 setter임 즉 console.log로 h1.className을 출력하면 처음엔 아무것도 없고 className입력시 생겨(처음 값 파란색이었다가 클래스네임 active로 생기면 토마토색) 클래스네임 액티브이면 클래스네임 없애 그러면 위에 css에서 설정한 h1디폴트값 파란색 클래스네임 없으면(파란색) 클래스네임 엑티브로 해줌(토마토색) css아래와 같이도 가..