제어문 (control flow statements) : 프로그램의 순차적인 흐름을 제어해야 할 때 사용하는 실행문 조건문 (conditional statements) : 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문 ▶ if 문 - 표현식의 결과가 참(true)이면 주어진 실행문을 실행하고, 거짓(false)이면 아무것도 실행하지 않는다 - 문법 if (표현식) { 표현식의 결과가 참일 때 실행하고자 하는 실행문; } - (예) var x = 10, y = 20; if (x == y) { document.write("x와 y는 같습니다."); } if (x y) // 실행될 실행문이 한 줄뿐이..

산술 연산자 (arithmetic operator) - 사칙 연산을 다루는 연산자 - 두개의 피연산자를 가지는 이항 연산자 - 피연산자들의 결합 방향 : 왼쪽에서 오른쪽 산술 연산자 설명 + 더하기 - 빼기 * 곱하기 / 나누기 % 나머지를 반환 var x = 10, y = 4; document.write(x + y + " "); // 14 document.write(x - y + " "); // 6 document.write(x * y + " "); // 40 document.write(x / y + " "); // 2.5 document.write(x % y); // 2 ▶ 항 : 연산이 실행 가능하기 위해 필요한 값이나 변수 연산자의 우선순위(operator precedence)와 결합 방향(ass..

Visual Studio Code에서는 Visual Studio과 같은 IDE와 달리 단순하게 빌드와 실행을 하기 어렵습니다 따라서 Code runner (코드 러너) 라는 확장 프로그램을 통해 편하게 실행할 수 있습니다! Code Runner가 지원하는 언어는 다음과 같습니다 C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R,..

Visual Studio Code에서는 파이참과 같은 IDE와 달리 단순하게 빌드와 실행을 하기 어렵습니다 따라서 Code runner (코드 러너) 라는 확장 프로그램을 통해 편하게 실행할 수 있습니다! Code Runner가 지원하는 언어는 다음과 같습니다 C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScri..

타입 변환 (type conversion) - 자바스크립트는 타입 검사가 매우 유연한 언어다 - 자바스크립트의 변수는 타입이 정해져 있지 않고, 같은 변수에 다른 타입의 값을 다시 대입할 수 있다 > 묵시적 타입 변환 (implicit type conversion) - 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변환하여 사용한다 10 + "문자열"; // 문자열 연결을 위해 숫자 10이 문자열로 변환됨. "3" * "5"; // 곱셈 연산을 위해 두 문자열이 모두 숫자로 변환됨. 1 - "문자열"; // NaN - 세 번째 예제에서 문자열은 의미에 맞게 숫자로 자동 타입 변환이 불가능하므로, NaN 값을 반환한다 ▶ NaN (Not a Number) 정의되지 않은 값이나 표..

기본 타입 > 타입 (data type) : 프로그램에서 다룰 수 있는 값의 종류 - 자바스크립트에서 미리 정의하여 제공하는 타입들을 기본 타입이라고 한다 - 기본 타입은 원시 타입(숫자, 문자열, 불리언, 심볼, undefined)과 객체 타입으로 나눌 수 있다 > 숫자 타입 (number type) - 자바스크립트는 다른 언어와 달리 정수와 실수를 구분하지 않고, 모든 수를 실수로만 표현한다 - 매우 큰 수나 작은 수를 표기할 때는 e 표기법을 사용할 수 있다 var firstNum = 10; // 소수점을 사용하지 않은 표현 var secondNum = 10.00; // 소수점을 사용한 표현 var thirdNum = 10e6; // 10000000 var fourthNum = 10e-6; // 0..

자바스크립트 (JavaScript) > 자바스크립트 : 객체 (object) 기반의 스크립트 언어 - HTML은 웹의 내용, CSS은 웹을 디자인, JS로는 웹의 동작을 구현한다 - 주로 웹 브라우저에서 사용되지만, Node.js 같은 프레임 워크를 사용하면 서버 프로그래밍에서도 사용할 수 있다 - 컴퓨터, 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있다 > 자바스크립트의 역사 - 1995년 Netscape의 Brendan Eich에 의해 만들어졌다 - Mocha, LiveScript의 이름을 거쳐 JavaScript라는 이름으로 변경됨 > 자바스크립트의 특징 - 객체 기반의 스트립트 언어 - 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다 - 객체 지향형 ..

CSS3 버튼 (button) > CSS3 버튼 - 다양한 모양의 버튼을 만들 수 있다 - 태그 뿐만 아니라 태그와 태크로도 만들 수 있다 button 태그 a 태그 - (예) 마우스를 올리면 배경색이 변하는 버튼 - (예) 그림자 효과 설정 버튼 - (예) 버튼을 사용하지 못하게 설정 - 사용 금지된 버튼은 반투명하게 보인다 - (예) float 속성을 이용하여 만든 버튼 > 다양한 형태의 버튼 예제 - 애니메이션 효과를 이용하여 버튼에 다양한 효과를 줄 수 있다 - (예) 마우스를 올리면 버튼의 표시 내용이 바뀌는 예제 - (예) 버튼을 눌면 버튼 위로 다른 색상이 물결처럼 퍼지는 예제 - :active와 :after 선택자를 이용하여 transition 효과를 설정하여 구현 - (예) 진짜 버튼을 ..

변형 (Transform) - transform 속성을 사용하여 HTML 요소의 모양, 크기, 위치 등을 바꿀 수 있다 - 제공하는 동작 : 요소를 움직이거나, 회전시키거나, 크기를 변경하거나, 기울이기 > CSS 좌표 체계 - CSS 좌표 체계에서 기준점은 브라우저의 왼쪽 상단 > 2D 변형 (transform) - CSS3 2D transform 속성 속성 설명 transform 요소에 2D 또는 3D transform을 적용함 transform-origin 요소에 transform을 적용하는 변환 중심을 설정 - CSS3 2D transform 메소드 메소드 설명 matrix(n,n,n,n,n,n) 모든 2D transform 메소드를 한 번에 설정 translate(x,y) 해당 요소를 주어진 x..

CSS3 그림자 효과 > text-shadow 속성 text-shadow: 그림자의x축값 그림자의y축값 blur값 색상값; - 그림자가 시작할 x축과 y축과 상대 위치를 명시하고, blur값으로 그림자의 흐린 정도를 명시 - (예) 다양한 그림자 효과 > box-shadow 속성 - 해당 HTML 요소에 그림자 효과 적용 box-shadow: 그림자의x축값 그림자의y축값 blur값 색상값; CSS3 배경 - 배경의 크기뿐 아니라 위치까지 설정 가능 - 하나의 HTML 요소에 여러 개의 배경 이미지 적용 가능 - CSS2의 background 속성 : background-color, background-image, background-repeat, background-position, background-..