자바스크립트27 [Javascript] this 할당하기 자바스크립트에서 함수 호출의 방식에 따라서 this에 어떤 객체가 할당되는지 달라진다. 일단 기본적으로 this는 전역객체(Window)를 가리킨다. 특정한 명시적인 객체의 바인딩이나 객체안에 속해 정의된 매서드 등등이 아니고서는 전역객체를 가리킨다. 그렇다면 this에 특정한 객체가 할당되기 위해서는 어떠한 방식을 해야할까? 1. 객체 안의 매서드로 함수를 할당 const data = { name : 'Alice', getName : function() { console.log(this.name); // Alice } } data.getName(); 위의 코드 처럼 객체 data 안에 정의된 매서드 getName 함수에서 this는 data 객체를 가리킨다. 따라서 this.name으로 Alice라는 .. 2021. 5. 27. [Javascript] 브라우저 저장소 브라우저의 저장소는 크게 보면 Local Storage, Session Storage, Cookie로 나뉜다. 비교는 간단하게 표로...! Local Storage Session Storage Cookie 할당기준 도메인 도메인 도메인 용량 제한없음 제한 없음 4096바이트 저장 형태 key-value 형태 key-value 형태 key-value 형태 특징 탭이나 브라우저를 닫고 다시 열어도 데이터가 지워지지 않음. 새로고침을 해도 남아있음 탭을 닫으면 데이터가 지워짐. 새로고침을 했을 때는 남아 있음 서버에 매번 요청을 보낼 때 함께 전달됨. 만료시간을 설정할 수 있음. ** 할당기준이 도메인이라는 것은 저장소는 도메인 기준으로 별도로 분리 되어있다는 의미이다. 즉, xxx.com과 yyy.com은 .. 2021. 5. 27. [Canvas] text 랜덤으로 나오다가 하나씩 나타나도록 하기 아래는 요런 느낌으로! random text가 좀더 다양한 캐릭터가 들어가면 이쁠거같음! 이건 react로 canvas 와 같이 구현해봄 import React, { useRef, useState, useEffect } from 'react'; const randomText = '~!@#$%^&*()_+`-={}[];":,./?qwertyuiopasdfghjklzxcvbnm'; function Canvas1() { const canvasRef = useRef(); const [context, setContext] = useState(null); const text = '얘들아 안녕!'; const textArr = text.split(''); let textIndex = -1; let rafId = un.. 2020. 8. 10. [Canvas] Canvas로 비내리는 화면 만들기 1분코딩님 유투브 캔버스 라이브강좌 들으면서 이래저래 조작해서 만들어보았습니다! Interaction See the Pen wvGamZd by alice (@jyynkr92) on CodePen. 2020. 8. 10. [JavaScript공부 - 12] Logical operators(논리 연산자) 자바스크립트에는 세가지 논리 연산자가 있음 : || (OR 연산자), && (AND 연산자), ! (NOT 연산자) 논리적이라고 말하지만, 이 세 연산자는 boolean 타입 뿐만 아니라 어떠한 타입의 값에도 적용 가능함. 이 결과 또한 해당 타입이 될 수 있음. || (OR 연산자) OR 연산자는 두 개의 세로 선으로 나타냄 1result = a || b;cs 일반적인 프로그램에서 논리 OR 연산자는 boolean의 값을 조작하는 것을 의미했음. 만약 어떠한 값이 true면 true를 반환하고 false면 false를 반환함. 자바스크립트에서 논리 연산자는 약간 까다롭지만 강력한 연산자임! 처음에는 boolean 값으로 어떻게 이 연산자가 작동하는지 볼 필요가 있음! 1234alert( true || .. 2019. 2. 27. [JavaScript공부 - 11] 조건 연산자 : if, '?' 가끔 코드를 짤 때, 다른 조건 마다 다른 동작이 나타나게 수행하도록 하고 싶은 경우가 있음! 이러한 동작을 시켜주기 위해서, 코드에서는 if 구문과 3항연산자인 물음표처럼 생긴 ? 기호로 쓰이는 조건 연산자를 사용할 수 있음. "if" 구문 if 구문은 조건을 적용한 다음 그 조건의 결과가 true이면 if 구문 안의 코드를 실행 시킴. 12345let year = prompt('In whtch year was ECMAScript-2015 specification published?'); if (year == 2015) { alert('You are right!');}Colored by Color Scriptercs 위의 예시로 보면 prompt에서 가져온 값이 2015와 같으면 You are righ.. 2019. 2. 18. [JavaScript공부 - 10] Interaction(상호작용):alert, prompt. comfirm alert구조 : 1alert(message);cs alert구문은 메세지를 보여주며 사용자가 "OK/확인"을 누르기 전까지 스크립트의 실행을 잠시 멈춤. 1alert("Hello");cs이 메세지를 띄우는 작은 윈도우 창을 modal window라고 부름. "modal"이라는 단어의 뜻은 사이트의 방문자가 윈도우창을 조작하기 전까지 다른 버튼을 누르거나 다른 페이지와 어떠한 작용을 할 수 없다는 뜻임. 즉, 사용자가 OK라는 버튼을 누를 때 까지 다른 스크립트들은 멈춰 있음 prompt prompt 함수는 두 개의 인자를 받음. 1result = prompt(title[, default]);cs prompt 함수 또한 텍스트 메세지와 함께 모달 윈도우 창을 띄우는데 사용자를 위한 인풋 영역과 OK/CA.. 2019. 2. 11. [JavaScript공부 - 9] Comparisons(비교) 학창시절에 수학 교과에서 비교를 하는 문법을 많이 봤음. * 큼 / 작음 : a > b, a = b, a 1은 올바른 식이기 때문에 true를 반환하며 2 == 1은 2와 1이 같은 값이 아니기 때문에 옳지 않은 비교라 false를 반환함. 123alert ( 2 > 1); // truealert ( 2 == 1); // falsealert ( 2 != 1); // truecs 비교의 결과는 다른 값들과 마찬가지로 변수에 할당될 수 있음! 12let result = 5 > 4; // result = truealert(result); // truecs String(문자열)의 비교 한 문자열과 다른 문자열을 크기를 비교하는 기준은 자바스크립트에서는 사전 또는 사.. 2019. 2. 1. [JavaScript공부 - 8] Operators(연산자) 초등학교 때부터 수학을 배우면서 다양한 연산자를 접할 수 있었음. 연산자에는 더하기(+), 빼기(-), 곱하기(*) 등과 같은 것들이 있음. 이번 포스팅에서는 학교 수학시간에 다루지 않았던 연산자의 면에 집중해서 해볼 예정. 용어 : "unary(단항)", "binary(이항)", "operand(피연산자)" 일단 연산자에 들어가기 전에 용어에 대해 정의를 하고 넘어갈 예정. ◉ operand(피연산자) : 피연산자는 연산을 하는 대상을 의미함. 예를 들어 5 * 2 와 같은 연산을 할 때, 2개의 피연산자가 존재함. 이 연산에서 왼쪽 피연산자는 5가 될 것이고 오른쪽 피연산자는 2가 될 것임. 가끔 사람들은 피연산자 대신에 argument라고 부름 ◉ 연산이 unary(단항)이라는 의미는 피연산자가 하.. 2019. 1. 30. 이전 1 2 3 다음