본문 바로가기

전체 글410

[자바스크립트] Arrays (배열)의 methods 배열 (Arrays) 같은 자료들을 담은 자료구조 중의 하나입니다. 선언 (Declaration) const arr1= new Array(1, 2, 3); const arr2 = [1, 2, 3]; const users = []; // empty array const numbers = [1, 2, 3]; // array of numbers const names = ["Sam", "Tom"]; // array of strings const values = [10, false, "John"]; // mixed 배열의 길이 (.length) [].length; // 0 const names = ["Sam", "Tom"]; names.length; // 2 배열에 추가하기 (.push) const names =.. 2022. 4. 22.
[자바스크립트] 형변환 Number(), parseInt(), parseFloat()의 차이 Number() 문자열을 인자로 받아 숫자형으로 반환합니다. let num = Number('123'); //123 숫자가 아닌 경우 NaN을 반환합니다. let num = Number('12삼'); //NaN parseInt() Number()와 동일하게 문자열 인자를 받아 숫자형을 반환합니다. 다른 점은 숫자로 시작하는 경우에는 숫자가 끝날 때까지만 형 변환을 하여 저장합니다. 시작이 숫자가 아니면 Number()와 마찬가지로 NaN을 저장합니다. let num1 = parseInt('1000원'); //num에 1000이 저장 let num2 = parseInt('가격 1000월'); //num에 NaN이 저장 구문 Number.parseInt(string) Number.parseInt(string.. 2022. 4. 18.
[자바스크립트] 숫자타입을 문자타입으로 변환, String 함수와 toString() String 함수와 toString 은 둘 다 숫자형을 문자형으로 변환해줍니다. 그렇다면 이 둘에는 어떤 차이가 있는 걸까? String 함수 String 함수는 주어진 인자를 문자열로 변환할 뿐만 아니라 new 키워드와 함께 새로운 문자열 객체를 생성할 수 있습니다. let num1 = 12; console.log(typeof num1); //number let str1 = String(num1); console.log(typeof str1); //string new 를 사용하여 string 만들어보았습니다. let newString1 = String(100); //"100" let newString2 = new String(100); //String {"100"} toString 함수 toString.. 2022. 4. 18.
[자바스크립트] 키보드 이벤트 (keyboard event) 종류 키보드 이벤트 (Keyboard Event) 사용자가 키를 누르거나 키를 놓을 때 발생하는 이벤트입니다. 키보트 이벤트의 종류 keydown 사용자가 키보드의 키를 눌렀을 때 발생합니다. keyup 사용자가 키보드의 키를 눌렀다가 떼었을 때 발생합니다. keypress 사용자가 키보드의 키를 눌렀을 때 발생합니다. Alt, Ctrl, Shift, Esc 등 몇 가지 키에서는 이 이벤트를 발생시키지 않습니다. 현재는 deprecated 되어 사용을 권장하지 않습니다. keydown, keyup, keypress 사용 예제 input에 keydown, keyup, keypress 이벤트를 등록해줌으로써 키보드의 키가 눌려 이벤트가 발생하면 그에 맞게 이벤트 이름을 출력합니다. 입력창에 하나의 키를 오래 누르.. 2022. 4. 15.
[자바스크립트] JavaScript 기초 다지기 - 1 sum sum function의 x+y값을 리턴합니다. function sum(x, y) { return x + y; } console.log(sum(1,3)); //4 multiply multiply function의 x*y값을 리턴합니다. function multiply(x,y) { return x*y; } console.log(multiply(2,3)); // 6 length getStringLength function은 length를 사용하여 총문자열의 길이를 리턴합니다. function getStringLength(str) { return str.length; } console.log("Hello, world"); //12 toLowerCase() 문자열에 toLowerCase()라는 메서드(함.. 2022. 4. 12.
[네트워크] URI, URL, URN의 차이점 차이점 URL, URN 은 URI에 포함되는 개념이며 URL은 자원의 위치, URN은 자원의 이름을 의미합니다. URI는 식별하고, URL은 위치를 가리킨다. URI (Uniform resource Identifier) 인터넷에 있는 자원을 나타내는 유일한 주소입니다. URI는 인터넷에서 요구되는 기본 조건으로서 인터넷 프로토콜에 항상 붙어 다닙니다. URI안에 하위 개념으로 URN, URI가 존재합니다. 예제) http://, ftp://, mailto:// URN (Uniformed Resource Name) 프로토콜 포함하지 않습니다. 해당 자원의 이름을 의미합니다. 독립적인 자원 지시자입니다. Page 이후 부분까지 포함합니다. 예제) urn:isbn:0-395-36341-1 URL (Unifor.. 2022. 4. 8.
[CSS] display display 속성 요소를 화면에 어떻게 드러나게 할지를 결정하는 속성이다. display 속성 display: none | block | inline | inline-block 알고 넘어가자! 요소 (즉 태그)는 inline 요소와 block 요소로 나뉜다. inline: 줄 속에 넣는 요소이며, , , 등 특정 문자열을 선택할 때 사용하는 태그가 그 예이다. 특징: 줄 바꿈이 되지 않는다. block: 좀 더 넓은 범위를 지정할 때 사용하는 같은 태그로 block 요소를 사용할 때는 가로 화면 100%를 차지하기 때문에 자동으로 앞뒤 줄 바꿈이 된다. 특징: 줄 바꿈이 있다. See the Pen Untitled by heerachoi (@heerachoi) on CodePen. display: no.. 2022. 3. 31.
[CSS] background 와 background-color의 차이점 결론 적으로 background와 background-color 모두 배경 색상을 지정할 수 있다. 다만 background-color은 background 의 속성 중 하나이다. background-color 는 색깔만 지정할 수 있는 반면, background 는 color 이외의 다른 background 옵션들까지 지정해줄 수있다. color 글씨 색깔 background 다양한 백그라운드 속성을 부여할 수 있다. background 속성 background-color: color | transparent | initial | inherit; 요소의 배경색을 설정한다. TIP! 요소의 배경은 padding 과 border 을 포함한 요소의 전체 크기이다. ( margin 은 포함하지 않는다.) ba.. 2022. 3. 27.
[자바스크립트] querySelector() 와 getElementById()의 차이점 getElementById() ID를 통해 element를 반환한다. 만약 document에 구체적인 ID의 element가 없다면 null을 반환한다. getElementById() 는 하나의 element만 반환할 때 사용하기 좋다. 이유는 HTML ID는 고유한 하나의 태그만 사용 가능하기 때문이다. ID를 두 개의 element에 사용이 불가능하다. querySelector() selector의 구체적인 그룹과 일치하는 document안 첫 번째 element를 반환한다. 일치하는 게 없다면 null을 반환한다. querySelector() 은 CSS를 있는 element를 반환할 수 있다. 그 뜻은 ID, class, 또는 모든 타입의 element를 반환해준다. querySelectorAll(.. 2022. 3. 22.
728x90

티스토리툴바