본문 바로가기

javascript

[JavaScript] input값 가져와서 사용하기 (input.value) 이벤트 리스너를 공부하는 중에 예전에 분명 input 값을 가져와서 사용하는 방법이 있었던 거 같은데 하면서 뒤적거리다가 드디어 찾아냈다. 다시 안까먹게 적어둬야지. 이벤트도 정리해둬야 하고... 왜 이렇게 할 일이 밀려있지 사용자가 입력을 완료한 input 값을 출력하기 결론부터 말하면 input.value를 사용하면 된다. 아래 예제를 통해 이해하자. 텍스트를 입력하면 제목 태그를 변경하고 input의 텍스트를 비우는 예제이다. + 텍스트를 입력하지 않았다면 아무 일이 일어나지 않도록 할 것 안녕하세요 클릭! 입력 칸에 응애를 치면 안녕하세요가 응애로 바뀌고 입력창은 빈 칸으로 바뀐다. 더보기
[JavaScript] 구조분해할당 구조분해할당... 이름만 들어도 귀찮고 진짜 많이 안쓸 거 같은데 javascript에서 가장 많이 쓰이는 문법 중 하나라고 한다. 아직 배울 게 정말 산더미처럼 많구나... 라고 느낀 부분이다. 화이팅해서 차근차근 학습하고 프로젝트에도 적용시켜보자. 구조분해할당(Destructuring Assignment) : 배열 또는 객체의 구조를 분해하여, 그 값을 개별 변수에 담는 표현식을 의미한다. const arr = [1, 2, 3, 4, 5]; 이런 배열이 하나 있다고 생각해보자. 배열의 값을 사용하는 방법은 arr[0]과 같이 인덱스에 접근하는 것이다. const one = arr[0]; const two = arr[1]; const three = arr[2]; 쓰다보니 매우 귀찮다. 이걸 간편하게 하.. 더보기
[JavaScript] switch문 범위 주는 방법 switch문에 범위를 주는 방법은 간단하다. switch (조건)에 true를 넣어주고 case에 범위를 설정해주면 된다. 아래 예제를 살펴보며 이해하도록 하자. let a = 90; switch (true) { case (a>90): console.log('A'); break; case (a>80): console.log('B'); break; case (a>70): console.log('C'); break; default: console.log('탈락입니다.'); } 실행 결과는 B가 나온다. 더보기
[Javascript] 연산자 산술연산자 1. 이항 산술연산자 + : 덧셈, 자바스크립트에서는 특이하게 숫자 + 문자열도 값이 나온다. - : 뺄셈 * : 곱셈 / : 나눗셈 % : 나머지. 주로 홀수인지 짝수인지 알아볼 때 사용 ** : 제곱. 예전에는 pow를 사용했다고 한다. 2. 증감연산자 반환 부수효과 a++ 값 그대로 1 증가 ++a 1 증가한 값 1 증가 a-- 값 그대로 1 감소 --a 1 감소한 값 1 감소 x += y x = x + y x -= y x = x - y x *= y x = x * y x /= y x = x / y x %= y x = x % y x **= y x = x ** y * a++ 등의 증감 연산자가 많이 이용되기는 하지만, 예상치 못한 오류를 방지하기 위해 사용을 지양하고 x += y의 방법을 쓴.. 더보기
[JavaScript] 동적타입 자바스크립트는 동적타입을 가진 언어이다. 따라서 특정 값이 할당된 변수에 그와 다른 자료형의 값을 넣는 것이 가능하다. 자유롭기는 하나, 그만큼 자료형 관련 오류에 취약하다는 단점이 있다. * 동적타입(Dynamic typed), 정적타입(Static typed) : 타입을 컴파일에서 확인하는 언어가 정적타입 언어, 런타임에 확인하는 언어를 동적타입 언어라고 한다. 정적타입 언어 : C, C++, C# 등이 있다. 동적타입 언어 : javascript, python 등 정적타입의 장점 1. 타입 에러로 인한 문제점을 초기에 발견할 수 있어 높은 안정성을 자랑한다. 2. 컴파일 시에 미리 타입을 결정해서 실행속도가 빨라진다. 정적타입의 단점 1. 코드 작성 시 변수형을 결정해주어야 하는 번거로움이 있다. .. 더보기
[JavaScript] 이스케이프 문자 이스케이프 문자는 자바스크립트 뿐만 아니라 다른 언어에서도 유용하게 사용하는 것이므로 알아두도록 하자. 주의해야 할 것은 \(백슬래시)를 사용해야 한다는 것. 특수문자 설명 \n 줄 바꿈 \\ 역슬래시 그대로 출력 \' , \" 따옴표 그대로 출력 \t 탭 \r 캐리지 리턴, 윈도우에서는 (\r\n) 조합으로 줄 바꿈 \b, \f, \v 백스페이스, 폼피드, 세로탭. 잘 사용하지 않음 \xXX 16진수 유니코드 XX로 표현한 유니코드 글자 \uXXXX UTF - 16 인코딩 규칙을 사용하는 16진수 코드 XXXX 로 표현한 유니코드 기호 \u{X...XXXXXX} (한 개에서 여섯 개 사이의 16진수 글자) UTF - 32로 표현한 유니코드 기호. 몇몇 특수한 글자는 두 개의 유니코드 기호를 사용해 인코.. 더보기
[JavaScript] 원시 자료형 원시자료형 불리언 (boolean) 1. true/false를 나타내는 자료형. 2. 참 또는 거짓. 상반된 둘 중 하나의 값을 담을 수 있다. 3. 직접 할당되기보다는 반환값으로 프로그램 곳곳에서 활용된다. 숫자 (number) 1. 자바스크립트에서는 정수와 실수 구분이 없다. (정수도 실수로 처리한다고 한다.) 2. 정수는 2^53 - 1까지 안정적으로 표현 가능하다. 3. 1/0 -> infinity, 타입은 'number'. 무한대를 표현할 수 있다. 4. -1/0 또한 가능하다. -infinity. 타입은 마찬가지로 'number'. 문자열 (string) 1. 큰 따옴표("), 작은 따옴표('), 백틱(`) 등으로 작성할 수 있다. 2. c와 같은 언어와 달리, 문자열을 하나만 저장할 수 있는.. 더보기
[JavaScript] 변수 ctrl + L : 콘솔 비우기 console.log() : 출력 console.info() : 정보. 사용하는 브라우저도 있고 그렇지 않은 브라우저도 있음 console.warn() : 경고. 문제가 될 수 있는 부분에서 사용 console.error() : 오류. 오류가 발생한 상황에 사용 ctrl + / : 주석처리 주석 (단축키 : ctrl + /) 사람들에게 보여줄 목적으로 작성. ex) 코드에 대한 설명, 추후 진행해야 할 사항 등 변수 : 데이터를 담는 용도로 사용 var, let, const 등으로 변수를 선언할 수 있다. 하지만 var는 호이스팅 등의 문제로 사용하지 않는 것을 권장. let과 const를 사용하자 변수의 특징 1. 이미 만들어진 변수를 다시 선언할 수는 없다. ex) l.. 더보기

티스토리툴바