🌎 Web

[JavaScript] 자바스크립트의 반복문(while문, for문)

반복문이란? 반복문(iteration statements)이란 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 실행문이다. 자바스크립트에서 사용할 수 있는 반복문의 형태는 다음과 같다. while 문 do / while 문 for 문 for / in 문 for / of 문 1. while 문 while (표현식) { 표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문; } 특정 조건을 만족할 때까지 계속해서 주어진 실행문을 반복 실행한다. 내부에 표현식을 변경하는 실행문을 빼먹으면 무한루프에 빠지므로 주의해야 한다. 주로 반복 횟수를 예상하기 어렵거나, 특정할 필요가 없을 때 사용한다. 2. do / while 문 do { 표현식의 결과가 참인 동안 반복적으로 실행하고자..

[JavaScript] 자바스크립트의 조건문(if문, switch문)

조건문이란? 조건문(conditional statement)이란 프로그램 내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문이다. 자바스크립트에서 사용할 수 있는 조건문의 형태는 다음과 같다. if 문 if / else 문 if / else if / else 문 switch 문 1. if 문 if (표현식) { 표현식의 결과가 참일 때 실행하고자 하는 실행문; } 표현식의 결과가 참(true)이면 주어진 실행문 실행, 거짓(false)이면 아무것도 실행하지 않는다. 실행문이 1줄 뿐이라면 중괄호를 생략할 수 있다. 2. if / else 문 if (표현식) { 표현식의 결과가 참일 때 실행하고자 하는 실행문; } else { 표현식의 결과가 거짓일 때 실행하고자 하는 실행문; }..

[JavaScript] 자바스크립트 숫자 메서드 총정리

Number.prototype 메서드 toString() - 숫자를 문자열로 반환 toFixed() - 지정된 소수 자릿수로 작성된 숫자를 문자열로 반환 toPrecision() - 지정된 길이로 작성된 숫자를 문자열로 반환 valueOf() - number 타입으로 반환 Number 메서드 Number() - 변수를 숫자로 반환 Number(true); // 1 Number(false); // 0 Number("10"); // 10 Number(" 10"); // 10 Number("10 "); // 10 Number(" 10 "); // 10 Number("10.33"); // 10.33 Number("10,33"); // NaN Number("10 33"); // NaN Number("John");..

[JavaScript] 자바스크립트 문자열 메서드 총정리

문자열 길이 length - 문자열의 길이 반환 let txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; let length = txt.length; // 26 문자열 부분 추출 문자열의 일부를 추출하고 새 문자열로 반환 slice(startIndex, endIndex) - 매개변수로 시작 위치와 끝 위치(포함 X)를 사용한다. 매개변수가 음수이면 문자열의 끝에서 시작한다. substring(startIndex, endIndex) - slice와 비슷하나, 매개변수로 음수는 사용할 수 없다. substr(startIndex, length) - slice와 비슷하나, 두 번째 매개변수는 추출할 부분의 길이를 지정한다. let str = "Apple, Banana, Kiwi"; let star..

[JavaScript] 자바스크립트의 이벤트(event)

이벤트란? 이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다. 웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다. 이벤트 객체는 전역 객체로써 모든 태그에 객체를 참조시킬 수 있다. 이벤트 리스너(event listener) 이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 한다. 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킨다. 이벤트 리스너 등록 작성된 이벤트 리스너는 먼저 해당 객체나 요소에 등록되어야만 호출될 수 있다. 객체나 요소에 이벤트 리스너를 등록하는 방법은 다음과 같다. 이벤트..

[JavaScript] 자바스크립트의 객체(Object)

객체란? 객체(Object)란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합이다. const 객체이름 = { 프로퍼티1이름 : 프로퍼티1의값, 프로퍼티2이름 : 프로퍼티2의값, ... }; 객체의 특징 객체의 지속성 확보를 위해 const 상수로 선언한다. 프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메서드(method)라고 한다. 프로퍼티 이름은 같은 객체 내에서 중복으로 사용할 수 없다. 프로퍼티 값의 데이터 타입은 제한이 없다. 객체의 프로퍼티, 메서드 참조 객체이름.프로퍼티이름 또는 객체이름["프로퍼티이름"] 객체이름.메소드이름() 메소드를 참조할 때 메서드 이름 뒤에 괄호(())를 붙이지 않으면, 메서드가 아닌 프로퍼티 그 자체를 참..

[JavaScript] 함수 선언문 vs 함수 표현식

자바스크립트의 함수 정의 자바스크립트의 함수를 정의하는 방식은 크게 3가지가 있다. 함수 선언문 함수 표현식 화살표 함수(arrow function) 이 중 함수 선언문과 함수 표현식에 대해 알아보자. 함수 선언문 일반적으로 function 키워드, 함수 이름, 괄호로 둘러싼 매개변수, 중괄호로 둘러싼 실행문을 통해 선언하는 함수를 의미한다. function 함수이름(매개변수1, 매개변수2,...) { 함수가 호출되었을 때 실행하고자 하는 실행문; } 위와 같은 방식으로 아래의 함수를 만들 수 있다. function sayHi() { alert( "Hello" ); } 함수 표현식 함수 선언문으로 정의했던 sayHi() 함수를 함수 표현식으로 생성해보자. const sayHi = function() { ..

[Bootstrap] navbar(내비게이션바) 오른쪽 정렬, 양쪽 정렬

부트스트랩은 사용법이 간단해서 참 좋은데 가끔 의도한 대로 움직이지 않는 경우가 있다. navbar(내비게이션바) 작업을 하면서 이런저런 시도 끝에 알게 된 다양한 정렬에 대해 공유해본다. 1. navbar 왼쪽 정렬(기본) LOGO Home About Resiter Login 부트스트랩에서 제공하는 기본적인 왼쪽 정렬 navbar이다. (반응형 toggle 포함) 2. navbar 오른쪽 정렬 LOGO Home About Resiter Login 태그를 감싸고 있는 태그에 justify-content-end 라는 class를 추가한다. 3. navbar 양쪽 정렬 LOGO Home About Resiter Login 왼쪽에 두고 싶은 메뉴와 오른쪽에 두고 싶은 메뉴를 각각 태그로 감싼다. 2개의 태그를..