연산자 (Operator) JS에서는 여러 종류의 다양한 연산자(operator)를 제공 종류 산술, 문자열, 증감, 비교, 대입, 삼항, 논리, 비트연산자 산술연산자 더하기 숫자는 서로의 값을 더해주고, 텍스트(글자)는 붙여준다. 숫자랑 텍스트를 더하기 연산하면 그냥 글자취급하여 붙여준다. let plus1 = "자료 "; let plus2 = "구조"; let plus3 = 3; console.log(plus1 + plus2); console.log(plus1 + plus3); 빼기, 곱하기, 나누기 연산자들은 숫자에서만 사용한다. % 연산자는 나머지를 연산하는 명령어이다. console.log(4 / 3); console.log(4 % 3); console.log(5 % 3); 증감연산자 ++, -..

Math JS에 있는 표준 내장 객체 중 하나 생성자가 따로 존재하지 않아 인스턴스를 생성하지 않고 객체 내의 모든 메서드나 프로퍼리를 바로 사용 가능 console.log(Math.random()); console.log(Math.PI); console.log(Math.abs(-4)); console.log(Math.max(100, 300, 20000, -7)); console.log(Math.min(100, 300, 20000, -7)); console.log(Math.pow(2, 10)); console.log(Math.round(3.14)); console.log(Math.round(3.54)); console.log(Math.round(10.14)); console.log(Math.sqrt(64..

메서드(method) 어떤 객체가 가지고 있는 동작을 뜻 Javascript에서는 일반적으로 객체 안에 프로퍼티로 정의된 함수를 메서드라고 부른다 함수처럼 일련의 동작을 실행한다는 점은 같지만, 엄연히 함수와 메서드는 다르다 종류 : 정말 많은 종류가 있지만, 본인이 자주 썼던(?) 메서드들 indexOf(), length, split(), replace(), toUpperCase(), toLowerCase(), find(), findIndex(), filter(), map(), forEach(), reverse(), sort(), push(), pop(), shift(), unshift() 등등 push() : 배열의 뒤에 매개변수로 전달된 변수를 추가 한다 let arr1 = [1, 2, "3", {..

자료형 데이터 타입이라고도 불리며 실수, 정수, boolean(참/거짓), 숫자 등 여러 종류의 데이터를 식별하는 분류. 변수의 종류 종류 string : 텍스트, 문자열 number : 숫자형 boolean : 참 / 거짓, bool(불) 값 object : 객체, 키와 값으로 이루어진 객체. 중괄호로 정의 array : 이름과 인덱스로 참조되는 정렬된 값의 집합, 같은 배열 내 요소들은 서로 다른 자료형일 수 있다 typeof : 변수의 자료형을 알려준다 string : 텍스트 문자열 표현방식 ( "", '', `` ) 한 줄로 표현할 텍스트는 "", '' 여러 줄로 표현하거나 변수와 텍스트를 같이 쓰고 싶다면 `` (템플릿 리터널)을 써야 한다 단, 한 줄 텍스트 표현 시에 \(역슬래쉬)를 사용하면..

Javascript(JS) 객체(Object) 기반의 스크립트 언어 HTML로 웹의 뼈대, 틀을 만들고, CSS로 디자인 설정을 하고, JS로 동적인 효과를 구현 가능 대게 웹 페이지를 만들고 위해 사용하는 프로그래밍 언어 서버 측 관련 프레임워크를 사용하면 서버 측 프로그래밍도 가능 현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있습니다. 변수 데이터를 담는 상자, 그릇, 공간 등 var var1 = 1; console.log(var1); var1 = 2; console.log(var1); var var1 = "var1"; console.log(var1); var var1; console.log(var1); let let1 = 3; let let2 = 2..

animation 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줄 수 있다 CSS에서 애니메이션 속성으로 동적인 효과를 줄 수 있다 애니메이션의 상태를 나타내는 키프레임들로 구성 @keyframes @keyframes name { 0% {...} n% {...} 100% {...} } → name: 애니메이션 이름 설정 0% : 시작할 때의 모양을 설정. from으로 사용해도 가능 n% : n% 일 때의 모양을 설정 100% : 끝날 때의 모양을 설정. to로 사용해도 가능 트랜지션 효과 보다 훨씬 더 규모가 크고 복잡하지만 다양한 효과를 적용해서 좀 더 정밀하고 원하는 CSS효과를 줄 수 있다 JS를 모르더라도 간단하게 애니메이션을 구상할 수 있다 JS를 이용한 애니메이션이 ..