JavaScript 34

13. [JavaScript] 파일 업로드 용량 체크하기

업로드 파일 용량 체크하기 * 원하는 기능 - 자바스크립트로 파일을 업로드 하기전에 용량 체크한다. - 2MB 이하의 파일만 허용한다. - 용량 제한에 걸리면 선택한 파일은 무시한다. 아래에서 파일을 직접 선택해 보세요. 2MB 이상인 파일일 경우 경고창이 뜹니다. HTML JavaScript function checkFile(el){ // files 로 해당 파일 정보 얻기. var file = el.files; // file[0].size 는 파일 용량 정보입니다. if(file[0].size > 1024 * 1024 * 2){ // 용량 초과시 경고후 해당 파일의 용량도 보여줌 alert('2MB 이하 파일만 등록할 수 있습니다.\n\n' + '현재파일 용량 : ' + (Math.round(file..

JavaScript 2021.08.10

12. [JavaScript] NULL 값 체크, 빈 값 체크

보통 빈 값을 체크할 때는 아래와 같은 코드를 많이 사용합니다. let value = ""; if(value === ""){ console.log("빈 값입니다."); }else{ console.log("빈 값이 아닙니다."); } 이렇게 하면 말 그대로 빈 값만 체크하고 null, undefined, NaN 등은 체크하지 않습니다. 그래서 빈값체크시에는 아래와 같이 적어주는 것이 좋습니다. let value = ""; if(!value){ console.log("빈 값입니다."); }else{ console.log("빈 값이 아닙니다."); } 위와 같이 적어줌으로써, "", null, undefined, 0, NaN 등 false로 반환되는 것을 모두 걸러낼 수 있습니다. 하지만 0이 특정한 값으로 ..

JavaScript 2021.08.04

11. [JavaScript] 숫자 3자리 단위마다 콤마(,) 표시

3자리 숫자마다 콤마 표시 3자리 숫자마다 콤마를 찍기 위해 찾아보다가 발견한 코드 function comma(num){ var len, point, str; num = num + ""; point = num.length % 3 ; len = num.length; str = num.substring(0, point); while (point < len) { if (str != "") str += ","; str += num.substring(point, point + 3); point += 3; } return str; } 위 함수는 숫자의 길이를 세자리로 나눈 뒤 while문으로 돌면서 콤마를 찍고 있는 함수이다. 좀 더 쉬운 방법이 없을까 검색하다가 stackoverflow에 올라온 함수를 발견했다...

JavaScript 2021.07.28

10. [JavaScript] <script>와 <script type="text/javascript">의 차이

자바스크립트 사용할 때 어떤게 표준일까? 1. 예전에는 javascript외의 스크립트언어들이 자주 사용되었다. 그래서 브라우저가 javascript를 인식하게 하기위해 적어주었다. 2. Text를 통해서 스크립트를 구현하겠다는 뜻. HTML5에서는 의 type 디폴트가 text/javascript로 지정이 되기 때문에 선언을 해줄 필요가 없으며, 동일한 문장이라고 봐도 무방하다. 유사하게 의 디폴트도 css로 지정이 되기 때문에 type="text/css" 를 지정해줄 필요가 없다. 결론 1. 웹 표준은 가 맞지만 2. HTML5에서는 디폴트로 javascript를 지정해주기 때문에 안적어도 된다 -> 하위 호환성을 위해서는 적어주는게 좋다.

JavaScript 2021.07.16

08. [JavaScript] 연산자

산술 연산자(arithmetic operator) 산술 연산자는 사칙연산을 다루는 가장 기본적이면서도 많이 사용하는 연산자이다. 산술 연산자는 모두 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽이다. 항이란 해당 연산의 실행이 가능하기 위해 필요한 값이나 변수를 의미한다. 따라서 이항 연산자란 해당 연산의 실행을 위해서 두 개의 값이나 변수가 필요한 연산자를 의미한다. 산술연산자 예시 설명 + x + y 왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 더함 - x - y 왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺌 * x * y 왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 곱함 / x / y 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눔 % x % y 왼..

JavaScript 2021.03.21

07. [JavaScript] 변수

변수의 선언과 초기화 변수(variable)란 데이터(data)를 저장할 수 있는 메모리 공간을 의미하며, 그 값이 변경될 수 있다. 자바스크립트에서는 var 키워드를 사용하여 변수를 선언한다. 자바스크립트에서는 선언되지 않은 변수를 사용하려고 하거나 접근하려고 하면 오류가 발생한다. 선언된 변수는 나중에 초기화할 수도 있고, 선언과 동시에 초기화할 수 있다. 1 2 3 var hello; // 변수의 선언 var world = "world"; // 변수의 선언과 동시에 초기화 hello = "hello"; // 변수의 초기화 cs 쉼표(,) 연산자를 이용하여 여러 번수를 동시에 선언하거나 초기화할 수 있다. 1 2 3 var year, month; // 여러 변수를 한 번에 선언 var day = 20..

JavaScript 2021.03.20

06. [JavaScript] 타입 변환

타입 변환(type conversion) 자바스크립트는 타입 검사가 매우 유연한 언어이다. 자바스크립트는 변수에 타입을 선언해주지 않아도 값을 대입할 때 자동으로 타입이 선언된다. 1 2 3 4 var value; // undefined value = "hello"; // string type value = 10; // number type var value; // 한 변수에 여러 번 값을 대입할 수 있지만 변수의 재선언은 할 수 없다 cs 묵시적 타입 변화(implicit type conversion) 자바스크립트는 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변환한다. 1 2 var val1 = "5" + "3"; // 문자열로 처리되서 53 var val2 = "5" *..

JavaScript 2021.03.20

05. [JavaScript] 타입

기본 타입 데이터 타입은 프로그램에서 다룰 수 있는 값의 종류를 의미한다. 자바스크립트의 기본타입은 원시 타입과 객체 타입으로 구분할 수 있다. 원시 타입(primitie type) 1. 숫자(number) 2. 문자열(string) 3. 불리언(boolean) 4. 심볼(symbol) : ECMAScript6부터 제공됨 5. undifined 객체 타입(object type) 6. 객체(object) 숫자(number) 자바스크립트는 다른 언어와는 달리 정수와 실수를 따로 구분하지 않고, 모든 수를 실수 하나로만 표현한다. 또한, 수가 매우 크거나 작을 경우 e 표기법을 사용할 수 있다. 1 2 3 4 var num1 = 10; // 소수점을 사용하지 않은 표현 var num2 = 10.00; // 소..

JavaScript 2021.03.19