운좋개

🟡 1. 객체 (Object) - 자바스크립트는 객체 기반의 스크립트 언어이며 원시 타입을 제외한 모든 값들은 객체입니다. (그만큼 자바스크립트에서 객체는 매우 중요❗) - 객체는 키(key)와 값(value)으로 구성된 프로퍼티(property)들의 묶음입니다. - 프로퍼티의 값은 모든 타입이 들어갈 수 있습니다. 자바스크립트에서는 함수는 일급 객체이므로 값으로 취급할 수 있고, 프로퍼티의 값으로도 사용할 수 있습니다. 이때 함수는 일반 함수와 구분하기 위해서 메소드라고 부릅니다. (객체 안에 있는 함수는 메소드) let person = { // 메소드 sayHello = function(){ console.log('Hello'); } } // 객체의 메소드 호출 person.sayHello(); //..

🟡 1. 타입 변환 - 자바스크립트 모든 값에는 타입이 있습니다. 개발을 하다 보면 데이터 타입이 자동으로 변환이 되거나, 개발자가 의도적으로 데이터 타입을 바꾸는 경우가 있습니다. 개발자가 의도적으로 바꾸는 것을 명시적 타입 변환(Explicitcoercion) 또는 타입 캐스팅(Type casting)이라고 합니다. 데이터 타입이 자동으로 변환되는 것을 암묵적 타입 변환(Implicit coercion) 또는 타입 강제 변환(Type coercion)이라고 합니다. // 명시적 타입 변환 (개발자가 변경하는 것) let x = 10; let str_x = x.toString(); // 숫자 타입을 문자 타입으로 변경(캐스팅) console.log(typeof(str_x)); // 'string' //..

🟡 1. 반복문 (Loop statement) - 반복문은 주어진 조건식이 참이면 코드 블록을 실행합니다. 이는 조건문이랑 같아 보이는데, 반복문은 조건식이 거짓이 될 때까지 같은 코드 블록을 반복 실행합니다. - 자바스크립트에서 반복문은 for문, while문, do... while문, for...in문, for..of문이 있습니다. (for...of문은 차후에 자세하게 설명하는 글을 올리도록 하겠습니다😅) 🟡 2. for문 - for문은 조건식이 거짓이 될 때까지 코드 블록을 반복 실행합니다. for(초기화식; 조건식; 증감식) { 조건식이 참인 경우 반복 실행될 코드 블럭 } // for문 예제 for(let i=0; i < 3; i++) { console.log(i); } // 0 // 1 // ..

🟡 1. 블록문(Block statemet/Compound statement) - 블록문은 0개 이상의 문들을 중괄호로 묶은 것으로 코드 블록 또는 블록이라고 부릅니다. 자바스크립트에서는 블록문을 하나의 단위로 취급합니다. 블록문은 다른 문들과는 다르게 끝에 세미 콜론(;)을 붙이지 않습니다. // 블록문 { let name = 'apple'; console.log(name); } // 블록문 겸 반복문 for(let i = 0; i < 10; i++){ console.log(i); } // 블록문 겸 함수 let func = function(a, b){ return a * b; } 🟡 2. 조건문(conditional statement) - 조건문은 문 앞에 어떠한 조건을 걸어 두고 그 조건에 부합한 ..

🟡 1. 연산자(Operator) - 연산이란 수나 식을 일정한 규칙에 따라 계산하는 것을 의미합니다. 연산자는 어떠한 연산을 하는 것인지 의미하는 기호입니다. 연산의 대상을 피연산자(Operand)라 합니다. - 연산자의 종류는 여러 가지가 있지만, 본 글에서는 (산술, 할당, 비교, 삼항 조건, 논리, 쉼표, 그룹, typeof) 8가지의 연산자를 설명하고자 합니다. 🟡 2. 산술 연산자 (Arithmetic Operator) - 산술 연산자는 피연산자를 대상으로 수학적 계산을 수행합니다. 산술 연산이 불가능할 경우에는 NaN(Not a Number)을 반환합니다. 🟣 2.1 이항 산술 연산자 - 이항 산술 연산자는 2개의 피연산자를 연산합니다. 이항 산술 연산자 설명 + 덧셈 - 뺄셈 * 곱셈 / ..

🟡 1. 객체 타입 (object type) - 원시 타입을 제외한 모든 데이터를 객체 타입이라고 합니다. // 객체 타입 _ 객체 let person = { name : 'bigone', age : 30, hobby : ['workout', 'coding', 'driving'], sayHello : function(){ console.log('Hi!'); } } // 객체 타입 _ 배열 let fruits = ['apple', 'banana', 'strawberry', 'melon']; // 객체 타입 _ 함수 let add = function(a, b){ return a + b; } // 객체 타입 _ 정규표현식 let reg = /[^0-9]/g; - 객체 타입을 객체 타입 또는 참조 타입이라고 합..

🟡 1. 데이터 타입 (Data Type) - 데이터 타입이랑 프로그래밍 언어에서 사용할 수 있는 데이터의 종류를 말합니다. 데이터 타입이 있는 이유는 데이터(변수)가 메모리에 저장이 될 때 메모리 공간을 얼마큼 확보를 해야 하는 지를 판단하기 위해서입니다. 그러하여 한정된 메모리 공간을 효율적으로 사용할 수 있게 됩니다. 쉽게 예시를 들면 택배 창고에 택배들이 들어오는데, 창고의 공간은 한정되어 있기 때문에 많은 택배를 넣기 위해서는 효율적으로 택배를 쌓아야 합니다. 그리고 나중에 찾기도 쉬워야 합니다. 그래서 랙이라는 아주 큰 서랍장을 만들어서 크기별, 종류별, 지역별 등으로 나눕니다. 저런 식으로 차곡차곡 쌓으면 많은 양의 택배를 보관할 수 있고, 찾기도 쉽게 되겠죠. 결국 데이터를 많이 잘 보관하..

🟡 HTMLCollection는 forEach, filter 등을 사용 불가. - JS로 HTML 요소를 불러오고 싶을 때 document.getElementsBy~~ 함수를 사용해서 가져올 것입니다. 이때 가져온 element들은 HTMLCollection객체 형태로 가져오는데, 배열에 담겨 오길래 당연히 map, filter, forEach가 되는 줄 알았으나 되지 않습니다. let checkboxList = document.getElementsByClassName('allDelete'); Array HTMLCollection 형태 filter 함수 forEach 함수 - 위 표에서 보시는 것처럼 HTMLCollection은 filter, forEach 등 Array에서 기본적으로 제공해주는 함수를 ..

🟡 1. 웹페이지 공간 분할 - 지금까지 HTML을 공부한 이유는 웹사이트를 만들기 위해서 공부를 했는데, 웹사이트를 잘 만들기 위해서는 초반 설계부터 잘해야 차후에 수정할 일이 많이 안 생깁니다. 그러기 위해서는 전체적인 큰 틀 즉 레이아웃을 잘 설계하고 화면 분할을 잘해야 됩니다. (건물을 짓기 전에 도면을 잘 만들어야 되는 거처럼) - 레이아웃을 구성하기 위해서는 공간을 분할을 하는데, 위 사진에 나온 예시가 보편적인 분할 종류입니다. 아래 사진은 실제 운영되고 있는 웹사이트 예시입니다. 예시 찾다가 포기... 예시 찾다가 포기... 🟡 2. 공간 분할 태그 - 공간을 분할하는 태그들로는 div, span, table 등이 있습니다. 과거 웹사이트에서는 주로 table로 공간 분할을 많이 했지만, ..

* 이번 글에서는 자바스크립트의 기본 문법들이 어떤 종류가 있고, 그 문법들은 어떠 것인지 간단하게만 설명하고 다음 글부터 문법 종류 한 개씩 짚어가보도록 하겠습니다. 🟡 1. 변수 (variable) - 수학을 배울 때 들었던 단어와 하는 일이 비슷합니다. 어떤 값을 담을 수 있는 그릇이라고 생각하시면 됩니다 :) 조금 더 어렵게 얘기를 해본다면 변수는 값(value)을 저장(할당)하고 저장된 값을 참조하기 위해 사용합니다. 그리고 정확히는 변수에는 값이 저장되어 있는 것이 아니고 값이 저장되어 있는 메모리 주소를 저장하고 있습니다. - 우리가 변수 'a'에 '닭강정'을 저장했다고 가정하면, 변수 'a'에는 '닭강정'의 메모리 주소인 '속초시'가 저장되게 됩니다. 그래서 우리가 변수 'a'를 호출하면 ..