소상공인 감자네

1. 요소의 내용 조작하기HTML 요소의 태그 사이에 들어가는 텍스트나 다른 HTML 태그를 조작하는 방법이다.두 가지 속성이 사용되며, 역할이 명확히 다르다.a. 텍스트만 변경 - textContenttextContent 는 요소 내부의 순수한 텍스트 내용만을 가져오거나 설정할 때 사용한다.보안상 가장 안전하며, 성능도 준수하다. - 용도 : 사용자에게 보여줄 단순한 텍스트나 숫자만 변경 시- 특징 : 새로운 HTML 태그가 삽입되면, 그것을 태그가 아닌 일반 텍스트로 처리/*HTML 예시기존 텍스트*/// 1. 변경할 태그 선택const messageDiv = document.querySelector('#message');// 2. 내용 설정 (순수한 텍스트만 삽입)messageDiv.textCont..

우리가 알고 있던 함수는 대부분 이름을 가지고 있다.예를 들어,function sum(a,b){ return a + b;} 이런식으로 이름을 가진 함수를 기명 함수(Named Function) 라고 한다. 하지만 자바스크립트를 하다보면 이름 없이 정의된 함수들을 작성하고 만나게 될 것이다.바로 익명 함수(Anonymous Function) 인데, 익명 함수는 자바스크립트의 많은 동적인 기능의 기반이 된다. 1. 익명 함수란?익명 함수는 말 그대로 이름이 없는 함수이다.자바스크립트에서 함수는 다른 언어와 달리 일급 객체로 취급이 된다.이 뜻은 함수를 일반적인 값처럼 다룰 수 있다는 의미인데, - 변수를 저장할 수 있다. (함수 표현식)- 다른 함수의 인수로 전달할 수 있다. (콜백 함수)- 다른 함수의 ..

화살표 함수(Arrow Function)는 2015년에 등장한 ES6(ECMAScript 2015)의 핵심기능으로,전통적인 함수보다 코드를 훨씬 짧고 읽기 쉽게 만들어 준다.게다가 자바스크립트에서 가장 까다로운 개념 중 하나인 this의 동작 방식까지 단순화 시켜주는 강력한 도구이다. 1. 화살표 함수(Arrow Function)?화살표 함수는 기존의 function 기워드 대신 => (화살표) 기호를 사용하여 함수를 정의하는 방식이다.주로 익명 함수(이름이 없는 함수)를 필요로 할 때 코드를 간결하게 만들기 위해 사용된다. a. 기본 문법전통적인 함수 선언 방식과 화살표 함수 방식을 비교해서 알아보면구분일반 함수(Function Expression)화살표 함수(Arrow Function)코드const ..

배열(Array)을 반복해서 원하는 값을 찾거나 수정하는 작업을 하다 보면,객체(Object)도 같은 기능을 사용하면 참 좋겠다는 생각이 들 때가 있다. 코딩을 하다보면 배열보다는 객체를 이용해 데이터를 사용하는 일이 훨씬 많기 때문이다.for...in 문은 이런 상황에 객체를 이용해 작업할 수 있게 해주는 도구이다. 객체의 키(Key) 를 확인하여 값(Value)을 찾아내는 작업을 할 수 있다. 1. for...in 의 기본 구조for...in 은 for...of 와 비슷해 보이지만 목적이 완전히 다르다. for...of 는 배열에 무엇이 있는지 알아내야 할 때 주로 사용하고 for...in 은 객체에 어떤 이름(키)의 속성(값)이 있는지 알고 싶을 때 사용한다. 주 사용처가 배열과 객체라는 차이점도 ..

while 문은 조건에 따라 유연하게 반복문을 처리하고for 문은 인덱스(i)를 통해 배열의 요소를 처리한다. 하지만 조금 간단하게 조건이나 인덱스가 아닌 순수 배열 안에 담겨있는 값을 간단하게 접근할 수 있게 도와주는 구문이 있다. 바로 for ... of 인데 이는 배열(Array), 문자열(String) 등 순서가 있는 데이터에서 값(Value)에 직접 접근하게 도와준다. 1. for ... of 의 기본 구조for ... of 반복문은 문법이 매우 간단하다.반복에 필요한 변수와 데이터 소스만 명시하면 된다.for ( let 요소 of 반복가능한데이터) { // 반복 가능한 데이터의 "값"이 요소 변수에 할당 // 이 "값"을 이용해 실행할 코드를 작성} a. 요소(값)let 요소 의 변수에 반..

자바스크립트 반복문에서 가장 많이 쓰이는 핵심 이 바로 for문.while 반복문은 특정 조건에 특화되어 많이 사용되고,for 문은 일반적으로 가장 많이 쓰이는 반복문이라고 불 수 있다. while문과 달리 for 문은 정확히 몇 번 반복할지 횟수를 정하는 차이가 있다. 1. for 문의 기본 구조for 문은 반복에 필요한 세 가지 핵심 정보를 괄호 () 안에 순서대로 명시한다.이 정보들은 각각 세미콜론 ; 으로 구분된다.for( 초기식; 조건식; 증감식; ){ // 조건식이 참(true)일 때 반복해서 실행할 코드 블록}for(let i=0; i a. 초기식반복문이 시작될 때 딱 한 번만 실행된다.주로 반복 횟수를 셀 카운터 변수를 선언하고 초기값을 할당한다.기본적으로 i (index)를 사용하며, ..

자바스크립트를 이용해 개발함에 있어 가장 중요한 것 중 하나인 객체(Object). 문자열, 숫자, 불리언 같은 원시타입들이 각각 하나의 값만 담을 수 있는 기본적인 데이터라면,객체는 이름, 나이, 주소 등 서로 연관된 여러개의 데이터를 한 묶음으로 관리해주는 데이터 묶음 상자라고 할 수 있다.객체는 관련있는 데이터들을 체계정으로 정리해줘 데이터를 구조화 할 수 있게 도와준다. 예를 들어 어느 한 사람의 정보를 저장해야 한다면,let name = "김철수";let age = 20;let adress = "서울시"; 객체를 사용하지 않는다면 각각의 정보를 따로 담아서 저장을 해야 할 것이다.하지만 객체를 이용한다면,let user = { name: "김철수", age: 20, adress: "서울시"..

자바스크립트에는 변수에 데이터를 담는게 가장 기초적인 일이다.그렇다면 과연 변수에는 어떤 데이터들이 담기게 되는 것일까?컴퓨터가 데이터의 종류를 구분해서 관리하는데 이를 데이터 타입이라고 한다. 자바스크립트 데이터 타입에는 크게 "원시타입"과 "객체타입"이 있다.우선 가장 기초적인 "원시타입"에 대해 알아보도록 하자. 원시타입(Primitive Type)1. 문자열(String)문자열은 글자들의 나열을 뜻한다. 사람의 이름이나 주소, 문장 등 글자로 이루어진 모든 데이터를 뜻한다.자바스크립트에서는 작은따옴표( ' ) 나 큰 따옴표( " )로 감싸서 사용한다.let name = "철수";let message = "안녕하세요.";let food = "라면"; 숫자를 작성할 때도 따옴표로 감싸게 되면 컴퓨터는..

자바스크립트 조건문을 알게 되면 조건문이 동작하는데 반드시 필요한 친구가 있다.바로 비교 연산자와 논리 연산자인데, 이 연산자들을 통해 조건문의 조건이 완성된다. 그럼 바로 비교 연산자와 논리 연산자에 대해 알아보도록 하자. 1. 비교 연산자비교 연산자는 두 값을 서로 비교햐여 참(true) 또는 거짓(false)이라는 결과를 반환하는 연산자이다.이 결과가 바로 조건문이 어느 곳으로 향할지 결정하는 기준이 된다. A. 동등 연산자 / 일치 연산자같음을 비교하는 두 가지 연산자이다.초보일땐 가장 많이 햇갈려 하기도 하는 연산자이다. 🔹 == (동등 연산자) - 값이 같은지 비교한다. 다만 데이터 타입은 비교하지 않는다.🔹 === (일치 연산자) - 값과 데이터 타입이 모두 같은지 엄격하게 비교한다.//..

자바스크립트(JavaScript)를 조금씩 알아보다 보면 필연적으로 만나게 되는게 ECMA Script 다.ES6, ES2018 등등 처음보는 용어들을 만나서 이게 무엇일까에 대한 궁금증이 생기게 된다. 조금 용어가 어렵게 느껴지겠지만 ECMA Script는 자바스크립트의 규칙과 표준을 정한 하나의 규칙이라고 생각하면 된다.ES는 ECMA Script를 축약해서 ES라고 불리우고 뒤의 숫자와 년도는 버전 혹은 해당 ECMA Script가 개정된 년도라고 보면 된다. 그럼 대체 ECMA는 무엇일까?ECMA Script 가 등장하게 된 이유는 예전 웹브라우저 전쟁이 시작이라고 할 수 있다.1990년대 넷스케이프에서 '자바스크립트'라는 언어를 만들자 마이크로소프트에서는 'JScript'라는 비슷한 언어를 만들..