본문 바로가기

Java Script/JS basic43

[JS] 비동기3 | async, await async, await asynchonous인 Promise를 좀 더 간결하게 만들어 synchronous인 것처럼 만들어주는 API 이자 Syntactic Sugar이다. 모든 경우 async, await이 좋은 게 아니라 Promise를 써야 좋은 경우도 있긴하다. Syntactic Sugar 새로운 코드가 아니라 기존의 코드를 좀 더 간편하게 쓸 수 있게 하는 코드를 말한다. ex) class: proto 타입을 더 보기 편하게 만들어 주는 역할 백엔드에서 네트워크와 연결해 오기 까지 10초정도 걸리는 함수가 있다고 가정해 보자. 실행 되었을 때 'Jane' 유저의 이름을 반환해 준다. 함수를 호출하고 콘솔에서 출력을 해보자 이렇게 동기적으로 처리를 하면 네트워크에 연결되는 10초 동안 다음 코드는.. 2022. 5. 22.
[JS] 비동기2 | Promises란? | 프라미스 체인닝 Promises 란? 1. 콜백 함수 대신 비동기를 간편하게 처리할 수 있게 도와주는 오브젝트 2. 정해진 기능을 수행시 성공하면 성공의 메세지와 처리된 결과값을 전달해 주고, 실패 시 에러를 전달해준다. 3. network 통신을 하거나, 파일 읽어서 올 때 등 무거운 오퍼레이터를 수행시 프라미스를 사용하면 수행하는 동안 다음 코드들도 수행될 수 있다. 1.state 프로세스가 무거운 오퍼레이션을 수행하는 중인지 기능 수행이 완료되어 성공했는지 실패했는지 상태에 대해 알려준다. state: pending operation이 수행 중일 때 state: fulfilled / rejected operation 완료 / 실패 2. producer / consumer 차이 producer: 원하는 데이터를 제공.. 2022. 4. 27.
[JS] 비동기1 | 콜백 | 콜백 지옥 이 3가지를 알면 네트워크 통신 편하게 할 수 있다. 1. callback 2. promise 3. async, await Synchronous 자바스크립트는 동기적 언어이다. 이 말은 hoisting이 된 이 후부터 순서대로 코드가 실행된다는 말이다. 장점은 앞 코드 작업이 다 끝나야 다음 코드가 실행되기 때문에 코드의 흐름을 빨리 파악할 수 있다. 하지만 앞 코드 실행이 오래 걸리면 뒤에 있는 코드는 실행되기까지 한참을 기다려야 한다. Asynchronous 코드 순서와 상관없이 자신의 시간표 대로 움직인다. 멀티태스킹으로 실행되기에 코드 흐름 파악은 좀 걸려도 시간이 적게 걸린다. 언제 끝날지 모르는 명령이나 메인 흐름이 되는 작업이 아닐 때 비동기 처리 많이 한다. 서버와 웹브라우저가 서로 통신할.. 2022. 4. 26.
[JS] statement VS expression expression 10+13; 'hello'; 10 > 9; 10 < 20; true; a===20 && b===30; average = 55; statement는 컴퓨터가 특정 액션을 하도록 하는 것 변수 만들기, 함수 만들기, loop include creating a variable or a function, looping through an array of elements, evaluating code based on a specific condition etc. JavaScript programs are actually a sequence of statements. -- 출처 -- https://medium.com/launch-school/javascript-expressions-and-sta.. 2022. 4. 15.
[JS] Math.max() Math.min() Math.ceil() Math.max(a, b) a, b 중에 큰 수를 반환해준다. console.log(Math.max(5, 10)); //10 Math.min(a, b) a, b 중에서 작은 수를 반환해준다. console.log(Math.min(5, 10)); // 5 Math.ceil(3.92384) 소수점 달린 숫자 round up 하기 console.log(Math.ceil(32.65)); // 33 console.log(Math.ceil(8.1)); // 9 console.log(Math.ceil(-4.2)); // -4 2022. 4. 10.
자바스크립트 동작원리 stack, queue 자바스크립트를 작성하면 크롬, 사파리, 파이어팍스,,,같은 웹브라우저가 실행을 시킨다. html, css, js를 해석해 주는 엔진이 바로 브라우저 브라우저는 js를 해석하는 순서가 다른 언어와 다르다. 다른 언어들은 코드 쓴 순서대로 실행이 되지만 자바스크립트는 먼저 끝나는 것부터 결과가 나온다. 그 브라우저 동작원리에 대해 알아보자. 브라우저 동작원리 1. stack 브라우저가 js를 해석하는 단계가 있다. stack : 명령어 모아서 실행. 한 군데 밖에 없어서 한번에 한 줄밖에 실행을 못한다 (single threaded language) heap: 변수는 따로 저장해서 stack이 물어보면 알려줌 대기실로 보내지는 명령어 여기서 setTimeout같은 명령어는 기다렸다 실행해야하므로 stack에.. 2021. 9. 22.
JS] 애니메이션 효과 | setTimeout( ) | 버튼 클릭시 효과 버튼을 눌렀을 때 효과를 주려고 한다. CSS 일단 css에 클래스명 하나 정해서 효과를 설정해준다. JavaScript 버튼 클릭시 효과를 주기 위해 함수를 하나 만들었다. 파라미터를 currentKey로 이름 지을 것이고, 이 currentKey는 무슨 키를 눌렀는지를 나타내는 것이다. 무슨 키를 눌렀는지는 위에 있는 함수에서 내용을 받아올 것이다. 1번 buttonAnimation(buttonInnerHTML) 위에 있는 함수는 마우스 클릭시 실행되는 함수인데 이 함수가 실행될 때 buttonAnimation()함수도 같이 실행하게 하였다. 파라미터로 buttonInnerHTML를 받으면 buttonAnimation(currentKey)로 들어가서 실행된다. 2번 buttonAnimation(eve.. 2021. 8. 31.
JS] switch statement | switch, case, break, default switch statement variable의 value에 따라 다른 트랙으로 가는 것 각 버튼에 다른 소리가 나게 하려면 switch statement가 필요하다. if statement를 쓸 수도 있지만 그럼 if, else를 너무 많이 써야하니 switch를 쓴다. 참고) 7개의 드럼 html 코드 switch bare bones 7. 각 버튼의 innerHTML을 뽑아서 buttonInnerHTML에 담았다. 각 letter를 뽑아서 buttonInnerHTML에 담는 것이다. 8. switch (expression) switch on 할 variable을 넣는다. switch(buttonInnerHTML) : 각 letter를 담은 variable에 스위치 온할 것이다. 9,10,11 case.. 2021. 8. 29.
JS] 오브젝트란? / Constructor function 게임에서 호텔을 운영하게 되었다. 직원을 뽑아야 한다. 우선 벨보이를 뽑았다. 벨보이 한 명이 왔다 이름은 Jack이다. 나이는 23세이다. 워크퍼밋이 있다. 언어는 영어, 프랑스어를 한다. 이 벨보이에 관한 정보를 입력해야 한다면 다음과 같이 적을 수 있을 것이다. var bellBoy1Name = "Jack"; var bellBoyAge = 19; var bellBoy1Has WorkPermit = true; var bellBoy1Languages = "French","English"; 호텔이 잘되서 벨보이 2명을 더 뽑았다. 직원 정보를 하나 하나 적어주었다. var bellBoy1Name = "Alex"; var bellBoyAge = 22; var bellBoy1Has WorkPermit = t.. 2021. 8. 28.
JS] this 여기 드럼 버튼들이 있다. 드럼 버튼 하나를 눌렀을 때 eventlistener가 불러지고 거기에 연결된 함수가 호출되어 소리가 난다. 아래의 경우 드럼 버튼은 여러 개지만, 한 가지 소리에만 연결되어 있는 코드이다. 그럼, 각 드럼 버튼에 각각 다른 소리가 나게 할 수 없을까? 이 때 필요한 것이 this 이다. 이 때 this는 각 버튼의 아이덴티티이다. this를 좀 더 살펴보자 this가 콘솔에 나오게 중간에 있던 코드를 console.log(this); 로 바꿔보았다. 그러면 내가 누른 버튼의 내용이 콘솔에 나온다. 각 버튼의 텍스트만 콘솔에 나오게 하기 this는 클릭한 버튼이라 target이 된다. this 다음에 원하는 내용을 덧붙여준다. 버튼 클릭하면 글자가 흰색으로 바뀌게 하기 그럼 다.. 2021. 8. 27.
JS] 오디오 함수 자주 쓰는 문형 태그 안에서 일어나는 일 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio What this line of code will do behind the scenes is it will actually construct an HTMLAudioElement. https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement This HTMLMediaElement that we create has a whole bunch of properties and methods. https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaEleme.. 2021. 8. 27.
JS] debugger; 알아보기 크롬 개발자 툴에서 좋은 기능을 가지고 있다. 함수 단계별로 어떤 일이 벌어지는지 알 수있다. 콘솔에서 debugger;를 쓰고 shift + enter를 눌러서 다음 줄로 내리고 함수를 불러본다. 그럼 source 창으로 넘어가서 아래와 같은 내용이 나온다. 새 창 열리면서 자세히 설명 f = function calculater함수 바디에 놓고 또 아래화살표 누른다. 새창이 열리면서 바디 안에는 무슨 일이 일어나는지 설명이 되고 있다. 2021. 8. 26.
JS] 계산기 / higher Order Functions and Passing Functions as Arguments 이 전에 .addEventListener( ) 에서 함수를 인풋으로 사용하는 것을 보았다. 여기서 .addEventListener( ) 같이 다른 함수를 인풋으로 받는 함수를 higher order function이라고 한다. 아래는 클릭이 됐을 때 뭘할 지를 나타내는 코드이다. 여기서 주의 할 점은 인풋으로 들어갔을 때의 함수는 괄호( )를 사용하지 않는다는 것이다. handleClick안에 파라미터가 없다면 괄호를 쓰지 않는다. document.querySelector(".drum").addEventListener("click", handleClick ); ⭕️ document.querySelector(".drum").addEventListener("click", handleClick( )); ❌ 여.. 2021. 8. 26.
JS] anonymous function 익명 함수 anonymous 어나'너머스 function 일반 함수 사용시 함수를 따로 만들고 이름을 불러 실행 시킨다 document.querySelector(".drum").addEventListener("click", handleClick); function handleClick() { alert("I got clicked!"); } 익명 함수 사용시 익명 함수는 함수인데 이름이 없다. 그냥 function() 자체를 써준다. 함수를 따로 떼서 안만들고 실행까지 한 큐에 해결한다. function(){alert("I got clicked!")} 위에 있는 일반 함수 코드를 더 간단하게 이렇게 만들 수 있다. 2021. 8. 25.
JS] .addEventListener( ) .addEventListener( ); .addEvenListener( ) 메소드 자세히 보려면 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener method: action 표현 input 1 : event type 마우스 클릭등 어떤 액션을 취할 때일지를 적어준다 https://developer.mozilla.org/en-US/docs/Web/Events input 2: 보통 js 함수 마우스 클릭 같은 이벤트가 벌어졌을 때 뭘 할지를 적어준다. 2-1 함수를 만들고 이름을 넣기 이벤트리슨너 메소드의 파라미터에서 자바 스크립트 함수를 넣을 때 주의 할 점은 ( ) 를 넣지 않는다는 것이다. document.quer.. 2021. 8. 25.
JS] 드럼 킷 만들기 클릭하거나 해당 키보드 치면 드럼 소리나오게 하기 이미지, 사운드, html, css 는 강의 자료에서 가져옴 html, css는 기본 세팅해주심. 맨아래에 있음. 자바스크립트 편집 각 드럼 클릭시 반응하기 1. 클래스 drum에 해당하는 아이템 중에 querySelector로 첫번째 것만 클릭시 alert가 뜨게 해본다. querySelector를 button 태그보다는 클래스, Id로 하는 것이 좋다. 나중에 다른 곳에 button 태그가 생성되어서 엉뚱한 곳에 선택될 수가 있다. 2. 함수를 따로 만들지 않고 anonymous function으로 코드를 간단하게 해준다. 3. 첫번째 것만이 아닌 7개 전부 클릭시 alert가 뜨게 해본다. loop을 이용하면 편하다. for loop으로 drum 클.. 2021. 8. 25.
JS] 주사위게임 player 1, player 2가 서로 주사위 던져서 숫자 많은 쪽이 이겼다고 멘트 적어주기 index.js 파일을 만들고, html body 맨 마지막에 script를 붙여준다. js에서 랜덤 넘버를 만들어 담는다. 코드가 잘 적었나 확인해보려면 콘솔에서 테스트 해볼 수 있다. 랜덤 숫자가 나왔을 때 이미지 파일명에서 선택되어야 한다. 그 때 그 때 변경해야하므로 html의 기본 틀을 건드리지 않고 js에서 코딩을 한다. 랜덤으로 숫자가 나오면 이미지 소스에 들어가서 랜덤 이미지가 선택된다 이제 image sourrce attributes를 변경해야 한다. 이미지태그 모두를 불러온 후 첫 번째 이미지 태그 소스 변경하기 attributes 셋팅하기 ("변경하고 싶은 attributes 이름", 뭘로 .. 2021. 8. 23.
JS] 웹사이트에 자바스크립트 추가하는 법 css 를 html 웹사이트에 넣는 방법은 3가지가 있었다 1. in-line CSS html 태그에 직접 attribute를 넣는 경우 2. internal CSS htmldp 영역 만들고서 그 안에 attribute를 넣는 경우 3. external CSS 새로 페이지 만들어서 효과 자바스크립트도 크게 다르지 않다. 1. in-line JS html 태그에 직접 attribute 넣기 downside: not very modular, difficult debug, not good practice. 그냥 in-line은 쓰지마. 그래도 연습삼아서 실행해 보기 onload: body 태그가 로드업 될 때 onload에 있는 것도 수행이 된다. 큰따옴표가 여러개 있으니 브라우저가 alert(노란색)를 스트.. 2021. 8. 17.
JS] 피보나치 퀴즈 퀴즈 Fibonacci was an Italian mathematician who came up with the Fibonacci sequence: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144.... Where every number is the sum of the two previous ones. e.g. 0, 1, 1, 2, 3, 5 comes from 0 + 1 = 1 1 + 1 = 2 1 + 2 = 3 2 + 3 = 5 etc. Create a function where you can call it by writing the code: fibonacciGenerator(n) Where n is the number of items in the sequence. S.. 2021. 8. 16.
JS] 99 bottles of beer 퀴즈 99 Bottles of Beer 아래와 같은 노래 가사 만들기 99 bottles of beer on the wall, 99 bottles of beer. Take one down and pass it around, 98 bottles of beer on the wall. 98 bottles of beer on the wall, 98 bottles of beer. Take one down and pass it around, 97 bottles of beer on the wall. : : 1 bottle of beer on the wall, 1 bottle of beer. Take one down and pass it around, no more bottles of beer on the wall. No .. 2021. 8. 15.
JS] While Loops, For Loops While Loops vs For Loops 둘 다 반복인데 while은 state, 어떤게 true인 상태 일 때 반복 for는 iterate, 시작과 끝 입력하고 반복 While Loops true이면 계속 반복한다 더 이상 true가 아니면 다음 코드로 넘어간다. 기본형 사용 FizzBuzz 퀴즈 1~100까지 하나씩 계산해볼때 https://kingkongcoding.tistory.com/109 For Loops 기본 문법 for (i=0; i for 변환 while loop일 때 var i = 1; while(i for loop일 때 for (var i = 1; i 2021. 8. 15.
JS] 누가 점심낼까? 퀴즈 You are going to write a function which will select a random name from a list of names. The person selected will have to pay for everybody's food bill. important: The output should a returned from the function and you do not need alert, prompt or console.log. The output should match the example output exactly, including capitalisation and punctuation. 이름이 몇 개 입력될 지 모른다. Example Input: ["Angela",.. 2021. 8. 15.
JS] FizzBuzz 퀴즈 Fizzbuzz 퀴즈 Write a program that prints the numbers from 1 to 100. But for multiples of three print "Fizz" instead of the number and for the multiples of five print "Buzz". For numbers which are multiples of both three and five print "FizzBuzz". 1) array에 숫자 자동으로 증가시켜서 담기 일일이 입력하지 말고 자동으로 숫자 커지게 해서 담아보자. 함수를 만든다 ( 이상하게 fizzbuzz(); 함수 호출을 창안에서 하면 숫자 추가가 안된다. 아직 이유는 아직 모르겠다.. ) 또 이상하게 콘솔 창에서 함수 호출.. 2021. 8. 14.
JS] Arrays / 명단에 이름확인 퀴즈 사용자에게 이름 물어보고 guestList에 이름 있는지 확인후 이름 있으면 "welcome, name" 이름 없으면 "Sorry, you're not on the list." 내용 띄우기 var guestList = ["Jane", "Adam", "John", "Jack", "Jean"]; var guestName = prompt("what's your name?"); if (guestList.includes(guestName)) { alert("welcome "+ guestName); } else { alert("Sorry "+ guestName +", You're not on the list."); } 2021. 8. 14.
JS] 자바스크립트 Arrays array 언제 쓰나? variables는 데이터를 담는 통이라고 했다. var a = "Jane"; var b = 25; 그런데 이렇게 한 통에 하나의 데이터 밖에 담을 수 밖에 없는 것일까? 한 통에 여러 개의 데이터를 담을 수는 없을까? 당연히 가능하다 이 때 필요한 것이 array 이다. array syntax syntax는 다음과 같다 하나만 담을 땐 괄호가 없었지만 array로 담을 땐 [ ] (스퀘어 브레켓) 모양의 괄호 속에 데이터들을 입력한다. retrieve array 안에서 원하는 데이터 뽑아오는 법 var mycar = cars[1]; 원하는 번호 적어준다. 두 번째에 위치한 🚕가 mycar에 저장된다. .length; array 안에 데이터가 몇 개있는지 알려준다. cars.len.. 2021. 8. 11.
JS] 윤년 확인하기 leap year 윤년이란? 태양년과의 편차를 줄이기 위해 도입된 달력 시스템 예전에 쓰던 율리우스력은 4년에 한 번씩 하루를 늘려 366일이 되도록 하였다. 하지만 4년에 한 번씩 하루를 늘리면 약간 오차 발생 이를 보안한 그레고리력은 4년에 한 번씩 366일하는 거 그래로 하고, 400년 주기로 그 안에서 3일을 빼기로 했다. 그래서 100년에 한 번씩 윤년 안하는 걸로 하였다. 100년, 200년, 300년 단위는 윤년에서 빼면 3일이 빠지게 된다. 400년 배수 단위가 오면 윤년이 된다. https://www.timeanddate.com/date/leapyear.html 현대 대부분의 나라에서 그레고리력을 사용한다. 1896(윤년), 1900년(윤년아님)-4배수지만 100의 배수라 빠짐, 400배수는 아님 1904.. 2021. 8. 11.
JS] Comparators and Equality Comparators and Equality Combining Comparators ! not / opposite === (3개) 와 == (2개) 차이 a 에 숫자 1 , b 에 string 1을 넣었을 때 일단 각 타입을 보면 a 는 숫자 b 는 스트링으로 나온다 여기서 a와 b가 같은지 a==b로 물어보면 둘이 같다고 나온다 a === b로 물어보면 둘이 다르다고 나온다 === 은 모양이 아니라 타입까지 같아야 한다. 2021. 8. 10.
JS] If-Else Conditionals & Logic / advanced BMI (미해결) conditionals 조건문 statement를 평가한 후(evaluate) if에 맞는 true이면 거기에 맞는 시퀀스를 수행한다. if에 맞지 않고 false이면 else로 가서 거기에 있는 시퀀스를 수행한다. 1. 이 전에 만든 love calculator 기본 문형 이름 나오고 스코어 알려주기 2. 여기에서 만약 스코어가 100%가 나온다면 천생연분이라는 메세지 추가하기 아니면 그냥 기본 문구만 나오게 하기 조건문 만들고 거기에 === 넣기 3. 100%는 안나오니 50%만 넘어도 천생연분이라는 메세지 띄우기 조건문에 > 넣기 4. 더 세부적으로 나누기 70보다 큰 경우 30< loveScore 2021. 8. 9.
JS] 랜덤 숫자/love calculator/ dice game Math.random(); Random number generation 16 Decimal Place. 소수점 16자리까지 나옴 0~0.9999999999999999 사이에서 랜덤 숫자 나옴 ex) 0.3647382678956781 var n = Math.random( ); //0.3647382678956781 n = n * 6; //2.188429607374069 n = Math.floor(n); //2 주사위 던지기 만들기 var n = Math.random(); n = n*6; n = Math.floor(n)+1; // 0~5까지만 나와서 1 더해줌 console.log(n); pseudo random number 컴퓨터가 완전 random number는 아니고 pseudo random number.. 2021. 8. 9.
JS] 함수연습 / BMI 계산 weight, height 값 입력 받아 BMI 값 구하기 BMI = weight / height * height 숫자 지수(power): height*height 두 번 곱해도 되고, Math.pow(밑숫자 base, 지수 exponent)로 써도 된다. 반올림(round): Math.round() 를 쓴다. 2021. 8. 8.

티스토리툴바