JavaScript
1.[HTML, CSS, JavaScript] 기본 개념 정리
앞으로 새로 알게되는 부분은 조금씩 추가하자!정보의 대부분 출처: 생활코딩
2.[JavaScript] 기초문법(1)
ex. 숫자 표시 alert(3);ex. 문자 표시 alert("3");똑같이 숫자를 사용했다고 하더라도 따옴표의 존재가 해당 데이터가 숫자인지 문자인지 구분한다.문자는 문자가 아닌 "문자열"이라는 단어로 표현된다. (string)문자는 한 글자 한 글자가 하나의 데이
3.[Javascript 2] 기초문법(2)
연산자 문자열 붙이기 "+" 기호 사용 시, 문자열을 합칠 수 있다. ex. "안녕"+"하세요" = "안녕하세요"로 출력. "+"기호 사용시, 변수를 문자열에 포함할때 변수의 이름을 그대로 추가하면 된다. 템플
4.[JavaScript 3] html과의 연결성
Javascript를 통해 html에 기재되어있는 값을 불러와서 실행시키거나, 수정하거나, 혹은 단순히 읽을 수 있다. html 파일 안에 js 파일이 들어있어야 한다. 브라우저 환경에서 html과 javascript는 기본적으로 연결되어있기 때문이다. html
5.[JavaScript 4] CSS가 JS에서 동작하는 법
HTML은 웹사이트의 뼈대를, CSS는 디자인을, JS는 동적인 웹사이트를 구현하는 것에 사용되는 언어다. JS를 통해서도 디자인을 변경할 수 있지만, 권장하지 않는다. CSS는 디자인에 최적화된 언어고, JS는 동적인 웹사이트를 만드는데 최적화 되어있기 때문이다.
6.[JavaScript 5] 용어와 자료 유형
코드말고 프로그래밍 언어는 추가적으로 알아야 하는 상식과 배경지식이 많은 것 같다. 앞으로 JS에 관한 추가 지식들도 정리해둬야지. 알아두어야 할 기본 용어 표현식 (expression): 값을 만들어 내는 간단한 코드 ex. 273, 10+20+30*2, 'Rin
7.[JavaScript 6] 배열과 반복문
기초 문법에도 배열과 반복문에 대한 개념이 정리되어 있지만, 보다 자세한 정보를 추가하고자 한다. 숫자, 문자열, 불린 같은 자료는 하나의 값만 가질 수 있기 때문에, 다수의 자료를 저장하기 위해선 배열이 필요하다. 배열이 없었다면 변수 선언은 무한대로 했을
8.[JavaScript 7] switch 조건문과 짧은 조건문
조건문은 프로그램의 흐름을 변경할 때 사용한다.사용자의 행동 (ex. 특정 값을 기재)에 따라 프로그램의 output이 달라질 때 조건문을 사용하겠지...switch 조건문은 작성된 case를 평가하여 조건과 일치하는 case를 실행시키는 조건문이다. 조건이 맞지 않은
9.[JavaScript 8] 함수의 기본 형태
함수를 쓰면 좋은 이유:반복되는 코드를 한번만 정의하고 필요할때마다 호출 - 재사용성의 중점을 뒀다프로그램을 기능별로 나눠서 함수에 넣어두면 모듈화가 가능하다.함수별로 수정이 가능하기 때문에 유지보수가 쉽다.함수는 코드의 집합이기 때문에 필요할때마다 호출한다.함수 호출
10.[JavaScript 9] 함수 고급
함수는 값으로서 사용될 수 있다.변수에 함수가 정의될 수 도 있고, 객체에도 함수가 하나의 값으로 들어갈 수 있다.ex. const a = function() {} : 함수를 변수에 정의a = {b: function() {}} : 함수를 객체의 값으로 정의객체의 값으로
11.[JavaScript 10] 객체의 기본
객체(object)는 "실제로 존재하는 사물"을 의미한다.자바스크립트에서는 "이름(name)"과 "값(value)"로 구성된 "속성(property)"을 가진 데이터 타입이다.자바스크립트에서 여러 자료를 다룰 때 객체를 사용한다.배열도 객체의 일종이다. (typeof로
12.[JavaScript 11] 객체의 속성과 메소드
자바스크립트에서 사용하는 자료형은 크게 기본 자료형과 객체 자료형으로 구분할 수 있다. 하지만 자바스크립트는 기본 자료형이 객체 자료형이 될 수도 있다! 이를 활용하는 객체를 객체라고 한다. 1. 객체 자료형 속성과 메소드를 가질 수 있는 모든 것은 객체다. 배열과
13.[JavaScript 12] 객체와 배열 고급
추후 사용하게 될 리액트나 뷰 등의 프레임워크를 사용하려면, 객체의 속성에 대한 이해도가 더 높아져야 한다. 객체 내부에 어떤 속성이 있는지 확인해보고, 객체를 조작하는 법에 대한 간단한 개념부터 숙지하자. 1. 속성 존재 여부 확인 객체에 존재하지 않는 속성에 접근
14.[JavaScript 13] 실행 컨텍스트
실행 컨텍스트 (Execution Context)는 자바스크립트가 실행되고 연산되는 범위를 의미한다. 실행 가능한 코드들이 실행되기 위해 필요한 환경이자 컨테이너의 개념이라고 생각하면 된다. 출처: 유튜브 - 우아한 테코톡: 하루의 실행 컨텍스트 1. 실행
15.[JavaScript 14] 문서 객체 조작하기
HTML에 있는 태그(요소)를 JS에선 "문서객체"라고 부른다.html, heas, body, title, h1, div, span 등JS는 html의 요소들, 즉 문서객체들을 조작할 수 있다.문서 객체를 조합해서 만들어낸 전체적인 형태를 "문서 객체 모델" (DOM,
16.[JavaScript 15] 이벤트 활용
문서 객체 모델을 통해 JavaScript는 HTML과 연관되어 영향을 줄 수 있다.JavaScript는 HTML에서 일어나는 이벤트를 감지하고 변경할 수 있다.JavaScript의 기본 문법인 조건문, 반복문, 함수 등을 통해서 다양한 이벤트를 활용할 수 있다.다양한
17.[JavaScript 16] 예외 처리
자바스크립트는 코드를 작성했을 때 "코드가 실행조차 되지 않는 오류" 와 "코드 실행 중간에 발생하는 오류" 두가지가 있다.실행되지도 않는 오류 = syntax error실행 도중 발생하는 오류 = exception괄호의 짝이 맞지 않거나 열려있는 문자열이 제대로 닫
18.[JavaScript 17] 클래스의 기본 기능
클래스는 객체를 효율적이고 안전하게 만들기 위해서 만들어진 문법이다. JavaScript는 "객체 지향 (object oriented)" 이라는 패러다임을 기반으로 만들어진 프로그램 언어이다. 객체 지향 프로그래밍 언어는 클래스 (class)라는 문법으로 객체를 효
19.[JavaScript 18] 클래스의 고급 기능
클래스라는 문법은 객체를 더 안전하고 효율적으로 생성하기 위해 만들어진 문법이다. 1. 상속 "상속 (inheritance)" 은 클래스의 선언 코드를 중복해서 작성하지 않도록 함으로써 코드의 생산 효율을 올리는 문법을 의미한다. 기본 형태: `class 클
20.[JavaScript 19] 다시 알아보는 map, filter, find
항해에서 프로젝트를 진행하면서 map과 filter를 자주 사용했는데, 간간히 TypeError: x.map is not a function이라는 에러가 자주 떴었다. 굉장히 자주 본 에러라서 이제는 익숙한... .map()을 배열 (array)가 아닌 경우에 대입했기 때문이었다. 같은 에러를 자주 본 이유는 내가 아직 배열을 다루는게 많이 미숙하다고 생...