콘텐츠기획자의 IT입문서

버튼을 클릭하면 input에 담긴 value가 바로 복사되는 버튼을 만들어 봤다. 우선 value가 가상의 공간에 담기고, 그것을 복사하게 되는 copyToClipboard 함수를 만든다. /* 클립보드로 복사 */ function copyToClipboard(val){ let text = document.createElement("textarea"); document.body.appendChild(text); text.value = val; text.select(); document.execCommand('copy'); document.body.removeChild(text); } 참고 한 것은 여기! https://manition.tistory.com/8 위의 함수를 활용해서 '복사하기' 버튼을 클릭..

현재 구축 중인 쇼핑몰은 회원등급에 따라 환급금이 달라지는데 이를 영수증으로 출력해서 서비스 이용자들에게 공유하기 위해 만들어 보았다. (매번 계산기 두들기고, 그걸 psd 열어서 숫자 수정하고.. 인간의 영역이 아니다) 추후 디자인은 조금 수정될 예정이지만 구조는 대략 이렇다.. simple is the best 1. 환급금 계산 input에 입력한 값을 기반으로 환급금이 자동 계산되도록 script를 짜보았다! function selectLevel(e){ const value = e.value; document.getElementById('level_result').innerText = value; let level = document.getElementById('level_result').inner..

자바스크립트에서의 연산 왼쪽에서 오른쪽으로 순차적으로 진행된다는 점을 명심하자!! 단항 연산자 Unary = 피연산자를 하나만 받는 연산자. (양수와 음수를 나타내는 +, -) let x = 1; x = -x; alert( x ); 이항 연산자 Binary = 두 개의 피연산자를 받는 연산자. let x = 1, y = 3; alert( y - x ); 삼항 연산자 연산자 종류 1) 덧셈 연산자 + : 대체로 숫자를 더한 결과값을 반환하지만, 이항 연산자 +의 피연산자로 문자열이 전달되면 문자열을 병합한다. : 두 개의 숫자 뒤에 문자열이 오는 경우, 숫자가 먼저 더해지고, 그 후 더해진 숫자와 문자열과의 병합이 일어난다. : 단항 연산자로 +를 사용할때, 피연산자가 숫자가 아니라면 숫자형으로의 변환을 ..

형 변환 Type Conversion 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환된다. Alert 창에서 전달받은 값은 문자열로 자동 변환됨. 수학 관련 연산자가 전달받은 값은 숫자로 변환함. 전달받은 값을 의도를 갖고 원하는 타입으로 명시적 변환해 주는 것도 가능하다. 1. 문자형으로 변환 무언가를 출력할 때 주로 발생하는 형 변환. Alert 메서드는 매개변수로 문자형을 받기 때문에, alert(value)에서 value는 문자형이어야 한다. 만약, 다른 형의 값을 전달받으면 이 값은 문자형으로 자동 변환된다! String(value) 함수를 호출해 전달받은 값을 문자열로 변환하는 것도 가능하다. 2. 숫자형으로 변환 숫자형으로의 변환은 수학과 관련된 함수와 표현식에서 자동으로 ..

브라우저는 사용자와 상호작용할 수 있는 세 가지 함수를 제공한다. 함수들은 모두 모달 창을 띄워준다는 공통점이 있다. 모달 창의 특징 - 모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단됨. - 사용자가 창을 닫기 전까진 나머지 페이지와 상호 작용이 불가능하다. - 모달 창의 위치는 브라우저가 결정하므로 개발자가 창의 모양을 수정할 수 없다. (브라우저마다 모달 창의 모양이 다름) 1. 경고창 Alert = 메시지를 보여주는 함수. (개인적으로 자바스크립트 공부하면서 제대로 작동하는지 체크하는 방법으로 많이 사용하는 듯ㅋㅋ) 2. 입력창 Prompt = 사용자에게 텍스트를 입력하는 필드를 제공. '확인' 버튼을 누르면 사양자가 입력한 문자열을 반환하고, '취소' 또는 Esc를 누르면 null을 반환..

자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있으므로 어떤 순간에 문자열일 수 있고 다른 순간엔 숫자가 될 수도 있다! // no error let message = "hello"; message = 123456; 따라서 자바스크립트는 동적 타입 언어이다. *동적 타입 언어 : 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어. 자바스크립트에는 10가지 기본 자료형이 있다. 자료형은 크게 원시 자료형과 참조 자료형으로 나뉜다. *원시 자료형 : 한 가지 값만 표현할 수 있는 자료형. *참조 자료형 : 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있는 자료형. 원시 자료형 1. 숫자 Number = 정수 & 부동소수점 숫자 +) 숫자형엔 일반적인 숫자 ..

변수 LET 변수란, 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소'이다. 따라서 변수명은 간결하고, 명확해야 하며, 변수가 담고있는 것이 무엇인지 잘 설명할 수 있어야 한다. 자바스크립트에서 let 키워드를 사용해 변수를 생성한다. (과거에는 'var'을 사용했다.) 변수명을 정하기 위한 규칙 userName 이나 shoppingCart처럼 사람이 읽을 수 있는 이름을 사용하세요. 무엇을 하고 있는지 명확히 알고 있지 않을 경우 외에는 줄임말이나 a, b, c와 같은 짧은 이름은 피하세요. 최대한 서술적이고 간결하게 명명해 주세요. data와 value는 나쁜 이름의 예시입니다. 이런 이름은 아무것도 설명해주지 않습니다. 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때에만 이런 이름을 사용..

jQuery 쓰는 것도 카페24 쓰니까 click 이벤트로 css 바꿔주는 정도만 쓰다보니 자바스크립트 배웠던 게 기억 속에서 희미해져서.... ^_ㅠ 복습 차원에서 다시 차근차근 공부해본다! 스크립트 HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주 간단할 때만 사용해야 한다. 스크립트가 길어지면 별개의 분리된 파일로 만들어 저장해야 한다. 그 이유는 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시에 저장하기 때문에 성능상의 이점이 있다고 한다! 예를 들어, 여러 페이지에서 동일한 스크립트를 사용하는 경우 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용하기 때문에 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라진다. 문 (St..