영원히 흘러가는 강

css 미디어 쿼리처럼 js에서도 사용할수 있다 window.matchMedia("(min-width: 400px)").matches

js 기초 다지기 알고 하는것과 모르고 하는것의 차이는 극명하다! '백문이 불여일견' 의 뜻처럼 행동으로 옮기는건 중요하다 보는것과 한번이라도 타자를 쳐보는것은 다르다 라는 뜻을 내포하고 있는데 이 말이 내 모토였기도 하다 하지만 그동안 뒷전으로 미뤘던 기초중의 기초 동작 원리에 대해 알아보도록 하자 1. 자바스크립트 동작 원리 js 엔진 js 엔진은 메모리 힙 영역과 콜 스택으로 구성 되어 있고 메모리 힙은 메모리 할당,변수,함수 등이 담겨있고 콜 스택은 함수가 실행되는 순서를 기억하는 스택이다 js는 단일 스레드 프로그래밍 언어로 콜스택이 하나임을 말한다 스택의 특성상 여러가지가 쌓이면 맨아래의 작업은 무한정 대기하게 된다 이를 위하여 비동기 콜백이 존재 Web APIs Web API는 브라우저에서 ..

js는 동기적 처리 방식으로 위에서 아래로 순차적으로 읽어 내려간다 console.log('1'); setTimeout(function() { console.log('2'); }, 1000); console.log('3'); 위에서 부터 순차적으로 1,2,3번을 매겼지만 실제 출력은 1,3,2 순으로 될것이다. 비동기적으로 처리하는것은 효율성에 있어서 매우 큰 핵심 요소이며 callback -> promise -> async,await 로 발전해 왔다 먼저 콜백이란 js에서의 callback 함수는 다른 함수의 인자로써 이용되는 함수 라고 정의 되어있다 function getData(callbackFunc) { $.get('https://main.com', function(response) { callb..

포토폴리오 혹은 회사의 주소를 클립보드에 복사하는 기능 구현! 복사하기 구현 복사 오늘의 배운점 ! text.select() 와 document.execCommand()

html5의 canvas를 활용한 그림판 만들기 canvas에 중점보다는 js와 css에 중점을 두고 구현해봄 range에 대해 처음 알게됨!!! css 에서는 @import "reset.css" 로 css 리셋 display: flex; flex-direction: column; align-items: center; cursor:pointer; 위와 같이 간단한 css 적용 js에서는 canvas에 대한 내용 제외 한다면 Array.from(colors).forEach(color=> color.addEventListener("click",changeColor)); //배열로 변환시켜서 클릭시 함수호출 nomadcoders.co/javascript-for-beginners-2/lobby Watch Now..

바닐라 자바스크립트로 구현해본 타자게임! 자바스크립트의 능력을 위해 따라해보며 배운 코드 js js코드 let score=0; const GAME_TIME=5; let isPlaying=false; let timeInterval; let words=[]; let checkInterval; const wordInput=document.querySelector('.word-input');//단어 입력 input const wordDisplay=document.querySelector('.word-display');//단어 보여주는 div const scoreView=document.querySelector('.score');//점수 const timeView=document.querySelector('.ti..

유튜브 채널 노마드 코더에서 제공한 바닐라 자바스크립트에 대한 강의가 있어서 따라해보고 올리는 내 소감 + 변함 없는 상수는 대문자로 선언!! setInterval 을 이용한 현재시각 화면 출력 function getTime() {//시간 구하는 함수 const date=new Date(); const m=date.getMinutes(), h=date.getHours(), s=date.getSeconds(); clockTitle.innerText=`${h}:${m

슬라이더를 설명 할때에 위의 그림이 이해하기에 가장 적합한거 같다 (내용말고 그림만 보자면!) ul> li 를 위와 같이 container 안에서 이동 하는것으로 li를 위와 같이 옆으로 쭉 나열하고 버튼 클릭시에 container에는 옆의 값이 들어오는 로직이다 코드로 보자면 컨테이너 값을 변경 잘하는게 중요한점인거 같다!!! css 값은 언제나 어렵다.. 위치 설정은 더더욱..

QnA에서 많이 사용하는 아코디언! 자기 값일때만 해당 글을 보여준다! 배운점 : 1. 해당 로직! 코드와 함께 보자면 변수로는 버튼,글과 제목을 감싸는 클래스, 제목, 글에 대한 btncollapse ,question, heading, answer 제목을 클릭을 받으려면 for문으로 heading을 다돌면서 클릭 이벤트를 받으면 안에서 question 클래스에 기존 active 값 삭제하고 target이 된 부모에 active 추가 한다 그 외 나머지 for문은 초기에 모두 안보이도록 해주고 밑의 activePanel에서 지목된 active만 display해준다 그리고 버튼 클릭시 모든 anwer display=>none

html+css+js 바닐라 자바스크립트로만 구현해본 코드 수 많은 글과 컨텐츠가 존재할때에 맨위로 올라가기 버튼이 필요할텐데 이를 위해 구현 배운점 : 1. document.documentElement : documentElement 속성은 문서의 documentElement를 Element 객체로 반환합니다. HTML 문서의 경우 반환 된 객체는 요소입니다. 2. document.documentElement.scrollHeight, document.documentElement.offsetHeight 크로스 브라우징에서의 해결점 높이 구할때! let scrollHeight = Math.max( document.body.scrollHeight, document.documentElement.scrollHe..